Methods

ZingChart provides a rich API for controlling chart characteristics from 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.

Data Manipulation

addnode

Adds a node to an existing plot.


          
zingchart.exec('myid', 'addnode', {
    graphid : 0,
    plotindex : 1,
    nodeindex : 2,
    value : 37
});
        
AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

nodeindex

Numeric

The index in the specified plot where the new node should go. The current values will be shifted. If this parameter is not set, it is placed at the end.

0 | 8 | 20 | ...

plotid

String

The id of the plot to add data to.

"mylineplot" | ...

plotindex

Numeric

The index of the plot to add data to.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

value

Numeric

The value to add to the plot.

45 | 0.27 | ...

#### addplot Adds a new plot. ```text zingchart.exec('myid', 'addplot', { graphid : 0, plotindex : 1, data : { values : [10, 20, 15, ...], text : "My new plot" } }); ``` {% embed url="https://app.zingsoft.com/demos/embed/NCTSH20Q" %}

AttributeTypeInfo

data/plotdata

Object

The JSON data that would be set in the series section of the JSON for the individual plot.

{...}

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of an existing plot after which the new plot will be inserted. If it is not set, it is placed at the end.

"mylineplot" | ...

plotindex

Numeric

The index of the plot to be inserted. If it is not set, it is placed at the end.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

#### appendseriesdata Appends data to the existing series. Can be used on a single plot or the whole series.**Note:** that the value arrays sent do not concatenate the existing ones. ```text zingchart.exec('myid', 'appendseriesdata', { graphid : 0, plotindex : 1, data : { lineColor : "red" } }); ``` ```text zingchart.exec('myid', 'appendseriesdata', { graphid : 0, data : [ { lineColor : "red" }, { lineColor : "yellow" } ] }); ``` {% embed url="https://app.zingsoft.com/demos/embed/NWL6MBV0" %}

AttributeTypeInfo

data

Mixed

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.

{...} | [ {...}, {...}, ... ]

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of the plot if only appending the data on a single plot.

"mylineplot" | ...

plotindex

Numeric

The index of the plot if only appending the data on a single plot.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

#### appendseriesvalues Appends data to the end of a plot. Can be used on a single plot or the whole series. ```text zingchart.exec('myid', 'appendseriesvalues', { plotindex : 1, values : [19, 28, 13, 42, ...] }); ``` {% embed url="https://app.zingsoft.com/demos/embed/GLEAXRO3" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of an existing plot after which the new plot will be inserted. If it is not set, it is placed at the end.

"mylineplot" | ...

plotindex

Numeric

The index of the plot if only appending the data on a single plot.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

values

Array

An array of values to append. If plotindex is not specified, the data should be an array of arrays.

[...] | [ [...], [...], ... ]

#### getseriesdata Returns the series data as an object. If plot is specified via `plotindex` or `plotid` then only that series item data is returned. ```text zingchart.exec('myid', 'getseriesdata', {}); ``` ```text zingchart.exec('myid', 'getseriesdata', { graphid : 0, plotindex : 1 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/HEU42RSP" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of the plot if only setting the data on a single plot.

"mylineplot" | ...

plotindex

Numeric

The index of the plot if only setting the data on a single plot.

0 | 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. ```text zingchart.exec('myid', 'getseriesvalues', {}); ``` ```text zingchart.exec('myid', 'getseriesvalues', { plotindex : 2 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/0WYJGQZI" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of the plot if only setting the data on a single plot.

"mylineplot" | ...

plotindex

Numeric

The index of the plot if only setting the data on a single plot.

0 | 1 | ...

#### modifyplot Modifies an existing plot. ```text zingchart.exec('myid', 'modifyplot', { graphid : 0, plotindex : 1, data : { lineWidth : 2, lineColor : "yellow" } }); ``` {% embed url="https://app.zingsoft.com/demos/embed/ROPRBW9R" %}

AttributeTypeInfo

data/plotdata

Object

The JSON string that would be appended in the series section of the JSON for the individual plot.

{...}

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of an existing plot after which the new plot will be inserted. If it is not set, it is placed at the end.

"mylineplot" | ...

plotindex

Numeric

The index of the plot to be inserted. If it is not set, it is placed at the end.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

#### removenode Removes a node. ```text zingchart.exec('myid', 'removenode', { graphid : 0, plotindex : 1, nodeindex : 2 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/JN31HWBT" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

nodeindex

Numeric

The index of the node to be removed. The values will be shifted.

0 | 8 | 20 | ...

plotid

String

The id of the plot to remove the data from.

"mylineplot" | ...

plotindex

Numeric

The index of the plot to remove the data from.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

removeplot

Removes a plot.


          
zingchart.exec('myid', 'removeplot', {
    graphid : 0,
    plotindex : 1
});
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/U7VM2NN9
AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of the plot to be removed.

"mylineplot" | ...

plotindex

Numeric

The index of the plot to be removed.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

set3dview

Sets the new 3D parameters for the view, overrides the settings from 3d-aspect attribute of the chart.


          
zingchart.exec('myid', 'set3dview', {
    'y-angle' : 10,
    depth : 60
});
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/IT6G7RC3
AttributeTypeInfo

graphid

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

x-angle xAngle

Numeric

Sets the X rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type.

0 | 8 | 20 | ...

y-angle yAngle

Numeric

Sets the Y rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type.

"mygraph" | 0 | 1 | ...

z-angle zAngle

Numeric

Sets the Z rotation viewing angle for the true 3D view. Viewing angle may vary depending on the chart type.

5| 10| ...

depth

Numeric

Sets the Z depth for a 3D chart type displayed in either isometric or true 3D.

5 | 10 | ...

setnodevalue

Changes the value on a single node.


          
zingchart.exec('myid', 'setnodevalue', {
    graphid : 0,
    plotindex : 1,
    nodeindex : 2,
    value : 80
});
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/212EKSWS
AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

nodeindex

Numeric

The index of the node to replace.

0 | 8 | 20 | ...

plotid

String

The id of the plot.

"mylineplot" | ...

plotindex

Numeric

The index of the plot.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

setseriesdata

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


          
zingchart.exec('myid', 'setseriesdata', {
    graphid : 0,
    plotindex : 1,
    data : {
        values : [10, 15, 20, ...],
        lineColor : "red"
    }
});
        

          
zingchart.exec('myid', 'setseriesdata', {
    graphid : 0,
    data : [
        {
            values : [10, 15, 20, ...],
            lineColor : "red"
        },
        {
            values : [40, 25, 30, ...],
            lineColor : "yellow"
        }
    ]
});
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/0U1SN1IS
AttributeTypeInfo

data

Mixed

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.

{...} | [ {...}, {...}, ... ]

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of the plot if only setting the data on a single plot.

"mylineplot" | ...

plotindex

Numeric

The index of the plot if only setting the data on a single plot.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

#### setseriesvalues Replaces the series values. Can be used on a single plot or the whole series. ```text zingchart.exec('myid', 'setseriesvalues', { values : [ [19, 28, 13, 42, ...], [37, 11, 27, 25, ...] ] }); ``` ```text zingchart.exec('myid', 'setseriesvalues', { plotindex : 1, values : [19, 28, 13, 42, ...] }); ``` {% embed url="https://app.zingsoft.com/demos/embed/1YB4YK9U" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotid

String

The id of the plot if only setting the data on a single plot.

"mylineplot" | ...

plotindex

Numeric

The index of the plot if only setting the data on a single plot.

0 | 1 | ...

update

Boolean

Sets (default true) if the data manipulation API is instantly applied or "queued" in a list of consecutive API calls. Require the call of update API in order for all the queued changes to take effect.

true | false | 1 | 0

values

Array

An array of values. If plotindex is not specified, the data should be an array of arrays.

[...] | [ [...], [...], ... ]

### Export #### exportdata Exports the current data. Only works if `exportdataurl` is set in `zingchart.render` or url parameter is set. ```text zingchart.exec('myid', 'exportdata'); ``` #### getimagedata Returns a Base64 encoded image string. Returns -1 if failed to get image data. ```text zingchart.exec('myid', 'getimagedata', { filetype : 'png' }); ``` {% embed url="https://app.zingsoft.com/demos/embed/YHA4PC5Z" %} {% hint style="info" %} **Note:** charts with output: 'svg' must get data inside callback function defined in the method call. SVG output is the default for ZingChart. {% endhint %} {% embed url="https://app.zingsoft.com/demos/embed/I9JFJ01A" %}

AttributeTypeInfo

filetype/format

String

The image filetype. The default is jpg. Other options are bmp (flash only) and png.

"png" | "jpg" | "bmp" (flash only)

callback

Function

The callback function is used for svg charts exporting

function(imagedata) {...}

#### print Creates a printable version of the chart and attempts to print it. ```text zingchart.exec('myid', 'print'); ``` {% embed url="https://app.zingsoft.com/demos/embed/CDJWAX8X" %} #### saveasimage/exportimage Produces an image of the graph. Only works if `exportimageurl` is set in `zingchart.render` or url parameter is set. ```text zingchart.exec('myid', 'saveasimage'); ``` ### Feed #### clearfeed Clears the current graph and restarts the feed. ```text zingchart.exec('myid', 'clearfeed'); ``` {% embed url="https://app.zingsoft.com/demos/embed/8ARMOTUK" %} #### getinterval Returns the interval value set on the feed. ```text zingchart.exec('myid', 'getinterval'); ``` {% embed url="https://app.zingsoft.com/demos/embed/9QQTVFZE" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

#### 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. ```text zingchart.exec('myid', 'setinterval', '{"interval" : 3}'); ``` {% embed url="https://app.zingsoft.com/demos/embed/9QQTVFZE" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

interval

Numeric

Time of the feed interval set in seconds or milliseconds.

1 | 500 | ...

#### startfeed Starts the feed. ```text zingchart.exec('myid', 'startfeed'); ``` {% embed url="https://app.zingsoft.com/demos/embed/8ARMOTUK" %} #### stopfeed Stops the feed. ```text zingchart.exec('myid', 'stopfeed'); ``` {% embed url="https://app.zingsoft.com/demos/embed/8ARMOTUK" %} ### Graph Information Methods that return information about the graph. This ranges from specific pieces of JSON information, to the whole chart configuration object. #### getcharttype Returns the chart's type. ```text zingchart.exec('myid', 'getcharttype', { graphid : 0 }); ``` ```text zingchart.exec('myid', 'getcharttype', { graphid : "mygraph" }); ``` {% embed url="https://app.zingsoft.com/demos/embed/1RIEX17O" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

#### getdata Returns the entire JSON. ```text zingchart.exec('myid', 'getdata'); ``` {% embed url="https://app.zingsoft.com/demos/embed/ANYULDY8" %} #### getgraphlength Returns the number of graphs in the chart. ```text zingchart.exec('myid', 'getgraphlength'); ``` {% embed url="https://app.zingsoft.com/demos/embed/BNKAM9JP" %} #### getnodelength Returns the number of nodes in a given plot. ```text zingchart.exec('myid', 'getnodelength', { graphid : 0, plotindex : 2 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/A5X1OHIF" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotindex

Numeric

The index of the plot.

0 | 1 | ...

#### getnodevalue Returns the value of the given node. ```text zingchart.exec('myid', 'getnodevalue', { graphid : 0, plotindex : 2, nodeindex : 10 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/HWB7MX29" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

nodeindex

Numeric

The index in the specified plot of the node.

0 | 8 | 20 | ...

plotindex

Numeric

The index of the plot.

0 | 1 | ...

#### 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: `x`, `y`, `width`, `height`, `lineColor`, `lineWidth`, `borderColor`, `borderWidth`, `backgroundColor1`, `backgroundColor2`, `text`, `values`, `minValue`, `maxValue`, `step`, `stepSize`. ```text zingchart.exec('myid', 'getobjectinfo', { object : 'graph' }); ``` ```text zingchart.exec('myid', 'getobjectinfo', { object : 'scale', name : 'scale-x' }); ``` {% embed url="https://app.zingsoft.com/demos/embed/I2QLSC3R" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

name

String

The name of the scale if object is "scale".

"scale-x" | "..."

nodeindex

Numeric

The index in the specified plot where the new node should go. The current values will be shifted. If this parameter is not set, it is placed at the end.

0 | 8 | 20 | ...

object

String

"graph" | "plotarea" | "scale" | "plot" | "node"

plotid

String

The id of the plot to add data to.

"mylineplot" | ...

plotindex

Numeric

The index of the plot to add data to.

0 | 1 | ...

#### getplotlength Returns the number of plots in a given graph. ```text zingchart.exec('myid', 'getplotlength', { graphid : 0 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/U8KC1IKE" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

#### getplotvalues Returns the value of the given plot. ```text zingchart.exec('myid', 'getplotvalues', { graphid : 0, plotindex : 2 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/92VX2DTO" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotindex

Numeric

The index of the plot.

0 | 1 | ...

#### getrender Returns the render mode \(canvas/svg/vml\). ```text zingchart.exec('myid', 'getrender'); ``` {% embed url="https://app.zingsoft.com/demos/embed/6FBLYC02" %} #### getrules Returns an array containing the ids of the existing rules in a chart. ```text zingchart.exec('myid', 'getrules',{ plotindex:0 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/DGNYHJNB" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotindex

Numeric

The index of the plot containing the rules to be returned.

0 | 1 | ...

#### getscales Returns an array containing the names of the active scales on the chart. ```text zingchart.exec('myid', 'getscales'); ``` {% embed url="https://app.zingsoft.com/demos/embed/SINOBCJI" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

#### getversion/showversion Returns the version of the library currently being used. ```text zingchart.exec('myid', 'getversion'); ``` {% embed url="https://app.zingsoft.com/demos/embed/F4E921OY" %} #### getxyinfo Returns various scale and node related information based on x and y positions in the chart. The returned data is an `Array` of objects holding information relative to key scales, value scales and node proximity. ```text zingchart.exec('myid', 'getxyinfo', { x : 280, y : 120 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/LU2LXDGC" %}

AttributeTypeInfo

x

Numeric

The x position.

5 | 10 | ...

y

Numeric

The y position.

5 | 10 | ...

#### 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. ```text zingchart.exec('myid', 'get3dview',{ plotindex:0 }); ``` {% embed url="https://app.zingsoft.com/demos/embed/REEVZO0Y" %}

AttributeTypeInfo

graphid (optional)

Mixed

The id/index of the graph. The default is 0.

"mygraph" | 0 | 1 | ...

plotindex

Numeric

The index of the plot containing the rules to be returned.

0 | 1 | ...