CODEWITHSUNDEEP
phpmysqlhighcharts
Supreme
Supreme

Reputation: 109

PHP + mysql + highcharts

I want to display mysql database in highchart. I found an example where take data from document, but I want to use function. When i use function the program doesn't work. The output of the function are the same as the document before the change. Perhaps there is some error in the function or the way i use it.

This is my code:

 <? $data = new MysqlDatabase($db) ?>
<script type="text/javascript">
    var chart;
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Date',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                type: 'datetime',
                tickInterval: 3600 * 1000, // one hour
                tickWidth: 0,
                gridLineWidth: 1,
                labels: {
                    align: 'center',
                    x: -3,
                    y: 20,
                    formatter: function() {
                        return Highcharts.dateFormat('%l%p', this.value);
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Humidity'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return Highcharts.dateFormat('%l%p', this.x-(1000*3600)) +'-'+ Highcharts.dateFormat('%l%p', this.x) +': <b>'+ this.y + '</b>';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: [{
                name: 'Count'
            }]
        }
        jQuery.get(<?php $data->find_all_for_charts($db);?>, null, function(tsv) {
            var lines = [];
            traffic = [];
            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)
                    ]);
                });
            } catch (e) {  }
            options.series[0].data = traffic;
            chart = new Highcharts.Chart(options);
        });
    });
</script>

function code:

<?php
class MysqlDatabase
{

    public function find_all_for_charts($db)
    {
        $stmt = $db->query('SELECT * FROM temperature');

        while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
            echo $row['timestamp'] . "\t" . $row['humidity'] . "\n";
        }
    }
}
?>

Instead function here in the example used the name of a document:

jQuery.get(<?php $data->find_all_for_charts($db);?>, null, function(tsv) {

How I can solve your problem? Thanks in advance. :)

Upvotes: 0

Views: 364

Answers (1)

ryrysz
ryrysz

Reputation: 907

Look to documentation of jQuery.get() : https://api.jquery.com/jquery.get/

First parameter of this function is URL for GET request.

In Your code is data from method: 

 MysqlDatabase->find_all_for_charts()

In HighCharts package, You can find examples how to use it. Just download it from http://www.highcharts.com/download, and look for: "Ajax loaded data, clickable points" demo.

Upvotes: 2

Related Questions