Html Chart

Set the animationDuration property of the jqxChart. Author: http://jqwidgets.com

by adamrehman

HTML

<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width: 530px; height: 400px; position: relative; left: 0px; top: 0px;"></div>

JavaScript

// this causes out of memory exception in IE and Chrome
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);