ZingChart: Easy Method API Example

Methods are one of the many reasons why Zingchart is such a powerful charting library. This allows us to add functionality and customization to our charts! We are going to show you how to use methods to change the scale range of the chart using the click of a button!

First let us start with a simple line chart.

var myConfig = {
 	type: 'line', 
 	scaleY: {
 	  maxValue:100,
 	  minValue:-10,
 	},
	series: [
		{
			values: [35,42,67,89,25,34,67,85]
		}
	]
};

zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: '100%', 
	width: '100%' 
});

Your chart should look something like this:

Now lets add a button so that we can click it to change the scales. This will be done in your html:

Now we bind functionality to the button using javascript:

document.getElementById("change").addEventListener("click", function() {});

Now inside this javascript we can add the Zingchart methods to change the chart scales! We will use setdata:

document.getElementById("change").addEventListener("click", function() {
  zingchart.exec('myChart', 'setdata', {
        'data':{
           	type: 'line', 
           	scaleY: {
           	  maxValue:220,
           	  minValue:-130,
           	},
          	series: [
          		{
          			values: [35,42,67,89,25,34,67,85]
          		}
          	]
          }
    });
});

This code will replace the current JSON with the new JSON above when the button is clicked. Now that everything is linked up just click the button and see how it works! http://demos.zingchart.com/view/UTQ4CXUE

Extra Credit: Add styling to the button for better visuals. Here is the CSS I recommend:

#change {
  padding:10px 10px;
  margin-left:20px;
  margin-top:30px;
  background-color: #72b352;
  color:white;
  font-family:arial;
  font-size:13px;
  font-weight:bold;
  border: 1px solid #4b8f29;
  border-radius:4px;
}
#change:hover {
  background-color:#8bd865;
}
button:focus {outline:0;}

Here is what the finished product looks like:

Relavent Links:

Demo