FORUMS

Select any forum below to ask question

Home › forums › Using CanvasJS › Ajax Refresh

This topic contains 1 reply, has 2 voices, and was last updated by  Shashi Ranjan 3 weeks, 6 days ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 17, 2019 at 10:25 pm #25544

    danwel

    Hello,

    I am using your line graph to graph data from a database. As more data is added to the database, I want to that data on the graph. To do this, I need to run the query on the database again. I want to use:

    <script src=”http://code.jquery.com/jquery-2.1.3.min.js”></script>

    <div id=”responds1″></div>

    <script>
    $(document).ready(function() {
    var refreshId = setInterval(function() {
    $(“#responds1”).load(“dynamicgraph.php”);
    }, 1000);
    $.ajaxSetup({ cache: true });
    });
    </script>

    This will be on my page where the graphs are displayed. The graphs themselves are in a different file, and by using this Ajax method, I can refresh the graphs without ending the session.

    Here’s my problem: when I run the program, the graphs will not show up, just my search bar. If I don’t use that code they show up fine.

    How can I make the graphs show up? Is there an easier way to get the php up update and send the new data points to the graph?

    Here’s my code:

    <html>
    <head>
    <script>
    window.onload = function() {
    var dataPoints = <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>;
    var chart = new CanvasJS.Chart(“chartContainer”, {
    theme: “light2”,
    title: {
    text: “Live Internet Speed”
    },
    axisX:{
    title: “Time in millisecond”
    },
    axisY:{
    includeZero: false,
    suffix: ” Mbps”
    },
    data: [{
    type: “line”,
    yValueFormatString: “#,##0.0#”,
    toolTipContent: “{y} Mbps”,
    dataPoints: dataPoints
    }]
    });
    setInterval(function(){

    var xValue = dataPoints.length;
    var yValue = dataPoints[dataPoints.length – 2].y;

    dataPoints.push({ x: xValue, y: yValue });
    xValue++;
    chart.render();
    },1000);
    }
    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”height: 370px; width: 100%;”></div>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    </body>

    </div>

    </html>

    June 18, 2019 at 9:49 pm #25556

    Shashi Ranjan

    @danwel,

    Please check this sample project to create dynamic charts using data from MySQL database in PHP. Also, please refer to this documentation page to create a Live Updating Charts from JSON API & AJAX.

    If this doesn’t help you resolve the issue you are facing, kindly share sample project along with sample database over Google Drive / Onedrive so that we can run it locally at our end, understand the scenario better and help you resolve it.

    —
    Shashi Ranjan
    Team CanvasJS

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.