Wednesday, September 16, 2015

Plot a chart from CSV using JavaScript

This tutorial demonstrates how to use a CSV file to plot a chart graph using DyGraph jQuery API which is a JavaScript. Dygraphs is a fast, flexible open source JavaScript charting library.It allows users to explore and interpret dense data sets. Check dygraphs tutorials and gallery for more. Here goes the code:

<html>
<head>
    <script type="text/javascript" src="/Scripts/dygraph-combined-dev.js"></script>
</head>
<body>
    <div id="graphdiv2" style="width: 100%; height: 100%;">
    </div>
    <script type="text/javascript">
        g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "timecpu.csv",
    {
        xlabel: " Time (ms) --> ",
        ylabel: " Usage (%) -->",
        title: "Time vs System Load",
        showRangeSelector: true,
        rangeSelectorHeight: 30,
        rangeSelectorPlotStrokeColor: 'black',
        rangeSelectorPlotFillColor: 'grey'
    }
  );
    </script>
</body>
</html> 
Output:


CSV file: http://www.mediafire.com/view/ikgimeqo24onna4/timecpu.csv

DyGraph JavaScript: http://dygraphs.com/download.html