Highcharts - zoom small charts
by katalin_2003
HTML
<h2>HighChart in Slide show </h2>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type='text/javascript' src="https://highcharts.com/highslide/highslide-full.min.js"></script>
<script type='text/javascript' src="https://highcharts.com/highslide/highslide.config.js"></script>
<link rel="stylesheet" type="text/css" href="https://highcharts.com/highslide/highslide.css"/>
<script src="~/Scripts/Slider.js"></script>
<style type="text/css">
</style>
<div id="MainContainer" class="ContainerDiv" style="width: 600px; height: 300px; margin: 0 auto; padding-bottom: 15%">
</div>
<div style="width: 80%; overflow-x: auto; overflow-y: hidden; position: static; height: 120px; margin-left: 10%; margin-right: 10%">
<div id="divThumbnails" style="position: static;">
<table id="tblThumbnails">
<tr>
</tr>
</table>
</div>
</div>
<br />
<br />
<div style="width: 80%; overflow-x: auto; overflow-y: hidden; position: static; height: 120px; margin-left: 10%; margin-right: 10%">
<input type="button" id="perious" value="Back"/>
<input type="button" id="next" value="Next"/>
<a id="slideShow">SlideShow</a>
</div>
<script type="text/javascript" language="JavaScript">
$(document).ready(function () {
SliderLoad();
$("#next").click(function () {
ChartNavigation(1);
});
$("#perious").click(function () {
ChartNavigation(0);
});
$("#slideShow").click(function () {
if ($(this).text() == "SlideShow") {
$(this).text("Pause");
var slideshowFun = window.setInterval(function () {
chartIndex++;
if ($("#slideShow").text() == "SlideShow") {
clearInterval(slideshowFun);
}...