Home forums Using CanvasJS import csv and display

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

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

    hello,
    I created a graph with a csv import bme280 data. I can not get all the data displayed.
    I do not understand
    thancks for your help !
    Paladyn

    Source
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

    <script type=”text/javascript”>
    // TEMPERATURE **********************************************

    window.onload = function() {

    var dataPoints = [];

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    exportEnabled: true,
    theme: “light”,
    title: {
    text: “Temperatures Raspberry TEST 3”
    },
    axisX:{
    labelFontSize: 12,

    },
    axisY:[{
    title: “Temp”,
    lineColor: “#C24642”,
    tickColor: “#C24642”,
    labelFontColor: “#C24642”,
    titleFontColor: “#C24642”,
    labelFontSize: 16,
    suffix: “c”,
    minimum: -15,
    maximum: 50,

    },
    {
    title: “Hum”,
    lineColor: “#369EAD”,
    tickColor: “#369EAD”,
    labelFontColor: “#369EAD”,
    titleFontColor: “#369EAD”,
    labelFontSize: 16,
    suffix: “%”,
    minimum: 40,
    maximum: 100,

    },
    ],
    axisY2: [{
    title: “Pres”,
    lineColor: “#7F6084”,
    tickColor: “#7F6084”,
    labelFontColor: “#7F6084”,
    titleFontColor: “#7F6084”,
    labelFontSize: 16,
    suffix: “Hpa”,
    minimum: 990,
    maximum: 1100,

    },
    ],
    data: [{
    toolTipContent: “{z} c”,
    type: “spline”,
    axisYIndex: 0,
    name: “Temp”,
    color: “#C24642”,
    showInLegend: true,
    dataPoints: dataPoints

    },
    {
    toolTipContent: “{p} %”,
    type: “spline”,
    axisYIndex: 0,
    name: “Hum”,
    color: “#369EAD”,
    showInLegend: true,
    dataPoints: dataPoints
    },
    {
    toolTipContent: “{y} bar”,
    type: “spline”,
    name: “Pres”,
    color: “#7F6084”,
    axisYType: “secondary”,
    axisYIndex: 2,
    showInLegend: true,
    dataPoints: dataPoints

    },
    ]
    });

    $.get(“../data.csv”, getDataPointsFromCSV);
    chart.render();
    //CSV Format
    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],
    z: parseFloat(points[1]),
    p: parseFloat(points[3]),
    y: parseFloat(points[2]),
    });

    }
    }
    chart.render();
    }

    }
    </script>

    </head>
    <body>

    <div id=”chartContainer” style=”height: 450px; width: 100%;”></div>
    <script src=”jquery.min.js”></script>
    <script src=”canvasjs.min.js”></script>

    </body>
    </html>

    #25050

    @paladyn,

    Please take a look at this documentation page for step by step tutorial on rendering chart using data from CSV.

    In case you are still facing the issue, please create a JSFiddle with an appropriate data source, reproducing the same so that we can look into the code, understand it better and help you out.


    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.