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 data
4
var data = [
5
{x: Date.UTC(2000, 01, 01), value: 78},
6
{x: Date.UTC(2001, 06, 11), value: 74},
7
{x: Date.UTC(2002, 02, 25), value: 68},
8
{x: Date.UTC(2003, 07, 21), value: 76},
9
{x: Date.UTC(2004, 08, 08), value: 80},
10
{x: Date.UTC(2005, 04, 15), value: 84},
11
{x: Date.UTC(2006, 03, 19), value: 50},
12
{x: Date.UTC(2007, 11, 05), value: 93},
13
{x: Date.UTC(2008, 04, 22), value: 55}
14
];
15
16
// create a chart
17
var chart = anychart.scatter();
18
19
// create a marker series and set the data
20
var series = chart.marker(data);
21
22
// set the output date format
23
anychart.format.outputDateFormat("yyyy");
24
25
// create a date/time scale
26
var dateScale = anychart.scales.dateTime();
27
28
// configure major and minor ticks on the date/time scale
29
dateScale.ticks().interval(1);
30
dateScale.minorTicks().interval(0, 2);
31
32
// set the date/time as the x-scale
33
chart.xScale(dateScale);
34
35
// disable tooltips
36
series.tooltip(false);
37
38
// enable major grids
39
chart.xGrid(true);
40
chart.yGrid(true);
41
42
// enable minor grids
43
chart.xMinorGrid(true);
44
chart.yMinorGrid(true);
45
46
// set the chart title
47
chart.title("Scatter Plot: Date/Time Scale");
48
49
// set the container id
50
chart.container("container");
51
52
// initiate drawing the chart
53
chart.draw();
54
});