Highcharts: issue to load multiple series

Question

Let's say I have this JSON, encoded from array from MySQL:

{"0":{"serie":["2015-07-13","2015-07-20","2015-07-27","2015-08-03","2015-08-10","2015-08-17","2015-08-24","2015-08-31","2015-09-07","2015-09-14","2015-09-21","2015-09-28","2015-10-05","2015-10-12","2015-10-19"]},"data":[{"name":"SHOP NUM 1","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"},{"name":"SHOP NUM 2","data":"[22377.00,48922.00,24280.00,23007.00,0,17585.00,20860.00,21495.00,17550.00,18320.00,18320.00,32970.00,40265.00,36220.00,0,41755.00,14540.00]"},{"name":"SHOP NUM 3","data":"[0,65.00,0,176.00,0,950.00,170.00,270.00,110.00,20.00,40.00,70.00,50.00,30.00,10.00]"},{"name":"SHOP NUM 4","data":"[2657.00,2489.00,2850.00,4162.00,3033.00,984.00,738.00,1263.00,578.00,941.00,934.00,1205.00,689.00,1075.00,612.00]"},{"name":"SHOP NUM 5","data":"[1422.00,480.00,0,1472.00,910.00,740.00,380.00,640.00,340.00,1490.00,710.00,810.00,3152.00,4230.00,1380.00]"},{"name":"SHOP NUM 6","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"},{"name":"SHOP NUM 7","data":"[0,3141.00,2807.00,1692.00,3300.00,0,860.00,625.00,0,250.00,0,1450.00,950.00,260.00,2545.00,1520.00,700.00,0]"},{"name":"SHOP NUM 8","data":"[200.00,2116.00,4896.00,6240.00,1236.00,260.00,0,1856.00,604.00,68.00,752.00,3300.00,1816.00,1560.00,30.00]"},{"name":"SHOP NUM 9","data":"[0,0,0,0,0,0,0,300.00,0,700.00,0,0,0,0,0]"},{"name":"SHOP NUM 10","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"},{"name":"SHOP NUM 11","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"},{"name":"SHOP NUM 12","data":"[0,0,0,0,0,660.00,860.00,970.00,960.00,990.00,1040.00,1440.00,1120.00,1260.00,550.00]"},{"name":"SHOP NUM 13","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"},{"name":"SHOP NUM 14","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,100.00,0]"},{"name":"SHOP NUM 15","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"},{"name":"SHOP NUM 16","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"},{"name":"SHOP NUM 17","data":"[0,0,0,0,0,0,0,0,0,4200.00,2340.00,1560.00,5340.00,420.00,720.00]"},{"name":"SHOP NUM 18","data":"[0,0,0,0,0,0,0,0,0,0,0,2660.00,4300.00,2420.00,1260.00]"},{"name":"SHOP NUM 19","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,840.00]"},{"name":"SHOP NUM 20","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,1675.00,1470.00]"},{"name":"SHOP NUM 21","data":"[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}]}

This is the Jquery/Jscript that I use to generate the chart:

$.getJSON(chart_url, function (data) {

         categories = data[0]['serie'];
         console.log(categories);
         //console.log(data['data'].length);
         var series = [];   

         for (i=0;i<data['data'].length;i++) {

            series[i] = data['data'][i];

         }

         chart = new Highcharts.Chart({

                chart: {
                    renderTo: 'chart-ccn',
                    type: 'line'
                },
                title: {
                    text: 'Tutti'
                },
                xAxis: {
                    categories: categories

                },
                yAxis: {
                    title: {
                        text: 'Amount'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: series
            });

       });

This is the console.log(categories) (xAxis):

["2015-07-13", "2015-07-20", "2015-07-27", "2015-08-03", "2015-08-10", "2015-08-17", "2015-08-24", "2015-08-31", "2015-09-07", "2015-09-14", "2015-09-21", "2015-09-28", "2015-10-05", "2015-10-12", "2015-10-19"]

And this is the console.log(series) (yAxis):

[Object { name="SHOP NUM 1",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}, Object { name="SHOP NUM 2",  data="[22377.00,48922.00,24280...00,0,41755.00,14540.00]"}, Object { name="SHOP NUM 3",  data="[0,65.00,0,176.00,0,950....0.00,50.00,30.00,10.00]"}, Object { name="SHOP NUM 4",  data="[2657.00,2489.00,2850.00...,689.00,1075.00,612.00]"}, Object { name="SHOP NUM 5",  data="[1422.00,480.00,0,1472.0...152.00,4230.00,1380.00]"}, Object { name="SHOP NUM 6",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}, Object { name="SHOP NUM 7",  data="[0,3141.00,2807.00,1692....45.00,1520.00,700.00,0]"}, Object { name="SHOP NUM 8",  data="[200.00,2116.00,4896.00,...,1816.00,1560.00,30.00]"}, Object { name="SHOP NUM 9",  data="[0,0,0,0,0,0,0,300.00,0,700.00,0,0,0,0,0]"}, Object { name="SHOP NUM 10",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}, Object { name="SHOP NUM 11",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}, Object { name="SHOP NUM 12",  data="[0,0,0,0,0,660.00,860.00...1120.00,1260.00,550.00]"}, Object { name="SHOP NUM 13",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}, Object { name="SHOP NUM 14",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,100.00,0]"}, Object { name="SHOP NUM 15",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}, Object { name="SHOP NUM 16",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}, Object { name="SHOP NUM 17",  data="[0,0,0,0,0,0,0,0,0,4200....,5340.00,420.00,720.00]"}, Object { name="SHOP NUM 18",  data="[0,0,0,0,0,0,0,0,0,0,0,2...300.00,2420.00,1260.00]"}, Object { name="SHOP NUM 19",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,840.00]"}, Object { name="SHOP NUM 20",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,1675.00,1470.00]"}, Object { name="SHOP NUM 21",  data="[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"}]

This is the final chart:

You can see that at the right the series name are perfect. Not for the xAxis categories neither the data (no data displayed at all).

Thank you for your support!

Answer 1

First problem is your data should not contain quotes .Your data should push in series while that for loop

 series.push( data['data'][i]); 

and instead

{"name":"SHOP NUM 2","data":"[22377.00,48922.00,24280.00,23007.00,0,17585.00,20860.00,21495.00,17550.00,18320.00,18320.00,32970.00,40265.00,36220.00,0,41755.00,14540.00]"}

it should be like

{"name":"SHOP NUM 2","data": [22377.00,48922.00,24280.00,23007.00,0,17585.00,20860.00,21495.00,17550.00,18320.00,18320.00,32970.00,40265.00,36220.00,0,41755.00,14540.00]}

See Working fiddle with your code

(I reduced few series in demo)