JavaScript Charting Library Dygraphs JavaScript Charting Library

Dygraphs is a fast, flexible open source JavaScript charting library Dygraphs is a fast, flexible open source JavaScript charting library. It allows users to explore and interpret dense data sets.

1.Features Handles huge data sets Interactive GUI : zoom, pan and mouse over are on by default Highly customizable : by using options and custom callbacks Works in all recent browsers

2.Installation Include dygraph.js and dygraph.css Locally or use CDN <script src="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.js"></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dygraph/2.0.0/dygraph.min.css" />

3.How to Plot? Containing DIV g = new Dygraph(div, data, { option1: value1, option2: value2, ... } ); Raw CSV Data or CSV File Options (Object)

4.Data Argument There are four types of input that Dygraphs will accept: CSV data => Mostly Used URL array (native format) DataTable

4.1 - CSV data Date,Series1,Series2 2009/07/12,100,200 # comments are OK on data lines 2009/07/19,150,201 The data can be tab-delimited too. The delimiter is set by the delimiter option. The default is ",". If no delimiter is found in the first row, it switches over to tab.

4.1 - CSV data CSV parsing can be split into three parts: Headers x-values y-values

4.1 - CSV data Headers : If you don't specify the labels option, Dygraphs will look at the first line of your CSV data to get the labels. new Dygraph(div, // "Date,Series1,Series2\n“ + "2009/07/12,100,200\n" + "2009/07/19,150,201\n", { labels: [ "Date", "Series1", "Series2" ] } );

4.1 - CSV data x-values : Once the headers are parsed, Dygraphs needs to determine what the type of the x values is. They're either dates or numbers Here are some valid date formats: 2009-07-12 2009/07/12 2009/07/12 12 2009/07/12 12:34 2009/07/12 12:34:56

4.1 - CSV data y-values : Dependent (y-axis) values are simpler than x-values because they're always numbers.

4.2 - URL If you pass in a URL, Dygraphs will issue an XMLHttpRequest (XHR) for it and attempt to parse the returned data as CSV. Make sure the URL is accessible and returns data in text format (as opposed to a CSV file with an HTML header(

4.3 - Array If you'll be constructing your data set from a server-side program then you're better off producing an array than CSV data. This saves the cost of parsing the CSV data and also avoids common parser errors. new Dygraph(div, [ [1,10,100],[2,20,80],[3,50,60],[4,70,80] ], { labels: [ "x", "A", "B" ] } );

4.3 - Array Headers : Headers for native format must be specified via the labels option. There's no other way to set them.

4.3 - Array x-values : If you want your x-values to be dates, you'll need to use specify a Date object in the first column. Otherwise, specify a number. Here's a sample array with dates on the x-axis: [ [ new Date("2009/07/12"), 100, 200 ], [ new Date("2009/07/19"), 150, 220 ] ] y-values : The same as CSV Data

4.4 – Data Table You can also specify a Google Visualization Library DataTable object as your input data

5.Examples

5.1 – Example 1

5.1 – Example 1 : Result

5.2 – Example 2

5.2 – Example 2 : Result

5.2 – Example 2_1

5.2 – Example 2_1 : Result

5.3 – Example 3

5.3 – Example 3 : Result

5.4 – Example 4

5.4 – Example 4 : Result

5.5 – Example 5

5.5 – Example 5 : Result

5.6 – Example 6

5.6 – Example 6 : Result

6.Update Options After you've created a Dygraph, you can change an option by calling the updateOptions method: g.updateOptions({ new_option1: value1, new_option2: value2 });

6.1 - file Option (in updateOptions) Sets the data being displayed in the chart. This can only be set when calling updateOptions; it cannot be set from the constructor. Type: string (URL of CSV or CSV), 2D Array Default: (set when constructed)

6.2 - One Example Dynamically Updated Data

6.2 – Example

6.2 – Example : Result

Course : Data Mining Presenter : M. Ali Tabatabaie