Html5 Chart

Invoke the addColorScheme method of the jqxChart. Author: http://jqwidgets.com

by jqwidgets

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='jqxChart' style="width:500px; height:400px; position: relative; left: 0px; top: 0px;"></div>
<input type="button" style="margin: 50px;" id="jqxbutton" value="Add new color scheme" />

JavaScript

var sampleData = [{
     Country: 'China',
     Population: 1347350000,
     Percent: 19.18
 }, {
     Country: 'India',
     Population: 1210193422,
     Percent: 17.22
 }, {
     Country: 'USA',
     Population: 313912000,
     Percent: 4.47
 }, {
     Country: 'Indonesia',
     Population: 237641326,
     Percent: 3.38
 }, {
     Country: 'Brazil',
     Population: 192376496,
     Percent: 2.74
 }];
 // prepare jqxChart settings
 var settings = {
     title: "Top 5 most populated countries",
     description: "Statistics for 2011",
     showLegend: true,
     enableAnimations: true,
     padding: {
         left: 20,
         top: 5,
         right: 20,
         bottom: 5
     },
     titlePadding: {
         left: 90,
         top: 0,
         right: 0,
         bottom: 10
     },
     source: sampleData,
     categoryAxis: {
         dataField: 'Country',
         showGridLines: true,
         flip: false
     },
     colorScheme: 'scheme01',
     seriesGroups: [{
         type: 'column',
         orientation: 'horizontal',
         columnsGapPercent: 100,
         toolTipFormatSettings: {
             thousandsSeparator: ','
         },
         valueAxis: {
             flip: true,
             unitInterval: 100000000,
             maxValue: 1500000000,
             displayValueAxis: true,
             description: '',
             formatFunction: function (value) {

                 return parseInt(value / 1000000);
             }

         },
         series: [{
             dataField: 'Population',
             displayText: 'Population (millions)'
         }

         ]
     }]

 };
 // setup the chart
 $('#jqxChart').jqxChart(settings);
 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 200,
     height: 30
 });
 $('#jqxbutton').click(function () {
     $('#jqxChart').jqxChart('addColorScheme', 'myScheme', ['#722694', '#AA4643', '#89A54E', '#71588F', '#4198AF']);
     $('#jqxChart').jqxChart('colorScheme', 'myScheme');
 });