Jump to content
JChartFX Community
  • 0

Date(s) are 1 day behind



Hi I'm experiencing an issue with bar charts (it might affect other charts too). In short, a date formatted like this: "2017-11-29T00:00:00.000Z" is displayed as "Nov-28". 

If I change the date to "2017-11-29T13:00:00.000Z" it correctly displays as "Nov-29".  



<!DOCTYPE html>
<title>Title of the document</title>
<script src="jchartfx/jquery/jquery-latest.js?v=1513269751805"></script>
<script src="jchartfx/jquery/jquery-ui.js?v=1513269751805"></script>
<script src="jchartfx/js/jchartfx.system.js?v=1513269751805"></script>
<script src="jchartfx/js/jchartfx.coreVector.js?v=1513269751805"></script>
<script src="jchartfx/js/jchartfx.coreVector3d.js?v=1513269751805"></script>
<script src="jchartfx/js/jchartfx.advanced.js?v=1513269751805"></script>
<script src="jchartfx/js/jchartfx.gauge.js?v=1513269751805"></script>
<script src="jchartfx/motifs/jchartfx.motif.js?v=1513269751805"></script>
<script src="jchartfx/js/jchartfx.data.js?v=1513269751805"></script>
<script src="jchartfx/js/jchartfx.userInterface.js?v=1513269751805"></script>
<script src="jchartfx.js"></script>

<link rel="stylesheet" type="text/css" href="jchartfx/jquery/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="jchartfx/styles/jchartfx.userInterface.css" />
<link rel="stylesheet" type="text/css" href="jchartfx/styles/Attributes/jchartfx.attributes.css" />
<link rel="stylesheet" type="text/css" href="jchartfx/styles/Palettes/jchartfx.palette.css" />



<div id="div1" style="width:600px;height:260px;left:0px;top:83px;position:absolute;"></div>

    createBarChart(chartParams, divID);





var chartParams = {
   "XAXIS_LBL":"Forecasted Payments/Receipts",
   "LABEL_CD":"Forecasted Payments/Receipts",


var divID = "div1";

var chartListing = new Array();     

function setTitle(chartObject, chartData, titleText, dockLoc) {
    var title = new cfx.TitleDockable();
    titleText = getVarValue(chartObject, chartData, "TITLETEXT", titleText, false);

    for(var d=0; d<chartData.length;d++) {
        var titleText = chartData[d].TITLETEXT;
        if(typeof titleText !== "undefined")
            delete chartData[d].TITLETEXT;

function setLegend(chartObject, legendPos) {
    var legendVisibleFlag = true;

    if(legendPos == 0) {
        legendVisibleFlag = false;


function getVarValue(chart, chartData, varName, defaultValue, showFlag)  {
    var newVarValue = defaultValue;
    var activateShowHideFlag = false;

    try {
        newVarValue = chartData[0][varName];
        activateShowHideFlag = true;
    catch (error) {}

    if (typeof newVarValue === 'undefined') {
        newVarValue = defaultValue;
        activateShowHideFlag = false;

    try {
        if(activateShowHideFlag)  {                        
            var seriesCount = chart.getSeries().getCount();
            for(var a=0; a<seriesCount; a++) {
                var seriesName = chart.getSeries().getItem(a).getText();
                if(varName == seriesName)
    catch (error) {}

    return newVarValue;

function createBarChart(chartParams, divID) {
    var chartData = chartParams["CHART_DATA"];
    var chartObject = new cfx.Chart();


        var stepValue = chartData[0]["STEPVALUE"];

    if (typeof stepValue != 'undefined') {
            stepValue = getVarValue(chartObject, chartData, "STEPVALUE", 1, false);

    var scaleValue = getVarValue(chartObject, chartData, "SCALE", 1, false);

    var zoomValue = getVarValue(chartObject, chartData, "ZOOM", false, false);

    var chartId = chartParams["CHART_CD"];
    if(chartId == "MDM-A21") {
        var minValue = getVarValue(chartObject, chartData, "MINVALUE", 0, false);
        var maxValue = getVarValue(chartObject, chartData, "MAXVALUE", 0, false);        
        var minStepValue = getVarValue(chartObject, chartData, "MINSTEPVALUE", 0.01, false);        

    setTitle(chartObject, chartParams["CHART_DATA"], chartParams["LABEL_CD"], cfx.DockArea.Top);    
    setTitle(chartObject, chartParams["CHART_DATA"], chartParams["YAXIS_LBL"], cfx.DockArea.Left);
    setLegend(chartObject, chartParams["LEGEND_POS"]);

    chartListing[divID] = chartObject;

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

A date like this  "2017-11-29T00:00:00.000Z" means November 29th at 12:00 am UTC (greenwich time), which means that the same date shown in an US east coast timezone will be displayed as November 28th (at 7 or 8 PM depending on daylight savings time or eastern standard time status).

You could format your dates using the specific time zone instead of Z, e.g  "2017-11-29T00:00:00.000-05", alternatively by supplying a time of 1PM in "2017-11-29T13:00:00.000Z" you will get a display of Nov 29 in any time zone from -13 to +9 which would probably cover most of your target audience.



Link to comment
Share on other sites

  • 0

Alternatively you could try something like this, I have NOT tested this code in all time zones but it should work

    var date = new Date();
    // Round this to avoid handling fractional time zones
    var timeZone =  Math.floor(date.getTimezoneOffset() / 60);
    var absTimeZone = Math.abs(timeZone);
    var strTimeZone = absTimeZone.toString();
    if (absTimeZone < 10)
        strTimeZone = "0" + strTimeZone;
    if (timeZone > 0)
        strTimeZone = "-" + strTimeZone;
        strTimeZone = "+" + strTimeZone;
    strTimeZone = "T12:00:00" + strTimeZone + ":00";
    var items = [{"Value":10, "Date":"2017-11-29" + strTimeZone}, {"Value":10, "Date":"2017-12-15" + strTimeZone}]

Note that the code is getting the "local" time zone offset and making sure it is a valid time zone format including leading zeros and minutes. 

We will research if we can support a scheme where you don't supply time and let us know through a flag that you do not care about times but the code would essentially do the same as shown here.



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...