Create Highcharts bubble chart dynamically

Question

i'm trying to create a script that will generate, with a JSON object, a bubble chart dynamically.

This is an example of the JSON obtained after an Ajax Call.

 {  
   "Result":"OK",
   "chartOptions":{  
      "title":"Review Data",
      "subtitle":"",
      "graph_title":"bubble"
   },
   "xAxisOption":{  
      "categories":[  
         "January",
         "February",
         "March",
         "April",
         "May",
         "June",
         "July",
         "August",
         "September"
      ]
   },
   "yAxisOption":{  
      "title":"Days"
   },
   "Records":{  
      "A":[  
         "[3,1,20.84],[3,15,119.90],[6,13,22.46],[6,21,240.00],[6,16,5.99],[9,13,60.00],[1,30,104.95],[1,22,69.65],[1,4,101.48],[2,1,63.30],[4,17,70.05],[4,19,19.74],[4,13,36.28],[4,18,22.46],[7,25,61.56],[7,6,83.16],[8,12,8.00],[8,9,60.00],[5,2,80.00],[5,27,30.00]"
      ],
      "B":[  
         "[3,7,133.24],[6,18,250.00],[6,13,11.35],[6,25,98.00],[6,3,215.95],[9,5,48.32],[9,26,68.79],[1,27,38.89],[1,4,12.50],[1,29,62.50],[2,19,60.00],[4,8,288.70],[7,10,17.85],[7,6,15.04],[8,11,8.80],[8,17,108.10],[8,16,30.27]"
      ],
      "C":[  
         "[3,14,28.83],[6,20,66.70],[9,13,73.00],[9,19,32.00],[9,8,15.28],[9,17,18.40],[1,7,71.00],[1,26,90.00],[1,23,13.35],[2,15,10.49],[2,8,12.99],[4,19,70.76],[4,13,34.00],[7,15,65.97],[7,28,60.00],[8,14,21.85],[8,10,143.64],[5,10,68.22]"
      ],
      "D":[  
         "[3,9,95.00],[3,6,21.00],[3,15,24.46],[6,23,18.00],[6,6,50.00],[6,22,23.41],[6,5,22.40],[6,25,28.00],[6,15,37.36],[9,28,89.61],[9,10,14.50],[1,26,10.33],[2,8,133.80],[2,27,39.20],[2,6,47.99],[2,20,65.69],[5,25,100.00],[5,10,85.70]"
      ],
      "E":[  
         "[3,31,62.50],[3,23,77.05],[3,19,9.10],[6,25,29.84],[6,15,43.90],[6,22,10.90],[6,3,78.57],[6,18,120.00],[9,16,65.68],[9,12,32.42],[1,17,15.20],[2,21,100.41],[2,6,72.83],[4,25,80.00],[7,13,11.92],[8,2,28.40],[8,30,90.00],[8,23,21.05],[5,25,7.54],[5,14,299.00]"
      ],
      "F":[  
         "[3,18,63.68],[3,22,29.54],[3,19,16.40],[6,28,82.40],[6,12,19.60],[9,7,22.00],[9,19,30.00],[9,13,37.02],[9,28,10.00],[1,2,60.00],[2,8,7.80],[4,2,65.44],[7,6,210.00],[7,2,14.50],[8,10,49.30],[8,23,56.35],[5,2,14.90],[5,24,7.92],[5,10,11.89]"
      ],
      "G":[  
         "[3,8,14.95],[6,16,6.00],[6,25,45.00],[6,14,89.20],[6,23,58.18],[9,28,19.35],[4,19,51.03],[4,6,120.00],[7,13,65.79],[7,1,67.87],[7,26,79.00],[8,16,29.18],[8,2,29.00],[8,26,70.28],[5,18,50.00],[5,7,69.40]"
      ]
   }
}

I tried a lot of ways, but none of them worked.

For example, i tried

$.each(msg.Records, function(key, value) {
    chart.series.push({
        data: value,
        name: key
    });
});

or

$.each(msg.Records, function(key, value) {
    chart.addSeries({
        data: value,
        name: key
    });
});

Hope somebody will help me!
Thanks in advance.

Answer 1

Your JSON is a little bit invalid:

 "A":[  
     "[3,1,20.84],[3,15,119.90],[6,13,22.46],[6,21,240.00],[6,16,5.99],[9,13,60.00],[1,30,104.95],[1,22,69.65],[1,4,101.48],[2,1,63.30],[4,17,70.05],[4,19,19.74],[4,13,36.28],[4,18,22.46],[7,25,61.56],[7,6,83.16],[8,12,8.00],[8,9,60.00],[5,2,80.00],[5,27,30.00]"
     ]

Is an array of a single string, when I think you meant it to be an array of arrays. Fix this on the backend if you can.

If you can't fix it on the backend, it is possible to do in JavaScript:

var options = {
  chart:{
    type: 'bubble'
  },
  series: []
};

$.each(msg.Records, function(key, value) {
    options.series.push({
        data: $.parseJSON("["+value[0]+"]"), // <-- make it a "correct" string and then parse it
        name: key
    });
});

$('#container').highcharts(options);

Here's a working example.