Add dynamic array to ECharts Pie Chart series data

Question

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:

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]};

Answer 1

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]};

Answer 2

Hi I hope this will help you:

try building the data and data series first as:

try building the data for legend and data series first as:

var groupChartData=[];
var groupEmployeeDataSeries=[];

// build from dynamic data (json or array) 
<for data: datalist>
      groupChartData.push(data.name);
      groupEmployeeDataSeries.push({value:data.value,name:data.name+"("+ data.value+")"});
</for>
echartPie.setOption({
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
       legend: {
        x: 'center',
        y: 'bottom',
        data: groupChartData
      }, 
      toolbox: {
        show: true,
        feature: {
          magicType: {
            show: true,
            type: ['pie', 'funnel'],
            option: {
              funnel: {
                x: '25%',
                width: '50%',
                funnelAlign: 'left',
                max: 1548
              }
            }
          },
          saveAsImage: {
            show: true,
            title: "Save Distribution"
          }
        }
      },
      calculable: true,
      series: [{
        name: 'Employee Distribution ('+type+' Wise)',
        type: 'pie',
        radius: '55%',
        center: ['50%', '48%'],
        data:groupEmployeeDataSeries
      }]
    });

It is working for me.

Answer 3

Try replacing

data: [arr]

with

data: arr

Since arr is itself an array, arr = [{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}].

That means that your data property is currently set to read [[{value:0, name:'Safety'},{value:0, name:'Environmental'},{value:0, name:'Finance'},{value:0, name:'Health'},{value:1, name:'Quality'}]], or an array with one value, which is arr.