Hi, in the chart sample on candlesticks, the x-axis is given as a category axis and expects a string as a label. How do I display and format a date as a label instead?
Thanks,
Roy
Hi, KianMing Lai
You can use the formatLabel option of the axis object for that purpose. The function specified with the option takes the current data item as an input argument and returns a formatted string to be plotted as axis label.
Look at this example:
Here we configure a categoryX axis with an anonymous function for the formatLabel option. The function takes the Timestamp property of the data attached to the chart and creates string to be used for label.
Cheers, Lazar
Hi Lazar,
Thank you for the reply.
Unfortunately, the solution is unable to work because the Date property in my code (equiv to your Timestamp) is not a recognised as a javascript Date.
It is databound to a C# DateTime type from the controller. The label is shown as something similar to /Date(1289923200000)/.
Do you have another solution to this?
Regards,
Roy,
Sorry for the late reply. This slipped through the cracks, somehow. JSON date serialization is in a pretty annoying state at present. One option you have is to render the dates to strings on the server. Or if you want them to fly over the wire as dates and adjust them on the client you just may need to get them into the right format for display for the chart. One way of going about this is something like this:
$("#chart1").igDataChart("option", "axes", [{ name: "xAxis", formatLabel: function (value) { var val = new Date(parseInt(value.Date.substr(6))), ret = val.getMonth() + 1 + "/" + val.getDate() + "/" + val.getFullYear(); return ret; } }]);
Hope this helps!
-Graham
Lazar's version may have actually been MVC 4 specific, as they may do something more automatic for JSON dates by that stage. But I saw the output you were seeing when using MVC3. The snippet I provide should help adjust that date format for display.