CODEWITHSUNDEEP
phpmysqlhighcharts
Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

using highcharts with php and mysql

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

Upvotes: 0

Views: 1895

Answers (3)

vikrant chauhan
vikrant chauhan

Reputation: 11

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');

Upvotes: 1

Nandakumar V
Nandakumar V

Reputation: 4635

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.

Upvotes: 1

Jonathan de M.
Jonathan de M.

Reputation: 9828

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

Upvotes: 0

Related Questions