900_010_format.js
Previous Chapter Previous Page Next Page Table of content
As described in chapter Format, you can write your own formats. The format.js contains a function fmtChartJSPerso with some usefull pre-defined formats.
If you want to use those pre-defined formats, you have to include "Add-ins\format.js" in your html file just after the include of ChartNew.js.
Here after, you will find the list of formats defined in format.js.
A sample that uses the format.js add-in can be found in Samples\add-ins_format.html.
When the value to be formatted is a date/time value, you can easely change the form that the value is displayed.
If you specify "date" as format, the date/time value will be displayed as a date under the default format of your device.
Example :
var datedata = {
labels: [new Date(2014,0,1,12,0,0), new Date(2014,1,1,12,15,0), new Date(2014,2,1,12,30,0), new Date(2014,3,1,12,45,0)],
datasets: [
{
fillColor: "rgba(220,0,0,0.5)",
strokeColor: "rgba(220,220,220,0.5)",
data: [20,10,47,35]
},
{
fillColor: "rgba(0,220,0,0.5)",
strokeColor: "rgba(220,220,220,0.5)",
data: [13,43,55,33]
},
{
fillColor: "rgba(0,0,220,0.5)",
strokeColor: "rgba(220,220,220,0.5)",
data:[45,37,39,41]
}
]
}
Without format, the chart is displayed like this :
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(datedata,{ graphTitle : "No Date Format"});
If you specify the format "date" for the X labels (option fmtXLabel), you get following chart.
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(datedata,{fmtXLabel : "date",graphTitle : "Format : date"});
This chart was produced on a device where the default display for a date is dd/mm/yyyy.
If you want to display the date in the standard notation of another country, you just have to add a parameter after the date. For instance, you can display the date in the american standard (mm/dd/yyyy) by specifying "date en-US".
REMARK : "date" followed by other parameters is not recognised on IOS devices.
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(datedata,{fmtXLabel : "date en-US",graphTitle : "Format : date en-US"});
After the "date" in the format, you can put any value allowed by the javascript function toLocaleDateString().
After this parameter, you can also add options values allowed by function toLocaleDateString().
Example :
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(datedata,{fmtXLabel : "date de-DE weekday: long, year: numeric, month: long, day: numeric",graphTitle : "Format : date de-DE weekday: long, year: numeric, month: long, day: numeric"});
When the value to be formatted is a number, you can easely change the form that the value is displayed. Using format "abreviateNumber", you can display it with a suffix "k", "m", "b" or "t".
1000 -> 1k -10 000 -> -10k 1000 000 -> 1m
Example : see Sample/add-ins_format.html
When the value to be formatted is a date/time value, you can easely change the form that the value is displayed.
The "date" format explained in previous chapter is a first possibility. Another way of displaying date on another date is to use "fmtdate" followed by "dd", "mm", "yy" or "yyyy" with "/" between.
If you want to only display the month and the year, use mm/yyyy (or yyyy/mm or mm/yy or yy/mm).
Example :
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(datedata,{fmtXLabel : "fmtdate mm/yyyy",graphTitle : "Format : fmtdate mm/yyyy"});
When the value to be formatted is a date/time value, you can easely change the form that the value is displayed.
If you specify "time" as format, the date/time value will be displayed as a time under the default format of your device.
Example :
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(datedata,{fmtXLabel : "time",graphTitle : "Format : time"});
When the value to be formatted is a date/time value, you can easely change the form that the value is displayed.
The "time" format explained in previous chapter is a first possibility. Another way of displaying time is to use "fmttime" followed by "hh", "mm" or "ss" .
If you want to only display the hour and the minutes, use hh:mm.
You can use something like hh hours and mm minutes, as well.
Example :
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(datedata,{fmtXLabel : "fmttime hh:mm",graphTitle : "Format : fmttime hh:mm"});
It is also possible to use date and time at the same moment:
fmtXLabel fmtdatetime MM/DD/YY HH:mm:ss would generate sth. like 02/18/96 22:02:43
Important: you have to use MM for month and mm for minute so the abbr. are case sensitive!