Html Chart

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

by Hristo Hristov

HTML

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

JavaScript

var sampleData = [{
    a: 0.35,
    b: 14.5
}, {
    a: 1,
    b: 2.5
}, {
    a: 10,
    b: 0.2
}, {
    a: 100,
    b: 205
}, {
    a: 1,
    b: 100
}, {
    a: 5.11,
    b: 10.13
}, {
    a: 20.13,
    b: 10.13
}, {
    a: 600,
    b: 300
}];

var data = [
	{ Date: '12/02/2016', fat: 4, carb: 35, protein: 10},
  { Date: '13/02/2016', fat: 2, carb: 14, protein: 15},

];

var source =
{
    datatype: "json",
    datafields: [
        { name: 'Date', type: 'date', format: 'dd/MM/yyyy' },
        { name: 'fat' },
        { name: 'carb' },
        { name: 'protein' }
    ],
    localdata: data 
    //url: '../sampledata/TSLA_stockprice.csv'
};

var dataAdapter = new $.jqx.dataAdapter(source);
console.log()

var settings = {
    title: "",
    description: "",
    //renderEngine: 'HTML5',
    //padding: {
    //    left: 5,
    //    top: 5,
    //    right: 5,
    //    bottom: 5
    //},
    //titlePadding: {
    //    left: 0,
    //    top: 0,
    //    right: 0,
    //    bottom: 10
    //},
    source: dataAdapter,
    enableAnimations: true,
    categoryAxis: {
        dataField: '',
        description: '',
        showGridLines: true,
        showTickMarks: true
    },
    seriesGroups: [{
        type: 'column',
        xAxis: {
        		dataField: 'Date',
            type: 'date',
            baseUnit: 'day'
        },
        valueAxis: {
            description: 'Value',
            logarithmicScale: true,
           	logarithmicScaleBase: 2,
            unitInterval: 1,
            //tickMarksInterval: 1,
            gridLinesInterval: 1,
            //formatSettings: {
            //    decimalPlaces: 3
            //},
            //horizontalTextAlignment: 'right'
        },
        series: [{
            dataField: 'fat',
            displayText: 'A'
        }, {
            dataField: 'carb',
            displayText: 'B'
        }, {
            dataField: 'protein',
            displayText: 'C'
        }]
   ...