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:

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

CSV file:

DyGraph JavaScript: