ZingChart Events Overview
The ZingChart library raises several events that can be captured by your JavaScript scripts.
To handle these events, you simply need to add the appropriate JavaScript function to your code. All of the functions should be added to the zingchart namespace. The event handler will pass a JavaScript object that contains relevant properties.
zingchart.load = function(jsonObj){
alert("ZingChart has completed loading on Chart " + jsonObj["id"]);
}
Data Manipulation Events - Load Data Manipulation Event Explorer
These events are fired when the underlying JSON object is modified such as a change to a single node value, the entire JSON packet, and everything in between.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| modify | Dispatches when ZingChart is modified via the modify API call. | id The ID of chart graphid The ID of graph data The new configuration data object The object to modify if set in the API call |
zingchart.modify = function(dataObj){
alert("ZingChart Modified on Chart " +
dataObj["id"]);
}
|
| node_add | Dispatches when the user adds a plotnode | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_add = function(node){
alert("Node Added - Key: " + node["key"] +
" Value: " + node["value"]);
}
|
| node_modify | Dispatches when the user modifies a plotnode | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_modify = function(node){
alert("Node Modified - Key: " + node["key"] +
" Value: " + node["value"]);
}
|
| node_remove | Dispatches when the user removes a plotnode | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_remove = function(node){
alert("Node Removed - Key: " + node["key"]);
}
|
| plot_add | Dispatches when a plot is added to the graph. | id The ID of chart graphid The ID of graph plotindex The index of the plot data The data of the new plot |
zingchart.plot_add = function(plot){
alert("Plot Added - Plot: " + plot["plotindex"]);
}
|
| plot_modify | Dispatches when a plot is modified. | id The ID of chart graphid The ID of graph plotindex The index of the plot data The new configuration data |
zingchart.plot_modify = function(plot){
alert("Plot Modified - Plot: " + plot["plotindex"]);
}
|
| plot_remove | Dispatches when a plot is removed. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.plot_remove = function(plot){
alert("Plot Removed - Plot: " + plot["plotindex"]);
}
|
| reload | Dispatches when ZingChart is reloaded. | id The ID of chart |
zingchart.reload = function(dataObj){
alert("Data Reloaded on Chart " +
dataObj["id"] + ".");
}
|
| setdata | Dispatches when the setdata API function is called. | id The ID of chart data The new configuration data |
zingchart.setdata = function(dataObj){
alert("Zingchart Loaded with new Data on Chart " +
dataObj["id"] + ".");
}
|
Triggered Events - Load Triggered Events Graph Explorer
These events fire on user's action such as clicking and mouseover.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| click | Dispatches when the user clicks anywhere on the graph | id The ID of chart |
zingchart.click = function(dataObj){
alert("Chart Clicked - ID: " + data["id"]);
}
|
| complete | Dispatches when ZingChart completes loading. Note: This occurs not only after initial load, but also after invoking any of the reload data API calls. | id The ID of chart |
zingchart.complete = function(dataObj){
alert("Data loaded on Chart " +
dataObj["id"] + ".");
}
|
| legend_item_click | Dispatches when a legend item is clicked. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.legend_item_click = function(plot){
alert("Legend Item Clicked - Plot: " +
plot["plotindex"]);
}
|
| load | Dispatches when ZingChart completes initial load. | id The ID of chart |
zingchart.load = function(dataObj){
alert("ZingChart loaded on Chart " +
dataObj["id"] + ".");
}
|
| node_click | Dispatches when the user clicks a plotnode | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_click = function(node){
alert("Node Clicked - Key: " + node["key"] +
" Value: " + node["value"]);
}
|
| node_doubleclick | Dispatches when the user double clicks a plotnode | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_doubleclick = function(node){
alert("Node Double Clicked - Key: " +
node["key"] + " Value: " + node["value"]);
}
|
| node_mouseout | Dispatches when the user mouses out of a plotnode | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_mouseout = function(node){
alert("Node Mouse Out - Key: " + node["key"] +
" Value: " + node["value"]);
}
|
| node_mouseover | Dispatches when the user mouses over a plotnode | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_mouseover = function(node){
alert("Node Mouse Over - Key: " + node["key"] +
" Value: " + node["value"]);
}
|
| plot_click | Dispatches when a plot is clicked. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.plot_click = function(plot){
alert("Plot Clicked - Plot: " +
plot["plotindex"]);
}
|
| plot_doubleclick | Dispatches when a plot is double clicked. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.plot_doubleclick = function(plot){
alert("Plot Double Clicked - Plot: " +
plot["plotindex"]);
}
|
| plot_mouseout | Dispatches when the user mouses out of a plot. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.plot_mouseout = function(plot){
alert("Plot Shown - Plot: " +
plot["plotindex"]);
}
|
| plot_mouseover | Dispatches when a user mouses over a plot. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.plot_mouseover = function(plot){
alert("Plot Shown - Plot: " +
plot["plotindex"]);
}
|
| resize | Dispatches on resize. | id The ID of chart |
zingchart.resize = function(dataObj){
alert("ZingChart Resized on Chart " +
dataObj["id"] + ".");
}
|
Toggle Events - Load Toggle Event Explorer
There are many parts of a ZingChart that can be turned on and off and these events capture those actions.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| about_hide | Dispatches when the About Screen is closed. | id The ID of chart |
zingchart.about_hide = function(dataObj){
alert("About Screen Hidden on Chart " +
dataObj["id"] + ".");
}
|
| about_show | Dispatches when the About Screen is displayed. | id The ID of chart |
zingchart.about_show = function(dataObj){
alert("About Screen Shown on Chart " +
dataObj["id"] + ".");
}
|
| bugreport_hide | Dispatches when the Report Bug Screen is closed. | id The ID of chart |
zingchart.bugreport_hide = function(dataObj){
alert("Bug Report Hidden on Chart " +
dataObj["id"] + ".");
}
|
| bugreport_show | Dispatches when the Report Bug Screen is displayed. | id The ID of chart |
zingchart.bugreport_show = function(dataObj){
alert("Bug Report Shown on Chart " +
dataObj["id"] + ".");
}
|
| dimension_change | Dispatches when the dimension is toggled between 2D and 3D. | id The ID of chart dimension The new dimension type The new graph type |
zingchart.dimension_change = function(dataObj){
alert("Dimension Changed to " +
dataObj["dimension"] + ".");
}
|
| legend_hide | Dispatches when the legend is hidden. | id The ID of chart |
zingchart.legend_hide = function(dataObj){
alert("Legend Hidden on Chart " +
dataObj["id"] + ".");
}
|
| legend_maximize | Dispatches when the legend is maximized. | id The ID of chart |
zingchart.legend_maximize = function(dataObj){
alert("Legend Maximized on Chart " +
dataObj["id"] + ".");
}
|
| legend_minimize | Dispatches when the legend is minimized. | id The ID of chart |
zingchart.legend_minimize = function(dataObj){
alert("Legend Minimized on Chart " +
dataObj["id"] + ".");
}
|
| legend_show | Dispatches when the legend is displayed. | id The ID of chart |
zingchart.legend_show = function(dataObj){
alert("Legend Shown on Chart " +
dataObj["id"] + ".");
}
|
| lens_hide | Dispatches when the lens is hidden. | id The ID of chart |
zingchart.lens_hide = function(dataObj){
alert("Lens Hidden on Chart " +
dataObj["id"] + ".");
}
|
| lens_show | Dispatches when the lens is displayed | id The ID of chart |
zingchart.lens_show = function(dataObj){
alert("Lens Shown on Chart " +
dataObj["id"] + ".");
}
|
| plot_hide | Dispatches when a plot is hidden. | id The ID of chart graphid The ID of graph plotindex The index of the plot visible Boolean indicating if the plot is visible or hidden. |
zingchart.plot_hide = function(plot){
alert("Plot Hidden - Plot: " + plot["plotindex"]);
}
|
| plot_show | Dispatches when a plot is shown after being hidden. | id The ID of chart graphid The ID of graph plotindex The index of the plot visible Boolean indicating if the plot is visible or hidden. |
zingchart.plot_show = function(plot){
alert("Plot Shown - Plot: " + plot["plotindex"]);
}
|
| source_hide | Dispatches when the View Source Screen is closed. | id The ID of chart |
zingchart.source_hide = function(dataObj){
alert("Source Hidden on Chart " +
dataObj["id"] + ".");
}
|
| source_show | Dispatches when the View Source Screen is displayed. | id The ID of chart |
zingchart.source_show = function(dataObj){
alert("Source Shown on Chart " +
dataObj["id"] + ".");
}
|
Interactive Events - Load Interactive Event Explorer
These events are fired when the user enters/exits interactive mode. Any changes made to the graph in Interactive Mode will also fire the appropriate Data Manipulation Event.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| node_deselect | Dispatches when the node is no longer selected. | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_deselect = function(node){
alert("Node Deselected - Key: " + node["key"] +
" Value: " + node["value"]);
}
|
| node_select | Dispatches when a node is selected | id The ID of chart graphid The ID of graph plotindex The index of the plot nodeindex The index of the node key The node's key value The value of the node text The text that would display in the tooltip for the node |
zingchart.node_select = function(node){
alert("Node Selected - Key: " + node["key"] +
" Value: " + node["value"]);
}
|
| plot_deselect | Dispatches when a plot is no longer selected. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.plot_deselect = function(plot){
alert("Plot Deselected - Plot: " +
plot["plotindex"]);
}
|
| plot_select | Dispatches when a plot is selected. | id The ID of chart graphid The ID of graph plotindex The index of the plot |
zingchart.plot_select = function(plot){
alert("Plot Selected - Plot: " +
plot["plotindex"]);
}
|
Zoom Event- Load Zoom Event Explorer
The zoom event captures any zoom action.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| zoom | Dispatches when a zoom event occurs. | id The ID of chart xmin The x-min value of the zoom xmax The x-max value of the zoom ymin The y-min value of the zoom ymax The y-max value of the zoom |
zingchart.zoom = function(dataObj){
alert("Chart Zoomed: xmin: " + dataObj["xmin"] +
", xmax: " + dataObj["xmax"] +
" ymin: " + dataObj["ymin"] +
", ymax: " + dataObj["ymax"]);
}
|
Feed Events - Load Feed Event Explorer
In graphs that are set up to use a feed, these events are fired on feed actions.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| feed_clear | Dispatches when the feed is cleared. | id The ID of chart |
zingchart.feed_clear = function(dataObj){
alert("Feed Cleared on Chart " +
dataObj["id"] + ".");
}
|
| feed_interval_modify | Dispatches when the feed interval is modified. | id The ID of chart interval The new interval |
zingchart.feed_interval_modify = function(dataObj){
alert("Feed interval changed to " +
dataObj["interval"] + ".");
}
|
| feed_start | Dispatches when the feed starts. | id The ID of chart |
zingchart.feed_start = function(dataObj){
alert("Feed Started on Chart " +
dataObj["id"] + ".");
}
|
| feed_stop | Dispatches when the feed stops. | id The ID of chart |
zingchart.feed_stop = function(dataObj){
alert("Feed Stopped on Chart " +
dataObj["id"] + ".");
}
|
History Events - Load History Event Explorer
In graphs that take advantage of ZingChart's navigation, events are fired when the user navigates through the history.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| history_back | Dispatches when the user backs through history. | id The ID of chart index The index in history the user is at |
zingchart.history_back = function(dataObj){
alert("Chart Back to index " +
dataObj["index"] + ".");
}
|
| history_forward | Dispatches when the user goes forward through the history. | id The ID of chart index The index in history the user is at |
zingchart.history_forward = function(dataObj){
alert("Chart Forward to index " +
dataObj["index"] + ".");
}
|
Export Events- Load Export Event Explorer
These events are fired when the user is getting data from the graph.
| Event Name | Description | Properties | Example |
|---|---|---|---|
| data_export | Dispatches when the user exports the graph data. | id The ID of chart |
zingchart.data_export = function(dataObj){
alert("Data Exported on Chart " +
dataObj["id"] + ".");
}
|
| image_save | Dispatches when the user saves an images of the graph. | id The ID of chart |
zingchart.image_save = function(dataObj){
alert("Image Saved on Chart " +
dataObj["id"] + ".");
}
|
| Dispatches when the user prints the graph. | id The ID of chart |
zingchart.print = function(dataObj){
alert("User Print on Chart " +
dataObj["id"] + ".");
}
|
ZingChart API Events Explorer
- Set node value of node 2 on data set 1 to 80
- Add node with a value of 10 to data set 2 at node 4
- Remove node 3 on data set 1
- Add Plot
- Remove data set 1
- Change line color/style of data set 1
- Change text/BG Color of title (full redraw)
- Change text/BG Color of title (partial redraw)
- Reload JSON
- Refresh Graph with inline data.
- Refresh Graph with data from api2.txt
ZingChart API Events Explorer
- Go Back
- Go Forward
ZingChart API Events Explorer
- Export Data
- Save as Image
ZingChart API Events Explorer
- Stop Feed
- Start Feed
- Clear Feed
- Set Interval to 3 seconds
ZingChart API Events Explorer
- Minimize Legend
- Maximize Legend
- Toggle Legend
- Toggle 2D/3D
- Toggle Lens
- Toggle Source
- Toggle Bug Report
- Toggle About
ZingChart API Events Explorer
- Zoom on the x-axis
- Zoom out
- Zoom to x:3-7 y:30-40
ZingChart API Events Explorer
- Enter Edit Mode
- Add Nodes to Selected Plot
- Remove Selected Plot
- Remove Selected Node
- Exit Edit Mode
ZingChart API Events Explorer
