Home forums Using CanvasJS Charts from .csv on/off values

This topic contains 8 replies, has 2 voices, and was last updated by  James 11 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #17894

    James
    Member

    Hi,
    Maybe this is a silly question, but I did not find anything about that.

    I have a.csv like this:

    11/23/2017 16:30 On Off On Off Off Off Off
    11/23/2017 16:45 On Off On Off Off Off Off
    11/23/2017 17:00 On Off On Off Off Off Off
    11/23/2017 17:15 On Off On Off Off Off Off
    11/23/2017 17:30 On Off On Off Off Off Off
    11/23/2017 17:45 On Off On Off Off Off Off
    11/23/2017 18:00 On Off Off Off Off Off Off

    How do I create a chart with this?

    Thanks for any help

    #17900

    Suyash Singh
    Participant

    James,

    Are you looking for multi-series stepLine chart? If not, can you please provide us with some pictorial representation so that we can understand your requirements better & help you out?

    ___
    Suyash Singh
    Team CanvasJS

    #17906

    James
    Member

    Hi,
    yes, it should be a multi-series stepLine chart. I would like to have “on” acting as 1 and “off” as zero.
    How can I do this?

    #17916

    James
    Member

    Anyone has any ideas??

    #17919

    Suyash Singh
    Participant

    James,

    Please take a look at this jsfiddle.


    Suyash Singh,
    Team CanvasJS

    #17920

    James
    Member

    Thank you very much Suyash!

    #17922

    James
    Member

    Last question:

    How can I combine your code with this one:

    function getDataPointsFromCSV(csv) {
    var dataPoints, csvLines, points;
    dataPoints = csvLines = points = [];

    csvLines = csv.split(/[\r?\n|\r|\n]+/);
    for (var i = {param_chartStart}; i < csvLines.length; i++)
    if (csvLines[i].length > 0) {
    points = csvLines[i].split(“,”);

    chart.options.data[0].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[1])});
    chart.options.data[1].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[2])});
    chart.options.data[2].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[3])});
    chart.options.data[3].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[4])});
    chart.options.data[4].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[5])});
    chart.options.data[5].dataPoints.push({x: new Date(points[0]), y: parseFloat(points[6])});
    }
    }

    Thanks!

    #18279

    Suyash Singh
    Participant

    @james,

    Please have a look at this jsfiddle.

    ___
    Suyash Singh
    Team CanvasJS

    #18281

    James
    Member

    Great!! thanks a lot

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

You must be logged in to reply to this topic.