Chart Plugin Dygraphs.js plugin use

This article is designed to document your own use process

Dygraphs in fact and Echarts almost, personally think the former self-customization function is very strong and not based on the canvas so performance is much better than echarts. Start here:

1. Prepare a div

<div id= "Container_dy" style= "width:600px; height:300px; " ></div>

2. Data preparation and data format requirements

Dygraphs Five kinds of instructions for data format (http://dygraphs.com/data.html)

　　

In the development process we use the CSV data format, other formats please check the official website detailed description.

Use AJAX requests to request background processing of good data

var data =
"2011-01-01," + math.random () *100 + "\ n" +
"2011-01-02," + math.random () *100 + "\ n" +
"2011-01-03," + math.random () *100 + "\ n" +
"2011-01-04," + math.random () *100 + "\ n" +
"2011-01-05," + math.random () *100 + "\ n" +
"2011-01-06," + math.random () *100 + "\ n" +
"2011-01-07," + math.random () *100 + "\ n" +
"2011-01-08," + math.random () *100 + "\ n" +
"2011-01-09," + math.random () *100 + "\ n" +
"2011-01-10," + math.random () *100 + "\ n" +
"2011-01-11," + math.random () *100 + "\ n" +
"2011-01-12," + math.random () *100 + "\ n" +
"2011-01-13," + math.random () *100 + "\ n" +
"2011-01-14," + math.random () *100 + "\ n" +
"2011-01-15," + math.random () *100 + "\ n" +
"2011-01-16," + math.random () *100 + "\ n" +
"2011-01-17," + math.random () *100 + "\ n" +
"2011-01-18," + math.random () *100 + "\ n" +
"2011-01-19," + math.random () *100 + "\ n" +
"2011-01-20," + math.random () *100 + "\ n" +
"2011-01-21," + math.random () *100 + "\ n" +
"2011-01-22," + math.random () *100 + "\ n" +
"2011-01-23," + math.random () *100 + "\ n" +
"2011-01-24," + math.random () *100 + "\ n" +
"2011-01-25," + math.random () *100 + "\ n" +
"2011-01-26," + math.random () *100 + "\ n" +
"2011-01-27," + math.random () *100 + "\ n" +
"2011-01-28," + math.random () *100 + "\ n" +
"2011-01-29," + math.random () *100 + "\ n" +
"2011-01-30," + math.random () *100 + "\ n" +
"2011-01-31," + math.random () *100 + "\ n";

The above format is CSV format.

3. Drawing

Core approach

var g = new Dygraph (Div,                data,                {                  option1:value1,                  option2:value2,                  ...                });
Div: The page is well-defined graphics container, document.getElementById ("id");
Data: Background processing good back to the foreground, such as the CSV format;
{} fill in the plug-in for this map to prepare some properties, such as: Legend, etc., the official website gave a lot, choose their own to use. For details, refer to http://dygraphs.com/options.html

The properties used here are as follows:

var g =

New Dygraph (
document.getElementById ("Div_g"),
Data
{
Legend: "Always",
Title: "Line Name",//The name of the chart
titleheight:25,//defines the height of the chart name text
Labels: [' Date ', ' Value '],//specifies the meaning of the X and Y axes
highlightcirclesize:5,//specifies the dynamic representation of a vertex when the mouse is placed on a specific vertex
strokewidth:2,//define the thickness of a line
Maxnumberwidth:30,//specifying the maximum width of a number
colors:echartlinecolor,//multi-curve array, color of each line
connectseparatedpoints:true,//If two points are not contiguous this property is true when the connection is forced to two points
Whether the includezero:true,//y axis shows 0 points
Highlightseriesopts:
{
Strokewidth:2,
Strokeborderwidth:1,
Highlightcirclesize:5
},
Legendformatter:function (data)
{
var returnstring = "";
var dataList = data.series;
var datestring = "";
for (var index = 0; index < datalist.length; index++)
{
var dataobj = Datalist[index];
if (dataobj.ishighlighted)
{
if (window.event)
{
var width = parsefloat ("600px");
var height = parsefloat ("300px");
$ ("#div_g. Dygraph-legend"). CSS ({
"Position": "Absolute",
"Background": "#c3c7cc",
"Opacity": "0.5",
"Color": "Red",
"Top": Window.event.offsetY > Height? (Window.event.offsetY + "px")
: (Window.event.offsetY + + "px"),

"Left": Window.event.offsetX > WIDTH/2? (Window.event.offsetX + "px")
: (Window.event.offsetX + "px")});

datestring = data.xhtml;

returnstring = ' <span>date: '
+ datestring
+ ' <br/>value: ' + dataobj.yhtml
+ ' </span> ';
}
Break
}
}

return returnstring;
},

Set two-axis data display format and font size, etc.

Axes:
// {
X:
{//Display time seconds
Axislabelformatter:function (param)
// {
var xx = param;
return param. Format ("Yyyy-mm-dd HH:mm:ss");
// },
Axislabelwidth:70,
Axislabelfontsize:10
// },
Y:
// {
AXISLABELWIDTH:80,
Axislabelfontsize:11
// }
// }

Final Display effect:

These are just the features that you use in your project, and there are more features that need to be researched.

Chart Plugin Dygraphs.js plugin use