JavaScript Chart

Set the greyScale 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 sampleDataFailing = [{"productLabel":"03/31/2018","petrol":104,"diesel":24},{"productLabel":"06/30/2018","petrol":134,"diesel":32},{"productLabel":"09/30/2018","petrol":104,"diesel":24},{"productLabel":"12/31/2017","petrol":164,"diesel":40},{"productLabel":"12/31/2018","petrol":74,"diesel":16}];

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

// prepare jqxChart settings
var settings = {
  title: "Examplechart",
  description: "example of stacked chart",
  enableAnimations: true,
  showLegend: true,
  padding: { left: 5, top: 5, right: 5, bottom: 5 },
  titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
  source: sampleDataFailing,
  colorScheme: "scheme01",
  xAxis: {
    dataField: "productLabel",
    unitInterval: 1,
    flip: false,
    valuesOnTicks: true,
    tickMarks: {
      visible: true,
      unitInterval: 1,
      color: "#888888"
    },
    gridLines: {
      visible: false,
    },
    labels: {
      angle: -90,
    }
  },
  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 );