dongtang7347
2014-05-20 22:50
浏览 126
已采纳

HighCharts折线图多行的MySQL / PHP数据

I have a Highchart line chart, that I would like 4 lines to appear, 2 would be dynamic via the MySQL database table I have, which I've configured to work perfectly fine with GoogleCharts API, but recently I've seen HighCharts, and was extremely impressed. I've configured it to work, but I've only gotten it to work with one line. I've tried to add new lines to the array, but I can't seem to see where the lines are drawn, as I'm new to HighCharts. I've configured it to use the "DPMO" column, and when I change line from 1 to 2 it displays my average line that I would like to also display with the dpmo line. In conjunction two static lines, one at 3,000, and another at 5,000.

Thank you.

IRDR.php file

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>OAK3 - 12 Week IRDR DPMO</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/setup.js"></script>
    <script type="text/javascript" src="js/test.js"></script>    
</head>

<body>
    <script src="js/highcharts.js"></script>
    <div id="sales" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>

Setup.js

var chart;
    $(document).ready(function() {
        var cursan = {
            chart: {
                renderTo: 'sales',
                defaultSeriesType: 'line',
                marginRight: 10,
                marginBottom: 20
            },
            title: {
                text: 'IRDR 12 Week DPMO',
            },
            subtitle: {
                text: 'http://blackmesa.amazon.com',
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'DPMO'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                crosshairs: true,
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 30,
                borderWidth: 0
            },

            plotOptions: {

                series: {
                    cursor: 'pointer',  
                    marker: {
                        lineWidth: 1
                    }
                }
            },

            series: [{
                color: Highcharts.getOptions().colors[2],
                name: 'IRDR DPMO',
                marker: {
                    fillColor: '#FFFFFF',
                    lineWidth: 3,
                    lineColor: null // inherit from series
                },
                dataLabels: {
                    enabled: true,
                    rotation: 0,
                    color: '#666666',
                    align: 'top',
                    x: -10,
                    y: -10,
                    style: {
                        fontSize: '9px',
                        fontFamily: 'Verdana, sans-serif',
                        textShadow: '0 0 0px black'
                    }
                }
            }],

        }


        //Fetch MySql Records
        jQuery.get('js/data.php', null, function(tsv) {
            var lines = [];
            traffic = [];
            try {
                // split the data return into lines and parse them
                tsv = tsv.split(/
/g);
                jQuery.each(tsv, function(i, line) {
                    line = line.split(/\t/);
                    dpmo = line[0];
                    average = line[1];
                    amo=parseFloat(line[1].replace(',', ''));
                    if (isNaN(amo)) {
                        amo = null;
                    }
                    traffic.push([
                        dpmo,
                        amo,
                        average
                    ]);
                });
            } catch (e) {  }
            cursan.series[0].data = traffic;
            chart = new Highcharts.Chart(cursan);
        });
 });

Data.php(Which does my data pull from MySQL database table)

<?php

$con=mysql_connect('localhost','root','password');
mysql_select_db("test", $con);
$result=mysql_query('select substr(process_name,11,15) as process_name, a.dpmo as dpmo, a.process_id as process_id, oak3_ia.dpmo as average from (select * from oak3_irdr_chart order by process_id desc limit 12)a left join oak3_irdr_average oak3_ia on oak3_ia.process_id = a .process_id order by process_id');
while($row = mysql_fetch_array($result)) {
  echo $row['process_name'] . "\t" . $row['dpmo']. "\t" . $row['average']. "
";
}

?>

Current output: enter image description here

Expected output: enter image description here

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

1条回答 默认 最新

  • douxing5199 2014-05-21 10:09
    最佳回答

    Because you should set multiple array of series in series object, but you have a single serie: cursan.series[0].data = traffic; it means that you have single object in series, which is one serie.

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题