• Getting Started

  • Data

  • Chart Types

  • Chart Elements

  • Integrations

  • API

  • Tools

  • FAQ

  • Change Log

  • 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
    graphidNumber|StringThe id/index of the graph. The default is 0.
    Optional

    colorscale.getinfo

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

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

    colorscale.setvalue

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

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

    colorscale.update

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

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

    Events

    bind

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

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

    unbind

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

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

    Export

    downloadCSV

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

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

    downloadRAW

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

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

    downloadXLS

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

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

    exportdata

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

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

    exportimage

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

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

    getimagedata

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

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

    print

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

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

    saveasimage

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

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

    viewDataTable

    Toggles the view of chart data in a table.

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

    Graph Information

    get3dview

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

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

    getbubblesize

    Get the size of the bubble on a bubble chart

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

    getcharttype

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

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

    getgraphlength

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

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

    getnodelength

    Returns the number of nodes in a given plot.
    Demo

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

    getnodevalue

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

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

    getobjectinfo

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

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

    getoriginaljson

    Returns the original chart JSON.
    Demo

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

    getpage

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

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

    getplotlength

    Returns the number of plots in a given graph
    Demo

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

    getplotvalues

    Returns the value of the given plot.
    Demo

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

    getrender

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

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

    getscaleinfo

    Get information about a scale

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

    getscales

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

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

    getseriesdata

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

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

    getseriesvalues

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

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

    getversion

    Shows the current version of ZingChart running.
    Demo

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

    getxyinfo

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

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

    Graph Manipulation

    addgraph

    Adds another graph to the graphset
    Demo

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

    addmenuitem

    Adds a new item to the context menu.
    Demo

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

    addnode

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

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

    addplot

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

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

    addscalevalue

    Adds a new value on a specified scale.
    Demo

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

    appendseriesdata

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

    zingchart.exec('myid', 'appendseriesdata', { graphid: 1, plotindex: 1, data: {...} });
    Parameter Type Description
    graphidNumber|StringThe id/index of the graph to set data on. The default is 0.
    Optional
    plotindexNumberThe index for the plot to append the series data to. Alternative to plotid.
    Optional
    plotidStringThe id of an existing plot to append the series data to. Alternative to plotindex.
    Optional
    dataObject|Array.The JSON data that would be set in the series section of the JSON for the individual plot. If setting multiple plots, data should be in an array.
    updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
    Optional

    appendseriesvalues

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

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

    calendar_setvalues

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

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

    clear

    Clears a graph
    Demo

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

    clearscroll

    Resets both x and y scrolling to default position
    Demo

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

    destroy

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

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

    heatmap.setdata

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

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

    load

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

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

    loadModules

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

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

    modify

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

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

    modifyplot

    Modifies an existing plot object.
    Demo
    Emits event:plot_modify

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

    reload

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

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

    removenode

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

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

    removeplot

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

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

    removescalevalue

    Removes a value on a specified scale.
    Demo

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

    resize

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

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

    set3dview

    Sets the 3d view on a graph
    Demo

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

    setcharttype

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

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

    setdata

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

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

    setnodevalue

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

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

    setpage

    Sets the current page of the graphset.
    Demo

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

    setscalevalues

    Changes the values on a specific scale
    Demo

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

    setseriesdata

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

    zingchart.exec('myid', 'setseriesdata', { graphid: 1, plotindex: 1, data: {...} });
    Parameter Type Description
    graphidNumber|StringThe id/index of the graph to set data on. The default is 0.
    Optional
    plotindexNumberThe index for the plot to set the series data on. Alternative to plotid.
    Optional
    plotidStringThe id of an existing plot to set the series data on. Alternative to plotindex.
    Optional
    dataObject|Array.The JSON data that would be set in the series section of the JSON for the individual plot. If setting multiple plots, data should be in an array.
    updateBooleanSets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Requires the call of update API in order for all the queued changes to take effect.
    Optional

    setseriesvalues

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

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

    unbinddocument

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

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

    update

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

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

    Guide

    hideguide

    Hides the guide object.
    Demo

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

    resetguide

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

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

    setguide

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

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

    showguide

    Shows the guide object.
    Demo

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

    History

    goback

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

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

    goforward

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

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

    Legend

    getdata

    Returns the entire chart JSON.
    Demo

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

    legendmaximize

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

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

    legendminimize

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

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

    legendscroll

    Scrolls the legend.
    Demo

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

    togglelegend

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

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

    Maps

    maps.destroyMap

    Deletes all the map information.

    zingchart.maps.destroyMap(graphid);
    Parameter Type Description
    graphidStringThe id of the graph to destroy.

    maps.getInfo

    This method returns information about the map.
    Demo

    zingchart.maps.getInfo('mapid');
    Parameter Type Description
    mapidStringThe id of the map

    maps.getItemInfo

    This method returns information about the specified map item.
    Demo

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

    maps.getItems

    This method returns a list of the map items.
    Demo

    zingchart.maps.getItems('mapid');
    Parameter Type Description
    mapidStringThe id of the map

    maps.getLonLat

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

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

    maps.getMapByGraphIndex

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

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

    maps.getXY

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

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

    maps.loadGeoJSON

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

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

    maps.loadTopoJSON

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

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

    maps.setView

    Set the view of the map
    Demo

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

    maps.viewAll

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

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

    maps.zoomIn

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

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

    maps.zoomOut

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

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

    maps.zoomTo

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

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

    maps.zoomToItem

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

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

    Markers

    addmarker

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

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

    removemarker

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

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

    updatemarker

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

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

    Notes

    addnote

    Adds a new note to the chart.
    Demo

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

    getnotes

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

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

    removenote

    Removes a note from a chart.
    Demo

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

    updatenote

    Updates an existing note.
    Demo

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

    Objects

    addobject

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

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

    getallobjects

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

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

    getlabelinfo

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

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

    getobjectsbyclass

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

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

    getshapeinfo

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

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

    removeobject

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

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

    repaintobjects

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

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

    setobjectsmode

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

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

    updateobject

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

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

    Refresh

    clearfeed

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

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

    getinterval

    Returns the interval value set on the feed
    Demo

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

    setinterval

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

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

    startfeed

    Starts the feed
    Demo
    Emits event:feed_start

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

    stopfeed

    Stops the feed
    Demo
    Emits event:feed_stop

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

    Rules

    addrule

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

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

    getrules

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

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

    removerule

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

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

    updaterule

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

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

    Scalable Y Axis

    getscaleminmax

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

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

    resetscales

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

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

    resetsetseriesdata

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

    zingchart.exec('myid', 'resetsetseriesdata', { data: {...} });
    Parameter Type Description
    graphidNumber|StringThe id/index of the graph to set data on. The default is 0.
    Optional
    plotindexNumberThe index for the plot to set the series data on. Alternative to plotid.
    Optional
    plotidStringThe id of an existing plot to set the series data on. Alternative to plotindex.
    Optional
    dataObject|Array.The JSON data that would be set in the series section of the JSON for the individual plot. If setting multiple plots, data should be in an array.

    Selection

    clearselection

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

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

    clicknode

    Clicks a specified node.
    Demo
    Emits event:node_click

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

    deselect

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

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

    getselection

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

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

    select

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

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

    setselection

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

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

    Toggle

    closemodal

    Closes modal screen.
    Demo

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

    disable

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

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

    enable

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

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

    exitfullscreen

    Destroys the full screen render of the chart
    Demo

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

    fullscreen

    Renders the chart in full screen mode.
    Demo

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

    hidemenu

    Hides the context menu.
    Demo

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

    openmodal

    Opens chart in a modal window.
    Demo

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

    plothide

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

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

    showhoverstate

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

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

    showmenu

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

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

    showplot

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

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

    toggleabout

    Toggles the About Screen.
    Demo
    Emits event:about_show

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

    togglebugreport

    Toggles the Bug Report Screen.
    Demo

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

    toggledimension

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

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

    toggleplot

    Toggles the visibility of the plot.
    Demo

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

    togglesource

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

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

    Tooltip

    hidetooltip

    Hides a tooltip.
    Introduced in: v1.9.0
    Demo

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

    locktooltip

    Locks a visible tooltip in its visible state.
    Demo

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

    showtooltip

    Shows a tooltip.
    Introduced in: v1.9.0
    Demo

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

    unlocktooltip

    Unlocks a locked tooltip
    Demo

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

    Tree

    tree.addlink

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

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

    tree.addnode

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

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

    tree.getdata

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

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

    tree.removelink

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

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

    tree.removenode

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

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

    tree.set

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

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

    Treemap

    addNode

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

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

    removeNode

    Removes a treemap node.

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

    updateNode

    Updates a treemap node (value and / or style)

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

    Zoom

    getzoom

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

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

    pan

    Pan on a graph
    Introduced in: v1.2.0

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

    viewall

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

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

    zoomin

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

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

    zoomout

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

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

    zoomto

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

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

    zoomtovalues

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

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

    Summary

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