HIghCharts PHP MySQL

Question

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>

Tutorial can help you out sgeek.org/create-chart-using-mysql-highcharts — Gopal Joshi
– Gopal Joshi, Commented Jun 21, 2016 at 9:16

kazatca · Accepted Answer · 2012-12-01 12:51:33Z

1

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

data[series_name].push(x);

You haven't y and line[2]

edited Dec 1, 2012 at 12:51

answered Dec 1, 2012 at 12:22

kazatca

2891 silver badge3 bronze badges

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

3 Comments

Accutec Org Over a year ago

Hi Kazatca, thanks for your reply. That helped clean it up some but its still not working. I tried your suggestions and I also modified this line for the formater. return '<b>'+ this.series.name +'</b><br/>'+'('+this.x +')';

Accutec Org Over a year ago

After implementing the suggestion from Kazatca, I put an alert on series_name and x. From that I can see after tsv = tsv.split I have a blank value in the name and that triggers a NaN for the last value of x. From what I have read that will cause the Chart not to display in HighCharts which is the problem now. If someone could help me with some code to check for blank values and remove them if they or NaN exist that would probably clean this up and make it display the chart. I’m still a learning newbie and I’m not sure how to do that programmatically. Much thanks in advance!

kazatca Over a year ago

tsv.split(/\n/) returns ["some data","some data",""] always because tsv ends in "\n". try implode("\n",$collected) on the server side.

Collectives™ on Stack Overflow

HIghCharts PHP MySQL

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related