Home forums Using CanvasJS Dynamic CSV chart

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #25402

    I have a CSV file that I want to use for the dynamic chart. I managed to import the CSV data to the chart. But when I try to make the chart dynamic, it generates all these random numbers on X axis when it is supposed to be times and the line graph was going all over the place.

    This is the script:

    <script type=”text/javascript”>
    window.onload = function() {

    var dataPoints = [];

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    backgroundColor:”transparent”,
    axisY: {
    title: “MW”,
    includeZero: false,
    gridThickness: 0,
    valueFormatString: “#”,
    },
    axisX: {
    gridThickness: 0,
    labelAngle: -90,
    maximum: 15
    },
    data: [{
    type: “line”,
    markerSize: 0,
    dataPoints: dataPoints
    }]
    });

    chart.render();

    var xVal = dataPoints.length + 1;
    var xVal = dataPoints.length + 1;
    var yVal = 100;
    var updateInterval = 1000;

    var updateChart = function () {

    yVal = yVal + Math.round(5 + Math.random() *(-5-5));
    dataPoints.push({x: xVal,y: yVal,});

    xVal++;

    chart.render();

    // update chart after specified time.

    };
    setInterval(function(){updateChart()}, updateInterval);

    $.get(“./assets/csv/chart.csv”, getDataPointsFromCSV);

    //CSV Format
    //Year,Volume
    function getDataPointsFromCSV(csv) {
    var points;
    var csvLines = csv.split(/[\r?\n|\r|\n]+/);
    for (var i = 1; i < csvLines.length; i++) {
    if (csvLines[i].length > 0) {
    points = csvLines[i].split(“,”);
    dataPoints.push({
    label: points[0],
    y: parseFloat(points[1])
    });
    }
    }
    chart.render();
    }

    }
    </script>
    The csv file:
    Col 1 Col 2

    Time Utility
    00:00:03 EST 422
    00:00:08 EST 416
    00:00:13 EST 418
    00:00:19 EST 422
    00:00:23 EST 416
    00:00:28 EST 416
    00:00:33 EST 417
    00:00:39 EST 418
    00:00:44 EST 422
    00:00:49 EST 425
    00:00:54 EST 426
    00:00:59 EST 415

    Please advice. Thank you!

    #25434

    @nickneyland,

    The dataPoints seems to be random as they are generated using random method and are not from CSV. Please take a look at this JSFiddle for Dynamic chart from CSV.


    Vishwas R
    Team CanvasJS

    #25470

    Hi Vishwas,

    Thank you for your help. I tried the sample code you provided and it worked. But the only problem is that it is squeezing all the datas to the left. Is there a way to customize how much data to show? And what is the correct way I should create the csv file?
    This is the data I have:
    Time(X Axis) Utility (Y Axis)
    00:00:03 EST 422
    00:00:08 EST 416
    00:00:13 EST 418
    00:00:19 EST 422
    00:00:23 EST 416
    00:00:28 EST 416
    00:00:33 EST 417
    00:00:39 EST 418
    00:00:44 EST 422
    00:00:49 EST 425
    00:00:54 EST 426
    00:00:59 EST 415

    Original I had it like this:
    00:00:03 EST,422
    00:00:08 EST,416
    00:00:13 EST,418
    00:00:19 EST,422
    00:00:23 EST,416
    00:00:28 EST,416
    00:00:33 EST,417
    00:00:39 EST,418
    00:00:44 EST,422
    00:00:49 EST,425
    00:00:54 EST,426
    00:00:59 EST,415

    but the value was not showing properly on the X axis.

    Thank you in advance!

    #25501

    @nickneyland,

    You can show last few set of dataPoints with the help of shift method. Please take a look at this documentation page for step to step tutorial on creating Dynamic Charts.

    I would suggest you to store CSV in date-time,value format. Please take a look at this updated JSFiddle for an example with Jun 10 2019 00:00:03 EST,422 format.


    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.