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
chart1.seriesType("column");
7
chart2.seriesType("column");
8
9
chart1.title("Column 1");
10
chart2.title("Column 2");
11
12
// create data for both charts
13
chart1.data([-20, 30, 50, -10, 25, -50, 70, 10]);
14
chart2.data([20, 30, -10, 20, -35, -15, -40, 50]);
15
16
// set charts dimensions and position
17
chart1.bounds(0, 0, 300, 40);
18
chart2.bounds(0, 50, 300, 40);
19
20
// color the rest points in the same low-opacity color to make the special points of the data more noticeable
21
chart1.fill("green .3");
22
chart1.negativeFill("green .3");
23
chart2.fill("green .3");
24
chart2.negativeFill("green .3");
25
26
// colorize our charts
27
chart1.firstFill("darkRed");
28
chart1.lastFill("green");
29
chart2.firstFill("darkRed");
30
chart2.lastFill("green");
31
32
// set container id for the charts
33
chart1.container(stage);
34
chart2.container(stage);
35
36
// initiate chart drawing
37
chart1.draw();
38
chart2.draw();
39
});