Methods

ZingChart provides a rich API for controlling chart characteristics such as re-rendering a plot (reload), loading new data (setseriesdata), modifying existing charts (modifyplot), zooming in on a data range (zoomto), toggling various interactive features (togglelegend), and much more.

Usage

There is one way to execute methods in ZingChart: the zingchart.exec() method.

.exec

This .exec method will bind and execute a method on your chart. zingchart.exec takes minimum two arguments and a third to pass parameters to the method.

zingchart.exec('myid', 'methodName', {..args})

Bubble-pack

bubblepack.setdata

Sets a new data packet for the BubblePack chart
Introduced in: v2.9.4
Demo

zingchart.exec('myid', 'bubblepack.setdata', {data : {...}});

Color Scale

colorscale.clear

Clears the cursor from the color scale
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'colorscale.clear');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

colorscale.getinfo

Gets the color scale information.
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'colorscale.getinfo');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

colorscale.setvalue

Sets the cursor to a specific value on the color scale.
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'colorscale.setValue', { value: 20 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
valueNumberThe value to set the cursor at on the scale.

colorscale.update

Updates the color scale object
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'colorscale.update', { data: {...} });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
dataObjectThe JSON packet to apply to the graph. It will be merged with the previous JSON.

Events

bind

This method will bind an event to a specific chart after it has rendered. By defining a null value for chartId, this will apply to all charts on the page.

zingchart.bind('chartId', 'load', function(e) {...});
ParameterTypeDescription
chartidStringThe id of the chart to target
eventnameStringThe name of the event to listen for.
functionnamefunctionHandler fired when the event takes place. An event object e is passed to this function by the event. For details on what the e object will contain, refer to the event documentation.
Optional

unbind

This method will unbind an event from a specific chart after it has rendered. By defining a null value for chartId, this will apply to all charts on the page.

zingchart.unbind('chartId', 'load', function());
ParameterTypeDescription
chartidStringThe id of the chart to target
eventnameStringThe name of the event to unbind.
functionnamefunctionThe name of the function defined in the initial 'bind' call to now unbind from the chart.
Optional

Export

downloadCSV

Download the chart data in .csv format.
Demo
Emits event:dataexport

zingchart.exec('myid', 'downloadCSV', { fn: 'test-filename' });
ParameterTypeDescription
fnStringThe filename that the data should be saved to.

downloadRAW

Download the raw data from the chart.
Demo
Emits event:dataexport

zingchart.exec('myid', 'downloadRAW', { fn: 'test-filename' });
ParameterTypeDescription
fnStringThe filename that the data should be saved to.
callbackfunctionSets a function that will be called using the raw data and file name as parameters. If not provided, the data will be just returned as a string.
Optional

downloadXLS

Download the chart data in .xls format.
Demo
Emits event:dataexport

zingchart.exec('myid', 'downloadXLS', { fn: 'test-filename' });
ParameterTypeDescription
fnStringThe filename that the data should be saved to.

exportdata

Exports the current data. Only works if exportdataurl is set in zingchart.render or url parameter is set.
Emits event:dataexport

zingchart.exec('myid', 'exportdata', { url: 'export.php' });
ParameterTypeDescription
urlStringSets the URL to which the chart data will be posted.
callbackfunctionSets a function that will be called if the data is successfully submitted.
Optional

exportimage

Produces an image of the graph. Only works if exportimageurl is set in zingchart.render or url parameter is set.
Demo
Emits event:dataexport

zingchart.exec('myid', 'exportimage', { filename: 'test-filename', filetype: 'pdf' });
ParameterTypeDescription
downloadBooleanIf you should download the image as a file.
Optional
optionsObject-
Optional
uidStringSets an unique id provided in case the export contains multiple pages.
Optional
pageStringSets the page of this export, it has to be in a format like `2/5` where 2 is the current page and 5 is the total number of pages. Once the last page is exported, the expoprt server will glue all pages in a single pdf.
Optional
formatStringSets the format of the exported file (alias for `filetype`). Can be 'png', 'jpg' or 'pdf'
Optional
filetypeStringSets the format of the exported file (alias for `format`). Can be 'png', 'jpg' or 'pdf'
Optional
filenameStringSets the name of the file being sent back by the export server.
urlStringSets the URL of a custom local export server (provided code is shared by ZingChart or written by user). The information will be submitted to this URL instead of the standard ZingChart export server.
Optional
callbackfunctionSets a function that will be called once the image is exported. For security reasons, works only with local export servers.
Optional

getimagedata

Gets image data as a Base64 encoded image string. Returns -1 if failed to get image data.
Introduced in: v1.1.0
Demo

zingchart.exec('myid', 'getimagedata', { filetype: 'png' });
ParameterTypeDescription
formatStringThe image filetype. The default is jpg. Other options are bmp (flash only) and png. Alternative to filetype.
Optional
filetypeStringThe image filetype. The default is jpg. Other options are bmp (flash only) and png. Alternative to format.
Optional

print

Creates a printable version of the chart and attempts to print it.
Demo

zingchart.exec('myid', 'print');

saveasimage

Produces an image of the graph. Only works if exportimageurl is set in zingchart.render or url parameter is set.
Demo
Emits event:dataexport

zingchart.exec('myid', 'saveasimage', { filename: 'test-filename', filetype: 'pdf' });
ParameterTypeDescription
downloadBooleanIf you should download the image as a file.
Optional
optionsObject-
Optional
uidStringSets an unique id provided in case the export contains multiple pages.
Optional
pageStringSets the page of this export, it has to be in a format like `2/5` where 2 is the current page and 5 is the total number of pages. Once the last page is exported, the expoprt server will glue all pages in a single pdf.
Optional
formatStringSets the format of the exported file (alias for `filetype`). Can be 'png', 'jpg' or 'pdf'
Optional
filetypeStringSets the format of the exported file (alias for `format`). Can be 'png', 'jpg' or 'pdf'
Optional
filenameStringSets the name of the file being sent back by the export server.
urlStringSets the URL of a custom local export server (provided code is shared by ZingChart or written by user). The information will be submitted to this URL instead of the standard ZingChart export server.
Optional
callbackfunctionSets a function that will be called once the image is exported. For security reasons, works only with local export servers.
Optional

viewDataTable

Toggles the view of chart data in a table.

zingchart.exec('myid', 'viewDataTable', { menuid: 'viewdatatable' });
ParameterTypeDescription
menuidString"viewdatatable" or "hidedatatable" to view or hide the table.

Graph Information

get3dview

Returns an object containing the 3D chart view information. True3d is 1 if not a 3D graph, else true3d returns a boolean value of true if 3D graph.
Demo

zingchart.exec('myid', 'get3dview', { graphid: 1 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

getbubblesize

Get the size of the bubble on a bubble chart

zingchart.exec('myid', 'getbubblesize', { graphid: 1, plotindex: 1 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumberThe index of the plot that contains the bubble value. Alternative to plotid.
Optional
plotidStringThe id of the plot that contains the bubble value. Alternative to plotindex.
Optional
valueNumberThe key index of the bubble. The default is 1.
Optional

getcharttype

Returns the chart's type by graphid as an index
Introduced in: v1.4.0
Demo

zingchart.exec('myid', 'getcharttype', { graphid: 1 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

getgraphlength

Returns the number of graphs in the chart (graphset)
Demo

zingchart.exec('myid', 'getgraphlength');

getnodelength

Returns the number of nodes in a given plot.
Demo

zingchart.exec('myid', 'getnodelength', { plotindex: 1 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to retrieve the node length from. The default is 0.
Optional
plotindexNumberThe index of the plot to retrieve node length from. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to retrieve node length from. Alternative to plotindex.
Optional

getnodevalue

Returns the value of a specified node in a given plot.
Demo

zingchart.exec('myid', 'getnodevalue', { plotindex: 2, nodeindex: 5 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to retrieve the node value from. The default is 0.
Optional
plotindexNumberThe index of the plot to retrieve node value from. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to retrieve node value from. Alternative to plotindex.
Optional
nodeindexNumberThe index of the node to retrieve the value of.

getobjectinfo

Returns various attributes for specific chart elements (graph, plotarea, scale, plot, node). Depending on the object requested, a subset of the following attributes will be returned: id, x, y, width, height, color, lineColor, lineWidth, borderColor, borderWidth, backgroundColor1, backgroundColor2.
Introduced in: v2.8.0
Demo

zingchart.exec('myid', 'getobjectinfo', { graphid: 1, object: 'plot', plotindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
objectStringThe object to get information on. One of: "graph", "scale", "plot", "node"
nameStringThe name of the scale if object is "scale".
Optional
nodeindexNumberThe index of the node to get information on when object is "node"
Optional
plotidStringThe plot to get information on if object is "plot", or the plot index of the node to get information on if object is "node"
Optional
plotindexNumberThe plot to get information on if object is "plot", or the plot index of the node to get information on if object is "node"
Optional

getoriginaljson

Returns the original chart JSON.
Demo

zingchart.exec('myid', 'getoriginaljson');

getpage

Gets the current page of the graphset. Page numbers can be set to each graph in order to group them. Only graphs on the current page are displayed. By default all graphs are on page 0.
Demo

zingchart.exec('myid', 'getpage');

getplotlength

Returns the number of plots in a given graph
Demo

zingchart.exec('myid', 'getplotlength');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to retrieve the plot length from. The default is 0.
Optional

getplotvalues

Returns the value of the given plot.
Demo

zingchart.exec('myid', 'getplotvalues', { plotindex: 1 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to retrieve the node value from. The default is 0.
Optional
plotindexNumberThe index of the plot to retrieve values from. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to retrieve values from. Alternative to plotindex.
Optional

getrender

Returns the render mode (canvas/svg/vml).
Introduced in: v1.2.0
Demo

zingchart.exec('myid', 'getrender');

getscaleinfo

Get information about a scale

zingchart.exec('myid', 'getscaleinfo', { graphid: 1, name: 'scale-x' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
nameStringThe name of the scale to get information for.
Optional
valueNumberValue of a scale. If provided, the API will return the coordinate of that value on the scale.
Optional
coordNumberCoordinate on a scale. If provided, the API will return the closest value to that coordinate.
Optional

getscales

Returns an array containing the names of the active scales on the chart.
Demo

zingchart.exec('myid', 'getscales');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to retrieve the scales from. The default is 0.
Optional

getseriesdata

Returns the series data as an object.
Introduced in: v1.5.0
Demo

zingchart.exec('myid', 'getseriesdata', { graphid: 1, plotindex: 1});
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to retrieve data from. The default is 0.
Optional
plotindexNumberThe index for the plot from which to retrieve series data. Alternative to plotid.
Optional
plotidStringThe id of an existing plot from which to retrieve series data. Alternative to plotindex.
Optional

getseriesvalues

Returns the series values in an array or an array of arrays. If plot is specified via plotindex or plotid, then only that series item values are returned.
Introduced in: v1.5.0
Demo

zingchart.exec('myid', 'getseriesvalues', { plotindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to set data on. The default is 0.
Optional
plotindexNumberThe index for the plot to retrieve the series values from. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to retrieve the series values from. Alternative to plotindex.
Optional

getversion

Shows the current version of ZingChart running.
Demo

zingchart.exec('myid', 'getversion');

getxyinfo

Returns various scale and node related information based on x and y positions in the chart.
Demo

zingchart.exec('myid', 'getxyinfo', { x: 280, y: 120 });
ParameterTypeDescription
xNumberThe x position of the point to get information on.
yNumberThe y position of the point to get information on.

Graph Manipulation

addgraph

Adds another graph to the graphset
Demo

zingchart.exec('myid', 'addgraph', { data: {...});
ParameterTypeDescription
dataObjectThe graph configuration to be added to the graphset
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

addmenuitem

Adds a new item to the context menu.
Demo

zingchart.exec('myid', 'addmenuitem', { text: 'New Item', function : 'window.myFunc()', order : 4 });
ParameterTypeDescription
idStringThe id of the custom-item to add to the context menu
Optional
textStringDefines the text to be displayed
Optional
functionStringName of the function to be associated with this context menu item. Function must be registered in the global scope.
Optional
orderNumberThe order of custom context menu items. The higher the number, the earlier it is placed in the custom context menu items.
Optional

addnode

Adds a node to a plot.
Introduced in: v2.4.0
Demo
Emits event:node_add

zingchart.exec('myid', 'addnode', { plotindex: 2, value: 10 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
valueanyThe value of the node to be added.
plotindexNumberThe index for the plot which the new node should be added to. Alternative to plotid.
Optional
plotidStringThe id of an existing plot which the new node should be added to. Alternative to plotindex.
Optional
nodeindexNumberThe index where the new node should be inserted. If it is not set, the new node is added to the end of the series.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

addplot

Adds a new plot/series to the graph.
Demo
Emits event:plot_add

zingchart.exec('myid', 'addplot', { graphid: 0, plotindex: 1, data: { values: [10, 20, 15, ...], text: "My new plot" } });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
dataObjectThe JSON for the plot to be added to the series section of the graph. Alternative to plotdata.
Optional
plotdataObjectThe JSON for the plot to be added to the series section of the graph. Alternative to data.
Optional
plotindexNumberThe index for the plot to be inserted at. If omitted, the new plot is added to the end of the series data.
Optional
plotidStringThe id of an existing plot after which the new plot will be inserted. If it is not set, it is placed at the end.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

addscalevalue

Adds a new value on a specified scale.
Demo

zingchart.exec('myid', 'addscalevalue', { scale: 'scale-y', value: 5 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
scaleStringThe id of the scale to be modified. The default is 'scale-x'
Optional
nodeindexNumberThe index of where the scale value should be inserted. If it is not set, it is placed at the end.
Optional
valueNumber|StringThe new scale value to be added.
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

appendseriesdata

Appends data to the existing series. Can be used on a single plot or the whole series.
Demo

zingchart.exec('myid', 'appendseriesdata', { graphid: 1, plotindex: 1, data: {...} });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to set data on. The default is 0.
Optional
plotindexNumberThe index for the plot to append the series data to. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to append the series data to. Alternative to plotindex.
Optional
dataObject|Array.The JSON data 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.
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

appendseriesvalues

Appends data to the end of a plot. Can be used on a single plot or the whole series.
Demo

zingchart.exec('myid', 'appendseriesvalues', { values: [...] });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to append values to. The default is 0.
Optional
plotindexNumberThe index for the plot to append the series values to. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to append the series values to. Alternative to plotindex.
Optional
valuesArray.The array of data that would be set in the series section of the JSON for the individual plot.
maxValuesNumberSets the maximum number of values allowed in the series object. If appending values forces the length of `series` to exceed `maxValues`, items are removed from the beginning of the `series`.
Optional
ignoreduplicatesBooleanFor key value pairs (Scatter charts) you would set this to false to add duplicate keys to the chart.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

calendar_setvalues

Sets the values on a calendar chart.
Introduced in: v1.0 chartTypes [calendar]
Demo

zingchart.exec('myid', 'calendar_setvalues', { values: [...] });
ParameterTypeDescription
graphindexNumberThe index of the graph. The default is 0.
Optional
valuesArrayThe new calendar values to set.

clear

Clears a graph
Demo

zingchart.exec('myid', 'clear', { graphid: 1 });
ParameterTypeDescription
graphidNumber|StringIf only clearing one graph in a graphset, the id/index of the graph. The default is 0.
Optional

clearscroll

Resets both x and y scrolling to default position
Demo

zingchart.exec('myid', 'clearscroll');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

destroy

Destroys the chart, removing the associated DOM nodes and events. Represents the recommended way to remove a chart from a page.
Introduced in: v1.2.0
Demo
Emits event:beforedestroy

zingchart.exec('myid', 'destroy');

heatmap.setdata

Sets the values on a heatmap chart.
Introduced in: v2.8.6 chartTypes [heatmap-plugin]
Demo

zingchart.exec('myid', 'heatmap.setdata', { data: [...], size: 10, blur: 10 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
minValueNumberSets the minimum heatmap value
Optional
maxValueNumberSets the maximum heatmap value
Optional
sizeNumberModifies how large each painted shape is.
Optional
blurNumberModifies the amount of blur that appears around each shape.
Optional
dataArray.>The new heatmap data to set.

load

Loads a new JSON packet from a URL.
Demo
Emits event:load

zingchart.exec('myid', 'load', { graphid: 1, dataurl: 'newjson.php' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
dataurlStringThe url to fetch the JSON from.

loadModules

This method allows you to load specified module(s).

zingchart.loadModules('maps,maps-usa');
ParameterTypeDescription
modulesStringThe modules to load (animation, errorbars, guide, history, maps, maps-*, objects, preview, refresh, scalemarkers, scroll, tooltip, zoom).
callbackfunctionCalback function to execute when modules have been loaded.
Optional

modify

Modifies any part (object) of the current graph.
Demo
Emits event:modify

zingchart.exec('myid', 'modify', { graphid: 1, data: { ...} } );
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
dataObjectThe JSON packet to apply to the graph. It will be merged with the previous JSON.
objectStringOptional shortcut to only modify specific parts of the graph. Available options are: "title", "plotset", "series", "plotarea", "legend", "plot", "map"
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

modifyplot

Modifies an existing plot object.
Demo
Emits event:plot_modify

zingchart.exec('myid', 'modifyplot', { plotdata: {...} });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
dataObjectThe JSON packet to apply to the plot. It will be merged with the previous JSON. Alternative to plotdata.
Optional
plotdataObjectThe JSON packet to apply to the plot. It will be merged with the previous JSON. Alternative to data.
Optional
plotindexNumberThe index for the plot to be modified. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to be modified. Alternative to plotindex.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

reload

Reloads the chart or only a specific chart from the graphset.
Demo
Emits event:reload

zingchart.exec('myid', 'reload', { graphid: 1 });
ParameterTypeDescription
graphidNumber|StringIf only reloading one graph in a graphset, the id/index of the graph. The default is 0.
Optional

removenode

Removes a node from a plot.
Introduced in: v2.6.0
Demo
Emits event:node_remove

zingchart.exec('myid', 'removenode', { plotindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumberThe index for the plot from which the node should be removed. Alternative to plotid.
Optional
plotidStringThe id of an existing plot from which the node should be removed. Alternative to plotindex.
Optional
nodeindexNumberThe index of the node to be removed. If it is not set, the last node in the series is removed.
Optional
nodekeyvalueNumberThe value of the key of the node to be removed. If it is not set, the last node in the series is removed.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

removeplot

Removes a plot from a graph.
Demo
Emits event:plot_remove

zingchart.exec('myid', 'removeplot' { plotindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumberThe index of the plot to be removed. Alternative to plotid.
Optional
plotidStringThe id of the plot to be removed. Alternative to plotindex.
Optional

removescalevalue

Removes a value on a specified scale.
Demo

zingchart.exec('myid', 'removescalevalue', { graphid: 1, scale: 'scale-y' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
scaleStringThe id of the scale to be modified. The default is 'scale-x'
Optional
nodeindexNumberThe index of the scale value to be removed. If it is not set, the last value is removed.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

resize

Resizes the chart according to new dimensions set by the width and height parameters.
Demo

zingchart.exec('myid', 'resize', { width: 400, height: 400 });
ParameterTypeDescription
widthNumberThe new width of the chart
Optional
heightNumberThe new height of the chart
Optional
layoutStringForces a specific chart layout for the fullscreen version, either "x" (horizontal) or "y" (vertical)
Optional

set3dview

Sets the 3d view on a graph
Demo

zingchart.exec('myid', 'set3dview', { depth: 60, yAngle: 10 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
true3dBooleanSets whether the chart uses a true 3D engine or an isometric view. Disabling true3d forces an isometric view.
Optional
angleNumberSets the view angle when using the isometric 3D engine. Value can be between 0 and 90, with the default viewing angle being 45°.
Optional
depthNumberSets the Z depth for a 3D chart type displayed in either isometric or true 3D.
Optional
xAngleNumberSets the X rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type.
Optional
yAngleNumberSets the Y rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type.
Optional
zAngleNumberSets the Z rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type.
Optional
zoomNumberSets the perspective zoom for the true 3D view. The default zoom level is 1.0. Note that a leading 0 is required before the decimal for values less than 1.0.
Optional

setcharttype

Set the chart type for a graph
Introduced in: v1.4.0
Demo

zingchart.exec('myid', 'setcharttype', { graphid: 1, type: 'line' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
preserveStateBooleanIf true, preserves graph state (zoom, selection, etc) after the type is updated
Optional
typeStringThe desired chart type
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

setdata

Takes a full JSON packet to replace the current one.
Demo
Emits event:setdata

zingchart.exec('myid', 'setdata', { data: {...} });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to set data for. The default is 0.
Optional
dataObjectThe JSON packet to apply to the graph. It will replace the previous JSON.
preservezoomBooleanIf set, preserves the zoom level of the graph after setting the data.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

setnodevalue

Changes the value of a single node.
Demo
Emits event:node_set

zingchart.exec('myid', 'setnodevalue', { plotindex: 1, nodeindex: 2, value: 10 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumberThe index for the plot containing the node to be modified. Alternative to plotid.
Optional
plotidStringThe id of an existing plot containing the node to be modified. Alternative to plotindex.
Optional
nodeindexNumberThe index of the node to be modified.
valueNumberThe new node value.
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

setpage

Sets the current page of the graphset.
Demo

zingchart.exec('myid', 'setpage', { page: 1 });
ParameterTypeDescription
pageNumberActive graphset page number.

setscalevalues

Changes the values on a specific scale
Demo

zingchart.exec('myid', 'setscalevalues', { scale: 'scale-y', values: [1, 2, 3, 4] });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
scaleStringThe id of the scale to be modified. The default is 'scale-x'
Optional
valuesArray.<(Number|String)>The new scale values.
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

setseriesdata

Replaces the series data. Can be used on a single plot or the whole series.
Demo

zingchart.exec('myid', 'setseriesdata', { graphid: 1, plotindex: 1, data: {...} });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to set data on. The default is 0.
Optional
plotindexNumberThe index for the plot to set the series data on. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to set the series data on. Alternative to plotindex.
Optional
dataObject|Array.The JSON data 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.
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

setseriesvalues

Replaces the series values. Can be used on a single plot or the whole series.
Demo

zingchart.exec('myid', 'setseriesvalues', { values: [...] });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to set values on. The default is 0.
Optional
plotindexNumberThe index for the plot to set the series values on. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to set the series values on. Alternative to plotindex.
Optional
valuesArray.The array of data that would be set in the series section of the JSON for the individual plot.
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

unbinddocument

Used to remove ZingChart events bound to the document - for integrating your own events

zingchart.exec('myid', 'unbinddocument');

update

Flushes and applies all queued data manipulation changes set via API calls.
Demo

zingchart.exec('myid', 'update');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

Guide

hideguide

Hides the guide object.
Demo

zingchart.exec('myid', 'hideguide');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

resetguide

Clears any guides from the chart
Introduced in: v1.15.0
Demo

zingchart.exec('myid', 'resetguide');

setguide

Sets the guide of the chart
Introduced in: v1.15.0
Demo

zingchart.exec('myid', 'setguide', { graphid: 1, x: 3 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
keyvalueNumberThe key value at which the guide fires.
Optional
xNumberThe node index at which the guide fires.
Optional

showguide

Shows the guide object.
Demo

zingchart.exec('myid', 'showguide', { x: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
xNumberThe x value to show the guide at
Optional
yNumberThe y value to show the guide at
Optional

History

goback

Goes to the previous page in the chart history.
Demo
Emits event:history_back

zingchart.exec('myid', 'goback');

goforward

Goes forward one page in the chart history.
Demo
Emits event:history_forward

zingchart.exec('myid', 'goforward');

Legend

getdata

Returns the entire chart JSON.
Demo

zingchart.exec('myid', 'getdata');

legendmaximize

Maximizes the legend.
Introduced in: v1.16.0
Demo
Emits event:legend_maximize

zingchart.exec('myid', 'legendmaximize');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to maximize the legend on. The default is 0.
Optional

legendminimize

Minimizes the legend.
Introduced in: v1.16.0
Demo
Emits event:legend_minimize

zingchart.exec('myid', 'legendminimize');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to minimize the legend on. The default is 0.
Optional

legendscroll

Scrolls the legend.
Demo

zingchart.exec('myid', 'legendscroll', { plotindex: 3 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to maximize the legend on. The default is 0.
Optional
plotindexNumberThe index of the plot to scroll to in the legend. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to scroll to in the legend. Alternative to plotindex.
Optional

togglelegend

Toggles the visibility of the legend.
Demo
Emits event:legend_hide

zingchart.exec('myid', 'togglelegend');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to toggle the legend on. The default is 0.
Optional

Maps

maps.destroyMap

Deletes all the map information.

zingchart.maps.destroyMap(graphid);
ParameterTypeDescription
graphidStringThe id of the graph to destroy.

maps.getInfo

This method returns information about the map.
Demo

zingchart.maps.getInfo('mapid');
ParameterTypeDescription
mapidStringThe id of the map

maps.getItemInfo

This method returns information about the specified map item.
Demo

zingchart.maps.getItemInfo('mapid', 'itemid');
ParameterTypeDescription
mapidStringThe id of the map.
itemidStringThe id of the item to retrieve information on.

maps.getItems

This method returns a list of the map items.
Demo

zingchart.maps.getItems('mapid');
ParameterTypeDescription
mapidStringThe id of the map

maps.getLonLat

This method returns the corresponding longitude and latitude coordinates of the specified x and y positions.
Demo

zingchart.maps.getLonLat('mapid', [x, y]);
ParameterTypeDescription
mapidStringThe id of the map
xyArray.The x and y coordinates to retrieve the longitude and latitude position of

maps.getMapByGraphIndex

Returns the map object which belongs to a specific graph.
Demo

zingchart.maps.getMapByGraphIndex('mapName', graphIndex);
ParameterTypeDescription
mapNameStringThe name of the map
graphIndexNumberThe index of the graph

maps.getXY

This method returns the corresponding x and y positions of the specified longitude and latitude coordinates
Demo

zingchart.maps.getXY('mapid', [lon, lat]);
ParameterTypeDescription
mapidStringThe id of the map
lonlatArray.The longitude and latitude coordinates to retrieve the x,y position of
itemidStringTo retrieve the x,y position of a specific item, specifies the id of the item.
Optional

maps.loadGeoJSON

This method allows you to create maps from outside GeoJSON files. It requires you to explicitly load the module: maps-geojson.
Demo

zingchart.maps.loadGeoJSON({ id: 'mapid', url: 'file.geojson', callback: {,,,} });
ParameterTypeDescription
idStringThe name of the custom map
urlStringThe map file source
mappingsObjectAllows you to map property names from the GeoJSON file to ZingChart
Optional
ignoreArray.Allows you to filter items from the map.
Optional
styleObjectStyling properties for the map.
Optional
callbackfunctionThe function called once the map is loaded. Represents the function that renders the map.
Optional

maps.loadTopoJSON

This method allows you to create maps from outside TopoJSON files. It requires you to explicitly load the module: maps-topojson.
Demo

zingchart.maps.loadTopoJSON({ id: 'mapid', url: 'file.topojson', callback: {,,,} });
ParameterTypeDescription
idStringThe name of the custom map
urlStringThe map file source
mappingsObjectAllows you to map property names from the TopoJSON file to ZingChart
Optional
ignoreArray.Allows you to filter items from the map.
Optional
styleObjectStyling properties for the map.
Optional
callbackfunctionThe function called once the map is loaded. Represents the function that renders the map.
Optional

maps.setView

Set the view of the map
Demo

zingchart.maps.setView(graphid, mapid, zoom, offsetX, offsetY);
ParameterTypeDescription
graphidStringThe id of the graph to set the view on.
mapidStringThe id of the map to set the view on.
zoomNumberThe zoom level (default is 1)
offsetXNumberThe x direction offset of the chart view
offsetYNumberThe y direction offset of the chart view

maps.viewAll

This method allows you to view the entire map. Equivalent of zooming completely out.
Demo

zingchart.maps.viewAll('mapid');
ParameterTypeDescription
mapidStringThe id of the map to zoom out on.

maps.zoomIn

This method allows you to zoom in on the map.
Demo

zingchart.maps.zoomIn('mapid');
ParameterTypeDescription
mapidStringThe id of the map to zoom in on.

maps.zoomOut

This method allows you to zoom out on the map.
Demo

zingchart.maps.zoomOut('mapid');
ParameterTypeDescription
mapidStringThe id of the map to zoom out on.

maps.zoomTo

This method allows you to zoom to a specified area on the map.
Introduced in: v2.6.0
Demo

zingchart.maps.zoomTo(mapId, { zoom: 2, offsetX: 50, offsetY: 50 });
ParameterTypeDescription
mapidStringThe id of the map to zoom on.
toObjectAn object that defines where to zoom to
to.zoomNumberSets the zoom level
to.offsetXNumberSets the x direction offset of the map view
to.offsetYNumberSets the y direction offset of the map view

maps.zoomToItem

This method allows you to zoom to a specified item on the map.
Demo

zingchart.maps.zoomToItem('mapid', 'itemid');
ParameterTypeDescription
mapidStringThe id of the map to zoom on.
itemidStringThe name of the map item to zoom to.

Markers

addmarker

Adds a marker to a graph. Refer to the Markers tutorial for more information.

zingchart.exec('myid', 'addmarker', { id: 'mark1', type: 'area', range: [1, 4] });
ParameterTypeDescription
graphidxNumberThe index of the graph. The default is 0. Alternative to graphid
Optional
graphidStringThe id of the graph. Alternative to graphidx.
Optional
styleObjectThe styling configuration of the marker
Optional
labelStringSets the label text on the marker
Optional
labelPlacementStringSets the label placement on the marker
Optional
labelAlignmentStringSets the label alignment on the marker label
Optional
offsetStartNumberOffsets the starting position of the marker
Optional
offsetEndNumberOffsets the end position of the marker
Optional
idStringThe unique marker id to reference this marker later
typeStringThe type of marker. One of: "line", "area"
scaleStringThe scale to attach the marker to
Optional
pairScaleStringFor poly type markers, sets the scale which will be the pair scale, providing the complementary coordinates.
Optional
rangeArrayThe index range of the scale markers. For a line marker, enter a single value. For an area marker, enter an array of two numbers.
Optional
valueRangeBooleanWhen true, uses scale values instead of scale indices as the range.
Optional

removemarker

Removes a marker from a graph. Refer to the Markers tutorial for more information.

zingchart.exec('myid', 'removemarker', { id: 'mark1' });
ParameterTypeDescription
graphidxNumberThe index of the graph. The default is 0. Alternative to graphid
Optional
graphidStringThe id of the graph. Alternative to graphidx.
Optional
idStringThe id of the marker to remove
scaleStringThe scale the marker is attached to
Optional

updatemarker

Updates a marker on a graph. Refer to the Markers tutorial for more information.

zingchart.exec('myid', 'addmarker', { id: 'mark1', range: [2, 5] });
ParameterTypeDescription
graphidxNumberThe index of the graph. The default is 0. Alternative to graphid
Optional
graphidStringThe id of the graph. Alternative to graphidx.
Optional
styleObjectThe styling configuration of the marker
Optional
labelStringSets the label text on the marker
Optional
labelPlacementStringSets the label placement on the marker
Optional
labelAlignmentStringSets the label alignment on the marker label
Optional
offsetStartNumberOffsets the starting position of the marker
Optional
offsetEndNumberOffsets the end position of the marker
Optional
idStringThe unique marker id to reference this marker later
typeStringThe type of marker. One of: "line", "area"
Optional
scaleStringThe scale to attach the marker to
Optional
pairScaleStringFor poly markers, sets the scale which is used for the other coordinates of the poly points. By default, the first complementary scale is used (for example, if the poly marker is on the scaleY, the scaleX is used for the x coordinates)
Optional
rangeArrayThe index range of the scale markers. For a line marker, enter a single value. For an area marker, enter an array of two numbers.
Optional
valueRangeBooleanWhen true, uses scale values instead of scale indices as the range.
Optional

Notes

addnote

Adds a new note to the chart.
Demo

zingchart.exec('myid', 'addnote', { id: 'note1', type: 'node', text: 'Note 1', plotindex: 0, nodeindex: 3 });
ParameterTypeDescription
idStringThe id of the note.
styleObjectStyling attributes to be applied to the note.
Optional
textStringThe text to be included in the note.
Optional
typeStringThe type of note to be added. One of: "node", "scale", "xy"
Optional
plotindexNumberThe index of the plot to update the note on when type is "node".
Optional
nodeindexNumberThe index of the node to update the note on when type is "node".
Optional
scaleindexNumberThe index of the scale to update the note on when type is "scale".
Optional
scalevalueStringThe value of the scale item to update the note on when type is "scale".
Optional
xNumberThe x position of the note when type is "xy".
Optional
yNumberThe y position of the note when type is "xy".
Optional
offsetXNumberAn offset in the x direction to be applied to the note.
Optional
offsetYNumberAn offset in the y direction to be applied to the note.
Optional

getnotes

Returns a list of all of the current notes on the graph
Demo

zingchart.exec('myid', 'getnotes');

removenote

Removes a note from a chart.
Demo

zingchart.exec('myid', 'removenote', { id: [ 'note1', 'note2', 'note3' ] });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
idString|Array.The id of the note or notes to be removed.

updatenote

Updates an existing note.
Demo

zingchart.exec('myid', 'updatenote', { id: 'note1', style: {   'border-color': '\#090',   'border-width': 5 }, type: 'node', plotindex: 1, nodeindex: 1, text: 'Note 1 (revision 1)' });
ParameterTypeDescription
idStringThe id of the note to be updated.
styleObjectStyling attributes to be applied to the note.
Optional
textStringThe text to be included in the note.
Optional
typeStringThe type of note to be updated. One of: "node", "scale", "xy"
Optional
plotindexNumberThe index of the plot to update the note on when type is "node".
Optional
nodeindexNumberThe index of the node to update the note on when type is "node".
Optional
scaleindexNumberThe index of the scale to update the note on when type is "scale".
Optional
scalevalueStringThe value of the scale item to update the note on when type is "scale".
Optional
xNumberThe x position of the note when type is "xy".
Optional
yNumberThe y position of the note when type is "xy".
Optional
offsetXNumberAn offset in the x direction to be applied to the note.
Optional
offsetYNumberAn offset in the y direction to be applied to the note.
Optional

Objects

addobject

Adds one or more objects (labels or shapes) on the chart.
Demo

zingchart.exec('myid', 'addobject', { data: {...}, type: 'shape' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
dataObject|Array.The data containing the object definitions. It can be an object if just one item is added or an array of objects if many items are added at once.
typeStringThe type of the object: either "label" or "shape"
callbackfunctionFunction to be called after the API was executed.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

getallobjects

Get an array of all the objects (labels or shapes).
Introduced in: v2.9.4

zingchart.exec('myid', 'getallobjects', { type : 'label' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
typeStringThe type of the object (label | shape).
Optional

getlabelinfo

Gets a subset of the following attributes for a specified label: [x, y, width, height, color, lineColor, lineWidth, borderColor, borderWidth, backgroundColor1, backgroundColor2, size, type, text, fontSize, callout, calloutPosition, offsetX, offsetY]
Demo

zingchart.exec('myid', 'getlabelinfo', { id: 'labelid' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
idStringThe id of the label to retrieve information on

getobjectsbyclass

Get an array of all the objects (labels or shapes) that are assigned to a specified class.
Introduced in: v1.9.0

zingchart.exec('myid', 'getobjectsbyclass', { type : 'shape', class: 'shapeclass' });
ParameterTypeDescription
classString|Array.The class(es) of the objects to retrieve. It can be a string in case one object class is retrieved or an array if many object classes are retrieved. Alternative to cls.
Optional
clsString|Array.The class(es) of the objects to retrieve. It can be a string in case one object class is retrieved or an array if many object classes are retrieved. Alternative to class.
Optional
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
typeStringThe type of the object (label | shape).
Optional

getshapeinfo

Gets a subset of the following attributes for a specified shape: [x, y, width, height, color, lineColor, lineWidth, borderColor, borderWidth, backgroundColor1, backgroundColor2, size, type, text, fontSize, callout, calloutPosition, offsetX, offsetY]
Demo

zingchart.exec('myid', 'getshapeinfo', { id: 'shapeid' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
idStringThe id of the shape to retrieve information on
typeStringSet to 'shape'.

removeobject

Removes one or more objects (labels or shapes) from the chart.
Demo

zingchart.exec('myid', 'removeobject', { type: 'shape', id: 'shapeid' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
classString|Array.The class(es) of the objects to remove. It can be a string in case one object is removed or an array if many objects are removed. Alternative to cls.
Optional
clsString|Array.The class(es) of the objects to remove. It can be a string in case one object is removed or an array if many objects are removed. Alternative to class.
Optional
idString|Array.The id(s) of the object(s) to remove. It can be a string in case one object is removed or an array if many objects are removed.
Optional
groupString|Array.The group(s) of the objects to remove. It can be a string in case one object is removed or an array if many objects are removed.
Optional
typeStringThe type of object to remove: either "shape" or "label"
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

repaintobjects

Repaints all the object collection when previous object related APIs were called using update: false
Demo

zingchart.exec('myid', 'repaintobjects');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
callbackfunctionFunction to be called after the API was executed.
Optional

setobjectsmode

Sets all objects' modes to "normal" or "flat". Used on scenarios where transitions between one chart state to another require constant repaint of the objects but it's not needed to also have trackers for objects. Thus, usually, flat mode is applied before the transition and normal is applied at the end.
Introduced in: v1.9.0

zingchart.exec('myid', 'setobjectsmode', { mode: 'flat' });
ParameterTypeDescription
modeStringThe mode to set on the objects: either "normal" or "flat"

updateobject

Updates one or more objects (labels or shapes) of the chart.
Demo

zingchart.exec('myid', 'updateobject', { type: 'shape', data: {...} });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
classString|Array.The class(es) of the objects to update. It can be a string in case one object is updated or an array if many objects are updated. Alternative to cls.
Optional
clsString|Array.The class(es) of the objects to update. It can be a string in case one object is updated or an array if many objects are updated. Alternative to class.
Optional
idString|Array.The id(s) of the object(s) to update. It can be a string in case one object is updated or an array if many objects are updated.
Optional
groupString|Array.The group(s) of the objects to update. It can be a string in case one object is updated or an array if many objects are updated.
Optional
typeStringThe type of object to update: either "shape" or "label"
dataObject|Array.The data containing the object definitions. It can be an object if just one item is updated or an array of objects if many items are updated at once. The objects should be referenced by their id's.
callbackfunctionFunction to be called after the API was executed.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

Refresh

clearfeed

Clears the current graph and restarts the feed
Demo
Emits event:feed_clear

zingchart.exec('myid', 'clearfeed');

getinterval

Returns the interval value set on the feed
Demo

zingchart.exec('myid', 'getinterval');

setinterval

Sets the feed interval on a feed graph. 49 is the max numeric value in seconds; if you put 50, it switches to milliseconds.
Demo
Emits event:feed_interval_modify

zingchart.exec('myid', 'setinterval', { interval: 100 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
intervalNumberTime of the feed interval set in seconds or milliseconds.

startfeed

Starts the feed
Demo
Emits event:feed_start

zingchart.exec('myid', 'startfeed');

stopfeed

Stops the feed
Demo
Emits event:feed_stop

zingchart.exec('myid', 'stopfeed');

Rules

addrule

Adds a rule to a chart. Refer to the rules tutorial for more information.
Introduced in: v1.14.0
Demo

zingchart.exec('myid', 'addrule', { id: 'rule1', plotindex: 0, rule : '%node-value < 50', style: { background-color' : '#f00' } });
ParameterTypeDescription
idStringThe id of the rule
plotindexNumberThe index of the plot to add the rule to
Optional
styleObjectThe styling to apply for the rule
ruleStringThe rule to set.

getrules

Gets all the rules from a specified plot
Introduced in: v1.14.0
Demo

zingchart.exec('myid', 'getrules');
ParameterTypeDescription
plotindexNumberThe plot to retrieve the rules from

removerule

Removes a rule from a chart. Refer to the rules tutorial for more information.
Introduced in: v1.14.0
Demo

zingchart.exec('myid', 'removerule', { id: [ 'rule1', 'rule2' ] });
ParameterTypeDescription
idStringThe id of the rule to remove
plotindexNumberThe index of the plot with the rule to remove
Optional

updaterule

Updates an existing rule on a chart. Refer to the rules tutorial for more information.
Introduced in: v1.14.0
Demo

zingchart.exec('myid', 'updaterule', { id: 'rule1', plotindex: 0, style: { 'background-color': '\#aaa \#333' } });
ParameterTypeDescription
idStringThe id of the rule to update
plotindexNumberThe index of the plot with the rule to update
Optional
styleObjectThe styling that should be applied with the rule.
ruleStringThe rule to be applied

Scalable Y Axis

getscaleminmax

Scalable Y Axis module: Returns the original minimum and maximum scale values.
Introduced in: v2.6.1
Demo

zingchart.exec('myid', 'getscaleminmax');

resetscales

Scalable Y Axis module: Resets scales to their original values
Introduced in: v2.6.1
Demo

zingchart.exec('myid', 'resetscales');
ParameterTypeDescription
syncBooleanSets whether the callback is immediately executed.
Optional
callbackfunctionSets a function which is called once the action is performed.
Optional

resetsetseriesdata

Scalable Y Axis module: Resets scales and sets series data
Introduced in: v2.6.1
Demo

zingchart.exec('myid', 'resetsetseriesdata', { data: {...} });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to set data on. The default is 0.
Optional
plotindexNumberThe index for the plot to set the series data on. Alternative to plotid.
Optional
plotidStringThe id of an existing plot to set the series data on. Alternative to plotindex.
Optional
dataObject|Array.The JSON data 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.

Selection

clearselection

Clears all selected nodes from a graph.
Introduced in: v1.4.0
Demo

zingchart.exec('myid', 'clearselection');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

clicknode

Clicks a specified node.
Demo
Emits event:node_click

zingchart.exec('myid', 'clicknode', { graphid: 1, plotindex: 2, nodeindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
evEventAn existing event which can be passed to the API.
Optional
plotindexNumberThe index of the plot that contains the node to click.
Optional
plotidStringThe id of the plot that contains the node to click.
Optional
nodeindexNumberThe index of the node to click. If unset, it defaults to 0.
Optional

deselect

Sets a combination of nodes in the chart as deselected. If toggle is true, then the nodes already deselected will be selected.
Introduced in: v1.4.0
Demo

zingchart.exec('myid', 'deselect', [ { plotindex: 2, nodeindex: [0,2] }, { plotindex: 1, nodeindex: '1-3'} ]);
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexString|Array.Sets the plots that will be included in the selection collection.
Optional
nodeindexString|Array.Sets the nodes that will be included in the selection collection.
Optional
toggleBooleanSets if the already selected nodes will be deselected.
Optional

getselection

Returns all selected nodes from a graph.
Introduced in: v1.4.0
Demo

zingchart.exec('myid', 'getselection');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

select

Sets a combination of nodes in the chart as selected. If toggle is true, then the nodes already selected will be deselected.
Introduced in: v1.4.0
Demo
Emits event:'zingchart.plugins.selection-tool.selection'

zingchart.exec('myid', 'select', [ { plotindex: 2, nodeindex: [0,2] }, { plotindex: 1, nodeindex: '1-3'} ]);
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexString|Array.Sets the plots that will be included in the selection collection.
Optional
nodeindexString|Array.Sets the nodes that will be included in the selection collection.
Optional
toggleBooleanSets if the already selected nodes will be deselected.

setselection

Sets the selection combination for the entire chart.
Introduced in: v1.4.0
Demo

zingchart.exec('myid', 'setselection', { selection: [...] });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
selectionArray.>An array of arrays containing selection information

Toggle

closemodal

Closes modal screen.
Demo

zingchart.exec('myid', 'closemodal');

disable

Makes the chart inactive for user interactions, usually in the case of time consuming operations. An optional text can be provided as a waiting message. See enable.
Demo

zingchart.exec('myid', 'disable', { text: 'Wait, data is being fetched...' });
ParameterTypeDescription
textStringThe waiting message to display while the chart is disabled.
Optional

enable

Makes the chart active for user interactions. See disable.
Demo

zingchart.exec('myid', 'enable');

exitfullscreen

Destroys the full screen render of the chart
Demo

zingchart.exec('myid', 'exitfullscreen');

fullscreen

Renders the chart in full screen mode.
Demo

zingchart.exec('myid', 'fullscreen');

hidemenu

Hides the context menu.
Demo

zingchart.exec('myid', 'hidemenu');

openmodal

Opens chart in a modal window.
Demo

zingchart.exec('myid', 'openmodal', { height: 400, width: 400 });
ParameterTypeDescription
heightNumberThe height of the modal window
Optional
widthNumberThe width of the modal window
Optional

plothide

Hides the plot set by plotindex (or plotid).
Demo

zingchart.exec('myid', 'plothide', { graphid: 1, plotindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumber|Array.The index of the plot to hide. Alternative to plotid
Optional
plotidStringThe id of the plot to hide. Alternative to plotindex
Optional
toggleActionStringSets a specific toggle action ("hide" or "remove") when executing the API (similar to the toggleAction behavior of the legend)
Optional

showhoverstate

Shows the hoverstate of a specific node.
Introduced in: v1.9.0
Demo

zingchart.exec('myid', 'showhoverstate', { graphid: 1, plotindex: 2, nodeindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumberThe index of the plot that contains the node to show the hover state of. Alternative to plotid
Optional
plotidStringThe id of the plot that contains the node to show the hover state of. Alternative to plotindex
Optional
nodeindexNumberThe index of the node to show the hover state of. If unset, it defaults to 0.
Optional

showmenu

Displays the context menu.
Introduced in: v2.4.0
Demo

zingchart.exec('myid', 'showmenu', { x: 100, y: 100 });
ParameterTypeDescription
xNumberThe x position to display the context menu at
Optional
yNumberThe y position to display the context menu at
Optional

showplot

Shows the plot set by plotindex (or plotid).
Demo

zingchart.exec('myid', 'showplot', { graphid: 1, plotindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumberThe index of the plot to show. Alternative to plotid.
Optional
plotidStringThe id of the plot to show. Alternative to plotindex.
Optional
toggleActionStringUses a specific toggle action ("hide" or "remove") when executing the API (similar to the toggleAction behavior of the legend)
Optional

toggleabout

Toggles the About Screen.
Demo
Emits event:about_show

zingchart.exec('myid', 'toggleabout');

togglebugreport

Toggles the Bug Report Screen.
Demo

zingchart.exec('myid', 'togglebugreport');

toggledimension

Toggles the Dimension of the current graph between 2D and 3D, if possible.
Demo

zingchart.exec('myid', 'toggledimension');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph to toggle the legend on. The default is 0.
Optional

toggleplot

Toggles the visibility of the plot.
Demo

zingchart.exec('myid', 'toggleplot', { graphid: 1, plotindex: 2, toggleAction: 'show' });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
plotindexNumberThe index of the plot to toggle.
Optional
plotidStringThe id of the plot to toggle.
Optional
toggleActionStringSets a specific toggle action ("hide" or "remove") when executing the API (similar to the toggleAction behavior of the legend)
Optional
ignoreLegendBooleanWhen true, does not apply the API toggling effect to the legend object.
Optional

togglesource

Toggles the visibility of the View Source Screen.
Demo
Emits event:source_show

zingchart.exec('myid', 'togglesource');

Tooltip

hidetooltip

Hides a tooltip.
Introduced in: v1.9.0
Demo

zingchart.exec('myid', 'hidetooltip', { graphid: 1 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

locktooltip

Locks a visible tooltip in its visible state.
Demo

zingchart.exec('myid', 'locktooltip');

showtooltip

Shows a tooltip.
Introduced in: v1.9.0
Demo

zingchart.exec('myid', 'showtooltip', { graphid: 1, plotindex: 2, nodeindex: 2 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
evEventAn existing event which can be passed to the API.
Optional
plotindexNumberThe index of the plot that contains the node to show the tooltip on.
Optional
plotidStringThe id of the plot that contains the node to show the tooltip on.
Optional
nodeindexNumberThe index of the node to show the tooltip on. If unset, it defaults to 0.
Optional
xyBooleanSet to true if placing a tooltip at an x/y position
Optional
xNumberIf xy is true, the x position of the tooltip
Optional
yNumberIf xy is true, the y position of the tooltip
Optional
dataObjectAdditional data (styling, text) that is passed to the tooltip object.
Optional

unlocktooltip

Unlocks a locked tooltip
Demo

zingchart.exec('myid', 'unlocktooltip');

Tree

tree.addlink

Adds a link between two existing nodes on a tree
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'tree.addlink', { data: { source: 'sourcenode', target: 'targetnode', value: 10 } });
ParameterTypeDescription
dataObjectThe link data
data.sourceStringThe id of the node to be used for the source of the connection
data.targetStringThe id of the node to be used for the target of the connection
data.valueNumberThe link value
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

tree.addnode

Adds a node to an existing tree.
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'tree.addnode', { data: {...} });
ParameterTypeDescription
dataObjectThe data for the node to be added
data.idStringThe id of the node
data.textStringThe text of the node
data.valueNumberThe value of the node
data.containerNumberThe container the node belongs in
Optional
data.groupNumberThe group the node belongs in
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

tree.getdata

Returns the data for the tree
Introduced in: v2.8.4

zingchart.exec('myid', 'tree.getdata');

tree.removelink

Removes an existing link between two existing nodes on a tree
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'tree.removelink', { data: { source: 'sourcenode', target: 'targetnode' } });
ParameterTypeDescription
dataObjectThe link data
data.sourceStringThe id of the node to be used for the source of the connection that should be removed
data.targetStringThe id of the node to be used for the target of the connection that should be removed
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

tree.removenode

Removes a specified node from an existing tree.
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'tree.removenode', { id: 'nodeid' });
ParameterTypeDescription
idStringThe id of the node to be removed
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

tree.set

Sets data for the tree
Introduced in: v2.8.4
Demo

zingchart.exec('myid', 'tree.set', { data: {...} });
ParameterTypeDescription
dataObjectThe data to set in the tree
data.attractionConstantNumberDetermines the amount of magnetization between each node in a graph tree chart. To be used with repulsion constant.
Optional
data.repulsionConstantNumberDetermines the amount of magnetization between each node in a graph tree chart. To be used with attraction constant.
Optional
data.springLengthNumberDetermines the distance a link will be stretched when a node is repulsed by another.
Optional
updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

Treemap

addNode

Adds a treemap node as a child to an existing node (parent).

zingchart.exec('myid', 'treemap.addNode', { graphid : 0, id: 'parent1', data: { value : 100, style : { backgroundColor : '#ff9900' } } });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
idStringSets the id of the parent node on which the new node is being added (if exists)
Optional
textStringSets the text of the parent node on which the new node is being added (if exists)
Optional
dataObjectSets the data of the new treemap node.
Optional
updateBooleanSets (default true) if the API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

removeNode

Removes a treemap node.

zingchart.exec('myid', 'treemap.addNode', { graphid : 0, id: 'parent1', data: { value : 100, style : { backgroundColor : '#ff9900' } } });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
idStringSets the id of the node which will be deleted (if exists)
Optional
textStringSets the text of the node which will be deleted (if exists)
Optional
updateBooleanSets (default true) if the API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

updateNode

Updates a treemap node (value and / or style)

zingchart.exec('myid', 'treemap.updateNode', { graphid : 0, id: 'node1', data: { value : 100, style : { backgroundColor : '#ff9900' } } });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
idStringSets the id of the node being updated (if exists)
Optional
textStringSets the text of the node being updated (if exists)
Optional
dataObjectSets the data which will be appended to the existing node data.
Optional
updateBooleanSets (default true) if the API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
Optional

Zoom

getzoom

Get zoom information on a chart.
Introduced in: v1.2.0

zingchart.exec('myid', 'getzoom');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

pan

Pan on a graph
Introduced in: v1.2.0

zingchart.exec('myid', 'pan', { xdist: 100, ydist: -100 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
xdistNumberThe x distance to pan the graph. Direction is given by the sign of the value (+/-).
Optional
ydistNumberThe y distance to pan the graph. Direction is given by the sign of the value (+/-).
Optional

viewall

Resets the zoom on the chart.
Introduced in: v1.2.0
Demo
Emits event:beforezoom

zingchart.exec('myid', 'viewall');
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional

zoomin

Zooms in the graph.
Introduced in: v1.2.0
Demo
Emits event:beforezoom

zingchart.exec('myid', 'zoomin', { zoomx: true });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
zoomxBooleanSets if the graph will zoom on the x scale.
Optional
zoomyBooleanSets if the graph will zoom on the y scale.
Optional

zoomout

Zooms out the graph.
Introduced in: v1.2.0
Demo
Emits event:beforezoom

zingchart.exec('myid', 'zoomout', { zoomx: true });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
zoomxBooleanSets if the graph will zoom on the x scale.
Optional
zoomyBooleanSets if the graph will zoom on the y scale.
Optional

zoomto

Zooms to a specific area in a graph.
Introduced in: v1.2.0
Demo
Emits event:beforezoom

zingchart.exec('myid', 'zoomto', { graphid: 0, xmin: 10, xmax: 40, ymin: 1500, ymax: 3000 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
xallBooleanForces the new zoom parameters on all x scales.
Optional
xminNumber|StringThe min x value to zoom to.
Optional
xmaxNumber|StringThe max x value to zoom to.
Optional
yallBooleanForces the new zoom parameters on all y scales.
Optional
yminNumber|StringThe min y value to zoom to.
Optional
ymaxNumber|StringThe max y value to zoom to.
Optional
kminNumberThe minimum Unix time value (in milliseconds) to zoom to.
Optional
kmaxNumberThe maximum Unix time value (in milliseconds) to zoom to.
Optional

zoomtovalues

Zooms to a specific area in a graph specified by x scale values/labels.
Introduced in: v1.2.0
Demo
Emits event:beforezoom

zingchart.exec('myid', 'zoomtovalues', { graphid: 0, xmin: "Jan", xmax: "Apr", ymin: 1500, ymax: 3000 });
ParameterTypeDescription
graphidNumber|StringThe id/index of the graph. The default is 0.
Optional
xallBooleanForces the new zoom parameters on all x scales.
Optional
xminNumber|StringThe min x value to zoom to.
Optional
xmaxNumber|StringThe max x value to zoom to.
Optional
yallBooleanForces the new zoom parameters on all y scales.
Optional
yminNumber|StringThe min y value to zoom to.
Optional
ymaxNumber|StringThe max y value to zoom to.
Optional

Summary

ZingChart methods allow you to programmatically manipulate your ZingChart. Get and set data, add or remove chart labels, and more with ZingChart methods.

On This Page