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
// define chart
4
var chart = anychart.column();
5
6
// setting chart title
7
chart.title("Date/Time Scale Sample");
8
9
// setting y scale type as dateTime and adjusting minimum and maximum values
10
var dateScale = anychart.scales.dateTime();
11
dateScale.minimum(Date.UTC(1999, 00, 01));
12
dateScale.maximum(Date.UTC(2005, 00, 01));
13
chart.yScale(dateScale);
14
var yTicks = chart.yScale().ticks();
15
yTicks.interval(1);
16
17
// setting data
18
var series = chart.rangeColumn([
19
{x: "Development", low: Date.UTC(2000, 01, 01), high: Date.UTC(2002, 02, 15)},
20
{x: "Internal Testing", low: Date.UTC(2001, 06, 01), high: Date.UTC(2003, 07, 01)},
21
{x: "Field Tests", low: Date.UTC(2002, 02, 25), high: Date.UTC(2003, 07, 01)},
22
{x: "Licensing", low: Date.UTC(2003, 07, 01), high: Date.UTC(2004, 07, 01)}
23
]);
24
series.tooltip(false);
25
26
// adjusting labels for dateTime scale. Otherwise it would be the number of milliseconds between the date and midnight January 1 1970
27
var yLabels = chart.yAxis().labels();
28
yLabels.format(function(value) {
29
var date = new Date(value["value"]);
30
var options = {year: "numeric"};
31
return date.toLocaleDateString("en-US", options);
32
});
33
34
// setting axis title
35
var yAxis = chart.yAxis();
36
yAxis.title("Date/Time Scale");
37
38
chart.container("container");
39
chart.draw();
40
});