using highcharts with php and mysql

Question

is anyone ever use hightchart??i want to use hightchart to represent the data retrieve from mysql database..i try look at the example,this is full example:

    <script type="text/javascript">
     $(function() {
var seriesOptions = [],
    yAxisOptions = [],
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'],
    colors = Highcharts.getOptions().colors;

$.each(names, function(i, name) {

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?',   function(data) {


        seriesOptions[i] = {
            name: name,
            data: data
        };

        // As we're loading the data asynchronously, we don't know what order it will arrive. So
        // we keep a counter and create the chart when all the data is loaded.
        seriesCounter++;

        if (seriesCounter == names.length) {
            createChart();
        }
    });
});



// create the chart when all data is loaded
function createChart() {

    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

    });
    </script>

the problem is they used this link ("http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?") to get the data and which that i cant to view the example how they display the data.. i dont know how the link "http://www.highcharts.com/samples/data/jsonp.php" is look like, and how they represent the data.. i want to make my own page that retrieve data from database and replace the link above with my own php page.. this is working example...http://www.highcharts.com/stock/demo/compare

Nandakumar V · Accepted Answer · 2012-12-03 10:34:18Z

1

You have to create an array of data you want to populate. Then encode the php array to json format using json_encode. Echo that json string.
Here is a sample code

$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$a[] = 1133740800000;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;
$b[] = 405.85;

foreach($a as $i => $v)
{
    $cordinates[]= array($v,$b[$i]); 
}

echo (json_encode($cordinates));

Hope this helps.

answered Dec 3, 2012 at 10:34

Nandakumar V

4,7255 gold badges33 silver badges50 bronze badges

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

4 Comments

Norlihazmey Ghazali Over a year ago

owh,, i will try it first..thank u..if i have a problem later i will come back soon...:)

Nandakumar V Over a year ago

How far have you got? There is a jsFiddle with a demo.

Norlihazmey Ghazali Over a year ago

with your example above, how if i want to add another array and display another cordinates.. it only shown one line only,,i want make 3 comparison data..

Nandakumar V Over a year ago

that was only dummy data... replace the values in the array $a & $b with your co-ordinates

vikrant chauhan · Accepted Answer · 2014-08-07 11:16:29Z

solved------------ index file below

        <!DOCTYPE HTML>
        <html>
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>Highcharts Example</title>

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
                <script type="text/javascript">
        $(function () {
            var chart;
            $(document).ready(function() {
                $.getJSON("map2.php", function(json) {
                chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'container',
                            type: 'line',
                            marginRight: 130,
                            marginBottom: 25
                        },
                        title: {
                            text: 'Revenue vs. Overhead',
                            x: -20 //center
                        },
                        subtitle: {
                            text: '',
                            x: -20
                        },

                        yAxis: {
                            title: {
                                text: 'Amount'
                            },
                            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: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
                        },
                        series: json
                    });

                });

            });

        });
                </script>
            </head>
            <body>
          <script src="http://code.highcharts.com/highcharts.js"></script>
          <script src="http://code.highcharts.com/modules/exporting.js"></script>

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

            </body>
        </html>

ajax file below

    <?php
    $con = mysql_connect("localhost","username","password");
    if (!$con) {
    die('Could not connect: ' . mysql_error());
    }mysql_select_db("cakephp", $con);
    $sth = mysql_query("SELECT revenue FROM highcharts2");
    $rows = array();
    $rows['name'] = 'revenue';
    while($r = mysql_fetch_array($sth)) {
     $rows['data'][] = $r['revenue'];
    }
    $sth = mysql_query("SELECT overhead FROM highcharts2");
    $rows1 = array();
    $rows1['name'] = 'overhead';
    while($rr = mysql_fetch_assoc($sth)) {
    $rows1['data'][] = $rr['overhead'];
    }$result = array();
    array_push($result,$rows);
    array_push($result,$rows1);
    print json_encode($result, JSON_NUMERIC_CHECK);
    mysql_close($con);
    ?>

create db like below

CREATE TABLE IF NOT EXISTS `highcharts2` (
  `id` int(10) NOT NULL auto_increment,
  `month` varchar(225) NOT NULL,
  `revenue` varchar(225) NOT NULL,
  `overhead` varchar(255) NOT NULL,
  PRIMARY KEY  (`id`)
)
INSERT INTO `highcharts2` (`id`, `month`, `revenue`, `overhead`) VALUES
(1, 'jan', '23987', '21990'),
(2, 'Feb', '24784', '22363'),
(3, 'Mar', '25899', '21987'),
(4, 'Apr', '25569', '22369'),
(5, 'May', '25599', '22698'),
(6, 'jun', '25577', '21999'),
(7, 'Jul', '24111', '2599'),
(8, 'Aug', '25555', '21988'),
(9, 'sep', '25444', '21981'),
(10, 'oct', '25599', '21988'),
(11, 'nov', '24559', '20142'),
(12, 'dec', '25111', '22222');

Jonathan de M. · Accepted Answer · 2012-12-03 10:07:25Z

0

Using firebug, you can check the response of the ajax, should be a json object

answered Dec 3, 2012 at 10:07

Jonathan de M.

9,8488 gold badges50 silver badges72 bronze badges

Collectives™ on Stack Overflow

using highcharts with php and mysql

3 Answers 3

4 Comments

solved------------ index file below

ajax file below

create db like below

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

solved------------ index file below

ajax file below

create db like below

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related