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.line();
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.stroke("#00cc99", 1, "10 5", "round");
35
series1.hoverStroke("#00cc99", 2, "10 5", "round");
36
series1.selectStroke("#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.stroke("#0066cc");
44
series2.hoverStroke("#0066cc", 2);
45
series2.selectStroke("#0066cc", 4);
46
47
// set the chart title
48
chart.title("Jump Line Chart: Appearance");
49
50
// set the titles of the axes
51
var xAxis = chart.xAxis();
52
xAxis.title("Month");
53
var yAxis = chart.yAxis();
54
yAxis.title("Rate, %");
55
56
// set the container id
57
chart.container("container");
58
59
// initiate drawing the chart
60
chart.draw();
61
});