jQuery UI provides a number of different controls that are easy to create and style. This recipe looks at how we can leverage a few of these widgets in our charts.
To set up a basic page and install jQuery and Highcharts, refer to the Getting ready section of the Using jQuery UI tabs and Highcharts recipe discussed earlier in this chapter.
To get started, perform the following steps:
Create elements for a slider and a button, as follows:
<div id='container'></div> <div id='slider'></div><br/> <button id='increase'>Increase</button> <button id='decrease'>Decrease</button>
Define the chart options as shown in the following code:
var options = { chart: { type: 'column' }, title: { text: 'Modifying charts using jQuery UI Controls' }, series: [{ name: 'Slider', data: [0] }, { name: 'Button', data: [0] }] };
Render the chart, keeping a reference...