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 dataHighlighting event.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> DataHighlighting Event Example - JavaScript Chart by DataViz Charts </title> <link rel="stylesheet" type="text/css" href="../../css/dataviz.chart.css" /> <link rel="stylesheet" type="text/css" href="../../themes/le-frog/styles.css" /> <script src="../../js/dataviz.chart.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> var chart = new DataViz.Chart({ title: "dataHighlighting Event", legend: { visible: false }, animation: { duration: 1 }, series: [ { type: 'column', title: 'Column', data: [['A', 46], ['B', 35], ['C', 68], ['D', 30], ['E', 27], ['F', 85], ['D', 43], ['H', 29]], cursor: 'pointer' }, { type: 'line', title: 'Line', data: [['A', 69], ['B', 57], ['C', 86], ['D', 23], ['E', 70], ['F', 60], ['D', 88], ['H', 22]], cursor: 'pointer' } ] }); chart.write('container'); chart.addEventListener('dataHighlighting', function (e, data) { displayDataOptions(data); }); function displayDataOptions(data) { var list = document.getElementById('listBlock'); if (!data) { list.innerHTML = ''; return; } list.innerHTML = '<li>data.chart=' + data.chart + '</li>' + '<li>data.series=' + data.series + '</li>' + '<li>data.dataItem=[' + data.dataItem + ']</li>' + '<li>data.index=' + data.index + '</li>' + '<li>data.x=' + data.x + '</li>' + '<li>data.y=' + data.y + '</li>' + '<li>data.shape=' + data.shape + '</li>'; } </script> </head> <body> <div> <table> <tr> <td> <div id="container" style="width: 400px; height: 300px;"> </div> </td> <td style="vertical-align: top"> <div> <b>Event 'data' parameter contains:</b> <ul id='listBlock'> </ul> </div> </td> </tr> </table> </div> </body> </html> |