Question

I have this code, but actually only draws one pie with all data. I want to draw one pie for each key ($row['servicio']). I don’t know if it is possible to auto-generate a new DIV with id="pie-KEY" then tell the chart to render every new KEY to it’s own DIV.

PHP

while($row = sqlsrv_fetch_array($sqlTotals)) {
    $json[$row['servicio']] = array(
        "OK" => intval($row["OK"]),
        "KO" => intval($row["KO"])
    );
}
echo json_encode($json);

jQuery

$.getJSON('test.php', function(data) {        
    var series = {
        type: 'pie',
        data: []
    }; 
    $.each(data, function(key, value) {
        series.data.push(["OK", value.OK]);
        series.data.push(["KO", value.KO]);
    });
    options.series.push(series);
    var chart = new Highcharts.Chart(options);  
});

Answer 1

This code is workking…

$.getJSON('test.php', function(data) {        
    $.each(data, function(key, value) {
        var series = {
            type: 'pie',
            data: []
        }; 
        var renderId = "pie-" + key;
        $('#charts').append('<div id="'+ renderId +'" class="pieChart"></div>');
        series.data.push(["OK", value.OK]);
        series.data.push(["KO", value.KO]);
        options.series.push(series);
        options.chart.renderTo = renderId;
        options.title.text = key;
        var chart = new Highcharts.Chart(options);
        series.data = null;
    }); 
});