How can I get proper object through loop using javascript for Bubble Charts of Highcharts

Question

I'm new in php and highcharts. I tried to populate my 3d bubble chart using mysql and php, but when I tried to run it ,the chart not appear.But i want bubble chart is appear with different colors.I already tried from SO suggestions.The color should be come product name wise.I have declare only one series ,but My php script returns the following json:

  [{"name":"HP","0":80,"1":85,"2":87.5},{"name":"DELL","0":65,"1":80,"2":58.5},{"name":"SONY","0":55,"1":55,"2":60}]

But here I want my bubble color will be shows name wise with different colors.and want to know I can get proper correct object through loop using JavaScript.So how it possible To show different color.

Here is my index.php

      $(function() {
    chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'bubble',
        plotBorderWidth: 1,
        zoomType: 'xy'
    },

    title: {
        text: 'Bubbles Chart SHOWS DIFFERENT COLOR'
    },

    xAxis: {
        gridLineWidth: 1,
        title: {
                    text: 'Product Ratings'
                },
                min: 0,
        max: 100
    },
    legend: {
           // layout: 'vertical',
           // align: 'center',
            verticalAlign: 'bottom',
            //x: -10,
            //y: 18,

            enabled:true
        }, 
    yAxis: {
         title: {
                    text: 'Specs Ratings'
                },
        startOnTick: false,
        endOnTick: false,
        min: 0,
        max: 100
    },

    series: [{
        name: 'PRODUCT NAME',  //here i want dynamic name whatever comes from database
        data: [],
        showInLegend:true,
        marker: {
             fillColor: {
                 radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
                 stops: [
                     [0, 'rgba(255,255,255,0.5)'],
                     [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
                 ]
             }
        }
     }]

      });
            $.getJSON("bubbleChart.php", function(data) {

                chart.series[0].setData(data);

                });
      }); 

HERE IS MY bubbleChart.php

         $sqlBubble = "SELECT product.product_name,
     product_rate.pro_rating,specs_rate.specs_rating,avg_rate.avrg_rating
     FROM product
    LEFT OUTER JOIN product_rate ON product.product_id = specs_rate.product_id
    LEFT OUTER JOIN specs_rate ON product.product_id = specs_rate.product_id
    LEFT OUTER JOIN temp_bubble ON product.product_id = temp_bubble.product_id 
    LEFT OUTER JOIN avg_rate ON product.product_id = avg_rate.product_id
      where temp_bubble.product_id = product.product_id and temp_bubble.product_id =  specs_rate.product_id and  temp_bubble.product_id = avg_rate.product_id ";

     $resultBubble = mysql_query($sqlBubble);
     $result = array();
    while($rowsBubble = mysql_fetch_array($resultBubble)){
     $result[] = array('name' => $rowsBubble['product_name'],
     $rowsBubble['pro_rating'],
$rowsBubble['specs_rating'],
$rowsBubble['avrg_rating']);

      }
      print json_encode($result, JSON_NUMERIC_CHECK);

So i request to you Please suggest me how can i show my different bubble color for HP,DELL,SONY like this.

Answer 1

I presume your json's output format is wrong. It likes to be [{"name":"HP","data":[[80,85,87.5]]},{"name":"DELL","data":[[65,80,58.5]]},{"name":"SONY","data":[[55,55,60]]}].

and your bubbleChart.php you can fetch data like this

$rows = array();
$rows['name'] = $rowsBubble['product_name'];
$rows1 = array();
$rows1[0] = $rowsBubble['pro_rating'];
$rows1[1] = $rowsBubble['specs_rating'];
$rows1[2] = $rowsBubble['avrg_rating'];
$rows['data'][0] = $rows1;

array_push($result,$rows);

Try this format .Check what your json returns. I think it will be work fine.

Answer 2

You need to parse your json to have the same data as in hardcoded version. The data require to be numbers, instead of strings.