Next
Update
Prev
400*200
600*400
750*400

KoolChart provides the event handling features that enables you to create a custom event handler or to use the default event handling function.

This sample column chart is to show how to resize the chart when you click the button. If you want to call a JavaScript function when you click the button, then you must set the name of the JavaScript function to the value of the onClick attribute in the HTML tag ( onclick = "changeChart(600,400)" ).


<div id="chartHolder" style = "width: 100%; height: 100%;">

...
				
<div class="button" style="float:left;" onclick="changeChart(400,200)">400*200</div>
<div class="button" style="float:left; margin-left:7px" onclick="changeChart(600,400)">600*400</div>
<div class="button" style="float:left; margin-left:7px" onclick="changeChart(750,400)">750*400</div>

...
					
function changeChart()
{
  var ch = document.getElementById("chartHolder")
  
  ch.style.width = w+"px";
  ch.style.height = h+"px";
  
  document.getElementById("chart1").resize();
}

© 2017 KoolChart. All rights reserved.