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([{value: 20, hatchFill: {type: "checkerboard"}}, 30, -10, {value: 20, hatchFill: {type: "checkerboard"}}, -35, {value: -15, hatchFill: {type: "checkerboard"}}, -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("checkerboard");
23
chart1.negativeFill("lightGray");
24
chart1.fill("lightGray");
25
chart2.negativeFill("lightGray");
26
chart2.fill("lightGray");
27
28
// set container id for the charts
29
chart1.container(stage);
30
chart2.container(stage);
31
32
// initiate chart drawing
33
chart1.draw();
34
chart2.draw();
35
36
});