CODEWITHSUNDEEP
phpjquerymysqlhighcharts
Accutec Org
Accutec Org

Reputation: 21

HIghCharts PHP MySQL

I am a newcomer to Highcharts and trying to learn how to use it with PHP and MySQL. I would like to display a simple column chart from some sample data in an array. However, I having some problems implementing this. The columns are not showing up in the chart and I am getting an extra label that is blank in the legend. If someone could help me to clean up this code, make it work and provide sample code with commenting to help better understand it, that would a big help. I'm sure several other people are also looking for a similar example. I have looked through this site and through the HighCharts forum and examples and could not find exactly what I was looking for that could better help me to learn how to create dynamic column type charts using PHP and MySQL. If you can help many Thanks in advance.

Here is the code I have, I know it has several problems and I tried to keep this as a short example that is easy enough for newbies and students to understand. Your help is greatly appreciated:

My sample data contains the lastname and sales amount for that person. It is in a TSV format and the array looks like this: Doe 3567 Right 5476 Johnson 4351 Brown 2945

data.php

    <?php
    $con = mysql_connect("localhost","root","");
    if (!$con) {
      die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("test", $con);
    $result = mysql_query("SELECT * FROM user");
    while($row = mysql_fetch_array($result)) {
      echo $row['lastname'] . "\t" . $row['sales']. "\n";
    }
    mysql_close($con);
    ?>

index.php

<!DOCTYPE html><html><head>
</head><body>
<div id="container" style="height: 400px; width: 900px"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.highcharts.com/js/highcharts.src.js"></script>
<script>
jQuery(function($) {
    var options = {
        chart: {renderTo: 'container', defaultSeriesType:'column', height: 400},
        title: {text: 'Sales Performance'},
        xAxis: {title: {text: 'Sales Peoples'}, type: 'linear'},
        yAxis: {title: {text: 'Dollars'}, plotLines: [{ value: 0, width: 1, color: '#808080'}]},
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+'('+this.x +' : '+ this.y +')';
            }
        },
        legend: {layout: 'vertical', align: 'left', verticalAlign: 'top', x: 40, y: 100,   borderWidth: 0, width: 300 },
        series: []
    };

    jQuery.get('data.php', null, function(tsv) {
        var data = {};
        tsv = tsv.split(/\n/g); // split into rows
        for (var row=0, rows=tsv.length; row<rows; row++) {
            var line = tsv[row].split(/\t/g), // split into columns
                series_name = line[0],
                x = Number(line[1]),
                y = Number(line[2]);
            if (!data[series_name]) data[series_name] = [];
            data[series_name].push([x,y]);
            //alert("The data is: "+series_name)
        }
        for (var series_name in data) {
            options.series.push({
                name: series_name,
                data: data[series_name]
            });
        }
        new Highcharts.Chart(options);
    });

});
</script>
</body></html>

Upvotes: 2

Views: 4001

Answers (1)

kazatca
kazatca

Reputation: 289

data[series_name].push([x,y]);

data[series_name].push(x);

You haven't y and line[2]

Upvotes: 1

Related Questions