chartJs with MySQL and PHP

Question

I'm trying to make a line chat with chartJs.

I want to push MySQL data to chartJs using php.

MySQL table

id  | page_views | visitors | month |
------------------------------------| 
1   |   200      |   20     | Jan   |
2   |   100      |   10     | Feb   |
3   |   500      |   30     | March |
------------------------------------|

chartJs

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
        var lineChartData = {
            labels : ["January","February","March","April","May","June","July"],
            datasets : [
                {
                    label: "My First dataset",
                    fillColor : "rgba(220,220,220,0.2)",
                    strokeColor : "rgba(220,220,220,1)",
                    pointColor : "rgba(220,220,220,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(220,220,220,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                    label: "My Second dataset",
                    fillColor : "rgba(151,187,205,0.2)",
                    strokeColor : "rgba(151,187,205,1)",
                    pointColor : "rgba(151,187,205,1)",
                    pointStrokeColor : "#fff",
                    pointHighlightFill : "#fff",
                    pointHighlightStroke : "rgba(151,187,205,1)",
                    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                }
            ]

        }

    window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx).Line(lineChartData, {
            responsive: true
        });
    }

I want to apply MySQL loop for this.

Can anyone give me a simple example how to do this?

Did it work with getting the data through ajax with json?

ST2OD
– ST2OD

2016-04-12 15:10:00 +00:00
Commented Apr 12, 2016 at 15:10 — ST2OD
– ST2OD, Commented Apr 12, 2016 at 15:10
@st2erw2od Yes it did. Thank you.

max
– max

2016-04-12 16:19:22 +00:00
Commented Apr 12, 2016 at 16:19 — max
– max, Commented Apr 12, 2016 at 16:19

ST2OD · Accepted Answer · 2016-04-12 12:54:14Z

1

ChartJS takes data in JSON format.

You can get JSON data with AJAX.

var jsonData = $.ajax({
    url: 'http://yourdomain.com/yourfile.php',
    dataType: 'json',
}).done(function (results){

In the calling PHP file you can program your logic and database access. You then can echo the data with json_encode to output the array in JSON format.

header('Content-Type: application/json');
echo json_encode($dataArray);

You then can add the data to the chart like this:

var myChart = new Chart(ctx).Line(jsonData);

answered Apr 12, 2016 at 12:54

ST2OD

7251 gold badge5 silver badges15 bronze badges

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

1 Comment

halfpastfour.am Over a year ago

In addition you can use PHPChartJS on the server side.

Collectives™ on Stack Overflow

chartJs with MySQL and PHP

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related