Getting StartedPerformance !!!Chart DataBar and Column ChartsLine and Area ChartsPie and Funnel ChartsScatter and Bubble ChartsRadar and Polar ChartsFinancial ChartsGantt ChartsCombinational ChartsDynamic ChartsWorking with Chart AxesChart FeaturesCustomizing ChartClient-Side Events |
This sample shows the axisZoom event.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> AxisZoom Event Example - HTML5 jQuery Chart Plugin by jqChart </title> <link rel="stylesheet" type="text/css" href="../../css/jquery.jqChart.css" /> <link rel="stylesheet" type="text/css" href="../../themes/le-frog/styles.css" /> <script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../../js/jquery.jqChart.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> function round(d) { return Math.round(100 * d) / 100; } var data1 = []; var data2 = []; var yValue1 = 50; var yValue2 = 200; for (var i = 0; i < 6000; i++) { yValue1 += Math.random() * 10 - 5; data1.push([i, round(yValue1)]); yValue2 += Math.random() * 10 - 5; data2.push([i, round(yValue2)]); } $(document).ready(function () { var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white' }] }; $('#jqChart').jqChart({ title: { text: 'axisZoom Event' }, axes: [ { type: 'linear', location: 'bottom', zoomEnabled: true } ], border: { strokeStyle: '#6ba851' }, background: background, tooltips: { type: 'shared' }, crosshairs: { enabled: true, hLine: false, vLine: { strokeStyle: '#cc0a0c' } }, series: [ { title: 'Series 1', type: 'line', data: data1, markers: null }, { title: 'Series 2', type: 'line', data: data2, markers: null } ] }); $('#jqChart').bind('axisZoom', function (e, data) { var list = $('#listBlock'); list.children().remove(); var chart = data.chart; var axis = data.axis; list.append('<li>axis.actualMinimum=' + Math.round(axis.actualMinimum) + '</li>'); list.append('<li>axis.actualMaximum=' + Math.round(axis.actualMaximum) + '</li>'); list.append('<li></li>'); list.append('<li>axis.actualVisibleMinimum=' + Math.round(axis.actualVisibleMinimum) + '</li>'); list.append('<li>axis.actualVisibleMaximum=' + Math.round(axis.actualVisibleMaximum) + '</li>'); }); }); </script> </head> <body> <div> <table> <tr> <td> <div id="jqChart" style="width: 400px; height: 300px;"> </div> </td> <td style="vertical-align: top"> <div> <b>Axis settings:</b> <ul id='listBlock'> </ul> </div> </td> </tr> </table> </div> </body> </html> |