Home forums Using CanvasJS Chart dont get mysql data using json file, need to run json file first

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  natasha11 2 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #20487

    natasha11
    Member

    $(document).ready(function() {
    var dataPoints = [];

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    exportEnabled: true,
    theme: “light2”,
    zoomEnabled: true,
    title: {
    text: “Attendance”
    },
    axisX: {
    title: “Date”,
    titleFontSize: 10
    },
    axisY: {
    title: “Number of Present”,
    titleFontSize: 10,

    },
    data: [{
    type: “column”,
    dataPoints: dataPoints
    }]
    });

    function addData(data) {
    var dps = data.attendance;
    for (var i = 0; i < dps.length; i++) {
    dataPoints.push({
    x: new Date(dps[i][0]),
    y: parseInt(dps[i][1])
    });
    }

    chart.render();

    }

    $.getJSON(“http://localhost/fyp/results.json”, addData);

    }

    This would be my json file after running (results.json):
    {“attendance”:[[1520809200000,”1″]]}

    so, whenever i want to render the chart, i need to run “results.json” at the browse, then the chart will run according to the details in my mysql.
    but i dont want to extra loading the “Results.json” file. i want it to render and get the data from mysql automatically. i dont know where do i wrong

    #20498

    Vishwas R
    Keymaster

    @natasha11,

    Please take a look at this sample project for creating dynamic charts using data from MySQL database in PHP. Also, please refer to this documentation page for creating Dynamically Updating Charts from JSON API & AJAX.

    If this doesn’t suit your requirements, kindly share a sample project with sample data over google-drive or onedrive so that we can understand it better and help you out.


    Vishwas R
    Team CanvasJS

    #20515

    natasha11
    Member

    http://fkiattendance.xyz/staff_report.php

    this is the link to my chart.

    <script type=”text/javascript”>
    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”,{
    title:{
    text:”Rendering Multi Series Chart from database”
    },
    data: [{
    type: “column”,
    dataPoints : [],
    }]
    });

    $.getJSON(“report.php”, function(data) {
    $.each((data), function(key, value){
    chart.options.data[0].dataPoints.push({label: value[0], y: parseInt(value[1])});
    });
    chart.render();
    updateChart();
    });

    function updateChart() {
    $.getJSON(“report.php”, function(data) {
    chart.options.data[0].dataPoints = [];
    chart.options.data[1].dataPoints = [];
    $.each((data), function(key, value){
    chart.options.data[0].dataPoints.push({label: value[0], y: parseInt(value[1])});
    });

    chart.render();
    });
    }

    setInterval(function(){updateChart()}, 1000);
    }
    </script>

    it still wont come render.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.