jquery display 2 series hightchart from database

Question

anyone please help me,

i have sp.php

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="js/highcharts.js" ></script>
<script type="text/javascript" src="js/themes/dark-green.js"></script>

<script type="text/javascript">
    var chart;
            $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        defaultSeriesType: 'spline',
                        marginRight: 130,
                        marginBottom: 40
                    },
                    title: {
                        text: 'Grafik jumlah SUM SUK',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'per Hari',
                        x: -20
                    },
                    xAxis: {
                       title: {
                  text: 'tanggal '
                  //color:'#808080'
             },
                        type: 'datetime',
                        tickInterval: 172800 * 1000, // two days
                        tickWidth: 0,
                        gridLineWidth: 1,
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20,
                            formatter: function() {
                                return Highcharts.dateFormat('%e', this.value);
                            }
                        }
                    },
                    yAxis: {
                        title: {
                            text: 'Rupiah'
                        },
                        tickInterval: 5000000,
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                tooltip: {
                        formatter: function() {
                                return  Highcharts.dateFormat('%e %b', this.x) +': <b>'+ 'Rp' + this.y + '</b>';

                        }
                    },

                      plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            /*      tooltip: {
            valueDecimals: 2,
            valuePrefix: 'Rp',
            valueSuffix: ' ID'
        }, */

                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 300,
                        borderWidth: 2
                    },
                    series: [{
                        name: 'Saldo'
                    }]
                }
                // Load data asynchronously using jQuery. On success, add the data
                // to the options and initiate the chart.
                // This data is obtained by exporting a GA custom report to TSV.
                // http://api.jquery.com/jQuery.get/
                jQuery.get('datasp.php', null, function(tsv) {
                    var line = [];
                    traffic = [];
                    traffic1 = [];

                    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/);
                            date = Date.parse(line[0] +' UTC');
                                traffic.push([
                                date,
                                parseInt(line[1].replace(',', ''), 10),
                                parseInt(line[2].replace(',', ''), 10),
                            ]);
                        });
                    } catch (e) {  }
                     options.series[0].data = traffic;
                    // chart.addSeries(series);
                    // options.series[0].data = traffic;
                    chart = new Highcharts.Chart(options);
                });
            });
</script>
</head>
<body>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

</body>

and then datasp.php to get data from ms sql

$result = mssql_query("select tanggal, sum(kredit) umasuk,sum(debet) ukluar   from tbl_transaksi
where year(tanggal)=2012 and month(tanggal)=09 and kd_subperkiraan='150'
group by tanggal ");

//while($row = mssql_fetch_array($result)) {
//  echo $row['tgl_masuk'] . "\t" . $row['jumlah']. "\n";
//}

while($row = mssql_fetch_array($result)) {
$uts=strtotime($row[tanggal]);   //convertir a Unix Timestamp
$date=date("l, F j,Y  H:i:s",$uts);
//echo $valor3 . "\t" . $row[$valor2]. "\n";
//echo $date . "\t" . $row[umasuk]. "\n";
echo $date . "\t" . $row[ukluar] . "\t" . $row[umasuk]. "\n";

} 

mssql_close($con);

the result example of query on datasp.php like this :

Monday, September 3,2012 00:00:00   28425000    7149000
Wednesday, September 5,2012 00:00:00    22100000    5519000

now i wanna display the 2 series value of 28425000 and 7149000 on highchart, but in my chart only 28425000 value(all of line[1]) to be displayed, but line[2] dont displayed. so only 1 line displayed on my chart, anyone can help me please??

GBD · Accepted Answer · 2012-10-02 06:37:52Z

1

it seems you need to make two array.

1) first array for line 1 and pass to series 0

2) second array for line 2 and pass to series 1

Try to change your code as below

            traffic = [];
            traffic1 = [];

            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/);
                    date = Date.parse(line[0] +' UTC');
                        traffic.push([
                        date,
                        parseInt(line[1].replace(',', ''), 10),
                    ]);

                    traffic1.push([
                        date,
                        parseInt(line[2].replace(',', ''), 10),
                    ]);
                });
            } catch (e) {  }

            options.series[0].data = traffic;
            options.series[1].data = traffic1;

Also you need to change your series name into options

series: [{
                        name: 'Saldo'
                    },{
                        name: 'Saldo1'
                    }]

Reference taken from this link:

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/spline-irregular-time/

edited Oct 2, 2012 at 6:37

answered Oct 2, 2012 at 5:24

GBD

16k2 gold badges49 silver badges52 bronze badges

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

1 Comment

andry Over a year ago

thank you GBD, i have already try your code to add the second array, but still not displayed the second series, if i run all the code the result blank page(error), but if i erase the last line "options.series[1].data = traffic1;", the first array still displayed...can you help me more...

Collectives™ on Stack Overflow

jquery display 2 series hightchart from database

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