using Highcharts library with Polymer

[satyasrik...@gmail.com]

Hello,

I need to create a reusable element for a pie-chart. After trying I noticed that the charts are deformed. 

This is the polymer element I am using.

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="chart-pie">

    <template>

        <div id="container" style="min-width: 100%; height: 360px;"></div>

    </template>

    <script>

        Polymer("chart-pie", {

            url: "",

            datum: [

                            ['Low', 45.0],

                            ['Medium', 26.8],

                            {

                                name: 'High',

                                y: 12.8,

                                sliced: true,

                                selected: true

                            }

            ],

            ready: function () {

                var options = {

                    chart: {

                        plotBackgroundColor: null,

                        plotBorderWidth: null,

                        plotShadow: false,

                        renderTo: this.$.container

                    },

                    title: {

                        text: 'Incident Severity'

                    },

                    tooltip: {

                        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

                    },

                    plotOptions: {

                        pie: {

                            allowPointSelect: true,

                            cursor: 'pointer',

                            dataLabels: {

                                enabled: true,

                                color: '#000000',

                                connectorColor: '#000000',

                                format: '<b>{point.name}</b>: {point.percentage:.1f} %'

                            }

                        }

                    },

                    series: [{

                        type: 'pie',

                        name: 'Severity',

                        data: this.datum

                    }]

                };

                //$("container").highcharts(options);

                //this.$.container.highcharts(options);

                var chart = new Highcharts.Chart(options);

            }

        });

    </script>

</polymer-element>

Any help would be appreciated.

Kind regards,

Satya.

[satyasrik...@gmail.com]

Update Please check the jsbin

http://jsbin.com/ekIlAlAK/8/edit

[Daniel Freedman]

Taking a look at this now. Seems to be related to the ShadowDOM Polyfill, as native ShadowDOM renders the chart correctly.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Daniel Freedman]

I've studied this for a bit now, and I have a hunch that the problem is related to some incorrect sizing, either due to a stale SD polyfill wrapper property, or jquery doing some funky math based on DOM properties that the SD Polyfill doesn't wrap "correctly".

Either way, I waded into the depths of the Highchart library, but couldn't find the point where the measurements from native ShadowDOM and polyfill differ. There's a lot of code in there.

@arv: I'm guessing there's probably a better way to try and instrument this, but I'm fresh outta steam. Any ideas?

[Erik Arvidsson]

I've been looking at this for some time now.

I found a case where we are calling `wrapper.getBBox()` but `wrapper.getBBox` is not wrapped so it tries to invoke the native method on the wrapper which fails and the user code returns a bounding box of {0,0} which seems to explain some of the incorrect sizings.

--
erik

[Erik Arvidsson]

Look for `try { a = c.getBBox`

--
erik

[Daniel Freedman]

This seems to work as expected with https://github.com/Polymer/ShadowDOM/pull/343.

The next stable release (0.1.3) should have this fixed.

[satyasrik...@gmail.com]

Thanks Guys, 

Will wait for the new build.

[kunalc...@gmail.com]

Thank you, its work for other highchart..., But for bubble high chart its not working......please help me!!!!

On Friday, 10 January 2014 14:06:34 UTC+5:30, satyasrik...@gmail.com wrote:

[avdar...@gmail.com]

You can use highcharts-chart Polymer Component to plot charts with just one line.

This would be your final output

<highcharts-chart type="pie" data="[[pieData]]" title="My Pie Chart"></highcharts-chart>

There's a demo here and here.


Polymer Component to plot charts with just one line.

[maha.be...@telecomnancy.net]

Hi, 

I've been trying to figure out how to use highchart-chart to come up with a chart similar to this 

but Ican't figure it out please lend me some help, here's what I've tried

<highcharts-chart id="Chart" x-Axis='["Jan", "Feb", "Mar"]' type="spline" title="Monthly Average Temperature" subtitle="Source: WorldClimate.com" x-label="Months"  y-label="Average"

        y-Axis='{name= "Tokyo", series= [7.0, 6.9, 9.5]},

        {name= "New York", series= [-0.2, 0.8, 5.7},

        {name= "Berlin", series= [-0.9, 0.6, 3.5]},

        {name= "London", series= [3.9, 4.2, 5.7}'></highcharts-chart>

best regards,

BENJEBARA Maha

 

[avdar...@gmail.com]

Your JSON seems to be completely invalid, you would be able to see that error in your console. Additionally, it's x-axis (not x-Axis) since all props are actually case sensitive. According to the highcharts api, you need to have x-axis: {categories: ["Jan","Feb","Mar"]}. Also the data should NEVER go in the y-axis property, rather it should be in the data key. All in all, your new HTML looks like this:

<highcharts-chart id="Chart" x-Axis='{"categories": ["Jan", "Feb", "Mar"]}' type="spline" title="Monthly Average Temperature" subtitle="Source: WorldClimate.com" x-label="Months"  y-label="Average"

        data='[{"name": "Tokyo", "data": [7.0, 6.9, 9.5]},

        {"name": "New York", "data": [-0.2, 0.8, 5.7]},

        {"name": "Berlin", "data": [-0.9, 0.6, 3.5]},

        {"name": "London", "data": [3.9, 4.2, 5.7]}]'></highcharts-chart>

PS. Please post any concerns in the issues tab in the Github Repo/Stack Overflow, as it may help fellow developers with similar issues. Thanks

Sincerely,

AP [highcharts-chart author]