FusionCharts API-Methods: scrollTo

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<!-- This sample shows usage of getObjectReference() method -->
<div id="indicatorDiv">Method Name: <strong>scrollTo()</strong>
    
    <p>Scrolls the zoom-line chart to a particular position.   </p>
    <ol>
    	<li>1. Zoom into the chart once.</li>
    	<li>2. In the text field below, <strong>enter a value between 0 and 1</strong>.</li>
    	<li>3. Click the <strong>Scroll to Position</strong> button.</li>
    </ol>
    <p>The chart scrolls to the position corresponding to the value entered in the text field.</p>

	<div class="text-center" class="mb-20">
		<input id="scrollToValue" type="text" placeholder="Enter position" class="mb-20" />
		
		<button id="scrollTo" class="mb-20" >Scroll to Position</button>
		
		<div id="chart-container">FusionCharts will render here</div>
	</div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}


p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#scrollTo {
    height: 25px;
    font-size: 13px;
}
#scrollToValue {
    height: 22px;
    font-size: 13px;
}
.rep_text {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var analysisChart = new FusionCharts({
        id: "chart_1",
        type: 'zoomline',
        renderAt: 'chart-container',
        width: '500',
        height: '400',
        dataFormat: 'json',
        dataSource: {
          "chart": {
            "compactdatamode": "1",
            "dataseparator": "|",
            "animation": "1"
          },
          "categories": [
            {
              "category": "Label 1|Label 2|Label 3|Label 4|Label 5|Label 6|Label 7|Label 8|Label 9|Label 10|Label 11|Label 12|Label 13|Label 14|Label 15|Label 16|Label 17|Label 18|Label 19|Label 20|Label 21|Label 22|Label 23|Label 24|Label 25|Label 26|Label 27|Label 28|Label 29|Label 30|Label 31|Label 32|Label 33|Label 34|Label 35|Label 36|Label 37|Label 38|Label 39|Label 40|Label 41|Label 42|Label 43|Label 44|Label 45|Label 46|Label 47|Label 48|Label 49|Label 50"
            }
          ],
          "dataset": [
            {
              "seriesname": "Series 1",
              "color": "AFD8F8",
              "data": "182|236|17|406|676|346|109|644|421|484|692|246|856|125|399|418|58|552|236|511|767|926|420|735|584|352|952|320|170|536|487|675|329|411|886|226|17|642|477|50|274|542|387|471|878|1|991|919|298|914"
            },
            {
              "seriesname": "Series 2",
              "color": "F6BD0F",
              "data": "294|170|450|120|844|703|599|579|771|318|57|841|740|440|327|92|683|389|849|521|675|980|112|972|434|493|653|314|676|350|464|286|427|5|579|809|338|819|734|821|686|58|587|491|400|185|505|460|412|874"
            }
          ]
        }
    }).render();
    

    function scrollTo() {
    		var value = document.getElementById("scrollToValue").value;
        analysisChart.scrollTo(Number(value));
    }
    document.getElementById("scrollTo").addEventListener("click", scrollTo);
});