HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create a data set
4
var data = anychart.data.set([
5
["Jan", 1.25, 2.25],
6
["Feb", 1.25, 2.25],
7
["Mar", 1.5, 2.5],
8
["Apr", 1.5, 2.5],
9
["May", 1.75, 2.75],
10
["Jun", 1.75, 2.75],
11
["Jul", 1.75, 2.75],
12
["Aug", 2, 3],
13
["Sep", 2, 3],
14
["Oct", 2.25, 3.25],
15
["Nov", 2.25, 3.25],
16
["Dec", 2.5, 3.5]
17
]);
18
19
// map the data
20
var seriesData_1 = data.mapAs({x: 0, value: 1});
21
var seriesData_2 = data.mapAs({x: 0, value: 2});
22
23
// create a chart
24
var chart = anychart.jumpLine();
25
26
// set the interactivity mode
27
chart.interactivity().hoverMode("single");
28
29
// create the first series, set the data and name
30
var series1 = chart.jumpLine(seriesData_1);
31
series1.name("2004");
32
33
// configure the visual settings of the first series
34
series1.normal().stroke("#00cc99", 1, "10 5", "round");
35
series1.hovered().stroke("#00cc99", 2, "10 5", "round");
36
series1.selected().stroke("#00cc99", 4, "10 5", "round");
37
38
// create the second series, set the data and name
39
var series2 = chart.jumpLine(seriesData_2);
40
series2.name("2005");
41
42
// configure the visual settings of the second series
43
series2.normal().stroke("#0066cc");
44
series2.hovered().stroke("#0066cc", 2);
45
series2.selected().stroke("#0066cc", 4);
46
47
// set the chart title
48
chart.title("Jump Line Chart: Appearance");
49
50
// set the titles of the axes
51
chart.xAxis().title("Month");
52
chart.yAxis().title("Rate, %");
53
54
// set the container id
55
chart.container("container");
56
57
// initiate drawing the chart
58
chart.draw();
59
});