通过json_encode用php填充highcharts

时间:2013-05-21 18:00:41

标签: php javascript mysql highcharts

我已经通过php与highcharts和json_encode进行了几天的摔跤。我相信我已正确格式化数据,但图表未正确更新。更新类别数据,并将列和行数据图表的系列数据格式化为原样。

任何人都可以帮助我完成剩下的工作。这是我正在使用的php脚本和highcharts javascript。

感谢您的帮助:

<?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)输出以下内容

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)输出以下内容

string(7) "result1"

以下是两个json_encode输出:

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]}]

1 个答案:

答案 0 :(得分:0)

正如我所看到的问题只是通过ajax或类似的方式获取数据,因为当我粘贴你的JSON(看起来很好)时,一切正常http://jsfiddle.net/6fZcz/ 所以我建议你看一下控制台,如果你收到任何错误。更多的php文件与图表脚本在同一服务器上?

$('#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]
    }]
});