HighCharts Linechart MySQL/PHP data for multiple lines

Question

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(/\n/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']. "\n";
}

?>

Current output: enter image description here

Expected output: enter image description here

Sebastian Bochan · Accepted Answer · 2014-05-21 10:09:31Z

1

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.

answered May 21, 2014 at 10:09

Sebastian Bochan

37.6k3 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nomad Over a year ago

Thank you the response. What would you recommend I do to correct this? cursan.series[0].data = traffic; Should this be changed to []? or will I have to define the array elsewhere? Sorry for my noob response, I don't have much experience with this charting api.

Collectives™ on Stack Overflow

HighCharts Linechart MySQL/PHP data for multiple lines

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related