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 works in IE 
var dataThatWorksInIE11 = [{"period":"30 Jun 18","petrol":134,"diesel":32},{"period":"30 Sep 18","petrol":104,"diesel":24},{"period":"31 Dec 17","petrol":164,"diesel":40},{"period":"31 Dec 18","petrol":74,"diesel":16},{"period":"31 Mar 18","petrol":104,"diesel":24}];


// this causes out of memory exception in IE
var dataThatDOESNTWorkInIE11 = [{"period":"30-06-2018","petrol":134,"diesel":32},{"period":"30-09-2018","petrol":104,"diesel":24},{"period":"31-03-2018","petrol":104,"diesel":24},{"period":"31-12-2017","petrol":164,"diesel":40},{"period":"31-12-2018","petrol":74,"diesel":16}];

// this causes out of memory exception in IE and Chrome
var otherDataThatDOESNTWorksInIE11 = [{"period":"03/31/2018","petrol":104,"diesel":24},{"period":"06/30/2018","petrol":134,"diesel":32},{"period":"09/30/2018","petrol":104,"diesel":24},{"period":"12/31/2017","petrol":164,"diesel":40},{"period":"12/31/2018","petrol":74,"diesel":16}];

var source =
    {
      datatype: "array",
      datafields: [
        { name: 'period', 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: "period",
    type: 'date'
    /* unitInterval: 1,
    flip: false,
    valuesOnTicks: true,
    tickMarks: {
      visible: true,
      unitInterval: 1,
      color: "#888888"
    },
    gridLines: {
      visible: false,
    },
    labels: {
  ...