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
var stage = anychart.graphics.create("container");
3
// create charts
4
chart1 = anychart.sparkline();
5
chart2 = anychart.sparkline();
6
7
chart1.seriesType("win-loss");
8
chart2.seriesType("win-loss");
9
10
chart1.title("WL 1");
11
chart2.title("WL 2");
12
13
// create data for both charts
14
chart1.data([-20, 30, 50, -10, 25, -50, 70, 10]);
15
chart2.data([20, 30, 0, 20, -35, -15, -40, 50]);
16
17
// set charts dimensions and position
18
chart1.bounds(0, 0, 300, 40);
19
chart2.bounds(0, 50, 300, 40);
20
21
// colorize our charts
22
chart1.negativeHatchFill("diagonal");
23
chart1.negativeFill("lightGray");
24
chart1.fill("lightGray");
25
chart2.negativeFill("lightGray");
26
chart2.negativeHatchFill("diagonal");
27
chart2.fill("lightGray");
28
29
// set container id for the charts
30
chart1.container(stage);
31
chart2.container(stage);
32
33
// initiate chart drawing
34
chart1.draw();
35
chart2.draw();
36
37
});