Chart not working with data containing certain characters

[adamParticipant]

Hi,
We are experiencing an issue with charts where data contains certain characters. The fiddle below demonstrates the bug where The axis containing period as datafield has data that contain forward slashes and that appears to not work. The chart is causing out of memory exceptions. Even worse in IE data containing dashes like 30-01-2018 doesn’t work. Please investigate as we would like to use data that contain forward slashes.
Chart fiddle showing not working example

Thank you.

[HristoParticipant]

Hello adam,

You should use the DataAdapter for this purpose.
On that way you could determinate and format the date type.
Please, take a look at this example:
http://jsfiddle.net/txhi/Lkopac0w/1/

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[adamParticipant]

Thank you Hristo for your response.
First, the example you gave does not format the date correctly on the x-axis. The format rendered on the x-axis is 31-Jan-2017 instead of 01/31/2017.
The main issue is that whatever you do, if all values on that axis contain valid dates internally jqWidgets thinks the data is dates. I would like to treat them as strings rather than dates, like labels. Lets say I change the example you gave to this, then this doesn’t work because the datafield partNumber now is being converted to date value when i dont want it to:

var otherDataThatDOESNTWorksInIE11 = [{"partNumber":"03/31/2018","petrol":104,"diesel":24},{"partNumber":"06/30/2018","petrol":134,"diesel":32},{"partNumber":"09/30/2018","petrol":104,"diesel":24},{"partNumber":"12/31/2017","petrol":164,"diesel":40},{"partNumber":"12/31/2018","petrol":74,"diesel":16}];

var source =
    {
      datatype: "json",
      datafields: [
        { name: 'partNumber', type: 'string' },
        { name: 'petrol' },
        { name: 'diesel' }
      ],
      localdata: otherDataThatDOESNTWorksInIE11
    };
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

// prepare jqxChart settings
var settings = {
  title: "Faulty chart",
  description: "example of Faulty chart",
  enableAnimations: true,
  showLegend: true,
  padding: { left: 5, top: 5, right: 5, bottom: 5 },
  titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
  source: dataAdapter, //otherDataThatDOESNTWorksInIE11,
  colorScheme: "scheme01",
  xAxis: {
    dataField: "partNumber",
  },
  valueAxis: {
    unitInterval: 10,
    minValue: 0,
    maxValue: 150,
    visible: true,
    title: { text: "Amount<br>" },
    gridLines: { color: "#888888" }
  },
  seriesGroups: [
    {
      type: "stackedcolumn",
      columnsGapPercent: 100,
      seriesGapPercent: 5,
      series: [
        { dataField: "petrol", displayText: "petrol", color: "#BA3C38" },
        { dataField: "diesel", displayText: "diesel", color: "#277FE6" }
      ]
    }
  ]
};

$("#jqxChart").jqxChart(settings);

In any case, what i would like is to treat the x-value data as strings not as dates but this is not possible. Please have a look.

[Author]

Posts