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})| Attribute | Type | Info |
|---|---|---|
| Chart ID | String | The id of the chart to target "myid" |
| Method Name | String | The name of the method you are tring to call "addnode" | "getseriesvalues" | etc... |
| Parameters | Object | 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
});| Attribute | Type | Info |
|---|---|---|
| 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 true | false | 1 | 0 |
| value | Numeric | 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"
}
});
| Attribute | Type | Info |
|---|---|---|
| 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 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' }
]
});
| Attribute | Type | Info |
|---|---|---|
| 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 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
]
});
| Attribute | Type | Info |
|---|---|---|
| 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 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.
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
});
| Attribute | Type | Info |
|---|---|---|
| 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.
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
});
| Attribute | Type | Info |
|---|---|---|
| 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 object.
zingchart.exec('myid', 'modifyplot', {
graphid: 0,
plotindex: 1,
data: {
lineWidth: 2,
lineColor: 'yellow'
}
});
| Attribute | Type | Info |
|---|---|---|
| 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 true | false | 1 | 0 |
removenode
Removes a node.
zingchart.exec('myid', 'removenode', {
graphid: 0,
plotindex: 1,
nodeindex: 2
});
| Attribute | Type | Info |
|---|---|---|
| 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 true | false | 1 | 0 |
removeplot
Removes a plot.
zingchart.exec('myid', 'removeplot', {
graphid: 0,
plotindex: 1
});
| Attribute | Type | Info |
|---|---|---|
| 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 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
});
| Attribute | Type | Info |
|---|---|---|
| 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
});
| Attribute | Type | Info |
|---|---|---|
| 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 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' }
]
});
| Attribute | Type | Info |
|---|---|---|
| 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 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, ...]
});
| Attribute | Type | Info |
|---|---|---|
| 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 true | false | 1 | 0 |
| values | Array | 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'
});
| Parameter | Type | Description |
|---|---|---|
| fn | String | 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'
});
| Parameter | Type | Description |
|---|---|---|
| fn | String | 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); }
});
| Parameter | Type | Description |
|---|---|---|
| callback | Function | An inline function callback that will receive the raw data AND the function name if defined. |
| fn | String | 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'
});
Note: charts with output: 'svg' must get data inside callback function defined in the method call. SVG output is the default for ZingChart.
| Parameter | Type | Description |
|---|---|---|
| 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) {...} |
Creates a printable version of the chart and attempts to print it.
zingchart.exec('myid', 'print');
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');
| Attribute | Type | Info |
|---|---|---|
| download | Boolen | If you should download the image as a file. true | false |
| filename | String | Name of the file to save as. test-filename |
| filetype | String | Type of file to save image as. pdf | jpg | |
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,
});
| Attribute | Type | Info |
|---|---|---|
| text | String | Defines the text to be displayed. "resize" | ... |
| function | String | Name of the function to be associated with this context menu item. "window.myFunc()" | ... |
| order | Numeric | 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
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| nodeindex | Numeric | The index of where the scale node should be inserted. If it is not set, it is placed at the end. 0 | 8 | 20 | ... |
| scale | String | The index of where the scale node should be inserted. If it is not set, it is placed at the end. 0 | 8 | 20 | ... |
| 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 true | false | 1 | 0 |
| value | Mixed | 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');
load
Loads a new JSON packet from a URL.
zingchart.exec('myid', 'load', {
dataurl : 'newjson.php'
});
| Attribute | Type | Info |
|---|---|---|
| dataurl | String | 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"
}
});
| Attribute | Type | Info |
|---|---|---|
| data | Object | 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 | ... |
| object | String | Optional shortcut to only modify specific parts of the graph. The options are title, plotset (series), plotarea and legend. "title" | "plotset" | "series" | "plotarea"| "legend" | "plot"| "map" |
| 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 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
});
| Attribute | Type | Info |
|---|---|---|
| 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
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | .../p> |
| nodeindex | Numeric | The index of the value to be removed. 0 | 8 | 20 | ... |
| scale | String | The name of the scale. "scale-x" | "scale-x-2" | ... |
| 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 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
});
| Attribute | Type | Info |
|---|---|---|
| height | Mixed | 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%" | ... |
| width | Mixed | 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: {...}
});
| Attribute | Type | Info |
|---|---|---|
| data | Object | The JSON packet to apply to the graph. It will replace the previous JSON. {...} |
| 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 true | false | 1 | 0 |
setguide
Fire the guide object at a specific node.
zingchart.exec('myid', 'setguide', {
graphid: 0,
keyvalue: 2
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| keyvalue | Numeric | 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');
Feed
Learn about methods that affect the refresh object.
clearfeed
Clears the current graph and restarts the feed
zingchart.exec('myid', 'clearfeed');
getinterval
Returns the interval value set on the feed
zingchart.exec('myid', 'getinterval');
| Attribute | Type | Info |
|---|---|---|
| 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
});| Attribute | Type | Info |
|---|---|---|
| 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');stopfeed
Stops the feed.
zingchart.exec('myid', 'stopfeed');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'
});
| Attribute | Type | Info |
|---|---|---|
| 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');
getgraphlength
Returns the number of graphs in the chart (graphset.)
zingchart.exec('myid', 'getgraphlength');
getnodelength
Returns the number of nodes in a given plot.
zingchart.exec('myid', 'getnodelength', {
graphid: 0,
plotindex: 2
});
| Attribute | Type | Info |
|---|---|---|
| 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
});
| Attribute | Type | Info |
|---|---|---|
| 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:
xywidthheightlineColorlineWidthborderColorborderWidthbackgroundColor1backgroundColor2textvaluesminValuemaxValuestepstepSize
zingchart.exec('myid', 'getobjectinfo', {
object: 'graph'
});zingchart.exec('myid', 'getobjectinfo', {
object: 'scale',
name: 'scale-x'
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| name | String | The name of the scale if "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
});
| Attribute | Type | Info |
|---|---|---|
| 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
});
| Attribute | Type | Info |
|---|---|---|
| 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');
getrules
Returns an array containing the ids of the existing rules in a chart.
zingchart.exec('myid', 'getrules', {
plotindex:0
});
| Attribute | Type | Info |
|---|---|---|
| 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');
| Attribute | Type | Info |
|---|---|---|
| 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');
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
});
| Attribute | Type | Info |
|---|---|---|
| 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
});
| Attribute | Type | Info |
|---|---|---|
| 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 | ... |
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.
zingchart.maps.getInfo('mapName'); CopyIt accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
getItems()
This method returns a list of the map items.
zingchart.maps.getItems('mapName'); CopyIt accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
getItemInfo()
This method returns information about the specified map item.
zingchart.maps.getItemInfo('mapName', 'itemName'); Copy
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
| itemName | String | The 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
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
| [...] | String | An 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
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
| [...] | String | An 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({...}); CopyIt accepts an object with the following properties:
| Property | Type | Description |
|---|---|---|
| id | String | The name of the custom map.. |
| url | String | The map file source. |
| mappings | Object | Allows you to map property names from the GeoJSON file to ZingChart. |
| styling | Object | Allows you to style the map. |
| callback | Function | Represents the function that renders the map. |
viewAll()
This method allows you to view the entire map.
zingchart.maps.viewAll('mapName'); Copy
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
zoomIn()
This method allows you to zoom in on the map.
zingchart.maps.zoomIn('mapName'); Copy
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
zoomOut()
This method allows you to zoom out on the map.
zingchart.maps.zoomOut('mapName'); Copy
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
zoomTo()
This method allows you to zoom to a specified area on the map.
zingchart.maps.zoomTo('mapName', {...}); Copy
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
| {...} | Object | An object that accepts the following properties:
|
zoomToItem()
This method allows you to zoom to a specified item on the map.
zingchart.maps.zoomToItem('mapName', 'itemName'); Copy
It accepts the following parameters:
| Parameter | Type | Description |
|---|---|---|
| mapName | String | The name of the map. |
| itemName | String | The 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
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| id | String | The id of the note to be added. "note1" | "note2" |
| text | String | The text to be included in the note. "Note 1" | "%v widgets" |
| type | String | The type of note to be added. "node" | "scale" | "xy" |
| style | Object | Styling attributes to be applied to the note. { ... } |
| plotindex | Numeric | The index of the plot to which the note will be added. 0 | 1 | ... |
| nodeindex | Numeric | The index of the node to which the note will be added. 0 | 1 | ... |
| scaleindex | Numeric | The index of the scale to which the note will be added. 0 | 1 | ... |
| scalevalue | Mixed | The value of the scale item to which the note will be added. "Friday" | 1 | 2 | ... |
| x | Numeric | The x position. 5 | 10 | ... |
| y | Numeric | The y position. 5 | 10 | ... |
| offset-x | Numeric | An offset in the x direction to be applied to the note. 5 | -10 | ... |
| offset-y | Numeric | 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' ]
});| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| id | Mixed | 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)'
});| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| id | String | The id of the note to be updated. "note1" | "note2" |
| text | String | The text to be included in the note. "Note 1" | "%v widgets" |
| type | String | The type of note to be updated. "node" | "scale" | "xy" |
| style | Object | Styling attributes to be applied to the note. { ... } |
| plotindex | Numeric | The index of the plot to update the note to. 0 | 1 | ... |
| nodeindex | Numeric | The index of the node to update the note to. 0 | 1 | ... |
| scaleindex | Numeric | The index of the scale to update the note to. 0 | 1 | ... |
| scalevalue | Mixed | The value of the scale item to update the note to. "Friday" | 1 | 2 | ... |
| x | Numeric | The x position. 5 | 10 | ... |
| y | Numeric | The y position. 5 | 10 | ... |
| offset-x | Numeric | An offset in the x direction to be applied to the note. 5 | -10 | ... |
| offset-y | Numeric | 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.
| Attribute | Type | Info |
|---|---|---|
| data | Mixed | 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 | ... |
| type | String | 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'
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| id | Mixed | 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', {});
| Attribute | Type | Info |
|---|---|---|
| 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' }
});| Attribute | Type | Info |
|---|---|---|
| data | Mixed | 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'
}
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| id | String | The id of the rule to be added. "rule1" | "rule2" |
| plotindex | Numeric | The index of the plot. 0 | 1 | ... |
| rule | String | The rule parameters to be added. "%node-value < 50" | "%v > 50" | ... |
| style | Object | 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' ]
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| id | Mixed | The id or ids of the rule or rules to be removed. "rule1" | ["rule1,"rule2"] |
| plotindex | Numeric | 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' }
});| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| id | Mixed | The id of the rule to be updated. "rule1" | "rule2" |
| plotindex | Numeric | The index of the plot. 0 | 1 | ... |
| rule | String | The rule parameters to be updated. "%node-value < 50" | "%v > 50" | ... |
| type | String | 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');
| Attribute | Type | Info |
|---|---|---|
| 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'
}
]);
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| nodeindex | Mixed | Sets the nodes that will be included in the selection collection. "1" | "2-4" | [1, 3, 4] | ... |
| plotindex | Mixed | 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');
| Attribute | Type | Info |
|---|---|---|
| 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]
}
]);
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| nodeindex | Mixed | Sets the nodes that will be included in the selection collection. "1" | "2-4" | [1, 3, 4] | ... |
| plotindex | Mixed | Sets the plots that will be included in the selection collection. "1" | "2-4" | [1, 3, 4] | ... |
| toggle | Boolean | 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]
]
});| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| selection | Array | An array of objects containing selection information. [[...], [...]] |
clicknode
Clicks a specified node.
zingchart.exec('myid', 'clicknode');
closemodal
Closes modal screen.
zingchart.exec('myid', 'closemodal');
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...'
});
| Attribute | Type | Info |
|---|---|---|
| text | String | 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');exitfullscreen
Destroys the full screen render of the chart.
zingchart.exec('myid', 'exitfullscreen');
fullscreen
Renders the chart in full screen mode.
zingchart.exec('myid', 'fullscreen');hideguide
Hide the guide object.
zingchart.exec('myid', 'hideguide');
hidemenu
Hide the context menu.
zingchart.exec('myid', 'hidemenu');
hideplot/plothide
Hides the plot set by plotindex (or plotid).
zingchart.exec('myid', 'hideplot', {
graphid: 0,
plotindex: 2
});zingchart.exec('myid', 'hideplot', {
plotindex: 1
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| plotid | String | Sets the id of the plot. "mylineplot" | ... |
| plotindex | Numeric | Sets the index of the plot. 0 | 1 | ... |
| toggle-action | String | Sets the toggle action performed when the plot is hidden. "hide" | "remove" |
legendmaximize
Maximizes the legend.
zingchart.exec('myid', 'legendmaximize');
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
legendminimize
Minimize the legend.
zingchart.exec('myid', 'legendminimize');| Attribute | Type | Info |
|---|---|---|
| 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');showhoverstate
Show the hoverstate of a specific node.
zingchart.exec('myid', 'showhoverstate', {
nodeindex: 2
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| nodeindex | Numeric | The node index on the graph. The default is 0. 0 | 1 | ... |
showguide
Show the guide object.
zingchart.exec('myid', 'showguide');showmenu
Display the context menu.
zingchart.exec('myid', 'showmenu');showplot/plotshow
Shows the plot set by plotindex (or plotid).
zingchart.exec('myid', 'showplot', {
graphid: 0,
plotindex: 2
});zingchart.exec('myid', 'showplot', {
plotid: "mylineplot"
});| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| plotid | String | Sets the id of the plot. "mylineplot" | ... |
| plotindex | Numeric | Sets the index of the plot. 0 | 1 | ... |
| toggle-action | String | Sets the toggle action performed when the plot is hidden. "hide" | "remove" |
toggleabout
Toggles the About Screen.
zingchart.exec('myid', 'toggleabout');
togglebugreport
Toggles the Bug Report Screen.
zingchart.exec('myid', 'togglebugreport');
toggledimension
Toggles the Dimension of the current graph between 2D and 3D if possible.
zingchart.exec('myid', 'toggledimension');
togglelegend
Toggles the visibility of the legend.
zingchart.exec('myid', 'togglelegend');
| Attribute | Type | Info |
|---|---|---|
| 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');
toggleplot
Toggles the visibility of the Plot.
zingchart.exec('myid', 'toggleplot');
Tooltip
hidetooltip
Hides visibility of tooltip.
zingchart.exec('myid', 'hidetooltip');
locktooltip
Locks a visible tooltip in its visible state.
zingchart.exec('myid', 'locktooltip');
showtooltip
Shows a tooltip.
zingchart.exec('myid', 'showtooltip');
unlocktooltip
Unlocks a locked tooltip.
zingchart.exec('myid', 'unlocktooltip');Zoom
viewall
Resets the zoom on the chart.
zingchart.exec('myid', 'viewall', {
graphid: 0
});
| Attribute | Type | Info |
|---|---|---|
| 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
});| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| zoomx | Boolean | Sets if the graph will zoom on the x scale. true | false | 1 | 0 |
| zoomy | Boolean | 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
});| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| zoomx | Boolean | Sets if the graph will zoom on the x scale. true | false | 1 | 0 |
| zoomy | Boolean | 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
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| kmin | Numeric | The minimum Unix time value (in milliseconds) to zoom to. 1417651200000 | 1417661200000 | ... |
| kmax | Numeric | The maximum Unix time value (in milliseconds) to zoom to. 1417651200000 | 1417661200000 | ... |
| xmax | Numeric | The max x position to zoom to. 5 | 10 | ... |
| xmin | Numeric | The min x position to zoom to. 5 | 10 | ... |
| ymax | Numeric | The max y position to zoom to. 5 | 10 | ... |
| ymin | Numeric | 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
});
| Attribute | Type | Info |
|---|---|---|
| graphid (optional) | Mixed | The id/index of the graph. The default is 0. "mygraph" | 0 | 1 | ... |
| xmax | Mixed | The max x value to zoom to. 40 | "Apr" | ... |
| xmin | Mixed | The min x value to zoom to. 10 | "Jan" | ... |
| ymax | Numeric | The max y position to zoom to. 5 | 10 | ... |
| ymin | Numeric | The min y position to zoom to. 5 | 10 | ... |