Fwd: Web Component

64 views
Skip to first unread message

kanchana weerasinghe

unread,
Mar 5, 2015, 8:30:08 PM3/5/15
to polym...@googlegroups.com
Dear All
Please give you hand me to come out this issue.
---------- Forwarded message ----------
From: kanchana weerasinghe <weeras...@gmail.com>
Date: Fri, Mar 6, 2015 at 9:24 AM
Subject: Web Component
To: sup...@jqwidgets.com


Dear Peter
I am Kanchana .I have downloaded you amazing product and trying to integrate with it Polymer Js as we need to develop some dashboard widgets .If it is succeeded we are hoping to buy your product and integrate with our ERP Solution.Please give you hand me to come out this issue.

Inline image 1
 I am getting undefined error as above 

This is my code snippet   

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/core-component-page/core-component-page.html">
    <title id='Description'>jqxChart Pie Series Example</title>
    
</head>
<body class='default'>
    <polymer-element name="x-foo">
        <script src="Scripts/jquery-2.1.3.min.js"></script>

        <link rel="stylesheet" href="JQwidgest/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="JQwidgest/jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="JQwidgest/jqwidgets/jqxdraw.js"></script>
        <script type="text/javascript" src="JQwidgest/jqwidgets/jqxchart.core.js"></script>
        <script type="text/javascript" src="JQwidgest/jqwidgets/jqxdata.js"></script>
        <script>
            (function () {
                var source =
            {
                datatype: "csv",
                datafields: [
                    { name: 'Browser' },
                    { name: 'Share' }
                ],
                url: 'JQwidgest/demos/sampledata/desktop_browsers_share_dec2011.txt'
            };

                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

                // prepare jqxChart settings
                var settings = {
                    title: "Desktop browsers share",
                    description: "(source: wikipedia.org)",
                    enableAnimations: true,
                    showLegend: false,
                    showBorderLine: true,
                    legendPosition: { left: 520, top: 140, width: 100, height: 100 },
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    colorScheme: 'scheme02',
                    seriesGroups:
                        [
                            {
                                type: 'pie',
                                showLabels: true,
                                series:
                                    [
                                        {
                                            dataField: 'Share',
                                            displayText: 'Browser',
                                            labelRadius: 120,
                                            initialAngle: 15,
                                            radius: 170,
                                            centerOffset: 0,
                                            formatSettings: { sufix: '%', decimalPlaces: 1 }
                                        }
                                    ]
                            }
                        ]
                };

                // Run for every instance of the element that's created.
                Polymer({
                    ready: function () {
                        this.$.chartContainer.jqxChart(settings);
                    }
                });
            })();

        
        </script>
        
        <template>
            <div id='chartContainer' style="width: 850px; height: 500px;">
            </div>
        </template>
    </polymer-element>
    <table>
        <tr>
            <td>
                <x-foo></x-foo>
            </td>
        </tr>
    </table>

</body>
</html>



Best Regards 
Kanchana Weerasinghe 










Daniel Llewellyn

unread,
Mar 5, 2015, 9:22:01 PM3/5/15
to polym...@googlegroups.com
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1



On 06/03/2015 01:30, kanchana weerasinghe wrote:

> this.$.chartContainer.jqxChart(settings);

this looks like a function call to a jQuery plugin which will require
that the chartContainer be sugared by jQuery before the function will
exist. Therefore, untested, but you might try:

jQuery(this.$.chartContainer).jqxChart(settings);

Caveat: I know very little of Polymer's internals, and none of jqxChart.

- --
Daniel Llewellyn, Bowl Hat
PGP/GnuPG Key ID: 0x0349ED21
4C9C BFAD 0069 D679 9660 BCD5 40C2 D958 0349 ED21
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v2

iQIcBAEBAgAGBQJU+Q88AAoJEEDC2VgDSe0hjOYP/0XOZBT2N9qrNtM9gdquNl2k
rE4uQM/3HHqebK7jXlsHgIKpdqWgc5NTMhxKJPVlAl3AudJfbPj1fjUGXDOGgyrf
G4/Z5SnIAe24X/p//9Bs3sIc8a9tRJDRDVKmlEF8KIVE1lkHx6/ZkVaNRcGvBqRx
PP+21/owA9dWmBSmXQJhs0xSkey57OvLqxlHkz+8As4KTjmxCR+1yZ8j5rcIpBvy
1ETs8tOkJ33XEUTNvX/VQ12YV1Dpr93cOVYpZdW8MiMgL/tSelqQbe1CQbu7CqCy
WKt/3AfM9uCzvMS2V8sRAFQYeGVQLXopYC29auhhR3wQ9NMieuxRZ0kzFdcJuqbL
dWBAS6abUvhl9F74tGRwy06rWGOUXfeSNti9OZDmQ9VK+4XlL7HWUO2O95vPx9kn
/RxR9VGtNKL8h1/0ehC0bml1XGxpHeqUuQxaN1LiGeF+4aLEoa2SiUUmHMZxEWUa
fg/8Oyi9HswFtzguUq++qluTqlFiuR4XUgClNNQaIle851I/8MgO+444Q3tuNLMU
p4tBfM6jTjDp7S5RlmDEdu4gnTc8IGPyZc8LdW2kEtPiigAJcwgX+xlFi3oDjLvX
jNfnDNKRjsaqrI52BmyLpiXFieQDaDj14TXt0iBfCFN1gjcQH8CBmMe6NkN55bge
qwFnqqP0ViIqwSQMkH3u
=pe3w
-----END PGP SIGNATURE-----
daniel.vcf
Reply all
Reply to author
Forward
0 new messages