FORUMS

Select any forum below to ask question

Home › forums › Using CanvasJS › graph with csv file

This topic contains 4 replies, has 2 voices, and was last updated by  Stella 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • October 15, 2018 at 1:17 pm #23058

    Stella
    Member

    hi, i have tried the graph with csv data but it didnt display my data on the graph.
    here ismy coding

    <!DOCTYPE HTML>
    <html>
    <head>
    <?php
    if(isset($_POST[‘submit’])){
    $filename = $_FILES[‘update_file’][‘name’];
    $file = fopen($filename,”r”)
    or die(‘Error occurred when open the file ‘ . $filename );

    $table = array();
    while($handle = fgetcsv($file))
    {
    var_dump($handle);
    }
    fclose($file);
    // $json = json_encode($andle);

    ?>
    <script>
    window.onload = function () {

    var dataPoints = <?= $handle ?> ;

    var chart = new CanvasJS.Chart(“chartContainer”, {
    animationEnabled: true,
    exportEnabled: true,
    title:{
    text: “Temperature per 5 mins”
    },
    axisY: {
    title: “Temperature”,
    includeZero: false
    },
    data: [{
    type: “line”,
    //toolTipContent: “{y} metric tons”,
    dataPoints: dataPoints
    }]
    });
    //chart.render();

    $.get(“#update_file”, getDataPointsFromCSV);

    //var updateInterval = 30000;
    //setInterval(function () { updateChart() }, updateInterval);

    function getDataPointsFromCSV(csv) {
    var csvLines = points = [];
    csvLines = csv.split(/[\r?\n|\r|\n]+/);
    for (var i = 0; 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>
    <?php
    }
    ?>
    </head>
    <body>

    <script type=”text/javascript” src=”https://canvasjs.com/assets/script/jquery-1.11.1.min.js”></script>
    <script src=”https://canvasjs.com/assets/script/canvasjs.min.js”></script>

    <form method=”POST” enctype=”multipart/form-data”>

    <input type=”file” name=”update_file”/>
    <button type=”submit” name=”submit”>Update</button>
    </form>
    <br/>

    <div id=”chartContainer” style=”height: 370px; width: 100%;”></div>
    </body>
    </html>

    October 15, 2018 at 2:25 pm #23060

    Priyanka M S
    Member

    @stella,

    Can you kindly share a sample project reproducing the issue you are facing along with a sample CSV file over Google-Drive or Onedrive, so that we can look into your code, understand it better and help you out?

    __
    Priyanka M S
    Team CanvasJS

    October 15, 2018 at 2:56 pm #23062

    Stella
    Member

    Here is the sample of csv file
    https://drive.google.com/open?id=1yTU-vKbZck6t5h8_81ZSu5JUU-yVzvB0

    October 16, 2018 at 6:08 pm #23079

    Priyanka M S
    Member

    @stella,

    Please take a look at this updated PHP file, which renders the chart using the data in CSV file (readcsv.csv).

    __
    Priyanka M S
    Team CanvasJS

    October 16, 2018 at 6:49 pm #23083

    Stella
    Member

    hi, that works well. Thank you :)

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

You must be logged in to reply to this topic.