-
Notifications
You must be signed in to change notification settings - Fork 1
/
example2.html
69 lines (66 loc) · 2.79 KB
/
example2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<title>JTV Area Range Line chart in d3 Example 2</title>
<meta charset="utf-8">
<link href="css/jtv.arearange.line.css" rel="stylesheet">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="js/jtv.arearange.line.js"></script>
</head>
<body>
<div id="errorchart" style="width: 1500px; height: 500px;"></div>
<script>
var container = "errorchart";
/*
* Preparing json data containing X-axis as String
* Number of keys in json draw no. of lines and area(Here we provide 2 keys)
*/
var retdata = [
{
key: "Registered",
values : [
{"date": "Week1","low": 3,"high": 5, "avg": 4},
{"date": "Week2","low": 1,"high": 3,"avg": 2},
{"date": "Week3","low": 4,"high": 6,"avg": 5},
{"date": "Week4","low": 6,"high": 8,"avg": 7},
{"date": "Week5","low": 5,"high": 7,"avg": 6}
]
},
{
key: "Subscribed",
values : [
{"date": "Week1","low": 6,"high": 9, "avg": 7},
{"date": "Week2","low": 3,"high": 5,"avg": 4},
{"date": "Week3","low": 5,"high": 7,"avg": 6},
{"date": "Week4","low": 2,"high": 4,"avg": 3},
{"date": "Week5","low": 6,"high": 8,"avg": 7}
]
},
];
//Providing chart options
var options = {
axes : {
xLabel : "Date", // X Label Text
yLabel : "Count", // Y Label Text
yAxisLabelPos : "outer", //inner or blank will set the Y-axis label position in inner side, (e.g. inner or outer)
xScale : "str" //For date time in X-axis, provide 'datetime' (e.g. datetime, str)
},
lineOpt : {
strokeWidth : 1,
areaOpacity : 0.5,
interpolate : "cardinal" //Different shape of the line and area(i.e linear, cardinal, monotone etc)
},
legend : {
enable : true,
legendType : 'circle' //Different shape of the legends(i.e. circle, rectangle)
},
background : {
bgColor : "#FFF",
gridlineWidth : 0.1,
noofGrids : 10
}
};
jtvd3.component.drawLineChart(container, retdata, options);
</script>
</body>
</html>