Jump to content
JChartFX Community
  • 0


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;

Share this post

Link to post
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.



Share this post

Link to post
Share on other sites
  • 0

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"



Share this post

Link to post
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.



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now