Build JavaScript Charts for your Site
Our charting software makes building Flash and HTML5 charts and graphs easy:
- Quick installation process
- Intuitive chart builder
- Helpful, categorized documentation
- Thorough API methods and events to collect and manipulate information
Follow the steps below to get started making interactive web charts and graphs.
ZingChart in 5 Steps
1. Download or Buy a copy of ZingChart.
2. Extract Zip file and place files in web directory.
3. Create a JSON object containing the JSON for this graph. Create customized JSON using the ZingChart Builder
The JSON object can be included in a variety of ways:
a. Create an inline JavaScript variable
var jsonConfig = '{' +
'"graphset" : [' +
'{' +
'"type" : "line",' +
'"series" : [' +
'{' +
'"values" : [5, 10, 15, 5, 10, 5]' +
'}] ' +
'}]' +
'}';
b. Create the JSON object through the server-side and output it into a JavaScript variable
<?php
$values = "5, 10, 15, 5, 10, 5";
$json = '{
"graphset" : [
{
"type" : "line",
"series" : [
{
"values" : [' . $values . ']
}]
}]
}';
$json = str_replace(array("\r","\n"), "", $json);
?>
<script type="text/javascript">
var jsonConfig = '<?php echo $json; ?>';
</script>
c. Create a static text file containing a valid JSON structure
{
"graphset" : [
{
"type" : "line",
"series" : [
{
"values" : [5, 10, 15, 5, 10, 5]
}]
}]
}
d. Create a server-side script that creates a valid JSON structure
<?php
$values = "5, 10, 15, 5, 10, 5";
$json = '{
"graphset" : [
{
"type" : "line",
"series" : [
{
"values" : [' . $values . ']
}]
}]
}';
$json = str_replace(array("\r","\n"), "", $json);
echo $json;
?>
4. Include the following code in the HEAD tag. If you created a JavaScript variable as in Step 3 a. and b. you will use the data parameter. If you are pointing to a file as in Step 3 c. and d., you will use the dataurl parameter. NOTE: Your paths may be different depending on where you installed the scripts.
<script type="text/javascript" src="zingchart-1.1.min.js"></script>
<script type="text/javascript">
window.onload = function(){
zingchart.render({
liburl : 'zingchart.swf',
data : jsonConfig,
width : 460,
height : 460,
container : 'zingchart'
});
}
</script>
The zingchart.render() method takes the following parameters:
- bgcolor - the color of the background of the rendered graph set. Defaults to white.
- container - the DOM id of the (X)HTML element to hold the rendered graph. When unspecified defaults to 'zingchart'. No graph will render if the DOM element is not found. NOTE: This object will be overridden unless the preservecontainer attribute is set to true.
- data - a JavaScript variable or literal that contains a valid ZingChart JSON packet.
- dataurl - the URL of a file containing a valid ZingChart JSON packet.
- defaultsurl - the URL of a file containing a valid ZingChart defaults configuration.
- flashvars - Object with any of the following items:
- allowlocal - A Boolean that if set to false will disable the API if the page is run locally.
- customprogresslogo - the URL of an image to display in the place of the ZingChart logo in the loading screen.
- exportdataurl - the URL of a file containing server side code for handling the export data. A sample php file is provided in the package.
- exportimageurl - the URL of a file containing server side code for handling saving as an image. A sample php file is provided in the package.
- hideprogresslogo - Boolean to hide the ZingChart logo when displaying the loading screen.
- height - the integer height of the chart in pixels. When unspecified defaults to 320.
- liburl - the path and file name of the ZingChart Flash binary. When unspecified ZingChart is assumed to be found in zingchart.swf in the current directory.
- output - specifies the render engine. The options are canvas | flash | auto
- preservecontainer - Boolean indicating if the container object should be preserved. If it is set to true, a child object will be created for the flash object. If it is set to false(default), the container will be replaced by the flash object.
- width - the integer width of the chart in pixels. When unspecified defaults to 480.
5. Create a holder for the chart by inserting the following where you want the graph to be displayed.
<div id="zingchart"></div>
6. Explore various ZingChart features by reading the docs.
What's Next?
1. Use API methods to manipulate the graph in various manners. The flexible API allows you to modify all bits of data from a single node value to the entire JSON packet.
2. Hook up API events to get notified when the graph completes loading or a user interaction occurs. Using the API methods and events together allows for full manipulation of the charts.
3. Still have questions? Visit our support page to contact us.
