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.

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})
AttributeTypeInfo
Chart IDString

The id of the chart to target

"myid"

Method NameString

The name of the method you are tring to call

"addnode" | "getseriesvalues" | etc...

ParametersObject

An object of parameters to pass to the method. The accepted params for this object vary from method to method. Refer to the definitions below for accepted parameters.

{ plotindex: 2, nodeindex: 3 }

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 | ...

nodeindexNumeric

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 | ...

plotidString

The id of the plot to add data to.

"mylineplot" | ...

plotindexNumeric

The index of the plot to add data to.

0 | 1 | ...

updateBoolean

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

valueNumeric

The value to add to the plot.

45 | 0.27 | ...

addplot

Adds a new plot/series to the graph.

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

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 | ...

plotidString

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" | ...

plotindexNumeric

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

0 | 1 | ...

updateBoolean

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

Append multiple series objects at once:

zingchart.exec('myid', 'appendseriesdata', {
  graphid: 0,
  data: [
    { lineColor: 'red' }, 
    { lineColor: 'yellow' }
  ]
});
https://app.zingsoft.com/demos/embed/NWL6MBV0
https://app.zingsoft.com/demos/embed/NWL6MBV0
AttributeTypeInfo
dataMixed

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 | ...

plotidString

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

"mylineplot" | ...

plotindexNumeric

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

0 | 1 | ...

updateBoolean

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

Append multiple values arrays:

zingchart.exec('myid', 'appendseriesvalues', {
  values: [
    [19, 28, 13, 42, ...], // plotindex 0
    [19, 28, 13, 42, ...], // plotindex 1
  ]
});
https://app.zingsoft.com/demos/embed/GLEAXRO3
https://app.zingsoft.com/demos/embed/GLEAXRO3
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotidString

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" | ...

plotindexNumeric

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

0 | 1 | ...

updateBoolean

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

valuesArray

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.

zingchart.exec('myid', 'getseriesdata', {});

If plot is specified via plotindex or plotid then only that series item data is returned.

zingchart.exec('myid', 'getseriesdata', {
  graphid: 0,
  plotindex: 1
});
https://app.zingsoft.com/demos/embed/HEU42RSP
https://app.zingsoft.com/demos/embed/HEU42RSP
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotidString

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

"mylineplot" | ...

plotindexNumeric

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.

zingchart.exec('myid', 'getseriesvalues', {});

If plot is specified via plotindex or plotid then only that series item values are returned.

zingchart.exec('myid', 'getseriesvalues', {
  plotindex: 2
});
https://app.zingsoft.com/demos/embed/0WYJGQZI
https://app.zingsoft.com/demos/embed/0WYJGQZI
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotidString

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

"mylineplot" | ...

plotindexNumeric

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

0 | 1 | ...

modifyplot

Modifies an existing plot object.

zingchart.exec('myid', 'modifyplot', {
  graphid: 0,
  plotindex: 1,
  data: {
    lineWidth: 2, 
    lineColor: 'yellow'
  }
});
https://app.zingsoft.com/demos/embed/ROPRBW9R
https://app.zingsoft.com/demos/embed/ROPRBW9R
AttributeTypeInfo
data/plotdataObject

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 | ...

plotidString

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" | ...

plotindexNumeric

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

0 | 1 | ...

updateBoolean

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
});
https://app.zingsoft.com/demos/embed/JN31HWBT
https://app.zingsoft.com/demos/embed/JN31HWBT
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nodeindexNumeric

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

0 | 8 | 20 | ...

plotidString

The id of the plot to remove the data from.

"mylineplot" | ...

plotindexNumeric

The index of the plot to remove the data from.

0 | 1 | ...

updateBoolean

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
});
https://app.zingsoft.com/demos/embed/U7VM2NN9
https://app.zingsoft.com/demos/embed/U7VM2NN9
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotidString

The id of the plot to be removed.

"mylineplot" | ...

plotindexNumeric

The index of the plot to be removed.

0 | 1 | ...

updateBoolean

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
});
https://app.zingsoft.com/demos/embed/IT6G7RC3
https://app.zingsoft.com/demos/embed/IT6G7RC3
AttributeTypeInfo
graphidMixed

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| ...

depthNumeric

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
});
https://app.zingsoft.com/demos/embed/212EKSWS
https://app.zingsoft.com/demos/embed/212EKSWS
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nodeindexNumeric

The index of the node to replace.

0 | 8 | 20 | ...

plotidString

The id of the plot.

"mylineplot" | ...

plotindexNumeric

The index of the plot.

0 | 1 | ...

updateBoolean

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/

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

Or update the whole series:

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

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 | ...

plotidString

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

"mylineplot" | ...

plotindexNumeric

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

0 | 1 | ...

updateBoolean

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.

zingchart.exec('myid', 'setseriesvalues', {
  values: [
    [19, 28, 13, 42, ...],
    [37, 11, 27, 25, ...]
  ]
});

Or the whole series.

zingchart.exec('myid', 'setseriesvalues', {
  plotindex: 1,
  values: [19, 28, 13, 42, ...]
});
https://app.zingsoft.com/demos/embed/1YB4YK9U
https://app.zingsoft.com/demos/embed/1YB4YK9U
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotidString

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

"mylineplot" | ...

plotindexNumeric

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

0 | 1 | ...

updateBoolean

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

valuesArray

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

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

Export

downloadCSV

Download the chart data in .csv format.

zingchart.exec('myid', 'downloadCSV', {
  fn: 'test-filename'
});
https://app.zingsoft.com/demos/embed/THMFEZ6F
https://app.zingsoft.com/demos/embed/THMFEZ6F
ParameterTypeDescription
fnString

The filename to download. No extension required. Default name is based on chart id.

"test-filename"

downloadXLS

Download the chart data in .xls format.

zingchart.exec('myid', 'downloadXLS', { 
  fn: 'test-filename' 
});
https://app.zingsoft.com/demos/embed/B7637U9H
https://app.zingsoft.com/demos/embed/B7637U9H
ParameterTypeDescription
fnString

The filename to download. No extension required. Default name is based on chart id.

"test-filename"

downloadRAW

Download the raw data from chart.

zingchart.exec('myid', 'downloadRAW', { 
  fn: 'test-filename.txt', 
  callback: function(e) { console.log(arguments); document.getElementById('output').innerHTML = JSON.stringify(arguments); } 
});
https://app.zingsoft.com/demos/embed/5CNSP9W1
https://app.zingsoft.com/demos/embed/5CNSP9W1
ParameterTypeDescription
callbackFunctionAn inline function callback that will receive the raw data AND the function name if defined.
fnString

The filename to download. No extension required. Default name is based on chart id.

"test-filename"

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'
});
https://app.zingsoft.com/demos/embed/YHA4PC5Z
https://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.

https://app.zingsoft.com/demos/embed/I9JFJ01A
https://app.zingsoft.com/demos/embed/I9JFJ01A
ParameterTypeDescription
filetype/formatString

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

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

callbackFunction

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');
https://app.zingsoft.com/demos/embed/CDJWAX8X
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.

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

Graph Manipulation

addmenuitem

Adds a new item to the context menu.

Note: Function must be registered in the global scope.

zingchart.exec('myid', 'addmenuitem', {
  text: "New Item",
  function : 'window.myFunc()',
  order : 4,
});
https://app.zingsoft.com/demos/embed/TGIFU92V
https://app.zingsoft.com/demos/embed/TGIFU92V
AttributeTypeInfo
textString

Defines the text to be displayed.

"resize" | ...

functionString

Name of the function to be associated with this context menu item.

"window.myFunc()" | ...

orderNumeric

The order of custom context menu items.

Higher the number, earlier in custom context menu items its placed.

101 | 2 | 105 | ...

addscalevalue

Adds a new value on the scale.

zingchart.exec('myid', 'addscalevalue', {
  graphid: 0,
  scale : 'scale-x',
  nodeindex: 4,
  value: 23
});
https://app.zingsoft.com/demos/embed/IMV9GPHJ
https://app.zingsoft.com/demos/embed/IMV9GPHJ
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nodeindexNumeric

The index of where the scale node should be inserted.

If it is not set, it is placed at the end.

0 | 8 | 20 | ...

scaleString

The index of where the scale node should be inserted.

If it is not set, it is placed at the end.

0 | 8 | 20 | ...

updateBoolean

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

valueMixed

The new scale value.

5 | "Jan" | ...

destroy

Destroys the chart, removing the associated DOM nodes and events. Represents the recommended way to remove a chart from a page.

zingchart.exec('myid', 'destroy');
https://app.zingsoft.com/demos/embed/763FB33O
https://app.zingsoft.com/demos/embed/763FB33O

load

Loads a new JSON packet from a URL.

zingchart.exec('myid', 'load', {
  dataurl : 'newjson.php'
});
https://app.zingsoft.com/demos/embed/VRZ14LJQ
https://app.zingsoft.com/demos/embed/VRZ14LJQ
AttributeTypeInfo
dataurlString

The URL to read the JSON from.

"newjson.php" | ...

modify

Modifies any part (bbject) of the current graph.

zingchart.exec('myid', 'modify', {
  graphid: 0,
  data: {
    title : {
      text: "New title"
    }
  }
});

You can use the object parameter to identify what part of the graph to modify.

zingchart.exec('myid', 'modify', {
  graphid: 0,
  object: 'title',
  data: {
    text: "New title"
  }
});
https://app.zingsoft.com/demos/embed/SFNKFA54
https://app.zingsoft.com/demos/embed/SFNKFA54
AttributeTypeInfo
dataObject

The JSON packet to apply to the graph. It will be merged with the previous JSON.

{...}

graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

objectString

Optional shortcut to only modify specific parts of the graph. The options are title, plotset (series), plotarea and legend.

"title" | "plotset" | "series" | "plotarea"| "legend" | "map"

updateBoolean

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

reload

Reloads the chart, or only a specific chart from the graphset.

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

If graphid parameter is provided reload a specific graph in a graphset:

zingchart.exec('myid', 'reload', {
  graphid: 0
});
https://app.zingsoft.com/demos/embed/FLYN7HA9
https://app.zingsoft.com/demos/embed/FLYN7HA9
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

removescalevalue

Removes a value from the scale.

zingchart.exec('myid', 'removescalevalue', {
  graphid: 0,
  scale : 'scale-x',
  nodeindex: 4
});
https://app.zingsoft.com/demos/embed/GEZ7KPI8
https://app.zingsoft.com/demos/embed/GEZ7KPI8
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | .../p>

nodeindexNumeric

The index of the value to be removed.

0 | 8 | 20 | ...

scaleString

The name of the scale.

"scale-x" | "scale-x-2" | ...

updateBoolean

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

resize

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

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

width and height values can be percentages too.

zingchart.exec('myid', 'resize', {
  width : '100%',
  height : 200
});
https://app.zingsoft.com/demos/embed/KG7OEMT3
https://app.zingsoft.com/demos/embed/KG7OEMT3
AttributeTypeInfo
heightMixed

Sets the new width of the chart. If percentage value is provided, then the width will be relative to the container's width.

500 | "50%" | ...

widthMixed

Sets the new width of the chart. If percentage value is provided, then the width will be relative to the container's width.

500 | "50%" | ...

setdata

Takes a full JSON packet to replace the current one.

zingchart.exec('myid', 'setdata', {
  data: {...}
});
https://app.zingsoft.com/demos/embed/SJU23QJ6
https://app.zingsoft.com/demos/embed/SJU23QJ6
AttributeTypeInfo
dataObject

The JSON packet to apply to the graph. It will replace the previous JSON.

{...}

updateBoolean

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

setguide

Fire the guide object at a specific node.

zingchart.exec('myid', 'setguide', {
  graphid: 0,
  keyvalue: 2
});
https://app.zingsoft.com/demos/embed/MO8KPNEC
https://app.zingsoft.com/demos/embed/MO8KPNEC
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

keyvalueNumeric

The nodeindex which the guide fires at.

2 | 1 | ...

update

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

zingchart.exec('myid', 'update');
https://app.zingsoft.com/demos/embed/H7F2UJ4L
https://app.zingsoft.com/demos/embed/H7F2UJ4L

Feed

Learn about methods that affect the refresh object.

clearfeed

Clears the current graph and restarts the feed

zingchart.exec('myid', 'clearfeed');
https://app.zingsoft.com/demos/embed/8ARMOTUK
https://app.zingsoft.com/demos/embed/8ARMOTUK

getinterval

Returns the interval value set on the feed

zingchart.exec('myid', 'getinterval');
https://app.zingsoft.com/demos/embed/9QQTVFZE
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.

zingchart.exec('myid', 'setinterval', {
  interval: 3
});
https://app.zingsoft.com/demos/embed/9QQTVFZE
https://app.zingsoft.com/demos/embed/9QQTVFZE
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

intervalNumeric

Time of the feed interval set in seconds or milliseconds.

1 | 500 | ...

startfeed

Starts the feed.

zingchart.exec('myid', 'startfeed');
https://app.zingsoft.com/demos/embed/8ARMOTUK
https://app.zingsoft.com/demos/embed/8ARMOTUK

stopfeed

Stops the feed.

zingchart.exec('myid', 'stopfeed');
https://app.zingsoft.com/demos/embed/8ARMOTUK
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 by graphid as an index

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

Or specify graphid as the chart id.

zingchart.exec('myid', 'getcharttype', {
  graphid: 'mygraph'
});
https://app.zingsoft.com/demos/embed/1RIEX17O
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.

zingchart.exec('myid', 'getdata');
https://app.zingsoft.com/demos/embed/ANYULDY8
https://app.zingsoft.com/demos/embed/ANYULDY8

getgraphlength

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

zingchart.exec('myid', 'getgraphlength');
https://app.zingsoft.com/demos/embed/BNKAM9JP
https://app.zingsoft.com/demos/embed/BNKAM9JP

getnodelength

Returns the number of nodes in a given plot.

zingchart.exec('myid', 'getnodelength', {
  graphid: 0,
  plotindex: 2
});
https://app.zingsoft.com/demos/embed/A5X1OHIF
https://app.zingsoft.com/demos/embed/A5X1OHIF
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotindexNumeric

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
});
https://app.zingsoft.com/demos/embed/HWB7MX29
https://app.zingsoft.com/demos/embed/HWB7MX29
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nodeindexNumeric

The index in the specified plot of the node.

0 | 8 | 20 | ...

plotindexNumeric

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'
});
https://app.zingsoft.com/demos/embed/I2QLSC3R
https://app.zingsoft.com/demos/embed/I2QLSC3R
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nameString

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

"scale-x" | "..."

nodeindexNumeric

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 | ...

objectString"graph" | "plotarea" | "scale" | "plot" | "node"
plotidString

The id of the plot to add data to.

"mylineplot" | ...

plotindexNumeric

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
});
https://app.zingsoft.com/demos/embed/U8KC1IKE
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.

zingchart.exec('myid', 'getplotvalues', {
  graphid: 0,
  plotindex: 2
});
https://app.zingsoft.com/demos/embed/92VX2DTO
https://app.zingsoft.com/demos/embed/92VX2DTO
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotindexNumeric

The index of the plot.

0 | 1 | ...

getrender

Returns the render mode (canvas/svg/vml).

zingchart.exec('myid', 'getrender');
https://app.zingsoft.com/demos/embed/6FBLYC02
https://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
});
https://app.zingsoft.com/demos/embed/DGNYHJNB
https://app.zingsoft.com/demos/embed/DGNYHJNB
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotindexNumeric

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');
https://app.zingsoft.com/demos/embed/SINOBCJI
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.

zingchart.exec('myid', 'getversion');
https://app.zingsoft.com/demos/embed/F4E921OY
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.

zingchart.exec('myid', 'getxyinfo', {
  x: 280,
  y: 120
});
https://app.zingsoft.com/demos/embed/LU2LXDGC
https://app.zingsoft.com/demos/embed/LU2LXDGC
AttributeTypeInfo
xNumeric

The x position.

5 | 10 | ...

yNumeric

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
});
https://app.zingsoft.com/demos/embed/REEVZO0Y
https://app.zingsoft.com/demos/embed/REEVZO0Y
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotindexNumeric

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

0 | 1 | ...

History

History methods will move drilldown charts state forwards and backwards.

goback

Goes to the previous page in the chart history.

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

goforward

Goes forward one page in the chart history.

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

Maps

getInfo()

This method returns information about the map.

https://app.zingsoft.com/demos/embed/O2DQGWX4
https://app.zingsoft.com/demos/embed/O2DQGWX4
zingchart.maps.getInfo('mapName'); Copy

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.

getItems()

https://app.zingsoft.com/demos/embed/23Z0KCOR
https://app.zingsoft.com/demos/embed/23Z0KCOR

This method returns a list of the map items.

zingchart.maps.getItems('mapName'); Copy

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.

getItemInfo()

This method returns information about the specified map item.

zingchart.maps.getItemInfo('mapName', 'itemName'); Copy
https://app.zingsoft.com/demos/embed/TYS5TI8R
https://app.zingsoft.com/demos/embed/TYS5TI8R

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.
itemNameStringThe name of the map item.

getLonLat()

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

zingchart.maps.getLonLat('mapName', [x, y]); Copy
https://app.zingsoft.com/demos/embed/8KPKU1WE
https://app.zingsoft.com/demos/embed/8KPKU1WE

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.
[...]StringAn array that accepts two number values: the x and y positions, respectively.

getXY()

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

zingchart.maps.getXY('mapName', [lon, lat]); Copy
https://app.zingsoft.com/demos/embed/YFGNSDI1
https://app.zingsoft.com/demos/embed/YFGNSDI1

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.
[...]StringAn array that accepts two number values: the longitude and latitude coordinates, respectively.

loadGeoJSON()

This method allows you to create maps from outside GeoJSON files.

Note: It also requires you to explicitly load the module: maps-geojson

zingchart.maps.loadGeoJSON({...}); Copy

It accepts an object with the following properties:

PropertyTypeDescription
idStringThe name of the custom map..
urlStringThe map file source.
mappingsObjectAllows you to map property names from the GeoJSON file to ZingChart.
stylingObjectAllows you to style the map.
callbackFunctionRepresents the function that renders the map.

viewAll()

This method allows you to view the entire map.

zingchart.maps.viewAll('mapName'); Copy
https://app.zingsoft.com/demos/embed/MPSAH2S0
https://app.zingsoft.com/demos/embed/MPSAH2S0

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.

zoomIn()

This method allows you to zoom in on the map.

zingchart.maps.zoomIn('mapName'); Copy
https://app.zingsoft.com/demos/embed/R7NIM6GE
https://app.zingsoft.com/demos/embed/R7NIM6GE

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.

zoomOut()

This method allows you to zoom out on the map.

zingchart.maps.zoomOut('mapName'); Copy
https://app.zingsoft.com/demos/embed/7PQIYRZY
https://app.zingsoft.com/demos/embed/7PQIYRZY

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.

zoomTo()

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

zingchart.maps.zoomTo('mapName', {...}); Copy
https://app.zingsoft.com/demos/embed/8ANK05LL
https://app.zingsoft.com/demos/embed/8ANK05LL

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.
{...}Object

An object that accepts the following properties:

  • zoom
  • offsetX
  • offsetY

zoomToItem()

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

zingchart.maps.zoomToItem('mapName', 'itemName'); Copy
https://app.zingsoft.com/demos/embed/DBDLBZ01
https://app.zingsoft.com/demos/embed/DBDLBZ01

It accepts the following parameters:

ParameterTypeDescription
mapNameStringThe name of the map.
itemNameStringThe name of the map item.

Notes

The note api allows you to dynamically add, update and remove chart annotations.

Note: Requires the zingchart-api-annotations.min.js module.

addnote

Adds a note to a chart.

zingchart.exec('zc', 'addnote', {
    id: 'note1',
    type: 'node',
    text: 'Note 1',
    plotindex: 0,
    nodeindex: 3
});
https://app.zingsoft.com/demos/embed/F3CSNRBU
https://app.zingsoft.com/demos/embed/F3CSNRBU
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

idString

The id of the note to be added.

"note1" | "note2"

textString

The text to be included in the note.

"Note 1" | "%v widgets"

typeString

The type of note to be added.

"node" | "scale" | "xy"

styleObject

Styling attributes to be applied to the note.

{ ... }

plotindexNumeric

The index of the plot to which the note will be added.

0 | 1 | ...

nodeindexNumeric

The index of the node to which the note will be added.

0 | 1 | ...

scaleindexNumeric

The index of the scale to which the note will be added.

0 | 1 | ...

scalevalueMixed

The value of the scale item to which the note will be added.

"Friday" | 1 | 2 | ...

xNumeric

The x position.

5 | 10 | ...

yNumeric

The y position.

5 | 10 | ...

offset-xNumeric

An offset in the x direction to be applied to the note.

5 | -10 | ...

offset-yNumeric

An offset in the y direction to be applied to the note.

0 | 1 | ...

removenote

Removes a note from a chart.

zingchart.exec('zc', 'removenote', { 
  id: [ 'note1', 'note2', 'note3' ] 
});
https://app.zingsoft.com/demos/embed/F3CSNRBU
https://app.zingsoft.com/demos/embed/F3CSNRBU
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

idMixed

The id of the note or notes to be removed.

"rule1" | ["rule1,"rule2"]

updatenote

Updates an existing note.

zingchart.exec('zc', 'updatenote', { 
  id: 'note1', 
  style: { 
    'border-color': '\#090', 
    'border-width': 5 
  }, 
  type: 'node', 
  plotindex: 1, 
  nodeindex: 1, 
  text: 'Note 1 (revision 1)' 
});
https://app.zingsoft.com/demos/embed/F3CSNRBU
https://app.zingsoft.com/demos/embed/F3CSNRBU
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

idString

The id of the note to be updated.

"note1" | "note2"

textString

The text to be included in the note.

"Note 1" | "%v widgets"

typeString

The type of note to be updated.

"node" | "scale" | "xy"

styleObject

Styling attributes to be applied to the note.

{ ... }

plotindexNumeric

The index of the plot to update the note to.

0 | 1 | ...

nodeindexNumeric

The index of the node to update the note to.

0 | 1 | ...

scaleindexNumeric

The index of the scale to update the note to.

0 | 1 | ...

scalevalueMixed

The value of the scale item to update the note to.

"Friday" | 1 | 2 | ...

xNumeric

The x position.

5 | 10 | ...

yNumeric

The y position.

5 | 10 | ...

offset-xNumeric

An offset in the x direction to be applied to the note.

5 | -10 | ...

offset-yNumeric

An offset in the y direction to be applied to the note.

0 | 1 | ...

Objects

Object methods allow you to create, update and remove label and shape objects.

addobject

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

zingchart.exec('myid', 'addobject', {
  type: 'label',
  data: {
    id: 'label1',
    text: 'My Label',
    x: 200,
    y: 100
  }
});

Note: Must call repaintobjects after adding an object.

https://app.zingsoft.com/demos/embed/OULKDISS
https://app.zingsoft.com/demos/embed/OULKDISS
AttributeTypeInfo
dataMixed

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.

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

graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

typeString

The type of the object.

"label" | "shape"

removeobject

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

zingchart.exec('myid', 'removeobject', { 
  type: 'label', 
  id: 'label1' 
});
https://app.zingsoft.com/demos/embed/CQVTABFQ
https://app.zingsoft.com/demos/embed/CQVTABFQ
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

idMixed

The id'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.

"label1" | ["label1", "label2", ...]

repaintobjects

Repaints all the object collection when previous object related API's were called using update: false

zingchart.exec('myid', 'repaintobjects', {});
https://app.zingsoft.com/demos/embed/OS64JOCW
https://app.zingsoft.com/demos/embed/OS64JOCW
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

updateobject

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

zingchart.exec('myid', 'updateobject', { 
  type: 'label', 
  data: { 'id' : 'label1', 'background-color' : '\#f90' } 
});
https://app.zingsoft.com/demos/embed/H7F2UJ4L
https://app.zingsoft.com/demos/embed/H7F2UJ4L
AttributeTypeInfo
dataMixed

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.

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

graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

Rules

Methods to add, update and delete rules within your chart.

Note: Requires the zingchart-api-rules.min.js module.

addrule

Adds a rule to a chart.

zingchart.exec('myid', 'addrule', {
    id: 'rule1',
    plotindex: 0,
    rule : '%node-value < 50',
    style: {
        'background-color' : '#f00'
    }
});
https://app.zingsoft.com/demos/embed/BH4RJGQK
https://app.zingsoft.com/demos/embed/BH4RJGQK
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

idString

The id of the rule to be added.

"rule1" | "rule2"

plotindexNumeric

The index of the plot.

0 | 1 | ...

ruleString

The rule parameters to be added.

"%node-value < 50" | "%v > 50" | ...

styleObject

The style to be applied when the rule parameters are met.

{ ... }

removerule

Removes a rule from a chart.

zingchart.exec('myid', 'removerule', {
  id: [ 'rule1', 'rule2' ]
});
https://app.zingsoft.com/demos/embed/3IGY00LO
https://app.zingsoft.com/demos/embed/3IGY00LO
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

idMixed

The id or ids of the rule or rules to be removed.

"rule1" | ["rule1,"rule2"]

plotindexNumeric

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

0 | 1 | ...

updaterule

Updates an existing rule.

zingchart.exec('zc', 'updaterule', {
  id: 'rule1',
  plotindex: 0,
  style: { 'background-color': '\#aaa \#333' }
});
https://app.zingsoft.com/demos/embed/3IGY00LO
https://app.zingsoft.com/demos/embed/3IGY00LO
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

idMixed

The id of the rule to be updated.

"rule1" | "rule2"

plotindexNumeric

The index of the plot.

0 | 1 | ...

ruleString

The rule parameters to be updated.

"%node-value < 50" | "%v > 50" | ...

typeString

The style to be applied when the rule parameters are met.

"background-color" : "#f00" | "border-color" : "#ff0" | ...

Selection

clearselection

Clears the current node's selection.

zingchart.exec('myid', 'clearselection');
https://app.zingsoft.com/demos/embed/IMCGLVHA
https://app.zingsoft.com/demos/embed/IMCGLVHA
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

deselect

Deselects a combination of nodes in the chart.

zingchart.exec('myid', 'deselect', [
    {
      'plotindex':0,
      'nodeindex':[0,2]
    },
    {
      'plotindex':1,
      'nodeindex':'1-3'
    }
  ]);
https://app.zingsoft.com/demos/embed/4SZBXD49
https://app.zingsoft.com/demos/embed/4SZBXD49
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nodeindexMixed

Sets the nodes that will be included in the selection collection.

"1" | "2-4" | [1, 3, 4] | ...

plotindexMixed

Sets the plots that will be included in the selection collection.

"1" | "2-4" | [1, 3, 4] | ...

getselection

Returns the current node's selection.

zingchart.exec('myid', 'getselection');
https://app.zingsoft.com/demos/embed/50IPFZ6A
https://app.zingsoft.com/demos/embed/50IPFZ6A
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

select

Sets a combination of nodes in the chart as selected. If toggle is true then the nodes already selected will be deselected.

zingchart.exec('myid', 'select', [
    
    {
      'plotindex':0,
      'nodeindex':'0-2',
      'toggle':true
    },
    {
      'plotindex':1,
      'nodeindex':[1,3]
    }
  ]);
https://app.zingsoft.com/demos/embed/CK790BLB
https://app.zingsoft.com/demos/embed/CK790BLB
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nodeindexMixed

Sets the nodes that will be included in the selection collection.

"1" | "2-4" | [1, 3, 4] | ...

plotindexMixed

Sets the plots that will be included in the selection collection.

"1" | "2-4" | [1, 3, 4] | ...

toggleBoolean

Sets if the already selected nodes will be deselected.

true | false | 1 | 0

setselection

Sets the selection combination for the entire chart.

zingchart.exec('myid', 'setselection', {
    'selection':[
      [0,3],
      [2,4]
    ]
  });
https://app.zingsoft.com/demos/embed/IMCGLVHA
https://app.zingsoft.com/demos/embed/IMCGLVHA
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

selectionArray

An array of objects containing selection information.

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

clicknode

Clicks a specified node.

zingchart.exec('myid', 'clicknode');
https://app.zingsoft.com/demos/embed/BJ7KJDXD
https://app.zingsoft.com/demos/embed/BJ7KJDXD

closemodal

Closes modal screen.

zingchart.exec('myid', 'closemodal');
https://app.zingsoft.com/demos/embed/94AOFD1M
https://app.zingsoft.com/demos/embed/94AOFD1M

Toggle

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.

zingchart.exec('myid', 'disable', {
    text: 'Wait, data is being fetched...'
});
https://app.zingsoft.com/demos/embed/5H7C6RJR
https://app.zingsoft.com/demos/embed/5H7C6RJR
AttributeTypeInfo
textString

Sets a text to be displayed while the chart is disabled.

"Wait..." | ...

enable

Makes the chart active for user interactions. See disable.

zingchart.exec('myid', 'enable');
https://app.zingsoft.com/demos/embed/5H7C6RJR
https://app.zingsoft.com/demos/embed/5H7C6RJR

exitfullscreen

Destroys the full screen render of the chart.

zingchart.exec('myid', 'exitfullscreen');
https://app.zingsoft.com/demos/embed/U9VP0J7P
https://app.zingsoft.com/demos/embed/U9VP0J7P

fullscreen

Renders the chart in full screen mode.

zingchart.exec('myid', 'fullscreen');
https://app.zingsoft.com/demos/embed/U9VP0J7P
https://app.zingsoft.com/demos/embed/U9VP0J7P

hideguide

Hide the guide object.

zingchart.exec('myid', 'hideguide');
https://app.zingsoft.com/demos/embed/65MGIGVD
https://app.zingsoft.com/demos/embed/65MGIGVD

hidemenu

Hide the context menu.

zingchart.exec('myid', 'hidemenu');
https://app.zingsoft.com/demos/embed/TT951UHL
https://app.zingsoft.com/demos/embed/TT951UHL

hideplot/plothide

Hides the plot set by plotindex (or plotid).

zingchart.exec('myid', 'hideplot', {
    graphid: 0,
    plotindex: 2
});
zingchart.exec('myid', 'hideplot', {
    plotindex: 1
});
https://app.zingsoft.com/demos/embed/XL5BDO98
https://app.zingsoft.com/demos/embed/XL5BDO98
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotidString

Sets the id of the plot.

"mylineplot" | ...

plotindexNumeric

Sets the index of the plot.

0 | 1 | ...

toggle-actionString

Sets the toggle action performed when the plot is hidden.

"hide" | "remove"

legendmaximize

Maximizes the legend.

zingchart.exec('myid', 'legendmaximize');
https://app.zingsoft.com/demos/embed/SEVVQVR8
https://app.zingsoft.com/demos/embed/SEVVQVR8
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

legendminimize

Minimize the legend.

zingchart.exec('myid', 'legendminimize');
https://app.zingsoft.com/demos/embed/SEVVQVR8
https://app.zingsoft.com/demos/embed/SEVVQVR8
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

openmodal

Opens chart in a modal window.

zingchart.exec('myid', 'openmodal');
https://app.zingsoft.com/demos/embed/94AOFD1M
https://app.zingsoft.com/demos/embed/94AOFD1M

showhoverstate

Show the hoverstate of a specific node.

zingchart.exec('myid', 'showhoverstate', {
  nodeindex: 2
});
https://app.zingsoft.com/demos/embed/L8W3AJ1A
https://app.zingsoft.com/demos/embed/L8W3AJ1A
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

nodeindexNumeric

The node index on the graph. The default is 0.

0 | 1 | ...

showguide

Show the guide object.

zingchart.exec('myid', 'showguide');
https://app.zingsoft.com/demos/embed/65MGIGVD
https://app.zingsoft.com/demos/embed/65MGIGVD

showmenu

Display the context menu.

zingchart.exec('myid', 'showmenu');
https://app.zingsoft.com/demos/embed/TT951UHL
https://app.zingsoft.com/demos/embed/TT951UHL

showplot/plotshow

Shows the plot set by plotindex (or plotid).

zingchart.exec('myid', 'showplot', {
  graphid: 0,
  plotindex: 2
});
zingchart.exec('myid', 'showplot', {
  plotid: "mylineplot"
});
https://app.zingsoft.com/demos/embed/XL5BDO98
https://app.zingsoft.com/demos/embed/XL5BDO98
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

plotidString

Sets the id of the plot.

"mylineplot" | ...

plotindexNumeric

Sets the index of the plot.

0 | 1 | ...

toggle-actionString

Sets the toggle action performed when the plot is hidden.

"hide" | "remove"

toggleabout

Toggles the About Screen.

zingchart.exec('myid', 'toggleabout');
https://app.zingsoft.com/demos/embed/MCG3XJRN
https://app.zingsoft.com/demos/embed/MCG3XJRN

togglebugreport

Toggles the Bug Report Screen.

zingchart.exec('myid', 'togglebugreport');
https://app.zingsoft.com/demos/embed/6J67RBRP
https://app.zingsoft.com/demos/embed/6J67RBRP

toggledimension

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

zingchart.exec('myid', 'toggledimension');
https://app.zingsoft.com/demos/embed/488YRLMJ
https://app.zingsoft.com/demos/embed/488YRLMJ

togglelegend

Toggles the visibility of the legend.

zingchart.exec('myid', 'togglelegend');
https://app.zingsoft.com/demos/embed/353JKCNY
https://app.zingsoft.com/demos/embed/353JKCNY
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

togglesource

Toggles the visibility of the View Source Screen.

zingchart.exec('myid', 'togglesource');
https://app.zingsoft.com/demos/embed/BM4FG1RA
https://app.zingsoft.com/demos/embed/BM4FG1RA

toggleplot

Toggles the visibility of the Plot.

zingchart.exec('myid', 'toggleplot');
https://app.zingsoft.com/demos/embed/UZSBJZ2R
https://app.zingsoft.com/demos/embed/UZSBJZ2R

Tooltip

hidetooltip

Hides visibility of tooltip.

zingchart.exec('myid', 'hidetooltip');
https://app.zingsoft.com/demos/embed/FB8XXNMM
https://app.zingsoft.com/demos/embed/FB8XXNMM

locktooltip

Locks a visible tooltip in its visible state.

zingchart.exec('myid', 'locktooltip');
https://app.zingsoft.com/demos/embed/RPXKW1DH
https://app.zingsoft.com/demos/embed/RPXKW1DH

showtooltip

Shows a tooltip.

zingchart.exec('myid', 'showtooltip');
https://app.zingsoft.com/demos/embed/0IZU7C23
https://app.zingsoft.com/demos/embed/0IZU7C23

unlocktooltip

Unlocks a locked tooltip.

zingchart.exec('myid', 'unlocktooltip');
https://app.zingsoft.com/demos/embed/RPXKW1DH
https://app.zingsoft.com/demos/embed/RPXKW1DH

Zoom

viewall

Resets the zoom on the chart.

zingchart.exec('myid', 'viewall', {
    graphid: 0
});
https://app.zingsoft.com/demos/embed/D92HJ11S
https://app.zingsoft.com/demos/embed/D92HJ11S
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

zoomin

Zooms in the graph.

zingchart.exec('myid', 'zoomin', {
  graphid: 0,
  zoomx: true,
  zoomy: true
});
https://app.zingsoft.com/demos/embed/D92HJ11S
https://app.zingsoft.com/demos/embed/D92HJ11S
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

zoomxBoolean

Sets if the graph will zoom on the x scale.

true | false | 1 | 0

zoomyBoolean

Sets if the graph will zoom on the y scale.

true | false | 1 | 0

zoomout

Zooms out the graph.

zingchart.exec('myid', 'zoomout', {
  graphid: 0,
  zoomx: true,
  zoomy: true
});
https://app.zingsoft.com/demos/embed/D92HJ11S
https://app.zingsoft.com/demos/embed/D92HJ11S
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

zoomxBoolean

Sets if the graph will zoom on the x scale.

true | false | 1 | 0

zoomyBoolean

Sets if the graph will zoom on the y scale.

true | false | 1 | 0

zoomto

Zooms to a specific area in a graph.

zingchart.exec('myid', 'zoomto', {
  graphid: 0,
  xmin: 10,
  xmax: 40,
  ymin: 1500,
  ymax: 3000
});
https://app.zingsoft.com/demos/embed/J2RCK6VB
https://app.zingsoft.com/demos/embed/J2RCK6VB
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

kminNumeric

The minimum Unix time value (in milliseconds) to zoom to.

1417651200000 | 1417661200000 | ...

kmaxNumeric

The maximum Unix time value (in milliseconds) to zoom to.

1417651200000 | 1417661200000 | ...

xmaxNumeric

The max x position to zoom to.

5 | 10 | ...

xminNumeric

The min x position to zoom to.

5 | 10 | ...

ymaxNumeric

The max y position to zoom to.

5 | 10 | ...

yminNumeric

The min y position to zoom to.

5 | 10 | ...

zoomtovalues

Zooms to a specific area in a graph specified by x scale values/labels.

zingchart.exec('myid', 'zoomtovalues', {
  graphid: 0,
  xmin: "Jan",
  xmax: "Apr",
  ymin: 1500,
  ymax: 3000
});
https://app.zingsoft.com/demos/embed/RBK38VNS
https://app.zingsoft.com/demos/embed/RBK38VNS
AttributeTypeInfo
graphid (optional)Mixed

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

"mygraph" | 0 | 1 | ...

xmaxMixed

The max x value to zoom to.

40 | "Apr" | ...

xminMixed

The min x value to zoom to.

10 | "Jan" | ...

ymaxNumeric

The max y position to zoom to.

5 | 10 | ...

yminNumeric

The min y position to zoom to.

5 | 10 | ...

On This Page