Home Forums Report Bugs Area Spline problem with DateTime values

Area Spline problem with DateTime values

Viewing 9 posts - 1 through 9 (of 9 total)
  • #9909

    I have a problem with my spline area chart and with the data i’m providing it. I’m providing data every 10 minutes (the interval for DateTime are about 10 minutes apart.

    Since I can’t upload attachments I provided a link to the log file showing the DateTime value from server side, then to the right showing the DateTime value after I converted it to “new Date(value)” which is what I supplied CanvasJS. Then to the right of that shows the Y-Value for each interval.

    Here are pictures of the problem (zoomed in with one series selected):
    Zoomed In

    Here is zoomed out (showing multiple series):

    Here is the attachment of the intervals:



    We looked into the log file and it seems like it gives a constant value,11, for y-value. But the screenshot you have uploaded has values less than that at every point.

    It would be better is you can reproduce the issue you are facing in a fiddle, so that we can understand your issue properly.


    In there is one value for 9 and not 11. I think you may have skipped over that. I will try fiddle but here is the code to make the graph:

    function GetHistoryOverview(url) {
        $.getJSON(url, function (data) {
            var users = { type: "splineArea", lineThickness: 2, name: "Users", showInLegend: true, xValueType: "dateTime", dataPoints: [] };
            var mailboxes = { type: "splineArea", lineThickness: 2, name: "Mailboxes", showInLegend: true, xValueType: "dateTime", dataPoints: [] };
            var citrix = { type: "splineArea", lineThickness: 2, name: "Citrix", showInLegend: true, xValueType: "dateTime", dataPoints: [] };
            var chart = new CanvasJS.Chart("historyOverview",
                    animationEnabled: true,
                    zoomEnabled: true,
                    title: { text: "" },
                    toolTip: { shared: true },
                    axisX: { labelAngle: -50 },
                    legend: {
                        cursor: "pointer",
                        itemclick: function (e) {
                            if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                e.dataSeries.visible = false;
                            else {
                                e.dataSeries.visible = true;
                    data: []
            $.each(data, function (i, val) {
                if (val.retrieved != null) {
                    var actualTime = moment(val.retrieved).format();
                    var xValue = new Date(actualTime);
                    if (val.hasOwnProperty("userCount"))
                        users.dataPoints.push({ x: xValue, y: val.userCount });
                    if (val.hasOwnProperty("mailboxCount"))
                        mailboxes.dataPoints.push({ x: xValue, y: val.mailboxCount });
                    if (val.hasOwnProperty("citrixCount"))
                        citrix.dataPoints.push({ x: xValue, y: val.citrixCount });
            if (users.dataPoints.length > 0)
            if (mailboxes.dataPoints.length > 0)
            if (citrix.dataPoints.length > 0)
        }).fail(function (data) {
        }).always(function() {

    I was able to reproduce this for you:



    Thanks for the jsfiddle. We’ll investigate more on this issue and get back..

    Sunil Urs


    Ok thanks! Let me know.. have some customers waiting on the fix :-)



    We are working on this issue right now and we hope to have it fixed at the earliest.

    Sunil Urs


    Find anything interesting?



    The issue has been fixed and here is an internal-build. Kindly check if its working and let us know.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.