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 demonstrates how to specify the chart selection rectangle.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Selection Rectangle 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"> function addDays(date, value) { var newDate = new Date(date.getTime()); newDate.setDate(date.getDate() + value); return newDate; } function round(d) { return Math.round(100 * d) / 100; } var data1 = []; var data2 = []; var yValue1 = 50; var yValue2 = 200; var date = new Date(2010, 0, 1); for (var i = 0; i < 200; i++) { yValue1 += Math.random() * 10 - 5; data1.push([date, round(yValue1)]); yValue2 += Math.random() * 10 - 5; data2.push([date, round(yValue2)]); date = addDays(date, 1); } var background = { type: 'linearGradient', x0: 0, y0: 0, x1: 0, y1: 1, colorStops: [{ offset: 0, color: '#d2e6c9' }, { offset: 1, color: 'white' }] }; var chart = new DataViz.Chart({ title: 'Selection Rectangle', animation: { duration: 1 }, selectionRect: { fillStyle: 'rgba(125,125,125,0.2)', strokeStyle: 'gray', lineWidth: 1 }, mouseInteractionMode: 'zooming', // zooming, panning axes: [ { type: 'dateTime', location: 'bottom', zoomEnabled: true }, { type: 'linear', location: 'left', zoomEnabled: true } ], border: { strokeStyle: '#6ba851' }, background: background, series: [ { type: 'line', data: data1, markers: null }, { type: 'line', data: data2, markers: null } ] }); chart.write('container'); </script> </head> <body> <div> <div id="container" style="width: 500px; height: 300px;"> </div> </div> </body> </html> |