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})

Color Scale

colorscale.clear

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

zingchart.exec('myid', 'colorscale.clear');

colorscale.getinfo

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

zingchart.exec('myid', 'colorscale.getinfo');

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 });

colorscale.update

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

zingchart.exec('myid', 'colorscale.update', { data: {...} });

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) {...});

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());

Export

downloadCSV

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

zingchart.exec('myid', 'downloadCSV', { fn: 'test-filename' });

downloadRAW

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

zingchart.exec('myid', 'downloadRAW', { fn: 'test-filename' });

downloadXLS

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

zingchart.exec('myid', 'downloadXLS', { fn: 'test-filename' });

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' });

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' });

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' });

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' });

viewDataTable

Toggles the view of chart data in a table.

zingchart.exec('myid', 'viewDataTable', { menuid: 'viewdatatable' });

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 });

getbubblesize

Get the size of the bubble on a bubble chart

zingchart.exec('myid', 'getbubblesize', { graphid: 1, plotindex: 1 });

getcharttype

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

zingchart.exec('myid', 'getcharttype', { graphid: 1 });

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 });

getnodevalue

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

zingchart.exec('myid', 'getnodevalue', { plotindex: 2, nodeindex: 5 });

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 });

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.

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

getplotlength

Returns the number of plots in a given graph
Demo

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

getplotvalues

Returns the value of the given plot.
Demo

zingchart.exec('myid', 'getplotvalues', { plotindex: 1 });

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' });

getscales

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

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

getseriesdata

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

zingchart.exec('myid', 'getseriesdata', { graphid: 1, plotindex: 1});

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 });

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 });

Graph Manipulation

addgraph

Adds another graph to the graphset
Demo

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

addmenuitem

Adds a new item to the context menu.
Demo

zingchart.exec('myid', 'addmenuitem', { text: 'New Item', function : 'window.myFunc()', order : 4 });

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 });

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" } });

addscalevalue

Adds a new value on a specified scale.
Demo

zingchart.exec('myid', 'addscalevalue', { scale: 'scale-y', value: 5 });

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: {...} });

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: [...] });

calendar_setvalues

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

zingchart.exec('myid', 'calendar_setvalues', { values: [...] });

clear

Clears a graph
Demo

zingchart.exec('myid', 'clear', { graphid: 1 });

clearscroll

Resets both x and y scrolling to default position

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

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 });

load

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

zingchart.exec('myid', 'load', { graphid: 1, dataurl: 'newjson.php' });

modify

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

zingchart.exec('myid', 'modify', { graphid: 1, data: { ...} } );

modifyplot

Modifies an existing plot object.
Demo
Emits event:plot_modify

zingchart.exec('myid', 'modifyplot', { plotdata: {...} });

reload

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

zingchart.exec('myid', 'reload', { graphid: 1 });

removenode

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

zingchart.exec('myid', 'removenode', { plotindex: 2 });

removeplot

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

zingchart.exec('myid', 'removeplot' { plotindex: 2 });

removescalevalue

Removes a value on a specified scale.
Demo

zingchart.exec('myid', 'removescalevalue', { graphid: 1, scale: 'scale-y' });

resize

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

zingchart.exec('myid', 'resize', { width: 400, height: 400 });

set3dview

Sets the 3d view on a graph
Demo

zingchart.exec('myid', 'set3dview', { depth: 60, yAngle: 10 });

setcharttype

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

zingchart.exec('myid', 'setcharttype', { graphid: 1, type: 'line' });

setdata

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

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

setnodevalue

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

zingchart.exec('myid', 'setnodevalue', { plotindex: 1, nodeindex: 2, value: 10 });

setpage

Sets the current page of the graphset.

zingchart.exec('myid', 'setpage', { page: 1 });

setscalevalues

Changes the values on a specific scale
Demo

zingchart.exec('myid', 'setscalevalues', { scale: 'scale-y', values: [1, 2, 3, 4] });

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: {...} });

setseriesvalues

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

zingchart.exec('myid', 'setseriesvalues', { values: [...] });

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');

Guide

hideguide

Hides the guide object.
Demo

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

resetguide

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

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

setguide

undefined
Introduced in: v1.15.0
Demo

zingchart.exec('myid', 'setguide', { graphid: 1, x: 3 });

showguide

Shows the guide object.
Demo

zingchart.exec('myid', 'showguide', { x: 2 });

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');

legendminimize

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

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

legendscroll

Scrolls the legend.
Demo

zingchart.exec('myid', 'legendscroll', { plotindex: 3 });

togglelegend

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

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

Maps

destroyMap

Deletes all the map information.

zingchart.maps.destroyMap(graphid);

getInfo

This method returns information about the map.
Demo

zingchart.maps.getInfo('mapid');

getItemInfo

This method returns information about the specified map item.
Demo

zingchart.maps.getItemInfo('mapid', 'itemid');

getItems

This method returns a list of the map items.
Demo

zingchart.maps.getItems('mapid');

getLonLat

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

zingchart.maps.getLonLat('mapid', [x, y]);

getMapByGraphIndex

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

zingchart.maps.getMapByGraphIndex('mapName', graphIndex);

getXY

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

zingchart.maps.getXY('mapid', [lon, lat]);

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: {,,,} });

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: {,,,} });

setView

Set the view of the map
Demo

zingchart.maps.setView(graphid, mapid, zoom, offsetX, offsetY);

viewAll

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

zingchart.maps.viewAll('mapid');

zoomIn

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

zingchart.maps.zoomIn('mapid');

zoomOut

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

zingchart.maps.zoomOut('mapid');

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 });

zoomToItem

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

zingchart.maps.zoomToItem('mapid', 'itemid');

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] });

removemarker

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

zingchart.exec('myid', 'removemarker', { id: 'mark1' });

updatemarker

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

zingchart.exec('myid', 'addmarker', { id: 'mark1', range: [2, 5] });

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 });

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' ] });

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)' });

Objects

addobject

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

zingchart.exec('myid', 'addobject', { data: {...}, type: 'shape' });

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' });

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', { class: 'shapeclass' });

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' });

removeobject

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

zingchart.exec('myid', 'removeobject', { type: 'shape', id: 'shapeid' });

repaintobjects

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

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

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' });

updateobject

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

zingchart.exec('myid', 'updateobject', { type: 'shape', data: {...} });

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 });

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' } });

getrules

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

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

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' ] });

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' } });

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');

resetsetseriesdata

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

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

Selection

clearselection

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

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

clicknode

Clicks a specified node.
Demo
Emits event:node_click

zingchart.exec('myid', 'clicknode', { graphid: 1, plotindex: 2, nodeindex: 2 });

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'} ]);

getselection

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

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

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'} ]);

setselection

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

zingchart.exec('myid', 'setselection', { selection: [...] });

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...' });

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 });

plothide

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

zingchart.exec('myid', 'plothide', { graphid: 1, plotindex: 2 });

showhoverstate

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

zingchart.exec('myid', 'showhoverstate', { graphid: 1, plotindex: 2, nodeindex: 2 });

showmenu

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

zingchart.exec('myid', 'showmenu', { x: 100, y: 100 });

showplot

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

zingchart.exec('myid', 'showplot', { graphid: 1, plotindex: 2 });

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');

toggleplot

Toggles the visibility of the plot.
Demo

zingchart.exec('myid', 'toggleplot', { graphid: 1, plotindex: 2, toggleAction: 'show' });

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 });

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 });

unlocktooltip

Unlocks a locked tooltip
Demo

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

Tree

set

Sets data for the tree
Introduced in: v2.8.4 chartTypes [tree]

zingchart.exec('myid', 'tree.set', { data: {...} });

tree.addlink

Adds a link between two existing nodes on a tree
Introduced in: v2.8.4 chartTypes [tree]

zingchart.exec('myid', 'tree.addlink', { data: { source: 'sourcenode', target: 'targetnode', value: 10 } });

tree.addnode

Adds a node to an existing tree.
Introduced in: v2.8.4 chartTypes [tree]

zingchart.exec('myid', 'tree.addnode', { data: {...} });

tree.getdata

Returns the data for the tree
Introduced in: v2.8.4 chartTypes [tree]

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

tree.removelink

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

zingchart.exec('myid', 'tree.removelink', { data: { source: 'sourcenode', target: 'targetnode' } });

tree.removenode

Removes a specified node from an existing tree.
Introduced in: v2.8.4 chartTypes [tree]

zingchart.exec('myid', 'tree.removenode', { id: 'nodeid' });

Usage

exec

The .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('chartid', 'methodName', {params})

zingchart.render

Used to set various chart render options. At a minimum, you must specify the id and data elements for the chart to properly render and display.

zingchart.render({ id: myChart, data: chartConfig, height: 500, width: 500 });

Zoom

getzoom

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

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

pan

Pan on a graph
Introduced in: v1.2.0

zingchart.exec('myid', 'pan', { xdist: 100, ydist: 100 });

viewall

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

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

zoomin

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

zingchart.exec('myid', 'zoomin', { zoomx: true });

zoomout

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

zingchart.exec('myid', 'zoomout', { zoomx: true });

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 });

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 });