Interactive charts

Coded
Highcharts API | Bootstrap | HTML5 | LESS | CSS3 | jQuery | PHP

Interactive charts are great tools to effective online reporting, in one single chart the user can easily toggle different fields to make reading values much easier but sometimes it has some limitations.

the client wanted their investors to be able to select different fields to compare values, so for each field selection, a new chart had to be generated taking into consideration the new values.

I have used the powerful Highcharts API with jQuery to create charts.

interactive-charts2

We had several charts to build under deadline and the aim was to make the charts markup a as simple as possible. I had to find a pattern to standardise the markup for other developers no matter the type of the chart, so I have created functions that generate the charts depending on the available data in the HTML to match the chart's axis.

<li> <input id="training-1" name="chkboxName" type="checkbox" value="Basic wage" data="5921" data2="6921" checked> Field 1</li>
<li> <input id="training-2" name="chkboxName" type="checkbox" value="accommodation" data="2000" data2="2000" checked> Field 2</li>
...

Try it live