Categories
Plugins

zingchart-jquery

ZingChart jQuery
Less code. More win.

ZingChart jQuery is a wrapper for the [ZingChart charting library](http://www.zingchart.com/) that allows for jQuery-style use of the [**88** different API methods](#methods) and [**81** different API events](#events) that ZingChart has to offer. It’s designed to allow maximum use of the various features with the simplest and most jQuery-esque syntax possible.
Intro
Before we get started with this wrapper, it’d be a good idea to familiarize yourself with the ZingChart library. There’s even a tutorial for creating your first chart with ZingChart. It should get you up to speed on how this library works.
Looking for more info? Check out any of the below tutorials to get up to speed on the ZingChart library or dig into our docs pages.
Tutorials

Your First Chart
Basic Scale Configuration
Improving Data Indicators
Adding Style
Calling Attention
Customizing the Context-Menu
Using Data From a Database

Basics
Step One is to make sure you have jQuery loaded. This wrapper won’t work without it.
Step Two is to have the ZingChart library loaded. We suggest you use our new, fandangled CDN to keep up to date with the latest build.
Step Three is to have this library loaded. Again, in order to stay up to date with the latest build, we suggest using our CDN.
Here’s what should be in the once you’re done.

All good? Time to make some sweet charts.
The ZingChart jQuery wrapper works just like normal jQuery. Each method or event is tacked on to the standard jQuery selector method. All methods should be placed inside a $(document).ready() call to ensure the DOM is fully loaded. Here’s an example of creating a ZingChart object on a div with an ID of “myChart”:
$(document).ready(function() {    $(“#myChart”).zingchart({        “data”:{            “type”: “line”,            “series”: [                {                    “values”: [1,2,5,3,9,4]                }            ]        }    });})

For the sake of brevity, the rest of the examples will omit the $(document).ready() wrapper. That being said, you still need to include it when using this library.

All of the methods which take an object as a parameter can have it passed through directly or by reference. Both are equivalent.
Directly
$(“#myChart”).zingchart({    “data”: {        “type”: “bar”,        “series”: [            {                “values”: [3,7,9,2]            }        ]    }});
Reference
var myData = {    “type”: “bar”,    “series”: [        {            “values”: [3,7,9,2]        }    ]}; $(“#myChart”).zingchart({data: myData});
Woohoo! Congrats! You’ve just made your first ZingChart. Pretty straightforward, isn’t it? Now we get into the nitty gritty of the API: how to make your chart do stuff.
Chaining
One of the more user-friendly aspects of jQuery is the chaining of functions, allowing for users to specify the target once but call multiple functions that affect it. This wrapper supports chaining for any methods or events that return a jQuery object. For example, say you want to set a chart to the 3D view and resize it. Instead of calling each method on the chart separately, you could chain them like this:
$(“#myChart”).set3dView({“y-angle”:10}).resizeChart({“width”:600,”height”:400});
$(“#myChart”) is now set to a 3D view and resized in just one line of code!
Pat yourself on the back for saving time by using chaining. You’re a rockstar!

**An Important Note**: many of the event functions may be very similar in name to the method functions and vice versa. This is intentional. The differentiation between the method functions and the event functions is that the ***method*** functions always start with a ***verb***: the action they’re performing, while the ***event*** functions always start with a ***noun***: the object they’re watching.
Examples

Chart Manipulation: Using Methods and Events Together
Check out this example to see how to make a chart with lots of plots into an interactive and much more legible chart. Edit in JSFiddle

Chart to DOM: Manipulating the DOM with Events
Learn how to manipulate the DOM through the use of ZingChart jQuery events. Edit in JSFiddle

DOM to Chart: Manipulating the Chart with Methods
This is a great first example if you’re looking to learn how to integrate ZingChart jQuery methods with standard DOM input elements. Edit in JSFiddle

AJAX Data: Using Asynchronous Data with your Chart
No need to load your data at once. Check out this example to see how to get started with AJAX and the ZingChart jQuery wrapper. Edit in JSFiddle

Table to Chart: Using the Zingify Tool
Take your well-formed HTML tables and turn them into snazzy charts with ease. Edit in JSFiddle

Questions?
Check out out extensive documentation below or feel free to email us at support@zingchart.com if you have any questions.

# Methods[](#methods) #
## Rendering ##
.zingchart( object )
Creates a new ZingChart object

Values
Type
Details

Parameter
Object
ZingChart Object

Return
jQuery
jQuery Object

Rendering a chart
$(“#myChart”).zingchart({    “type”: “line”,    “title”: {        “text”: “Hello, ZingChart World!”    },    “series”: [        {            “values”: [5, 10, 15, 5, 10, 5]        }    ]});

## Data Manipulation ##
#### .addNode( object ) ####
Adds a node to an existing plot

Values
Type
Details

Parameter
Object
Node Object

Return
jQuery
jQuery Object

$(“#myChart”).addNode({    “plotindex”: 1,    “nodeindex”: 2,    “value”: 12});

#### .addPlot( object ) ####
Adds a new plot to an exising chart

Values
Type
Details

Parameter
Object
Plot Object

Return
jQuery
jQuery Object

$(“#myChart”).addPlot({    “plotindex”: 0,    “data”: {        “values”: [10,20,15]    }});

#### .appendSeriesData( object ) ####
Appends data to the existing series. Can be used on a single plot or the whole series. Note that the value arrays sent do not concatenate the existing ones.

Values
Type
Details

Parameter
Object
Series Object

Return
jQuery
jQuery Object

$(“#myChart”).appendSeriesData({    “plotindex”: 0,    data: {        “lineColor”: “red”    }});

#### .appendSeriesValues( object ) ####
Appends data to the end of a plot. Can be used on a single plot or the whole series.

Values
Type
Details

Parameter
Object
Series Object

Return
jQuery
jQuery Object

$(“#myChart”).appendSeriesData({    “plotindex”: 1,    “values”: [19,28,13,42]});

#### .getSeriesData( object ) ####
Returns the series data. If a series object is passed through, the data for that series is returned. If no argument is passed through, the data for every series of the chart is returned.

Values
Type
Details

Parameter
Object (OPTIONAL)
Series Object

Return
Object
Series Object

var myData = $(“#myChart”).getSeriesData({    “plotindex”: 1}); // myData = the series data for plot[1] of the chart var allData = $(“#myChart”).getSeriesData(); // allData = the series data for all plots of the chart

#### .getSeriesValues( object ) ####
Returns the series values. If a series object is passed through, the values for that series are returned. If no argument is passed through, the values for every series of the chart are returned concatenated in order from the first plot to the last plot.

Values
Type
Details

Parameter
Object (OPTIONAL)
Series Object

Return
Object
Series Object

var myValues = $(“#myChart”).getSeriesValues({    “plotindex”: 0}); // myValues = the series values for plot[0] of the chart var allValues = $(“#myChart”).getSeriesValues(); // allValues = the series values for all plots of the chart

#### .modifyPlot( object ) ####
Modifies an existing plot on the chart specified by **plotindex**.

Values
Type
Details

Parameter
Object
Plot Object

Return
jQuery
jQuery Object

$(“#myChart”).modifyPlot({    “plotindex”: 0,    “data”: {        “lineWidth”: 2,        “lineColor”: “yellow”,    }});

#### .removeNode( object ) ####
Removes a node specified by **plotindex** and **nodeindex**.

Values
Type
Details

Parameter
Object
Node Object

Return
jQuery
jQuery Object

$(“#myChart”).removeNode({    “plotindex”: 1,    “nodeindex”: 2});

#### .removePlot( object ) ####
Removes a plot specified by **plotindex**.

Values
Type
Details

Parameter
Object
Plot Object

Return
jQuery
jQuery Object

$(“#myChart”).removePlot({    “plotindex”: 0});

#### .set3dView( object ) ####
Sets the new 3D parameters for the view. This overrides the settings from the **3d-aspect** attribute of the chart.

Values
Type
Details

Parameter
Object
3D View Object

Return
jQuery
jQuery Object

$(“#myChart”).set3dView({    “y-angle”: 10,    “depth”: 60});

#### .setNodeValue( object ) ####
Changes the value of a single node specified via **plotindex** and **nodeindex** to the new **value**.

Values
Type
Details

Parameter
Object
Node Object

Return
jQuery
jQuery Object

$(“#myChart”).setNodeValue({    “plotindex”: 1,    “nodeindex”: 2,    “value”: 22});

#### .setSeriesData( object ) ####
Replaces the series data. It can be used on one plot or the whole series depending on if **plotindex** is set.

Values
Type
Details

Parameter
Object
Series Object

Return
jQuery
jQuery Object

Setting the series data for a single plot:
$(“#myChart”).setSeriesData({    “plotindex”: 1,    “data” : {        “values”: [12, 33, 20],        “lineColor”: “red”    }});
Setting the series data for all plots:
$(“#myChart”).setSeriesData({    “data”: [        {            “values”: [10,15,20],            “lineColor”: “blue”        },        {            “values”: [12,17,10],            “lineColor”: “pink”        }    ]});

#### .setSeriesValues( object ) ####
Replaces the series values. It can be used on one plot or the whole series depending on if **plotindex** is set.

Values
Type
Details

Parameter
Object
Series Object

Return
jQuery
jQuery Object

Setting the series values for a single plot:
$(“#myChart”).setSeriesValues({    “plotindex”: 1,    “values”: [99,98,97]});
Setting the series values for all plots:
$(“#myChart”).setSeriesValues({    “values”: [        [19,28,13,42],        [37,11,27,25]    ]});

## Export ###
#### .exportData() ####
Exports the current data for the chart. This only works if the **exportdataurl** is set in the [render options](http://www.zingchart.com/docs/reference/zingchart-object/#zingchart__render).

Values
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).exportData();//Assuming the exportdataurl is set in the render options, the current data for the chart will be exported to that url.

#### .getImageData( string ) ####
Returns a Base64 encoded image string of the current chart.

Values
Type
Details

Parameter
String
“png”, “jpg”, “bmp” (only if rendering in Flash)

Return
jQuery
jQuery Object

$(“#myChart”).getImageData(“png”); // or… $(“#myChart”).getImageData(“jpg”); // or (if you’re rendering via Flash)… $(“#myChart”).getImageData(“bmp”);

#### .print() ####
Creates a printable version of the chart and attempts to print it.

Values
Type
Details

Parameter

Return
jQuery
jQuery Object

// Results in the printer dialog opening on the page$(“#myChart”).print();

#### .saveAsImage() ####
Produces an image of the graph. This will only work if the **exportimageurl** is set in the [render options](http://www.zingchart.com/docs/reference/zingchart-object/#zingchart__render).

Values
Type
Details

Parameter

Return
jQuery
jQuery Object

// Assuming the exportimageurl is set in the render options, an image of the current chart will be exported to that url.$(“#myChart”).saveAsImage();

## Feed (Real-time Data) ##
#### .clearFeed() ####
Clears the current chart and starts the feed anew.

Values
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).clearFeed();

#### .getInterval() ####
Returns the current interval value set on the feed.

Values
Type
Details

Parameter

Return
Number
Seconds (1,2,..) or Miliseconds (100,200,…)

var myInterval = $(“#myChart”).getInterval();

#### .setInterval( number ) ####
Sets the feed update interval on a feed graph.

Values
Type
Details

Parameter
Number
Seconds (1,2,…) or Miliseconds (100,200,…)

Return
jQuery
jQuery Object

$(“#myChart”).setInterval(500);// Sets the feed update interval to 500ms (1/2 sec)

#### .startFeed() ####
Starts the data feed of the chart.

Values
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).startFeed();

#### .stopFeed() ####
Stops the data feed of the chart.

Values
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).stopFeed();

## Graph Information ##
#### .getChartType( object ) ####
Returns the chart’s type. If a **graphid** is passed, it will return the chart type for the specified chart. If the chart is has multiple charts inside it (i.e. a graphset) and no object is passed specifying which graphid to get, the method returns the chart type of the first (index 0) chart in the graph set.

Values
Type
Details

Parameter
Object (OPTIONAL)
Graph Object

Return
String
The chart type in lowercase (“line”, “pie”, “area”,…)

var myType = $(“#myChart”).getChartType();// myType = the type of the chart at #$(“#myChart”) var indexOneType = $(“#myChart”).getChartType({    “graphid”: 1});// indexOneType = the type of the chart at index 1 of #$(“#myChart”)

#### .getData() ####
Returns the entire JSON for the chart. All of it. Every single nugget of info.

Values
Type
Details

Parameter

Return
Object
Chart Data Object

#### .getEditMode() ####
Returns ‘true’ if the user is in edit more for the chart or ‘false’ if not.

Values
Type
Details

Parameter

Return
Boolean
true if in edit more, false if not

if ( $(“#myChart”).getEditMode() ) {    alert(“I am editing my chart”)} // If we were in edit more on the chart, the alert would fire.

#### .getGraphLength() ####
Returns the number of graph objects in the chart.

Values
Type
Details

Parameter

Return
Number
1,2,…

var numberOfGraphs = $(“#myChart”).getGraphLength(); // numberOfGraphs = the number of graph objects in the chart

#### .getNodeLength( object ) ####
Returns the number of nodes in a plot specified by **plotindex**. If no object is passed, the function returns the number of nodes in the 0 index plot.

Values
Type
Details

Parameter
Object (OPTIONAL)
Plot Object

Return
Number
1,2,…

var numberOfNodes = $(“#myChart”).getNodeLength(); // numberOfNodes = the number of nodes in the 0 index plot var nodesInPlot = $(“#myChart”).getNodeLength({    “plotindex”: 1}); // nodesInPlot = the number of nodes in the plot at index 1

#### .getNodeValue( object ) ####
Returns the value of the node specified by **plotindex** and **nodeindex**.

Value
Type
Details

Parameter
Object
Node Object

Return
Number
1,2,…

var myValue = $(“#myChart”).getNodeValue({    “plotindex”: 1,    “nodeindex”: 5});

#### .getObjectInfo( object ) ####
Returns various attributes for specific chart elements (graph, plotarea, scale, plot, node). Depending on the object passed, 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“`

Value
Type
Details

Parameter
Object
Info Object

Return
Object
Dependent on targeted object

$(“#myChart”).getObjectInfo({    “object”: “graph”}); // This would return all the object info available for the graph object.

#### .getPlotLength( object ) ####
Returns the number of plots in a given graph. If **graphid*** is specified, the number of plots for that graph are returned.

Value
Type
Details

Parameter
Object (optional)
Graph ID Object

Return
Number
1,2,…

var myPlotLength = $(“#myChart”).getPlotLength(); // myPlotLength would then equal the number of plots in $(“#myChart”)

#### .getPlotValues( object ) ####
Returns the value of the plot specified by **plotindex**.

Value
Type
Details

Parameter
Object
Plot Object

Return
Array
ex: [12,23,45]

var myPlotValues = $(“#myChart”).getPlotValues({    “plotindex”: 0}); // myPlotValues = the array of values for the plot at index 0.

#### .getRender() ####
Returns the render mode for the chart.

Value
Type
Details

Parameter

Return
String
“svg”, “canvas”, “vml”

var myRenderMode = $(“#myChart”).getRender(); // myRenderMode = the render more of $(“#myChart”)

#### .getRules( object ) ####
Returns an array containing the ids of the existing rules in the chart, specified by **plotindex**.

Value
Type
Details

Parameter
Object
Plot Object

Return
Array
[“rule1”, “rule2”]

var myRules = $(“#myChart”).getRules({    “plotindex”: 0}); myRules = the rules for the plot at index 0.

#### .getVersion() ####
Returns the version of the library you’re currently running. This is usefulf for debugging and good information to provide if you need to contacting support.

Value
Type
Details

Parameter

Return
String
ex: “0.141015pre”

var myVersion = $(“#myChart”).getVersion(); // myVersion = the version of the library you’re currently running.

#### .getXYInfo( object ) ####
Returns various scale and node related information based on x and y positions in the chart. The returned data is an array of object holding information relative to key scales, value scales, and node proximity.

Value
Type
Details

Parameter
Object
XY Coords.

Return
Array
[Object1, Object2, …]

var myXYInfo = $(“#myChart”).getXYInfo({    x: 100,    y: 200}); // myXYInfo = an array of information relative to the XY coordinates.

## Graph Manipulation ##
#### .addScaleValue( object ) ####
Adds a new scale value on the chart.

Value
Type
Details

Parameter
Object
Scale Object

Return
jQuery
jQuery Object

$(“#myChart”).addScaleValue({    “scale”: “scale-x”,    “nodeindex”: 4,    “value”: 23});

#### .destroy() ####
Destroys the chart, removing the associated DOM nodes and events. This is the recommended way to remove a chart from a page.

Value
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).destroy(); // ZingChart jQuery Wrapper uses ‘destroy’. It’s super effective!

#### .loadNewData( string ) ####
Loads a new JSON packet from a URL.

Value
Type
Details

Parameter
String
‘newjson.php’, ‘somedata.php’, etc.

Return
jQuery
jQuery Object

$(“#myChart”).loadNewData(“awholenewdata.php”);

#### .modify( object ) ####
Modifies any part of the current graph that you specify in the passed object.

Value
Type
Details

Parameter
Object
Modify Data Object

Return
jQuery
jQuery Object

$(“#myChart”).modify({    “data”: {        “title”: {            “text”: “Supermodified”        },        “subtitle”: {            “text”: “by Amon Tobin”        }    }}); // The title of $(“#myChart”) is now “Supermodified” and the subtitle is now “by Amon Tobin”

#### .reloadChart( object ) ####
If an object is passed through specifying the **graphid** of a graph, only that graph will be reloaded. If no object is passed through, the entire chart is reloaded.

Value
Type
Details

Parameter
Object (optional)
Graphset Object

Return
jQuery
jQuery Object

Reloading the entire chart.
$(“#myChart”).reloadChart();
Reloading a single graph of the chart.
$(“#myChart”).reload({    “graphid”: 0});

#### .removeScaleValue( object ) ####
Removes a value from the scale specified by the **scale** and the **nodeindex**.

Value
Type
Details

Parameter
Object
Scale Object

Return
jQuery
jQuery Object

$(“#myChart”).removeScaleValue({    “scale”: “scale-x”,    “nodeindex”: 4}); // The scale value at index 4 on the x-axis has now been removed.

#### .resizeChart( object ) ####
Resizes the chart according to new dimensions set by the **width** and **height**. For pixel-based widths and heights, you can just use a number (i.e. 600 instead of “600px”). For percentages, you’ll need to use a string (i.e. “100%”).

Value
Type
Details

Parameter
Object
Size Object

Return
jQuery
jQuery Object

$(“#myChart”).resize({    “width”: 600,    “height”: 400}); // Wha-Bam! Your chart is now 600px wide and 400px tall. 

#### .setData( object ) ####
Takes a full JSON packet to replace the current one. Like the .zingchart() method, you can pass the object through directly or by reference.

Value
Type
Details

Parameter
Object
Data Object

Return
jQuery
jQuery Object

$(“#myChart”).setData({    “data”: {        “type”: “bar”,        “title”: {            “text”: “A whole new chart”        },        “subtitle”: {            “text”: “A new fantastic point of view”        },        “series”: [            {                “values”: [1,2,3,4,5,6,7]            }        ]    }});

#### .update() ####
Flushes and applies all queued data manipulation changes set via API calls.

Value
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).update();

## History ##
#### .goBack() ####
Goes to the previous page in the chart history. This is very useful for navigating drilldown charts.

Value
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).goBack();

#### .goForward() ####
Goes forward one page in the chart history. This is very useful for navigating drilldown charts.

Value
Type
Details

Parameter

Return
jQuery
jQuery Object

$(“#myChart”).goForward();

## Interactive ##
#### .addNodeIA( object ) ####
Turns on the ability to add a node to the selected plot through clicking on the graph. An object argument need only be passed if you wish to 1) specify a specific graph in the graph set for which you wish to turn on interactive node adding or 2) in the case of a bubble graph which you pass through the object with “size”: number where number is the size of the added node(s).

Value
Type
Details

Parameter
Object (optional)
Added Node Object

Return
jQuery
jQuery Object

For a non-bubble graph
$(“#myChart”).addNodeIA();
For a bubble graph
$(“#myChart”).addNodeIA({    “size”: 10});

#### .enterEditMode( object ) ####
Turns on interactive mode, allowing the selection of a node or plot by clicking on it. The object need only be passed through if you wish you specify a graph in the graphset for which you wish to turn on edit mode.

Value
Type
Details

Parameter
Object (optional)
Graph ID

Return
jQuery
jQuery Object

$(“#myChart”).enterEditMode();

#### .exitEditMode( object ) ####
Deselects the previously selected plot or node when interactive mode is on and exits interactive mode. The object need only be passed through if you wish to specify a graph in the graphset for which you wish to turn off edit mode.

Value
Type
Details

Parameter
Object (optional)
Graph ID

Return
jQuery
jQuery Object

$(“#myChart”).exitEditMode();

#### .removeNodeIA( object ) ####
Removes a node selected in interactive mode. The object need only be passed through if you wish to specify a graph in the graphset for which you wish to remove a selected node.

Value
Type
Details

Parameter
Object (optional)
Graph ID

Return
jQuery
jQuery Object

$(“#myChart”).removeNodeIA();

#### .removePlotIA( object ) ####
Removes a plot selected in interactive mode. The object need only be passed through if you wish to specify a graph in the graphset for which you wish to remove a selected plot.

Value
Type
Details

Parameter
Object (optional)
Graph ID

Return
jQuery
jQuery Object

$(“#myChart”).removePlotIA();

## Notes ##
Requires the zingchart-html5-api-annotations-min.js module

.addNote( object )
Adds a note to a chart. The id of the note allows it to be updated or removed later.

Value
Type
Details

Parameter
Object
Note Object

Return
jQuery
jQuery Object

$(“#myChart”).addNote({    “id”: “note1”,    “type”: “node”,    “text”: “I am a note. Hear me roar.”,    “plotindex”: 0,    “nodeindex”: 3,    “style”: {        “background-color”: “#F90”    }});

#### .removeNote( string OR array) ####
Removes a note, specified by **id** from a chart. If you wish to remove a single note, pass just the **id** of that note as a string. If you wish to remove multiple notes, pass an array of the **ids** of the notes you wish to remove.

Value
Type
Details

Parameter
String OR Array
Note Name or Note Array

Return
jQuery
jQuery Object

Removing a single note
$(“#myChart”).removeNote(“note1”);
Removing multiple notes
$(“#myChart”).removeNote([“note1″,”note2″,”note3”]);

#### .updateNote( object ) ####
Updates an existing note specified by the **id** of the passed note object. The note’s position can be moved, the type can be changed, the style can be modified, and much more.

Value
Type
Details

Parameter
Object
Node Object

Return
jQuery
jQuery Object

$(“#myChart”).updateNote({    “id”: “note1”,    “style”: {        “border-color”: “#F7A93E”    },    “type”: “node”,    “text”: “I have been updated.”});

## Objects ##
#### .addObject( object ) ####
Adds one or more objects (labels or shapes) on the chart. Single objects are passed through within the **data** object. Multiple objects are passed through as an array of objects within the **data** object.

Value
Type
Details

Parameter
Object
Shape/Label Object

Return
jQuery
jQuery Object

Adding a single object
$(“#myChart”).addObject({    “type”: “label”,    “data”: {        “id”: “label1”,        “text”: “Made in San Diego”,        “x”: 200,        “y”:  100    }});
Adding multiple objects
$(“#myChart”).addObject({    “type”: “shape”,    “data”:[        {            “id”: “shape1”,            “x”: 100,            “y”: 200,            “type”: “circle”,            “size”: 20,            “label”: {                “text”: “I AM A CIRCLE!”            }        },        {            “id”: “shape2”,            “x”: 200,            “y”: 300,            “type”: “star5”,            “size”: 15,            “label”: {                “text”: “I AM A STAR!”            }        }    ]})

#### .removeObject( object ) ####
Removes one or more objects (labels or shapes) from the chart.
Adds one or more objects (labels or shapes) on the chart. Single objects are passed through with to the **id** attribute. Multiple objects are passed through as an array of objects to the **id** attribute.

Value
Type
Details

Parameter
Object
Shape/Label Object

Return
jQuery
jQuery Object

Removing a single object
$(“#myChart”).removeObject({    “type”: “label”,    “id”: “label1”});
Removing multiple objects
$(“#myChart”).removeObject({    “type”: “shape”,    “id”: [“shape1″,”shape2”]});

#### .repaintObjects( object ) ####
Repaints the entire object collection that was called with **update** set to **false** in the options. It’s useful for deferring object changes if you want all the changes to appear at once.

Value
Type
Details

Parameter
Object (optional)
GraphID Object

Return
jQuery
jQuery Object

$(“#myChart”).repaintObjects();

#### .updateObject( object ) ####
Updates one or more objects (labels or shapes) of the chart. Single objects are passed through within the **data** object. Multiple objects are passed through as an array of objects within the **data** object.

Value
Type
Details

Parameter
Object
Shape/Label Object

Return
jQuery
jQuery Object

Updating a single object
$(“#myChart”).updateObject({    “type”: “label”,    “data”: {        “id”: “label1”,        “background-color”: “pink”    }});
Updating multiple objects
$(“#myChart”).updateObject({    “type”: “shapes”,    “data”: [        {            “id”: “shape1”,            “type”: “square”,            “label”: {                “text”: “I AM A SQUARE!”            }        },        {            “id”: “shape2”,            “type”: “square”,            “label”: {                “text”: “¡SOY UN CUADRADO!”            }        }    ]});

## Labels ##
#### .addLabel( object ) ####
Adds a single label to the chart. This is just a shortcut from addObject.

Value
Type
Details

Parameter
Object
Label Object

Return
jQuery
jQuery Object

$(“#myChart”).addLabel({    “id”: “label1”,    “text”:”Donde esta la biblioteca?”,    “font-size”:”20px”,    “color”:”white”,    “background-color”:”pink”,    “x”:20,    “y”:20});

## Rules ##
Requires the zingchart-html5-api-rules-min.js module

.addRule( object )
Adds a rule to a chart, applying the effect to any node that meets the conditions. The rules make use of the various tokens that ZingChart has available. Visit here to see the full range of available tokens (be warned: there are lots).

Value
Type
Details

Parameter
Object
Rule Object

Return
jQuery
jQuery Object

$(“#myChart”).addRule({    “id”: “rule1”,    “plotindex”: 0,    “rule”: “%node-value < 50",    "style": {        "background-color": "#FF0"    }}); // Now, any nodes with a value below 50 will have a background color of #FF0. Pretty simple! #### .removeRule( object ) #### Removes either a single rule or a series of rules from a chart. Value Type Details Parameter Object Rule Object Return jQuery jQuery Object Removing a single rule. $("#myChart").removeRule({    "id": "rule1"}); // Poof. Rule1 is gone. Removing multiple rules. $("#myChart").removeRule({    "id": ["rule1","rule2",...]}); #### .updateRule( object ) #### Update an existing rule, specified by the **id** and the **plotindex** if there are multiple plots. Value Type Details Parameter Object Rule Object Return jQuery jQuery Object $("#myChart").updateRule({    "id": "rule1",    "plotindex": 0,    "style": {        "background-color": "#F00 #00F"    }}); // rule1 on plotindex 0 now has a background gradient from red to blue ## Selection ## #### .clearSelection( object ) #### Clears the current node(s) selection. See the [plot series item](http://www.zingchart.com/docs/json-attributes-syntax/graph-objects/plot-series-item/) for more informatino on working with selections. Value Type Details Parameter Object (optional) GraphID Object Return jQuery jQuery Object $("#myChart").clearSelection(); // Any nodes specified by selection are now deselected. #### .deselect( object ) #### Deselects a combination of nodes in the chart specified by **plotindex** and **nodeindex**. Both the **nodeindex** and **plotindex** can be specified individually (0), as a range ("0-3"), or as a group ([0,2,6]). Value Type Details Parameter Object Select Object Return jQuery jQuery Object Deselecting from a single plot. $("#myChart").deselect({    "plotindex":0,    "nodeindex":"1-3"}); // Nodes at index 1-3 in plot 0 have been deselected. Deselecting from multiple plots. $("#myChart").deselect([    {        "plotindex":0,        "nodeindex":[0,2]    },    {        "plotindex":1,        "nodeindex":1    }]); // Nodes at index 0 and 2 in plot 0 and the node at index 1 in plot 1 have been deselected. #### .getSelection( object ) #### Returns the current node(s) selected. Value Type Details Parameter Object (optional) GraphID Object Return jQuery jQuery Object mySelection = $("#myChart").getSelection(); #### .select( object ) #### Sets a combination of nodes in the chart if selected. If **toggle** is true, then the nodes already selected will be deselected. Both the **nodeindex** and **plotindex** can be specified individually aa number (0), as a range in a string ("0-3"), or as a group in an array ([0,2,6]). Value Type Details Parameter Object Select Object Return jQuery jQuery Object $("#myChart").select({    [        {            "plotindex":0,            "nodeindex":[0,2]        },        {            "plotindex":1,            "nodeindex":3        }    ]}) #### .setSelection( object ) #### Another method setting node selection of the chart. Selection is passed as an array of arrays where each array corresponds to a plotindex of the chart and each number in the array corresponds to a nodeindex in that plot. Value Type Details Parameter Object Select Object Return jQuery jQuery Object $("#myChart").setSelection({    "selection": [        [1,2],        [0,3]    ]}); // The nodes at index 1 and 2 of plot index 0 are now selected as are the nodes at 0 and 3 of plot index 1. ## Toggle ## #### .disable( string) #### Disable makes the chart inactive for user interactions. This is useful in the case of time-consuming operations. An optional string can be passed through that will be displayed as a message on top of the disabled chart. Value Type Details Parameter String (optional) Disable Message Return jQuery jQuery Object $("#myCha GitHub Repo