Populating highcharts with php via json_encode

Question

I have been wrestling with highcharts and json_encode via php for a few days now. I believe I have the data formatted properly but yet the chart is not updating properly. The category data is updated and the series data to chart the column and line data is formatted as it should be.

Can anyone help me get the rest of the way. Here is the php script and highcharts javascript I am using.

Thank you for your help:

<?php          
// data feed to power dynamic charts
include_once('db_conn.php');

// get site data and store in array
$query = mysql_query("SELECT site, SUM(impressions) AS impressions, SUM(clicks) AS     clicks FROM dfa_data WHERE campaign='$campaign' and time='$time' GROUP BY site ORDER BY   impressions DESC");
$rows = array();
while($r = mysql_fetch_array($query)) {
    $rows['categories'][] = $r['site'];
}

// get impression data and store in array
$query = mysql_query("SELECT site, SUM(impressions) AS impressions, SUM(clicks) AS clicks FROM dfa_data WHERE campaign='$campaign' and time='$time' GROUP BY site ORDER BY    impressions DESC");
$rows1 = array();
$rows1['name'] = 'Impressions';
$rows1['color'] = '#4572A7';
$rows1['type'] = 'column';
$rows1['yAxis'] = 1;
while($rr = mysql_fetch_array($query)) {
    $rows1['data'][] = $rr['impressions'];
}

// get ctr data and store in array
$query = mysql_query("SELECT site, SUM(impressions) AS impressions, SUM(clicks) AS clicks FROM dfa_data WHERE campaign='$campaign' and time='$time' GROUP BY site ORDER BY impressions DESC");
$rows2 = array();
$rows2['name'] = 'CTR';
$rows2['color'] = '#89A54E';
$rows2['type'] = 'spline';
while($rrr = mysql_fetch_array($query)) {
 $ctr = number_format(($rrr['clicks']/$rrr['impressions'])*(100),2,'.',',');
 $impressions = number_format($rrr['impressions'],0,'.',',');
 $clicks = number_format($rrr['clicks'],0,'.',',');
    $rows2['data'][] = $ctr;
}

$result = array();
$result1 = array();
array_push($result,$rows);
array_push($result1,$rows1);
array_push($result1,$rows2);


?>

<script>
$(function () {
     $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Performance by Site'
        },
        subtitle: {
            text: ''
        },
        xAxis: 
        <?php echo json_encode($result); ?>
        ,
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}%',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'CTR',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Impressions',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value}',
                style: {
                    color: '#4572A7'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        series: <?php echo json_encode($result1); ?>
     });
  });
</script>

var_dump($result) outputs the following

array(1) { [0]=> array(1) { ["categories"]=> array(5) { [0]=> string(13) "Search Medica" [1]=> string(10) "Medscape 4" [2]=> string(11) "onclive.com" [3]=> string(22) "Oncology Nurse Advisor" [4]=> string(25) "chemotherapyadvisor.com 1" } } }

var_dump($result1) outputs the following

string(7) "result1"

Here is the json_encode output as well for both:

json_encode $result

[{"categories":["Search Medica","Medscape 4","onclive.com","Oncology Nurse Advisor","chemotherapyadvisor.com 1"]}]

json_encode $result1

[{"name":"Impressions","color":"#4572A7","type":"column","yAxis":1,"data":[140521,71905,69295,68456,49487]},{"name":"CTR","color":"#89A54E","type":"spline","data":[0.11,0.04,0.2,0.09,0.05]}]

Answer 1

As I see the problem is only with getting data by ajax or something similar, because when I paste your JSON (which looks like fine) then all works properly http://jsfiddle.net/6fZcz/ So I advice to take look at console, if you receive any errors. Morever php file is at the same server as script with chart?

$('#container').highcharts({
    chart: {
        type: 'line',
        marginRight: 10
    },
    xAxis: [{
        "categories": ["Search Medica", "Medscape 4", "onclive.com", "Oncology Nurse Advisor", "chemotherapyadvisor.com 1"]
    }],
    series: [{
        "name": "Impressions",
            "color": "#4572A7",
            "type": "column",
        //"yAxis": 1,
        "data": [140521, 71905, 69295, 68456, 49487]
    }, {
        "name": "CTR",
            "color": "#89A54E",
            "type": "spline",
            "data": [0.11, 0.04, 0.2, 0.09, 0.05]
    }]
});