1. JavaScript Charting Library
Dygraphs
JavaScript Charting Library

2. 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.

3. 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

4. 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" />

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

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

7. 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.

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

9. 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" ] } );

10. 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 12
2009/07/12 12:34
2009/07/12 12:34:56

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

12. 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(

13. 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" ] } );

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

15. 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

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

17. 5.Examples

18. 5.1 – Example 1

19. 5.1 – Example 1 : Result

20. 5.2 – Example 2

21. 5.2 – Example 2 : Result

22. 5.2 – Example 2_1

23. 5.2 – Example 2_1 : Result

24. 5.3 – Example 3

25. 5.3 – Example 3 : Result

26. 5.4 – Example 4

27. 5.4 – Example 4 : Result

28. 5.5 – Example 5

29. 5.5 – Example 5 : Result

30. 5.6 – Example 6

31. 5.6 – Example 6 : Result

32. 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
});

33. 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)

34. 6.2 - One Example
Dynamically Updated Data

35. 6.2 – Example

36. 6.2 – Example : Result

37. Course : Data Mining
Presenter : M. Ali Tabatabaie