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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| value | Number | The 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: {...} });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| data | Object | The 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) {...});
| Parameter | Type | Description |
|---|---|---|
| chartid | String | The id of the chart to target |
| eventname | String | The name of the event to listen for. |
| functionname | function | Handler 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());
| Parameter | Type | Description |
|---|---|---|
| chartid | String | The id of the chart to target |
| eventname | String | The name of the event to unbind. |
| functionname | function | The 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' });
| Parameter | Type | Description |
|---|---|---|
| fn | String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| fn | String | The filename that the data should be saved to. |
| callback | function | Sets 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' });
| Parameter | Type | Description |
|---|---|---|
| fn | String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| url | String | Sets the URL to which the chart data will be posted. |
| callback | function | Sets 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' });
| Parameter | Type | Description |
|---|---|---|
| download | Boolean | If you should download the image as a file. Optional |
| options | Object | - Optional |
| uid | String | Sets an unique id provided in case the export contains multiple pages. Optional |
| page | String | Sets 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 |
| format | String | Sets the format of the exported file (alias for `filetype`). Can be 'png', 'jpg' or 'pdf' Optional |
| filetype | String | Sets the format of the exported file (alias for `format`). Can be 'png', 'jpg' or 'pdf' Optional |
| filename | String | Sets the name of the file being sent back by the export server. |
| url | String | Sets 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 |
| callback | function | Sets 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' });
| Parameter | Type | Description |
|---|---|---|
| format | String | The image filetype. The default is jpg. Other options are bmp (flash only) and png. Alternative to filetype. Optional |
| filetype | String | The image filetype. The default is jpg. Other options are bmp (flash only) and png. Alternative to format. Optional |
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' });
| Parameter | Type | Description |
|---|---|---|
| download | Boolean | If you should download the image as a file. Optional |
| options | Object | - Optional |
| uid | String | Sets an unique id provided in case the export contains multiple pages. Optional |
| page | String | Sets 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 |
| format | String | Sets the format of the exported file (alias for `filetype`). Can be 'png', 'jpg' or 'pdf' Optional |
| filetype | String | Sets the format of the exported file (alias for `format`). Can be 'png', 'jpg' or 'pdf' Optional |
| filename | String | Sets the name of the file being sent back by the export server. |
| url | String | Sets 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 |
| callback | function | Sets 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' });
| Parameter | Type | Description |
|---|---|---|
| menuid | String | "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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number | The index of the plot that contains the bubble value. Alternative to plotid. Optional |
| plotid | String | The id of the plot that contains the bubble value. Alternative to plotindex. Optional |
| value | Number | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to retrieve the node length from. The default is 0. Optional |
| plotindex | Number | The index of the plot to retrieve node length from. Alternative to plotid. Optional |
| plotid | String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to retrieve the node value from. The default is 0. Optional |
| plotindex | Number | The index of the plot to retrieve node value from. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot to retrieve node value from. Alternative to plotindex. Optional |
| nodeindex | Number | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| object | String | The object to get information on. One of: "graph", "scale", "plot", "node" |
| name | String | The name of the scale if object is "scale". Optional |
| nodeindex | Number | The index of the node to get information on when object is "node" Optional |
| plotid | String | The 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 |
| plotindex | Number | The 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to retrieve the node value from. The default is 0. Optional |
| plotindex | Number | The index of the plot to retrieve values from. Alternative to plotid. Optional |
| plotid | String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| name | String | The name of the scale to get information for. Optional |
| value | Number | Value of a scale. If provided, the API will return the coordinate of that value on the scale. Optional |
| coord | Number | Coordinate 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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});
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to retrieve data from. The default is 0. Optional |
| plotindex | Number | The index for the plot from which to retrieve series data. Alternative to plotid. Optional |
| plotid | String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to set data on. The default is 0. Optional |
| plotindex | Number | The index for the plot to retrieve the series values from. Alternative to plotid. Optional |
| plotid | String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| x | Number | The x position of the point to get information on. |
| y | Number | The y position of the point to get information on. |
Graph Manipulation
addgraph
Adds another graph to the graphset
Demo
zingchart.exec('myid', 'addgraph', { data: {...});
| Parameter | Type | Description |
|---|---|---|
| data | Object | The graph configuration to be added to the graphset |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| id | String | The id of the custom-item to add to the context menu Optional |
| text | String | Defines the text to be displayed Optional |
| function | String | Name of the function to be associated with this context menu item. Function must be registered in the global scope. Optional |
| order | Number | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| value | any | The value of the node to be added. |
| plotindex | Number | The index for the plot which the new node should be added to. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot which the new node should be added to. Alternative to plotindex. Optional |
| nodeindex | Number | The 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 |
| update | Boolean | Sets (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" } });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| data | Object | The JSON for the plot to be added to the series section of the graph. Alternative to plotdata. Optional |
| plotdata | Object | The JSON for the plot to be added to the series section of the graph. Alternative to data. Optional |
| plotindex | Number | The index for the plot to be inserted at. If omitted, the new plot is added to the end of the series data. Optional |
| plotid | String | The 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 |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| scale | String | The id of the scale to be modified. The default is 'scale-x' Optional |
| nodeindex | Number | The index of where the scale value should be inserted. If it is not set, it is placed at the end. Optional |
| value | Number|String | The new scale value to be added. |
| update | Boolean | Sets (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: {...} });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to set data on. The default is 0. Optional |
| plotindex | Number | The index for the plot to append the series data to. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot to append the series data to. Alternative to plotindex. Optional |
| data | Object|Array.<Object> | 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. |
| update | Boolean | Sets (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: [...] });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to append values to. The default is 0. Optional |
| plotindex | Number | The index for the plot to append the series values to. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot to append the series values to. Alternative to plotindex. Optional |
| values | Array.<Number> | The array of data that would be set in the series section of the JSON for the individual plot. |
| maxValues | Number | Sets 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 |
| ignoreduplicates | Boolean | For key value pairs (Scatter charts) you would set this to false to add duplicate keys to the chart. Optional |
| update | Boolean | Sets (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: [...] });
| Parameter | Type | Description |
|---|---|---|
| graphindex | Number | The index of the graph. The default is 0. Optional |
| values | Array | The new calendar values to set. |
clear
Clears a graph
Demo
zingchart.exec('myid', 'clear', { graphid: 1 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | If 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
zingchart.exec('myid', 'clearscroll');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| minValue | Number | Sets the minimum heatmap value Optional |
| maxValue | Number | Sets the maximum heatmap value Optional |
| size | Number | Modifies how large each painted shape is. Optional |
| blur | Number | Modifies the amount of blur that appears around each shape. Optional |
| data | Array.<Array.<Number>> | 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| dataurl | String | The url to fetch the JSON from. |
loadModules
This method allows you to load specified module(s).
zingchart.loadModules('maps,maps-usa');
| Parameter | Type | Description |
|---|---|---|
| modules | String | The modules to load (animation, errorbars, guide, history, maps, maps-*, objects, preview, refresh, scalemarkers, scroll, tooltip, zoom). |
| callback | function | Calback 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: { ...} } );
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| data | Object | The JSON packet to apply to the graph. It will be merged with the previous JSON. |
| object | String | Optional shortcut to only modify specific parts of the graph. Available options are: "title", "plotset", "series", "plotarea", "legend", "plot", "map" Optional |
| update | Boolean | Sets (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: {...} });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| data | Object | The JSON packet to apply to the plot. It will be merged with the previous JSON. Alternative to plotdata. Optional |
| plotdata | Object | The JSON packet to apply to the plot. It will be merged with the previous JSON. Alternative to data. Optional |
| plotindex | Number | The index for the plot to be modified. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot to be modified. Alternative to plotindex. Optional |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | If 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number | The index for the plot from which the node should be removed. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot from which the node should be removed. Alternative to plotindex. Optional |
| nodeindex | Number | The index of the node to be removed. If it is not set, the last node in the series is removed. Optional |
| nodekeyvalue | Number | The value of the key of the node to be removed. If it is not set, the last node in the series is removed. Optional |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number | The index of the plot to be removed. Alternative to plotid. Optional |
| plotid | String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| scale | String | The id of the scale to be modified. The default is 'scale-x' Optional |
| nodeindex | Number | The index of the scale value to be removed. If it is not set, the last value is removed. Optional |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| width | Number | The new width of the chart Optional |
| height | Number | The new height of the chart Optional |
| layout | String | Forces 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| true3d | Boolean | Sets whether the chart uses a true 3D engine or an isometric view. Disabling true3d forces an isometric view. Optional |
| angle | Number | Sets the view angle when using the isometric 3D engine. Value can be between 0 and 90, with the default viewing angle being 45°. Optional |
| depth | Number | Sets the Z depth for a 3D chart type displayed in either isometric or true 3D. Optional |
| xAngle | Number | Sets the X rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type. Optional |
| yAngle | Number | Sets the Y rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type. Optional |
| zAngle | Number | Sets the Z rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type. Optional |
| zoom | Number | Sets 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| preserveState | Boolean | If true, preserves graph state (zoom, selection, etc) after the type is updated Optional |
| type | String | The desired chart type |
| update | Boolean | Sets (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: {...} });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to set data for. The default is 0. Optional |
| data | Object | The JSON packet to apply to the graph. It will replace the previous JSON. |
| preservezoom | Boolean | If set, preserves the zoom level of the graph after setting the data. Optional |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number | The index for the plot containing the node to be modified. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot containing the node to be modified. Alternative to plotindex. Optional |
| nodeindex | Number | The index of the node to be modified. |
| value | Number | The new node value. |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| page | Number | Active graphset page number. |
setscalevalues
Changes the values on a specific scale
Demo
zingchart.exec('myid', 'setscalevalues', { scale: 'scale-y', values: [1, 2, 3, 4] });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| scale | String | The id of the scale to be modified. The default is 'scale-x' Optional |
| values | Array.<(Number|String)> | The new scale values. |
| update | Boolean | Sets (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: {...} });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to set data on. The default is 0. Optional |
| plotindex | Number | The index for the plot to set the series data on. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot to set the series data on. Alternative to plotindex. Optional |
| data | Object|Array.<Object> | 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. |
| update | Boolean | Sets (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: [...] });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to set values on. The default is 0. Optional |
| plotindex | Number | The index for the plot to set the series values on. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot to set the series values on. Alternative to plotindex. Optional |
| values | Array.<Number> | The array of data that would be set in the series section of the JSON for the individual plot. |
| update | Boolean | Sets (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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
Guide
hideguide
Hides the guide object.
Demo
zingchart.exec('myid', 'hideguide');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| keyvalue | Number | The key value at which the guide fires. Optional |
| x | Number | The node index at which the guide fires. Optional |
showguide
Shows the guide object.
Demo
zingchart.exec('myid', 'showguide', { x: 2 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| x | Number | The x value to show the guide at Optional |
| y | Number | The 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to maximize the legend on. The default is 0. Optional |
| plotindex | Number | The index of the plot to scroll to in the legend. Alternative to plotid. Optional |
| plotid | String | The 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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);
| Parameter | Type | Description |
|---|---|---|
| graphid | String | The id of the graph to destroy. |
maps.getInfo
This method returns information about the map.
Demo
zingchart.maps.getInfo('mapid');
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The id of the map |
maps.getItemInfo
This method returns information about the specified map item.
Demo
zingchart.maps.getItemInfo('mapid', 'itemid');
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The id of the map. |
| itemid | String | The id of the item to retrieve information on. |
maps.getItems
This method returns a list of the map items.
Demo
zingchart.maps.getItems('mapid');
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The 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]);
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The id of the map |
| xy | Array.<Number> | 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);
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map |
| graphIndex | Number | The 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]);
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The id of the map |
| lonlat | Array.<Number> | The longitude and latitude coordinates to retrieve the x,y position of |
| itemid | String | To 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: {,,,} });
| Parameter | Type | Description |
|---|---|---|
| id | String | The name of the custom map |
| url | String | The map file source |
| mappings | Object | Allows you to map property names from the GeoJSON file to ZingChart Optional |
| ignore | Array.<String> | Allows you to filter items from the map. Optional |
| style | Object | Styling properties for the map. Optional |
| callback | function | The 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: {,,,} });
| Parameter | Type | Description |
|---|---|---|
| id | String | The name of the custom map |
| url | String | The map file source |
| mappings | Object | Allows you to map property names from the TopoJSON file to ZingChart Optional |
| ignore | Array.<String> | Allows you to filter items from the map. Optional |
| style | Object | Styling properties for the map. Optional |
| callback | function | The 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);
| Parameter | Type | Description |
|---|---|---|
| graphid | String | The id of the graph to set the view on. |
| mapid | String | The id of the map to set the view on. |
| zoom | Number | The zoom level (default is 1) |
| offsetX | Number | The x direction offset of the chart view |
| offsetY | Number | The 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');
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The 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');
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The 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');
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The id of the map to zoom on. |
| to | Object | An object that defines where to zoom to |
| to.zoom | Number | Sets the zoom level |
| to.offsetX | Number | Sets the x direction offset of the map view |
| to.offsetY | Number | Sets 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');
| Parameter | Type | Description |
|---|---|---|
| mapid | String | The id of the map to zoom on. |
| itemid | String | The 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] });
| Parameter | Type | Description |
|---|---|---|
| graphidx | Number | The index of the graph. The default is 0. Alternative to graphid Optional |
| graphid | String | The id of the graph. Alternative to graphidx. Optional |
| style | Object | The styling configuration of the marker Optional |
| label | String | Sets the label text on the marker Optional |
| labelPlacement | String | Sets the label placement on the marker Optional |
| labelAlignment | String | Sets the label alignment on the marker label Optional |
| offsetStart | Number | Offsets the starting position of the marker Optional |
| offsetEnd | Number | Offsets the end position of the marker Optional |
| id | String | The unique marker id to reference this marker later |
| type | String | The type of marker. One of: "line", "area" |
| scale | String | The scale to attach the marker to Optional |
| pairScale | String | For poly type markers, sets the scale which will be the pair scale, providing the complementary coordinates. Optional |
| range | Array | The 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 |
| valueRange | Boolean | When 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' });
| Parameter | Type | Description |
|---|---|---|
| graphidx | Number | The index of the graph. The default is 0. Alternative to graphid Optional |
| graphid | String | The id of the graph. Alternative to graphidx. Optional |
| id | String | The id of the marker to remove |
| scale | String | The 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] });
| Parameter | Type | Description |
|---|---|---|
| graphidx | Number | The index of the graph. The default is 0. Alternative to graphid Optional |
| graphid | String | The id of the graph. Alternative to graphidx. Optional |
| style | Object | The styling configuration of the marker Optional |
| label | String | Sets the label text on the marker Optional |
| labelPlacement | String | Sets the label placement on the marker Optional |
| labelAlignment | String | Sets the label alignment on the marker label Optional |
| offsetStart | Number | Offsets the starting position of the marker Optional |
| offsetEnd | Number | Offsets the end position of the marker Optional |
| id | String | The unique marker id to reference this marker later |
| type | String | The type of marker. One of: "line", "area" Optional |
| scale | String | The scale to attach the marker to Optional |
| pairScale | String | For 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 |
| range | Array | The 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 |
| valueRange | Boolean | When 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 });
| Parameter | Type | Description |
|---|---|---|
| id | String | The id of the note. |
| style | Object | Styling attributes to be applied to the note. Optional |
| text | String | The text to be included in the note. Optional |
| type | String | The type of note to be added. One of: "node", "scale", "xy" Optional |
| plotindex | Number | The index of the plot to update the note on when type is "node". Optional |
| nodeindex | Number | The index of the node to update the note on when type is "node". Optional |
| scaleindex | Number | The index of the scale to update the note on when type is "scale". Optional |
| scalevalue | String | The value of the scale item to update the note on when type is "scale". Optional |
| x | Number | The x position of the note when type is "xy". Optional |
| y | Number | The y position of the note when type is "xy". Optional |
| offsetX | Number | An offset in the x direction to be applied to the note. Optional |
| offsetY | Number | An 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' ] });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| id | String|Array.<String> | 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)' });
| Parameter | Type | Description |
|---|---|---|
| id | String | The id of the note to be updated. |
| style | Object | Styling attributes to be applied to the note. Optional |
| text | String | The text to be included in the note. Optional |
| type | String | The type of note to be updated. One of: "node", "scale", "xy" Optional |
| plotindex | Number | The index of the plot to update the note on when type is "node". Optional |
| nodeindex | Number | The index of the node to update the note on when type is "node". Optional |
| scaleindex | Number | The index of the scale to update the note on when type is "scale". Optional |
| scalevalue | String | The value of the scale item to update the note on when type is "scale". Optional |
| x | Number | The x position of the note when type is "xy". Optional |
| y | Number | The y position of the note when type is "xy". Optional |
| offsetX | Number | An offset in the x direction to be applied to the note. Optional |
| offsetY | Number | An 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| data | Object|Array.<Object> | 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. |
| type | String | The type of the object: either "label" or "shape" |
| callback | function | Function to be called after the API was executed. Optional |
| update | Boolean | Sets (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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| type | String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| id | String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| class | String|Array.<String> | 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 |
| cls | String|Array.<String> | 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 |
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| type | String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| id | String | The id of the shape to retrieve information on |
| type | String | Set to 'shape'. |
removeobject
Removes one or more objects (labels or shapes) from the chart.
Demo
zingchart.exec('myid', 'removeobject', { type: 'shape', id: 'shapeid' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| class | String|Array.<String> | 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 |
| cls | String|Array.<String> | 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 |
| id | String|Array.<String> | 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 |
| group | String|Array.<String> | 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 |
| type | String | The type of object to remove: either "shape" or "label" |
| update | Boolean | Sets (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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| callback | function | Function 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' });
| Parameter | Type | Description |
|---|---|---|
| mode | String | The 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: {...} });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| class | String|Array.<String> | 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 |
| cls | String|Array.<String> | 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 |
| id | String|Array.<String> | 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 |
| group | String|Array.<String> | 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 |
| type | String | The type of object to update: either "shape" or "label" |
| data | Object|Array.<Object> | 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. |
| callback | function | Function to be called after the API was executed. Optional |
| update | Boolean | Sets (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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| interval | Number | Time 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' } });
| Parameter | Type | Description |
|---|---|---|
| id | String | The id of the rule |
| plotindex | Number | The index of the plot to add the rule to Optional |
| style | Object | The styling to apply for the rule |
| rule | String | The rule to set. |
getrules
Gets all the rules from a specified plot
Introduced in: v1.14.0
Demo
zingchart.exec('myid', 'getrules');
| Parameter | Type | Description |
|---|---|---|
| plotindex | Number | The 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' ] });
| Parameter | Type | Description |
|---|---|---|
| id | String | The id of the rule to remove |
| plotindex | Number | The 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' } });
| Parameter | Type | Description |
|---|---|---|
| id | String | The id of the rule to update |
| plotindex | Number | The index of the plot with the rule to update Optional |
| style | Object | The styling that should be applied with the rule. |
| rule | String | The 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');
| Parameter | Type | Description |
|---|---|---|
| sync | Boolean | Sets whether the callback is immediately executed. Optional |
| callback | function | Sets 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: {...} });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph to set data on. The default is 0. Optional |
| plotindex | Number | The index for the plot to set the series data on. Alternative to plotid. Optional |
| plotid | String | The id of an existing plot to set the series data on. Alternative to plotindex. Optional |
| data | Object|Array.<Object> | 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| ev | Event | An existing event which can be passed to the API. Optional |
| plotindex | Number | The index of the plot that contains the node to click. Optional |
| plotid | String | The id of the plot that contains the node to click. Optional |
| nodeindex | Number | The 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'} ]);
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | String|Array.<Number> | Sets the plots that will be included in the selection collection. Optional |
| nodeindex | String|Array.<Number> | Sets the nodes that will be included in the selection collection. Optional |
| toggle | Boolean | Sets 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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'} ]);
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | String|Array.<Number> | Sets the plots that will be included in the selection collection. Optional |
| nodeindex | String|Array.<Number> | Sets the nodes that will be included in the selection collection. Optional |
| toggle | Boolean | Sets 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: [...] });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| selection | Array.<Array.<Number>> | 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...' });
| Parameter | Type | Description |
|---|---|---|
| text | String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| height | Number | The height of the modal window Optional |
| width | Number | The width of the modal window Optional |
plothide
Hides the plot set by plotindex (or plotid).
Demo
zingchart.exec('myid', 'plothide', { graphid: 1, plotindex: 2 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number|Array.<Number> | The index of the plot to hide. Alternative to plotid Optional |
| plotid | String | The id of the plot to hide. Alternative to plotindex Optional |
| toggleAction | String | Sets 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number | The index of the plot that contains the node to show the hover state of. Alternative to plotid Optional |
| plotid | String | The id of the plot that contains the node to show the hover state of. Alternative to plotindex Optional |
| nodeindex | Number | The 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 });
| Parameter | Type | Description |
|---|---|---|
| x | Number | The x position to display the context menu at Optional |
| y | Number | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number | The index of the plot to show. Alternative to plotid. Optional |
| plotid | String | The id of the plot to show. Alternative to plotindex. Optional |
| toggleAction | String | Uses 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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' });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| plotindex | Number | The index of the plot to toggle. Optional |
| plotid | String | The id of the plot to toggle. Optional |
| toggleAction | String | Sets a specific toggle action ("hide" or "remove") when executing the API (similar to the toggleAction behavior of the legend) Optional |
| ignoreLegend | Boolean | When 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| ev | Event | An existing event which can be passed to the API. Optional |
| plotindex | Number | The index of the plot that contains the node to show the tooltip on. Optional |
| plotid | String | The id of the plot that contains the node to show the tooltip on. Optional |
| nodeindex | Number | The index of the node to show the tooltip on. If unset, it defaults to 0. Optional |
| xy | Boolean | Set to true if placing a tooltip at an x/y position Optional |
| x | Number | If xy is true, the x position of the tooltip Optional |
| y | Number | If xy is true, the y position of the tooltip Optional |
| data | Object | Additional 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 } });
| Parameter | Type | Description |
|---|---|---|
| data | Object | The link data |
| data.source | String | The id of the node to be used for the source of the connection |
| data.target | String | The id of the node to be used for the target of the connection |
| data.value | Number | The link value Optional |
| update | Boolean | Sets (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: {...} });
| Parameter | Type | Description |
|---|---|---|
| data | Object | The data for the node to be added |
| data.id | String | The id of the node |
| data.text | String | The text of the node |
| data.value | Number | The value of the node |
| data.container | Number | The container the node belongs in Optional |
| data.group | Number | The group the node belongs in Optional |
| update | Boolean | Sets (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' } });
| Parameter | Type | Description |
|---|---|---|
| data | Object | The link data |
| data.source | String | The id of the node to be used for the source of the connection that should be removed |
| data.target | String | The id of the node to be used for the target of the connection that should be removed |
| update | Boolean | Sets (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' });
| Parameter | Type | Description |
|---|---|---|
| id | String | The id of the node to be removed |
| update | Boolean | Sets (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: {...} });
| Parameter | Type | Description |
|---|---|---|
| data | Object | The data to set in the tree |
| data.attractionConstant | Number | Determines the amount of magnetization between each node in a graph tree chart. To be used with repulsion constant. Optional |
| data.repulsionConstant | Number | Determines the amount of magnetization between each node in a graph tree chart. To be used with attraction constant. Optional |
| data.springLength | Number | Determines the distance a link will be stretched when a node is repulsed by another. Optional |
| update | Boolean | Sets (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' } } });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| id | String | Sets the id of the parent node on which the new node is being added (if exists) Optional |
| text | String | Sets the text of the parent node on which the new node is being added (if exists) Optional |
| data | Object | Sets the data of the new treemap node. Optional |
| update | Boolean | Sets (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' } } });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| id | String | Sets the id of the node which will be deleted (if exists) Optional |
| text | String | Sets the text of the node which will be deleted (if exists) Optional |
| update | Boolean | Sets (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' } } });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| id | String | Sets the id of the node being updated (if exists) Optional |
| text | String | Sets the text of the node being updated (if exists) Optional |
| data | Object | Sets the data which will be appended to the existing node data. Optional |
| update | Boolean | Sets (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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| xdist | Number | The x distance to pan the graph. Direction is given by the sign of the value (+/-). Optional |
| ydist | Number | The 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');
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| zoomx | Boolean | Sets if the graph will zoom on the x scale. Optional |
| zoomy | Boolean | Sets 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| zoomx | Boolean | Sets if the graph will zoom on the x scale. Optional |
| zoomy | Boolean | Sets 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| xall | Boolean | Forces the new zoom parameters on all x scales. Optional |
| xmin | Number|String | The min x value to zoom to. Optional |
| xmax | Number|String | The max x value to zoom to. Optional |
| yall | Boolean | Forces the new zoom parameters on all y scales. Optional |
| ymin | Number|String | The min y value to zoom to. Optional |
| ymax | Number|String | The max y value to zoom to. Optional |
| kmin | Number | The minimum Unix time value (in milliseconds) to zoom to. Optional |
| kmax | Number | The 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 });
| Parameter | Type | Description |
|---|---|---|
| graphid | Number|String | The id/index of the graph. The default is 0. Optional |
| xall | Boolean | Forces the new zoom parameters on all x scales. Optional |
| xmin | Number|String | The min x value to zoom to. Optional |
| xmax | Number|String | The max x value to zoom to. Optional |
| yall | Boolean | Forces the new zoom parameters on all y scales. Optional |
| ymin | Number|String | The min y value to zoom to. Optional |
| ymax | Number|String | The 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.