Date(s) are 1 day behind

JChaps · December 14, 2017

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".

HTML

=============================================================

<!DOCTYPE html>
<html>
<head>
<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>

</head>

<body>

</html>

JS

=========================================================

]
};

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);
   title.setText(titleText);
   title.setDock(dockLoc);
   chartObject.getTitles().add(title);

   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;
   }

chartObject.getLegendBox().setVisible(legendVisibleFlag);
chartObject.getLegendBox().setWidth(legendPos);
}

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)
                   chart.getSeries().getItem(a).setVisible(showFlag);
           }
       }
   }
   catch (error) {}

return newVarValue;
}

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

   chartObject.setDataSource(chartData);
   chartObject.setGallery(cfx.Gallery.Bar);

   chartObject.getAllSeries().getPointLabels().setVisible(false);
   chartObject.getAxisX().getLabelsFormat().setFormat(cfx.AxisFormat.Date);
   chartObject.getAxisX().getLabelsFormat().setCustomFormat("dd-MMM");

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

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

   chartObject.getAxisX().setLabelAngle(45);

   var scaleValue = getVarValue(chartObject, chartData, "SCALE", 1, false);
   chartObject.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Number);
   chartObject.getAxisY().setScaleUnit(scaleValue);

   var zoomValue = getVarValue(chartObject, chartData, "ZOOM", false, false);
   chartObject.getAxisX().setAutoScroll(zoomValue);
   chartObject.getAxisX().setClientScroll(zoomValue);

   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);

       chartObject.getAxisY().setMin(minValue);
       chartObject.getAxisY().setMax(maxValue);
       chartObject.getAxisY().getLabelsFormat().setDecimals(2);
       chartObject.getAxisY().getDataFormat().setDecimals(4);
       chartObject.getAxisY().getGrids().getMinor().setVisible(true);
       chartObject.getAxisY().getGrids().getMinor().setStyle(cfx.DashStyle.Dot);
       chartObject.getAxisY().setMinorStep(minStepValue);
   }

   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"]);

chartObject.create(divID);
chartListing[divID] = chartObject;
}

JuanC · December 14, 2017

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.

Regards,

JuanC

JChaps · December 14, 2017

Hi,

What time zone will this give me "2017-11-29T00:00:00.000-05"? I assume "-05" is the time zone code. Is there a list somewhere on your site?

JuanC · December 14, 2017

This is not a format we established, it is ISO 8601 which is handled by the browser javascript implementation. For Eastern Standard Time you should use "2017-11-29T00:00:00.000-05:00"

Regards,

JuanC

JuanC · December 14, 2017

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;
else
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.

Regards,

JuanC

Sign In

Date(s) are 1 day behind

Question

JChaps

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

JuanC

Link to comment

Share on other sites

JChaps

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

JuanC

Link to comment

Share on other sites

Join the conversation

Browse

Activity