|
|
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Highcharts Example</title>
-
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- <style type="text/css">
- ${demo.css}
- </style>
- <script type="text/javascript">
- $(function () {
- $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
- var detailChart;
-
- $(document).ready(function () {
-
- // create the detail chart
- function createDetail(masterChart) {
-
- // prepare the detail chart
- var detailData = [],
- detailStart = data[0][0];
-
- $.each(masterChart.series[0].data, function () {
- if (this.x >= detailStart) {
- detailData.push(this.y);
- }
- });
-
- // create a detail chart referenced by a global variable
- detailChart = $('#detail-container').highcharts({
- chart: {
- marginBottom: 120,
- reflow: false,
- marginLeft: 50,
- marginRight: 20,
- style: {
- position: 'absolute'
- }
- },
- credits: {
- enabled: false
- },
- title: {
- text: 'Historical USD to EUR Exchange Rate'
- },
- subtitle: {
- text: 'Select an area by dragging across the lower chart'
- },
- xAxis: {
- type: 'datetime'
- },
- yAxis: {
- title: {
- text: null
- },
- maxZoom: 0.1
- },
- tooltip: {
- formatter: function () {
- var point = this.points[0];
- return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
- '1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
- },
- shared: true
- },
- legend: {
- enabled: false
- },
- plotOptions: {
- series: {
- marker: {
- enabled: false,
- states: {
- hover: {
- enabled: true,
- radius: 3
- }
- }
- }
- }
- },
- series: [{
- name: 'USD to EUR',
- pointStart: detailStart,
- pointInterval: 24 * 3600 * 1000,
- data: detailData
- }],
-
- exporting: {
- enabled: false
- }
-
- }).highcharts(); // return chart
- }
-
- // create the master chart
- function createMaster() {
- $('#master-container').highcharts({
- chart: {
- reflow: false,
- borderWidth: 0,
- backgroundColor: null,
- marginLeft: 50,
- marginRight: 20,
- zoomType: 'x',
- events: {
-
- // listen to the selection event on the master chart to update the
- // extremes of the detail chart
- selection: function (event) {
- var extremesObject = event.xAxis[0],
- min = extremesObject.min,
- max = extremesObject.max,
- detailData = [],
- xAxis = this.xAxis[0];
-
- // reverse engineer the last part of the data
- $.each(this.series[0].data, function () {
- if (this.x > min && this.x < max) {
- detailData.push([this.x, this.y]);
- }
- });
-
- // move the plot bands to reflect the new detail span
- xAxis.removePlotBand('mask-before');
- xAxis.addPlotBand({
- id: 'mask-before',
- from: data[0][0],
- to: min,
- color: 'rgba(0, 0, 0, 0.2)'
- });
-
- xAxis.removePlotBand('mask-after');
- xAxis.addPlotBand({
- id: 'mask-after',
- from: max,
- to: data[data.length - 1][0],
- color: 'rgba(0, 0, 0, 0.2)'
- });
-
-
- detailChart.series[0].setData(detailData);
-
- return false;
- }
- }
- },
- title: {
- text: null
- },
- xAxis: {
- type: 'datetime',
- showLastTickLabel: true,
- maxZoom: 14 * 24 * 3600000, // fourteen days
- plotBands: [{
- id: 'mask-before',
- from: data[0][0],
- to: data[data.length - 1][0],
- color: 'rgba(0, 0, 0, 0.2)'
- }],
- title: {
- text: null
- }
- },
- yAxis: {
- gridLineWidth: 0,
- labels: {
- enabled: false
- },
- title: {
- text: null
- },
- min: 0.6,
- showFirstLabel: false
- },
- tooltip: {
- formatter: function () {
- return false;
- }
- },
- legend: {
- enabled: false
- },
- credits: {
- enabled: false
- },
- plotOptions: {
- series: {
- fillColor: {
- linearGradient: [0, 0, 0, 70],
- stops: [
- [0, Highcharts.getOptions().colors[0]],
- [1, 'rgba(255,255,255,0)']
- ]
- },
- lineWidth: 1,
- marker: {
- enabled: false
- },
- shadow: false,
- states: {
- hover: {
- lineWidth: 1
- }
- },
- enableMouseTracking: false
- }
- },
-
- series: [{
- type: 'area',
- name: 'USD to EUR',
- pointInterval: 24 * 3600 * 1000,
- pointStart: data[0][0],
- data: data
- }],
-
- exporting: {
- enabled: false
- }
-
- }, function (masterChart) {
- createDetail(masterChart);
- })
- .highcharts(); // return chart instance
- }
-
- // make the container smaller and add a second container for the master chart
- var $container = $('#container')
- .css('position', 'relative');
-
- $('<div id="detail-container">')
- .appendTo($container);
-
- $('<div id="master-container">')
- .css({
- position: 'absolute',
- top: 300,
- height: 100,
- width: '100%'
- })
- .appendTo($container);
-
- // create master and in its callback, create the detail chart
- createMaster();
- });
- });
- });
- </script>
- </head>
- <body>
- <script src="../../js/highcharts.js"></script>
- <script src="../../js/modules/exporting.js"></script>
-
- <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
-
- </body>
- </html>
|
