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.

zingchart.exec('myid', 'addplot', {
 graphid : 0,
 plotindex : 1,
 data : {
    values : [10, 20, 15, ...], text : "My new plot" 
    }
 });
A ZingChart Embedded Demohttps://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: The value arrays sent do not concatenate the existing ones.

zingchart.exec('myid', 'appendseriesdata', {
graphid : 0,
 plotindex : 1,
 data : {
   lineColor : "red" 
   }
 });
zingchart.exec('myid', 'appendseriesdata', {
 graphid : 0,
 data : [ {
    lineColor : "red" 
    },
    {
       lineColor : "yellow" 
     } ]
 });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'appendseriesvalues', {
 plotindex : 1,
  values : [19, 28, 13, 42, ...] 
  });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getseriesdata', {
});
zingchart.exec('myid', 'getseriesdata', {
    graphid : 0, plotindex : 1 
});
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getseriesvalues', {
});
zingchart.exec('myid', 'getseriesvalues', {
  plotindex : 2
});
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'modifyplot', {
 graphid : 0,
  plotindex : 1,
   data : { lineWidth : 2, lineColor : "yellow" 
   }
    });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'removenode', {
 graphid : 0,
  plotindex : 1,
   nodeindex : 2 
   });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'setseriesvalues', {
 values : [ [19, 28, 13, 42, ...], [37, 11, 27, 25, ...] ] 
 });
zingchart.exec('myid', 'setseriesvalues', {
 plotindex : 1, values : [19, 28, 13, 42, ...]
  });
A ZingChart Embedded Demohttps://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.

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

getimagedata

Returns a Base64 encoded image string. Returns -1 if failed to get image data.

zingchart.exec('myid', 'getimagedata', {
 filetype : 'png' 
 });
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/YHA4PC5Z

Note: Charts with output: 'svg' must get data inside callback function defined in the method call. SVG output is the default for ZingChart.

A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'print');
A ZingChart Embedded Demohttps://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.

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

Feed

clearfeed

Clears the current graph and restarts the feed.

zingchart.exec('myid', 'clearfeed');
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/8ARMOTUK

getinterval

Returns the interval value set on the feed.

zingchart.exec('myid', 'getinterval');
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'setinterval', '{
"interval" : 3
}');
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'startfeed');
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/8ARMOTUK

stopfeed

Stops the feed.

zingchart.exec('myid', 'stopfeed');
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getcharttype', {
 graphid : 0 
 });
zingchart.exec('myid', 'getcharttype', {
 graphid : "mygraph" 
 });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getdata');
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/ANYULDY8

getgraphlength

Returns the number of graphs in the chart.

zingchart.exec('myid', 'getgraphlength');
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/BNKAM9JP

getnodelength

Returns the number of nodes in a given plot.

zingchart.exec('myid', 'getnodelength', {
 graphid : 0,
  plotindex : 2 
 });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getnodevalue', {
 graphid : 0,
  plotindex : 2,
   nodeindex : 10 
   });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getobjectinfo', {
 object : 'graph' 
 });
zingchart.exec('myid', 'getobjectinfo', {
 object : 'scale',
  name : 'scale-x' 
  });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getplotlength', {
 graphid : 0 
 });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getplotvalues', {
 graphid : 0,
  plotindex : 2 
  });
A ZingChart Embedded Demohttps://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).

zingchart.exec('myid', 'getrender');
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/6FBLYC02

getrules

Returns an array containing the ids of the existing rules in a chart.

zingchart.exec('myid', 'getrules',{
 plotindex:0 
 });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getscales');
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getversion');
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'getxyinfo', {
 x : 280,
  y : 120 
  });
A ZingChart Embedded Demohttps://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.

zingchart.exec('myid', 'get3dview',{ plotindex:0 });
A ZingChart Embedded Demohttps://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 | ...