Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add dynamic array to ECharts Pie Chart series data

I have a dynamic array arr of objects that produces the following result:

{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}

I want to use it in the following JavaScript:

                        series: [
                        {
                            name: 'Pie Chart',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: [arr]
                            //data: [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}]
                        }
                    ]

However, when I use the data: [arr] no chart is shown. But if I paste the raw array output it works.

Any way to resolve this?

Edit: debugger results below:

["{value:0, name:'Safety'}", "{value:0, name:'Environmental'}", "{value:0, name:'Finance'}", 2 more...]

When I alert(arr) it is shown without the double quotes.

Edit 2. Full code below

<script type="text/javascript">

            window.onload = function () {
                $.ajax({
                    dataType: "json",
                    url: "/Home/GetDataPie",
                    type: "POST",
                    data: JSON,
                    success: function (data) {
                        PieChart(data);

                    },
                    error: function () {
                        alert("err!");
                    }
                });

            }

            function PieChart(data) {

                var arr = [];

                var arrayLength = data.value.length;
                for (var i = 0; i < arrayLength; i++) {
                    var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";
                    arr.push(item);
                }
                //shows correct array list
                //alert(arr);

                var myChart = echarts.init(document.getElementById('main'));

                option = {
                    title: {
                        text: 'My Chart',
                        subtext: '',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'left',
                        data: data.name
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: true },
                            magicType: {
                                show: true,
                                type: ['pie'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'left',
                                        max: 1548
                                    }
                                }
                            },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: false,
                    series: [
                        {
                            name: 'Pie Chart',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: arr

                        }
                    ]
                };


                myChart.setOption(option);
            }


        </script>

This is the result:

enter image description here

Thanks.

Solved

Correct answer given by user @AshishMalhotra in comments below

Replace

var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";

with

var item = {value: data.value[i] ,name:data.name[i]};
like image 360
moe Avatar asked Aug 30 '16 14:08

moe


1 Answers

Correct answer given by user @AshishMalhotra in comments

Replace

var item = "{value:" + parseInt(data.value[i]) + ",name:'" + data.name[i] + "'}";

with

var item = {value: data.value[i] ,name:data.name[i]};
like image 79
moe Avatar answered Nov 09 '22 12:11

moe