261 lines
9.5 KiB
HTML
261 lines
9.5 KiB
HTML
|
<!DOCTYPE HTML>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Highcharts Example</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="https://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('https://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="https://code.highcharts.com/highcharts.js"></script>
|
||
|
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||
|
|
|
||
|
|
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|