MindFusion.Charting for JavaScript Programmer's Guide
Using DateTime Values

The DateTimeSeries class implements the necessary functionality that allows using DateTime values as chart data. Let's create a list with DateTime values:

JavaScript Copy Code
var years = new Collections.List(); var dt = new Date(new Date().getFullYear() - 10, 11, 32); for (;;) { if (dt.getFullYear() > new Date().getFullYear()) break; years.add(new Date(dt.setFullYear(dt.getFullYear() + 1))); }

We'll need some numeric data:

JavaScript Copy Code
var income = new Collections.List([13.2, 15.6, 17.8, 39, 20, 29, 79, 101, 120, 122]);

Now we can create the DateTime series. The constructor takes as parameters a list of numbers, a list of DateTime values and the start and end DateTime of the series:

JavaScript Copy Code
var series = new Charting.DateTimeSeries(years, income, years.item(0), years.item(years.count() - 1));

The minValue and maxValue properties specify the numbers which correspond to the minDate and maxDate properties in the series:

JavaScript Copy Code
series.minValue = 0; series.maxValue = 1;

There are many ways to format a DateTime value and the dateTimeFormat property lets you specify one. In our case we want custom DateTime formatting and we set:

JavaScript Copy Code
series.dateTimeFormat = Charting.DateTimeFormat.CustomDateTime; series.customDateTimeFormat = '{"year":"numeric"}';

Finally we add the newly created series:

JavaScript Copy Code
chart.series.add(series);

Here is the chart with some styling: