Html5 Chart

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

by jqwidgets

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<div id='chart' style="width: 680px; height: 400px"></div>
</p>
<table style="width: 680px">
    <tr>
        <td style="padding-left: 50px;">
            <p style="font-family: Verdana; font-size: 12px;">Select the series type:</p>
            <div id='dropDownSeries'></div>
        </td>
        <td>
            <p style="font-family: Verdana; font-size: 12px;">Select color scheme:</p>
            <div id='dropDownColors'></div>
        </td>
    </tr>
</table>

JavaScript

var data = [{
         a: 100,
         b: 200,
         c: 1
     }, {
         a: 120,
         b: 140,
         c: 2
     }, {
         a: 100,
         b: 110,
         c: 3
     }, {
         a: 90,
         b: 135,
         c: 4
     }, {
         a: 70,
         b: 210,
         c: 5
     }, {
         a: 170,
         b: 210,
         c: 5
     }, {
         a: 270,
         b: 350,
         c: 5
     }, {
         a: 710,
         b: 410,
         c: 5
     }, {
         a: 230,
         b: 305,
         c: 5
     }];


     // prepare jqxChart settings
     var settings = {
         title: "Live updates demo",
         description: "Data changes every 3 seconds",
         enableAnimations: true,
         animationDuration: 1000,
         enableAxisTextAnimation: true,
         showLegend: true,
         padding: {
             left: 5,
             top: 5,
             right: 5,
             bottom: 5
         },
         titlePadding: {
             left: 0,
             top: 0,
             right: 0,
             bottom: 10
         },
         source: data,
         categoryAxis: {
             unitInterval: 1,
             gridLinesInterval: 2,
             valuesOnTicks: false
         },
         colorScheme: 'scheme03',
         seriesGroups: [{
             type: 'column',
             columnsGapPercent: 50,
             alignEndPointsWithIntervals: true,
             valueAxis: {
                 minValue: 0,
                 maxValue: 1000,
                 description: 'Index Value'
             },
             series: [{
                 dataField: 'a',
                 displayText: 'a',
                 opacity: 1,
                 lineWidth: 1,
                 symbolType: 'circle',
                 fillColorSymbolSelected: 'white',
                 radius: 15
             }, {
                 dataField: 'b',
                 displayText: 'b',
                 opacity: 1,
                 lineWidth: 1,
                 symbolType:...