ZingChart API Overview
The ZingChart library has a JavaScript API that allows you to control a chart programatically after page load.
To work with the ZingChart API you will primarily use the zingchart.exec(); method with the following syntax:
zingchart.exec(containerID, functionname, JSON val);
where:
- containerID is the DOM id value holding your chart
- functionName is a string naming the function you'd like to invoke such as reload, addnode, and so on
- JSON val is a JSON value to pass to the function named in functionName. This parameter is not always required as some functions require no JSON value and its format will vary.
Data Manipulation - 
These API functions are used to manipulate the underlying plot data in the JSON. They can be used to change a single node value, the entire series, and everything in between.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| addnode | Adds a node to an existing plot. | graphid The index of the graph. The default is 0. plotindex The index of the plot to add data to. nodeindex The index in the specified plot where the new node should go. The current values will be shifted. If this parameter is not set, it is placed at the end. value The value to add to the plot. |
zingchart.exec("yourChartId", "addnode", '{"graphid" : 0, "plotindex": 0, "nodeindex" : 0, "value" : 13 }'); |
| addplot | Adds a new plot. | graphid The index of the graph. The default is 0. plotindex the index of the plot to be inserted. If it is not set, it is placed at the end. plotdata The JSON string that would be set in the series section of the JSON for the individual plot. |
var plotdata = '{"values" : [30,41,32,78,54,61,49,52,11,15,30]}'; zingchart.exec("yourChartId", "addplot", '{"graphid":0, "plotdata": ' + plotdata + '}'); |
| appendseriesvalues | Appends data to the end of a plot. Can be used on a single plot or the whole series. | plotindex The index of the plot if only appending the data on a single plot. values An array of values to append. If plotindex is not specified, the data should be an array of arrays. |
zingchart.exec('yourChartId', 'appendseriesvalues', '{"plotindex": 1, "values" : [30,41,32,78,54,61,49,52,11,15,30]}'); |
| modifyplot | Modifies an exisiting plot | graphid The index of the graph. The default is 0. plotindex The index of the plot. plotdata The JSON string that would be set in the series section of the JSON for the individual plot. |
var plotdata = '{"line-color": "purple", "line-style": "dashed"}'; zingchart.exec("yourChartId", "modifyplot", '{"graphid":0, "plotindex": 0, "plotdata": ' + plotdata + '}'); |
| removenode | Removes a node | graphid The index of the graph. The default is 0. plotindex The index of the plot to remove the data from nodeindex The index of the node to be removed. The values will be shifted. |
zingchart.exec("yourChartId", "removenode", '{"graphid": 0, "plotindex" : 0, "nodeindex": 0}'); |
| removeplot | Removes a plot | graphid The index of the graph. The default is 0. plotindex The index of the plot to be removed. |
zingchart.exec("yourChartId", "removeplot", '{"graphid": 1, "plotindex": 1}'); |
| setnodevalue | Changes the value on a single node | graphid The index of the graph. The default is 0. plotindex The index of the plot. nodeindex The index of the node to replace value The new value |
zingchart.exec("yourChartId", "setnodevalue", '{"graphid":0, "plotindex":0, "nodeindex":2, "value": 80}'); |
| setseriesdata | Replaces the series data. Can be used on a single plot or the whole series. | plotindex The index of the plot if only setting the data on a single plot. data The JSON string that would be set in the series section of the JSON for the individual plot. If setting multiple plots, data should be in an array. |
var data = '[{"line-color": "purple", "line-style": "dashed"},{"line-color": "red", "line-style": "dotted"}]'; zingchart.exec("yourChartId", "setseriesdata", '{"data": ' + data + '}'); |
| setseriesvalues | Replaces the series values. Can be used on a single plot or the whole series. | plotindex The index of the plot if only setting the data on a single plot. values An array of values. If plotindex is not specified, the data should be an array of arrays. |
zingchart.exec('yourChartId', 'setseriesvalues', '{"values" : [[45,23,12,54,18,86,33,99,10,39,67],[30,41,32,78,54,61,49,52,11,15,30]]}'); |
Graph Manipulation -
These API functions are used to manipulate the underlying JSON object. They can be used to change the entire JSON packet or its various parts.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| addscalevalue | Adds a new value on the scale. | scale The scale to add the value to. scale-x is default. nodeindex The index of where the scale node should be inserted. If it is not set, it is placed at the end. value The new scale value. |
zingchart.exec("yourChartId", "addscalevalue", '{"scale":"scale-x", "value": "June"}'); |
| destroy | Removes the ZingChart. zingchart.render must be recalled to display another chart. | N/A | zingchart.exec('yourChartId', 'destroy'); |
| load | Loads a new JSON packet from a URL | dataurl The URL to read the JSON from |
zingchart.exec('yourChartId', 'load', '{"dataurl":"newchart.txt"}'); |
| modify | Modifies any part of the current graph. | graphid The index of the graph. The default is 0. data The JSON packet to apply to the graph. It will be merged with the previous JSON. object Optional shortcut to only modify specific parts of the graph. The options are title, plotset, and legend. |
var data = '{title:{"background-color": "purple"}}'; zingchart.exec("yourChartId", "modify", '{"data":' + data + '}'); var data = '{"text": "MODIFIED Title", "background-color": "blue"}'; zingchart.exec("yourChartId", "modify", '{"object": "title", "data":' + data + '}'); |
| reload | Reloads the current graph | N/A | zingchart.exec('yourChartId', 'reload'); |
| removescalevalue | Removes a value from the scale. | scale The scale to add the value to. scale-x is default. nodeindex The index of the value to be removed. |
zingchart.exec("yourChartId", "removescalevalue", '{"scale":"scale-x", "nodeindex": 3}'); |
| setdata | Takes a full JSON packet to replace the current one. | data A string of the JSON packet to substitute |
zingchart.exec('yourChartId', 'setdata', '{"data" : +"+newData+"}'); // newData is a variable containing the JSON |
Graph Information -
These API functions return data from the graph.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| getdata | Returns the entire JSON. | N/A | zingchart.exec("yourChartId", "getdata"); |
| geteditmode | Returns a Boolean indicating if user is in edit mode. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "geteditmode"); |
| getgraphlength | Returns the number of graphs in the chart. | N/A | zingchart.exec("yourChartId", "getgraphlength"); |
| getnodelength | Returns the number of nodes in a given plot. | graphid The index of the graph. The default is 0. plotindex The index of the plot. |
zingchart.exec("yourChartId", "getnodelength", '{"graphid" : 0, "plotindex": 2}'); |
| getnodevalue | Returns the value of the given node. | graphid The index of the graph. The default is 0. plotindex The index of the plot. nodeindex The index in the specified plot of the node. |
zingchart.exec("yourChartId", "getnodevalue", '{"graphid" : 0, "plotindex": 0, "nodeindex" : 5}'); |
| getplotlength | Returns the number of plots in a given graph. | graphid the index of the graph. The default is 0. |
zingchart.exec("yourChartId", "getplotlength", '{"graphid" : 1}'); |
| getplotvalues | Returns the value of the given plot. | graphid the index of the graph. The default is 0. plotindex The index of the plot. |
zingchart.exec("yourChartId", "getplotvalues", '{"graphid" : 0, "plotindex": 1}'); |
| getrender | Returns a string indicating which format ZingChart was rendered in. | N/A | zingchart.exec("yourChartId", "getrender"); |
| showversion | Returns the version number of ZingChart | N/A | zingchart.exec("yourChartId", "showversion"); |
Interactive -
The line, area, scatter, and bubble charts currently have interactivity enabled. This allows dragging of nodes to change value, clicking on the graph to add nodes, and selecting nodes and plots in order to delete them. Capibilites are being developed for the other graph types.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| addnodeia | Turns on the ability to add node to the selected plot through clicking on the graph. | graphid The index of the graph. The default is 0. size In the case of a bubble graph, size indicates the size of the added nodes. |
zingchart.exec("yourChartId", "addnodeia"); |
| entereditmode | Turns on interactive mode and allows the selection of a node or plot by clicking on it. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "selectnode"); |
| exiteditmode | Deselects the previously selected plot or node when in interactive mode and exits interactive mode. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "deselect", '{"graphid" : 1}'); |
| removenodeia | Removes a node selected in interactive mode. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "removenodeia"); |
| removeplotia | Removes a plot selected in interactive mode. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "removeplotia"); |
Toggle -
There are many parts of a ZingChart that can be turned on and off and these API functions provide an easy way to toggle those features.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| legendmaximize | Maximizes the legend. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "legendmaximize", '{"graphid" : 1}'); |
| legendminimize | Minimizes the legend. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "legendminimize"); |
| plothide | Hides a plot | graphid The index of the graph. The default is 0. plotindex The index of the plot to be hidden. |
zingchart.exec("yourChartId", "plothide", '{"graphid" : 0, "plotindex" : 0}'); |
| plotshow | Shows a plot | graphid The index of the graph. The default is 0. plotindex The index of the plot to be displayed |
zingchart.exec("yourChartId", "plotshow", '{"graphid" : 0, "plotindex" : 0}'); |
| toggleabout | Toggles the About Screen. | N/A | zingchart.exec("yourChartId", "toggleabout"); |
| togglebugreport | Toggles the Bug Report Screen. | N/A | zingchart.exec("yourChartId", "togglebugreport"); |
| toggledimension | Toggles the Dimension of the current graph between 2D and 3D if possible. | N/A | zingchart.exec("yourChartId", "toggledimension"); |
| togglelegend | Toggles the visiblity of the legend. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "togglelegend"); |
| togglelens | Toggles the visibility of the lens. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "togglelens"); |
| togglesource | Toggles the View Source Screen. | N/A | zingchart.exec("yourChartId", "togglesource"); |
Zoom -
These API functions are another way you can take advantage of our zooming capabilities.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| zoomin | Zooms in the graph | graphid The index of the graph. The default is 0. zoomx Boolean indicating to zoom on the x scale zoomy - Boolean indicated to zoom on the y scale |
zingchart.exec("yourChartId", "zoomin", '{"zoomx":true, "zoomy":false}'); |
| zoomout | Zooms out the graph | graphid The index of the graph. The default is 0. zoomx zoomy |
zingchart.exec('yourChartId', 'zoomout', '{"zoomx":true, "zoomy":false}'); |
| zoomto | Zooms to a specific area in a graph | graphid The index of the graph. The default is 0. xmin The min x position to zoom to xmax The max x position to zoom to ymin The min y position to zoom to ymax the max y position to zoom to |
zingchart.exec("yourChartId", "zoomto", '{"xmin":3, "xmax":7, "ymin":30, "ymax":40}'); |
| zoomtovalues | Zooms to a specific area in a graph specified by x scale labels | graphid The index of the graph. The default is 0. xmin The min x position to zoom to xmax The max x position to zoom to ymin The min y position to zoom to ymax the max y position to zoom to |
zingchart.exec("yourChartId", "zoomtovalues", '{"xmin":"May", "xmax":"Aug", "ymin":30, "ymax":40}'); |
Feed -
In graphs that are set up to use a feed, the feed API functions can be used to control the feed.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| clearfeed | Clears the current graph and restarts the feed. | N/A | zingchart.exec("yourChartId", "clearfeed"); |
| getinterval | Returns the interval value set on the feed. | graphid The index of the graph. The default is 0. |
zingchart.exec("yourChartId", "getinterval"); |
| setinterval | Sets the feed interval on a feed graph. | graphid The index of the graph. The default is 0. interval Time of the feed interval set in seconds or milliseconds. |
zingchart.exec("yourChartId", "setinterval", '{"interval": 3}'); |
| startfeed | Starts the feed. | N/A | zingchart.exec("yourChartId", "startfeed"); |
| stopfeed | Stops the feed. | N/A | zingchart.exec("yourChartId", "stopfeed"); |
History -
In graphs that take advantage of ZingChart's navigation, these API functions can control the history.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| goback | Goes to the previous page in the chart history. | N/A | zingchart.exec("yourChartId", "goback"); |
| goforward | Goes forward one page in the chart history. | N/A | zingchart.exec("yourChartId", "goforward"); |
Export -
These API functions can be used to get data from the graph.
| Function Name | Description | JSON | Example |
|---|---|---|---|
| exportdata | Exports the current data. Only works if exportdataurl is set in zingchart.render | N/A | zingchart.exec("yourChartId", "exportdata"); |
| getimagedata | Returns a Base64 encoded image string. | filetype The image filetype. The default is jpg. Other options are bmp and png. |
zingchart.exec("yourChartId", "getimagedata"); |
| Prints the current graph | N/A | zingchart.exec("yourChartId", "print"); | |
| saveasimage | Produces an image of the graph. Only works if exportimageurl is set in zingchart.render | N/A | zingchart.exec("yourChartId", "saveasimage"); |
ZingChart API Explorer - Feed
- Stop Feed
- Start Feed
- Clear Feed
- Get Interval
- Set Interval to 3 seconds
Select Example to see code
ZingChart API Explorer - History
- Go Back
- Go Forward
Select Example to see code
ZingChart API Explorer - Interactive Graph
- Enter Edit Mode
- Add Nodes to Selected Plot
- Remove Selected Plot
- Remove Selected Node
- Exit Edit Mode
- Add Nodes to Selected Plot
- Remove Selected Plot
- Remove Selected Node
- Exit Edit Mode
Select Example to see code
ZingChart API Explorer - Graph Information
- Get Graph Data
- Get Graph Length
- Get Plot Length
- Get Node Length on data set 1
- Get Value of node 5 on data set 1
- Get Value of data set 1
- Get Edit Mode
- Enter Edit Mode
- Exit Edit Mode
- Get the ZC Render
- Get the ZC Version
- Get Graph Length
- Get Plot Length
- Get Node Length on data set 1
- Get Value of node 5 on data set 1
- Get Value of data set 1
- Get Edit Mode
- Enter Edit Mode
- Exit Edit Mode
- Get the ZC Render
- Get the ZC Version
Select Example to see code
ZingChart API Explorer - Manipulate Graph
- Change Color of title (full redraw)
- Change BG Color (full redraw)
- Add Guide (full redraw)
- Change Color of title (partial redraw)
- Change Color of legend (partial redraw)
- Change Color of plotarea(partial redraw)
- Reload JSON
- Refresh Graph with inline data.
- Refresh Graph with data from api2.txt
- Add Scale Value and node for Oct
- Remove Scale Value and nodes for May
- Removes the ZingChart Object.
- Re-render the ZingChart Object.
- Change BG Color (full redraw)
- Add Guide (full redraw)
- Change Color of title (partial redraw)
- Change Color of legend (partial redraw)
- Change Color of plotarea(partial redraw)
- Reload JSON
- Refresh Graph with inline data.
- Refresh Graph with data from api2.txt
- Add Scale Value and node for Oct
- Remove Scale Value and nodes for May
- Removes the ZingChart Object.
- Re-render the ZingChart Object.
Select Example to see code
ZingChart API Explorer - Manipulate Data
- Set node value
- Add node to data set 2
- Remove node from data set 1
- Add Plot
- Remove data set 1
- Change style of data set 1
- Append values to data set 1
- Change values on whole series
- Change whole series
- Add node to data set 2
- Remove node from data set 1
- Add Plot
- Remove data set 1
- Change style of data set 1
- Append values to data set 1
- Change values on whole series
- Change whole series
Select Example to see code
ZingChart API Explorer - Toggle Graph Pieces
- Hide data set 1
- Show data set 1
- Minimize Legend
- Maximize Legend
- Toggle Legend
- Toggle 2D/3D
- Toggle Lens
- Toggle Source
- Toggle Bug Report
- Toggle About
- Show data set 1
- Minimize Legend
- Maximize Legend
- Toggle Legend
- Toggle 2D/3D
- Toggle Lens
- Toggle Source
- Toggle Bug Report
- Toggle About
Select Example to see code
ZingChart API Explorer - Zooming
- Zoom on the x-axis
- Zoom out
- Zoom to x:3-7 y:30-40 - Zoom to x:May-Jul y:30-40
- Zoom out
- Zoom to x:3-7 y:30-40 - Zoom to x:May-Jul y:30-40
Select Example to see code
ZingChart API Explorer - Export Data
- Export Data
- Save as Image
- Print
- Get Image Data and place image in page. (Doesn't work in IE)
![]()
- Save as Image
- Get Image Data and place image in page. (Doesn't work in IE)
Select Example to see code
