Home forums Using CanvasJS update chart with new values

This topic contains 5 replies, has 2 voices, and was last updated by  Vishwas R 6 months, 3 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #20795

    unixssh
    Member

    Hi guys,

    I was trying to update chart with new values on rangeChanged/rangeChanging event but no results. Even if in debug mode i’ve checked the chart.options.data[0].dataPoints[i] object and contained the expected object, the chart was not updated. Below is a code where i tried pushing a button to update the chart but i get the same results. Initially the chart is populated with 24 objects representing 24 hours and pressing the update button i’d like to redraw the chart with 500 objects representing some minutes.

    Any help would be highly appreciated.

    <!DOCTYPE html>
    <html>
    <head>
    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>
    <script type=”text/javascript”>
    window.onload = function () {

    var bigArray = [];
    var dataObj = {type: “spline”, dataPoints: []};
    bigArray.push(dataObj);

    var hoursList = [];
    var hoursLimit = 24;
    var y=0;

    //generateHours();
    for ( var j = 0; j < hoursLimit; j++ ) {
    y += Math.round( 10 + Math.random() * (-10 -10));
    var date2 = new Date();
    date2.setHours(j);
    date2.setMinutes(0);
    date2.setSeconds(0);
    date2.setMilliseconds(0);
    dataObj.dataPoints.push({x:date2, y:y})
    }

    var chart = new CanvasJS.Chart(“chartContainer”, {
    title: {
    text: “Adding & Updating dataPoints”
    },
    zoomEnabled:true,
    data: bigArray

    });

    chart.render();

    $(“#addDataPoint”).click(function () {

    chart.options.title.text = “New DataPoint Added at the end”;
    chart.options.data[0].dataPoints.push({ y: 25 – Math.random() * 10});
    chart.render();

    });

    $(“#updateDataPoint”).click(function () {

    chart.options.title.text = “Last DataPoint Updated”;
    chart.options.data[0].dataPoints = [];

    var minuteList = [];
    var minuteLimit = 500;
    //var w;
    for ( var i = 0; i < minuteLimit; i++ ) {
    var w = Math.round( 10 + Math.random() * (-10 -10));
    var date1 = new Date();

    date1.setMinutes(i);
    date1.setSeconds(0);
    date1.setMilliseconds(0);

    chart.options.data[0].dataPoints[i] = {x:date1, w:w};
    }

    chart.render();

    });
    }
    </script>
    </head>
    <body>
    <div id=”chartContainer” style=”width:100%; height:280px”></div>
    <button id=”addDataPoint”>Add Data Point</button>
    <button id=”updateDataPoint”>Update Data Point</button>
    </body>
    </html>

    #20796

    Vishwas R
    Keymaster

    @unixssh,

    Datapoint accepts x-value and y-value with optional label and z-value. In your case, on click of update button, you seem to be passing ‘w’ instead of ‘y’. Changing chart.options.data[0].dataPoints[i] = {x:date1, w:w}; to chart.options.data[0].dataPoints[i] = {x:date1, y:w}; should work fine in your case.

    If this doesn’t solve your requirement, kindly create jsfiddle reproducing the issue, so that we can look into it and help you out.


    Vishwas R
    Team CanvasJS

    #20811

    unixssh
    Member

    Hi Vishwas,

    Yes you were right, is working now but moving the code to rangeChanged function it seems the chart is not render properly and i don’t understand why. I’ve created a jsfiddle: https://jsfiddle.net/unixssh/ubegw036/

    Below I’ll try to explain what i want to do and i’ll appreciate your advice :)

    In the back-end i have multiple quartz jobs which are running each 1 minute/30 minutes/1 hour using spring framework and insert data particular data in DB.
    At the first run of the chart, i’d like to load using ajax call only the 1 hour json data. After the chart is loaded and selecting a range i need to go and get using ajax a 30 minutes data from db and further getting 1 minute data json. All of these because i have a big data load bigger than 10 MB if i load minutes data.

    Besides all of these i need to load multiple logarithmic charts in the same CanvasJS chart object, maybe around 5 charts, I know is possible.
    Right now i’m trying to figure out if canvasjs is the library i need for supporting all of these and trying to mock the data from backend in the example from jsfiddle.
    What would you recommend for my above business case?

    Thank a lot,
    unixssh

    • This reply was modified 6 months, 3 weeks ago by  unixssh.
    #20841

    Vishwas R
    Keymaster

    @unixssh,

    You can perform data filtering based on zoom-range. Initially you can read all data using AJAX and then pass dataPoints to chart based on zoomed-range whether its 30 minutes or 1 minute. Please take a look at this jsfiddle for an example on data-filtering based on zoomed-range.

    moving the code to rangeChanged function it seems the chart is not render properly and i don’t understand why

    In the jsfiddle you have shared, you are generating new dataPoints with x-value as date-time which is outside the range you have zoomed. Because of which you may find chart to be blank, without any dataPoints, after zooming to a certain region.


    Vishwas R
    Team CanvasJS

    #20843

    unixssh
    Member

    Hi Vishwas,

    Thanks a lot for all the hints. As i see rangeChainging/rangeChanged functions are triggered only if you select an expected time range. Can this be modified for a custom range?

    Thx,
    Unixssh

    #20849

    Vishwas R
    Keymaster

    @unixssh,

    rangeChanging and rangeChanged are triggered everytime when viewportMinimum or viewPortMaximum are updated while zooming, panning, or reset. If you like to perform some task within rangeChanging/rangeChanged for custom range, you can add a condition to check the range before the actual functionality.

    rangeChanging: function(e) {
        if(e.axisX[0].viewportMinimum > customRangeMinimum && e.axisX[0].viewportMaximum < customRangeMaximum) {
            //Your code goes here
        }
    }


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.