├── .gitignore~
├── LICENSE
├── README.md
├── bower.json
├── docs
├── ajax.gif
├── chartManipulation.gif
├── chartToDom.gif
├── domToChart.gif
├── index.html
├── style.css
├── table-convert.html
└── zingify-demo.png
├── package.json
├── zingchart.jquery.js
├── zingchart.jquery.min.js
├── zingchart.min.js
└── zingify
├── zingify.jquery.js
└── zingify.jquery.min.js
/.gitignore~:
--------------------------------------------------------------------------------
1 | package.json
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 ZingChart.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ZingChart jQuery #
2 | #### Less code. More win. ####
3 |
4 | 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.
5 |
6 | Intro
7 | -----
8 | Before we get started with this wrapper, it'd be a good idea to familiarize yourself with the [ZingChart library](http://www.zingchart.com/). There's even a [tutorial](http://www.zingchart.com/docs/tutorials/first-chart/) for creating your first chart with ZingChart. It should get you up to speed on how this library works.
9 |
10 | 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](http://www.zingchart.com/docs/).
11 |
12 | **Tutorials**
13 | + [Your First Chart](http://www.zingchart.com/docs/tutorials/first-chart/)
14 | + [Basic Scale Configuration](http://www.zingchart.com/docs/tutorials/configuring-scales/)
15 | + [Improving Data Indicators](http://www.zingchart.com/docs/tutorials/improving-data-indicators/)
16 | + [Adding Style](http://www.zingchart.com/docs/tutorials/adding-style/)
17 | + [Calling Attention](http://www.zingchart.com/docs/tutorials/calling-attention/)
18 | + [Customizing the Context-Menu](http://www.zingchart.com/docs/tutorials/context-menu/)
19 | + [Using Data From a Database](http://www.zingchart.com/docs/tutorials/database-data/)
20 |
21 | Basics
22 | ------
23 | Step One is to make sure you have [jQuery loaded](http://jquery.com/download/). This wrapper won't work without it.
24 |
25 | Step Two is to have the ZingChart library loaded. We suggest you use our [new, fandangled CDN](http://cdn.zingchart.com/) to keep up to date with the latest build.
26 |
27 | 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](http://cdn.zingchart.com/).
28 |
29 | Here's what should be in the `````` once you're done.
30 |
31 | ```html
32 |
33 |
34 |
35 | ```
36 |
37 | All good? Time to make some sweet charts.
38 |
39 | 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":
40 |
41 | ```javascript
42 | $(document).ready(function() {
43 | $("#myChart").zingchart({
44 | "data":{
45 | "type": "line",
46 | "series": [
47 | {
48 | "values": [1,2,5,3,9,4]
49 | }
50 | ]
51 | }
52 | });
53 | })
54 | ```
55 | > 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.
56 |
57 | All of the methods which take an object as a parameter can have it passed through directly or by reference. Both are equivalent.
58 |
59 | **Directly**
60 | ```javascript
61 | $("#myChart").zingchart({
62 | "data": {
63 | "type": "bar",
64 | "series": [
65 | {
66 | "values": [3,7,9,2]
67 | }
68 | ]
69 | }
70 | });
71 | ```
72 | **Reference**
73 | ```javascript
74 | var myData = {
75 | "type": "bar",
76 | "series": [
77 | {
78 | "values": [3,7,9,2]
79 | }
80 | ]
81 | };
82 |
83 | $("#myChart").zingchart({data: myData});
84 | ```
85 | 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.
86 |
87 | Chaining
88 | --------
89 | 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:
90 |
91 | ```javascript
92 | $("#myChart").set3dView({"y-angle":10}).resizeChart({"width":600,"height":400});
93 | ```
94 | $("#myChart") is now set to a 3D view and resized in just one line of code!
95 | Pat yourself on the back for saving time by using chaining. You're a rockstar!
96 |
97 |
98 | **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.
99 |
100 | Examples
101 | --------
102 |
103 | 1. [**Chart Manipulation**: Using Methods and Events Together](http://jsfiddle.net/zingchart/2duo5ww0/)
104 |
105 | 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](http://jsfiddle.net/zingchart/2duo5ww0/)
106 |
107 | [](http://jsfiddle.net/zingchart/2duo5ww0/)
108 |
109 | ---
110 |
111 | 2. [**Chart to DOM**: Manipulating the DOM with Events](http://jsfiddle.net/zingchart/f29jn25b/)
112 |
113 | Learn how to manipulate the DOM through the use of ZingChart jQuery events. [Edit in JSFiddle](http://jsfiddle.net/zingchart/f29jn25b/)
114 |
115 | [](http://jsfiddle.net/zingchart/f29jn25b/)
116 |
117 | ---
118 |
119 | 3. [**DOM to Chart**: Manipulating the Chart with Methods](http://jsfiddle.net/zingchart/5ja8guxf/)
120 |
121 | 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](http://jsfiddle.net/zingchart/5ja8guxf/)
122 |
123 | [](http://jsfiddle.net/zingchart/5ja8guxf/)
124 |
125 | ---
126 |
127 | 4. [**AJAX Data**: Using Asynchronous Data with your Chart](http://jsfiddle.net/zingchart/z3n3qobm/)
128 |
129 | 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](http://jsfiddle.net/zingchart/z3n3qobm/)
130 |
131 | [](http://jsfiddle.net/zingchart/z3n3qobm/)
132 |
133 | ---
134 |
135 | 5. [**Table to Chart**: Using the Zingify Tool](http://jsfiddle.net/zingchart/n1w18kp8/)
136 |
137 | Take your well-formed HTML tables and turn them into snazzy charts with ease. [Edit in JSFiddle](http://jsfiddle.net/zingchart/n1w18kp8/)
138 |
139 | [](http://jsfiddle.net/zingchart/n1w18kp8/)
140 |
141 | ---
142 |
143 | Questions?
144 | ----------
145 |
146 | Check out out extensive documentation below or feel free to email us at [support@zingchart.com](mailto:support@zingchart.com) if you have any questions.
147 |
148 |
149 | # Methods[](#methods) #
150 | ## Rendering ##
151 |
152 | #### .zingchart( object ) ####
153 | Creates a new ZingChart object
154 |
155 | Values | Type | Details
156 | --- | --- | ---
157 | Parameter | Object | [ZingChart Object](http://www.zingchart.com/docs/reference/zingchart-object/#zingchart__render)
158 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
159 |
160 | Rendering a chart
161 | ```javascript
162 | $("#myChart").zingchart({
163 | "type": "line",
164 | "title": {
165 | "text": "Hello, ZingChart World!"
166 | },
167 | "series": [
168 | {
169 | "values": [5, 10, 15, 5, 10, 5]
170 | }
171 | ]
172 | });
173 | ```
174 |
175 |
176 | ## Data Manipulation ##
177 | #### .addNode( object ) ####
178 | Adds a node to an existing plot
179 |
180 | Values | Type | Details
181 | --- | --- | ---
182 | Parameter | Object | [Node Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__addnode)
183 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
184 |
185 | ```javascript
186 | $("#myChart").addNode({
187 | "plotindex": 1,
188 | "nodeindex": 2,
189 | "value": 12
190 | });
191 | ```
192 |
193 | #### .addPlot( object ) ####
194 | Adds a new plot to an exising chart
195 |
196 | Values | Type | Details
197 | --- | --- | ---
198 | Parameter | Object | [Plot Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__addplot)
199 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
200 |
201 | ```javascript
202 | $("#myChart").addPlot({
203 | "plotindex": 0,
204 | "data": {
205 | "values": [10,20,15]
206 | }
207 | });
208 | ```
209 |
210 | #### .appendSeriesData( object ) ####
211 | 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.
212 |
213 | Values | Type | Details
214 | --- | --- | ---
215 | Parameter | Object | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__appendseriesdata)
216 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
217 |
218 | ```javascript
219 | $("#myChart").appendSeriesData({
220 | "plotindex": 0,
221 | data: {
222 | "lineColor": "red"
223 | }
224 | });
225 | ```
226 |
227 | #### .appendSeriesValues( object ) ####
228 | Appends data to the end of a plot. Can be used on a single plot or the whole series.
229 |
230 | Values | Type | Details
231 | --- | --- | ---
232 | Parameter | Object | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__appendseriesdata)
233 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
234 |
235 | ```javascript
236 | $("#myChart").appendSeriesData({
237 | "plotindex": 1,
238 | "values": [19,28,13,42]
239 | });
240 | ```
241 |
242 | #### .getSeriesData( object ) ####
243 | 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.
244 |
245 | Values | Type | Details
246 | --- | --- | ---
247 | Parameter | Object (OPTIONAL) | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getseriesdata)
248 | Return | Object | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getseriesdata)
249 |
250 | ```javascript
251 | var myData = $("#myChart").getSeriesData({
252 | "plotindex": 1
253 | });
254 |
255 | // myData = the series data for plot[1] of the chart
256 |
257 | var allData = $("#myChart").getSeriesData();
258 |
259 | // allData = the series data for all plots of the chart
260 | ```
261 |
262 | #### .getSeriesValues( object ) ####
263 | 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.
264 |
265 | Values | Type | Details
266 | --- | --- | ---
267 | Parameter | Object (OPTIONAL) | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getseriesvalues)
268 | Return | Object | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getseriesvalues)
269 |
270 | ```javascript
271 | var myValues = $("#myChart").getSeriesValues({
272 | "plotindex": 0
273 | });
274 |
275 | // myValues = the series values for plot[0] of the chart
276 |
277 | var allValues = $("#myChart").getSeriesValues();
278 |
279 | // allValues = the series values for all plots of the chart
280 | ```
281 |
282 | #### .modifyPlot( object ) ####
283 | Modifies an existing plot on the chart specified by **plotindex**.
284 |
285 | Values | Type | Details
286 | --- | --- | ---
287 | Parameter | Object | [Plot Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__modifyplot)
288 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
289 |
290 | ```javascript
291 | $("#myChart").modifyPlot({
292 | "plotindex": 0,
293 | "data": {
294 | "lineWidth": 2,
295 | "lineColor": "yellow",
296 | }
297 | });
298 | ```
299 |
300 | #### .removeNode( object ) ####
301 | Removes a node specified by **plotindex** and **nodeindex**.
302 |
303 | Values | Type | Details
304 | --- | --- | ---
305 | Parameter | Object | [Node Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removenode)
306 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
307 |
308 | ```javascript
309 | $("#myChart").removeNode({
310 | "plotindex": 1,
311 | "nodeindex": 2
312 | });
313 | ```
314 |
315 | #### .removePlot( object ) ####
316 | Removes a plot specified by **plotindex**.
317 |
318 | Values | Type | Details
319 | --- | --- | ---
320 | Parameter | Object | [Plot Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removeplot)
321 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
322 |
323 | ```javascript
324 | $("#myChart").removePlot({
325 | "plotindex": 0
326 | });
327 | ```
328 |
329 | #### .set3dView( object ) ####
330 | Sets the new 3D parameters for the view. This overrides the settings from the **3d-aspect** attribute of the chart.
331 |
332 | Values | Type | Details
333 | --- | --- | ---
334 | Parameter | Object | [3D View Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__set3dview)
335 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
336 |
337 | ```javascript
338 | $("#myChart").set3dView({
339 | "y-angle": 10,
340 | "depth": 60
341 | });
342 | ```
343 |
344 | #### .setNodeValue( object ) ####
345 | Changes the value of a single node specified via **plotindex** and **nodeindex** to the new **value**.
346 |
347 | Values | Type | Details
348 | --- | --- | ---
349 | Parameter | Object | [Node Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__setnodevalue)
350 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
351 |
352 | ```javascript
353 | $("#myChart").setNodeValue({
354 | "plotindex": 1,
355 | "nodeindex": 2,
356 | "value": 22
357 | });
358 | ```
359 |
360 | #### .setSeriesData( object ) ####
361 | Replaces the series data. It can be used on one plot or the whole series depending on if **plotindex** is set.
362 |
363 | Values | Type | Details
364 | --- | --- | ---
365 | Parameter | Object | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__setseriesdata)
366 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
367 |
368 | Setting the series data for a single plot:
369 | ```javascript
370 | $("#myChart").setSeriesData({
371 | "plotindex": 1,
372 | "data" : {
373 | "values": [12, 33, 20],
374 | "lineColor": "red"
375 | }
376 | });
377 | ```
378 |
379 | Setting the series data for all plots:
380 | ```javascript
381 | $("#myChart").setSeriesData({
382 | "data": [
383 | {
384 | "values": [10,15,20],
385 | "lineColor": "blue"
386 | },
387 | {
388 | "values": [12,17,10],
389 | "lineColor": "pink"
390 | }
391 | ]
392 | });
393 | ```
394 |
395 | #### .setSeriesValues( object ) ####
396 | Replaces the series values. It can be used on one plot or the whole series depending on if **plotindex** is set.
397 |
398 | Values | Type | Details
399 | --- | --- | ---
400 | Parameter | Object | [Series Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__setseriesvalues)
401 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
402 |
403 | Setting the series values for a single plot:
404 | ```javascript
405 | $("#myChart").setSeriesValues({
406 | "plotindex": 1,
407 | "values": [99,98,97]
408 | });
409 | ```
410 |
411 | Setting the series values for all plots:
412 | ```javascript
413 | $("#myChart").setSeriesValues({
414 | "values": [
415 | [19,28,13,42],
416 | [37,11,27,25]
417 | ]
418 | });
419 | ```
420 |
421 | ## Export ###
422 | #### .exportData() ####
423 | 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).
424 |
425 | Values | Type | Details
426 | --- | --- | ---
427 | Parameter | |
428 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
429 |
430 | ```javascript
431 | $("#myChart").exportData();
432 | //Assuming the exportdataurl is set in the render options, the current data for the chart will be exported to that url.
433 | ```
434 |
435 |
436 | #### .getImageData( string ) ####
437 | Returns a Base64 encoded image string of the current chart.
438 |
439 | Values | Type | Details
440 | --- | --- | ---
441 | Parameter | String | "png", "jpg", "bmp" (only if rendering in Flash)
442 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
443 |
444 | ```javascript
445 | $("#myChart").getImageData("png");
446 |
447 | // or...
448 |
449 | $("#myChart").getImageData("jpg");
450 |
451 | // or (if you're rendering via Flash)...
452 |
453 | $("#myChart").getImageData("bmp");
454 | ```
455 |
456 |
457 | #### .print() ####
458 | Creates a printable version of the chart and attempts to print it.
459 |
460 | Values | Type | Details
461 | --- | --- | ---
462 | Parameter | |
463 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
464 |
465 | ```javascript
466 | // Results in the printer dialog opening on the page
467 | $("#myChart").print();
468 | ```
469 |
470 |
471 | #### .saveAsImage() ####
472 | 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).
473 |
474 | Values | Type | Details
475 | --- | --- | ---
476 | Parameter | |
477 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
478 |
479 | ```javascript
480 | // Assuming the exportimageurl is set in the render options, an image of the current chart will be exported to that url.
481 | $("#myChart").saveAsImage();
482 | ```
483 |
484 |
485 | ## Feed (Real-time Data) ##
486 | #### .clearFeed() ####
487 | Clears the current chart and starts the feed anew.
488 |
489 | Values | Type | Details
490 | --- | --- | ---
491 | Parameter | |
492 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
493 |
494 | ```javascript
495 | $("#myChart").clearFeed();
496 | ```
497 |
498 |
499 | #### .getInterval() ####
500 | Returns the current interval value set on the feed.
501 |
502 | Values | Type | Details
503 | --- | --- | ---
504 | Parameter | |
505 | Return | Number | Seconds (1,2,..) or Miliseconds (100,200,...)
506 |
507 | ```javascript
508 | var myInterval = $("#myChart").getInterval();
509 | ```
510 |
511 |
512 | #### .setInterval( number ) ####
513 | Sets the feed update interval on a feed graph.
514 |
515 | Values | Type | Details
516 | --- | --- | ---
517 | Parameter | Number | Seconds (1,2,...) or Miliseconds (100,200,...)
518 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
519 |
520 | ```javascript
521 | $("#myChart").setInterval(500);
522 | // Sets the feed update interval to 500ms (1/2 sec)
523 | ```
524 |
525 |
526 | #### .startFeed() ####
527 | Starts the data feed of the chart.
528 |
529 | Values | Type | Details
530 | --- | --- | ---
531 | Parameter | |
532 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
533 |
534 | ```javascript
535 | $("#myChart").startFeed();
536 | ```
537 |
538 |
539 | #### .stopFeed() ####
540 | Stops the data feed of the chart.
541 |
542 | Values | Type | Details
543 | --- | --- | ---
544 | Parameter | |
545 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
546 |
547 | ```javascript
548 | $("#myChart").stopFeed();
549 | ```
550 |
551 |
552 | ## Graph Information ##
553 | #### .getChartType( object ) ####
554 | 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.
555 |
556 | Values | Type | Details
557 | --- | --- | ---
558 | Parameter | Object (OPTIONAL) | [Graph Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getcharttype)
559 | Return | String | The [chart type](http://www.zingchart.com/docs/chart-types/) in lowercase ("line", "pie", "area",...)
560 |
561 | ```javascript
562 | var myType = $("#myChart").getChartType();
563 | // myType = the type of the chart at #$("#myChart")
564 |
565 | var indexOneType = $("#myChart").getChartType({
566 | "graphid": 1
567 | });
568 | // indexOneType = the type of the chart at index 1 of #$("#myChart")
569 | ```
570 |
571 |
572 | #### .getData() ####
573 | Returns the entire JSON for the chart. All of it. Every single nugget of info.
574 |
575 | Values | Type | Details
576 | --- | --- | ---
577 | Parameter | |
578 | Return | Object | [Chart Data Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getdata)
579 |
580 |
581 | #### .getEditMode() ####
582 | Returns 'true' if the user is in edit more for the chart or 'false' if not.
583 |
584 | Values | Type | Details
585 | --- | --- | ---
586 | Parameter | |
587 | Return | Boolean | true if in edit more, false if not
588 |
589 | ```javascript
590 | if ( $("#myChart").getEditMode() ) {
591 | alert("I am editing my chart")
592 | }
593 |
594 | // If we were in edit more on the chart, the alert would fire.
595 | ```
596 |
597 |
598 | #### .getGraphLength() ####
599 | Returns the number of graph objects in the chart.
600 |
601 | Values | Type | Details
602 | --- | --- | ---
603 | Parameter | |
604 | Return | Number | 1,2,...
605 |
606 | ```javascript
607 | var numberOfGraphs = $("#myChart").getGraphLength();
608 |
609 | // numberOfGraphs = the number of graph objects in the chart
610 | ```
611 |
612 |
613 | #### .getNodeLength( object ) ####
614 | 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.
615 |
616 | Values | Type | Details
617 | --- | --- | ---
618 | Parameter | Object (OPTIONAL) | [Plot Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getnodelength)
619 | Return | Number | 1,2,...
620 |
621 | ```javascript
622 | var numberOfNodes = $("#myChart").getNodeLength();
623 |
624 | // numberOfNodes = the number of nodes in the 0 index plot
625 |
626 | var nodesInPlot = $("#myChart").getNodeLength({
627 | "plotindex": 1
628 | });
629 |
630 | // nodesInPlot = the number of nodes in the plot at index 1
631 | ```
632 |
633 |
634 | #### .getNodeValue( object ) ####
635 | Returns the value of the node specified by **plotindex** and **nodeindex**.
636 |
637 | Value | Type | Details
638 | --- | --- | ---
639 | Parameter | Object | [Node Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getnodevalue)
640 | Return | Number | 1,2,...
641 |
642 | ```javascript
643 | var myValue = $("#myChart").getNodeValue({
644 | "plotindex": 1,
645 | "nodeindex": 5
646 | });
647 | ```
648 |
649 |
650 | #### .getObjectInfo( object ) ####
651 | 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:
652 | ```x, y, width, height, lineColor, lineWidth, borderColor, borderWidth, backgroundColor1, backgroundColor2, text, values, minValue, maxValue, step, stepSize```
653 |
654 | Value | Type | Details
655 | --- | --- | ---
656 | Parameter | Object | [Info Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getobjectinfo)
657 | Return | Object | Dependent on targeted object
658 |
659 | ```javascript
660 | $("#myChart").getObjectInfo({
661 | "object": "graph"
662 | });
663 |
664 | // This would return all the object info available for the graph object.
665 | ```
666 |
667 |
668 | #### .getPlotLength( object ) ####
669 | Returns the number of plots in a given graph. If **graphid*** is specified, the number of plots for that graph are returned.
670 |
671 | Value | Type | Details
672 | --- | --- | ---
673 | Parameter | Object (optional) | [Graph ID Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getplotlength)
674 | Return | Number | 1,2,...
675 |
676 | ```javascript
677 | var myPlotLength = $("#myChart").getPlotLength();
678 |
679 | // myPlotLength would then equal the number of plots in $("#myChart")
680 | ```
681 |
682 |
683 | #### .getPlotValues( object ) ####
684 | Returns the value of the plot specified by **plotindex**.
685 |
686 | Value | Type | Details
687 | --- | --- | ---
688 | Parameter | Object | [Plot Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getplotvalues)
689 | Return | Array | ex: [12,23,45]
690 |
691 | ```javascript
692 | var myPlotValues = $("#myChart").getPlotValues({
693 | "plotindex": 0
694 | });
695 |
696 | // myPlotValues = the array of values for the plot at index 0.
697 | ```
698 |
699 |
700 | #### .getRender() ####
701 | Returns the render mode for the chart.
702 |
703 | Value | Type | Details
704 | --- | --- | ---
705 | Parameter | |
706 | Return | String | "svg", "canvas", "vml"
707 |
708 | ```javascript
709 | var myRenderMode = $("#myChart").getRender();
710 |
711 | // myRenderMode = the render more of $("#myChart")
712 | ```
713 |
714 |
715 | #### .getRules( object ) ####
716 | Returns an array containing the ids of the existing rules in the chart, specified by **plotindex**.
717 |
718 | Value | Type | Details
719 | --- | --- | ---
720 | Parameter | Object | [Plot Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getrules)
721 | Return | Array | ["rule1", "rule2"]
722 |
723 | ```javascript
724 | var myRules = $("#myChart").getRules({
725 | "plotindex": 0
726 | });
727 |
728 | myRules = the rules for the plot at index 0.
729 | ```
730 |
731 |
732 | #### .getVersion() ####
733 | 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.
734 |
735 | Value | Type | Details
736 | --- | --- | ---
737 | Parameter | |
738 | Return | String | ex: "0.141015pre"
739 |
740 | ```javascript
741 | var myVersion = $("#myChart").getVersion();
742 |
743 | // myVersion = the version of the library you're currently running.
744 | ```
745 |
746 |
747 | #### .getXYInfo( object ) ####
748 | 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.
749 |
750 | Value | Type | Details
751 | --- | --- | ---
752 | Parameter | Object | [XY Coords.](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getxyinfo)
753 | Return | Array | [Object1, Object2, ...]
754 |
755 | ```javascript
756 | var myXYInfo = $("#myChart").getXYInfo({
757 | x: 100,
758 | y: 200
759 | });
760 |
761 | // myXYInfo = an array of information relative to the XY coordinates.
762 | ```
763 |
764 |
765 | ## Graph Manipulation ##
766 | #### .addScaleValue( object ) ####
767 | Adds a new scale value on the chart.
768 |
769 | Value | Type | Details
770 | --- | --- | ---
771 | Parameter | Object | [Scale Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__addscalevalue)
772 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
773 |
774 | ```javascript
775 | $("#myChart").addScaleValue({
776 | "scale": "scale-x",
777 | "nodeindex": 4,
778 | "value": 23
779 | });
780 | ```
781 |
782 |
783 | #### .destroy() ####
784 | Destroys the chart, removing the associated DOM nodes and events. This is the recommended way to remove a chart from a page.
785 |
786 | Value | Type | Details
787 | --- | --- | ---
788 | Parameter | |
789 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
790 |
791 | ```javascript
792 | $("#myChart").destroy();
793 |
794 | // ZingChart jQuery Wrapper uses 'destroy'. It's super effective!
795 | ```
796 |
797 |
798 | #### .loadNewData( string ) ####
799 | Loads a new JSON packet from a URL.
800 |
801 | Value | Type | Details
802 | --- | --- | ---
803 | Parameter | String | 'newjson.php', 'somedata.php', etc.
804 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
805 |
806 | ```javascript
807 | $("#myChart").loadNewData("awholenewdata.php");
808 | ```
809 |
810 |
811 | #### .modify( object ) ####
812 | Modifies any part of the current graph that you specify in the passed object.
813 |
814 | Value | Type | Details
815 | --- | --- | ---
816 | Parameter | Object | [Modify Data Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__modify)
817 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
818 |
819 | ```javascript
820 | $("#myChart").modify({
821 | "data": {
822 | "title": {
823 | "text": "Supermodified"
824 | },
825 | "subtitle": {
826 | "text": "by Amon Tobin"
827 | }
828 | }
829 | });
830 |
831 | // The title of $("#myChart") is now "Supermodified" and the subtitle is now "by Amon Tobin"
832 | ```
833 |
834 |
835 | #### .reloadChart( object ) ####
836 | 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.
837 |
838 | Value | Type | Details
839 | --- | --- | ---
840 | Parameter | Object (optional) | [Graphset Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__reload)
841 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
842 |
843 | Reloading the entire chart.
844 | ```javascript
845 | $("#myChart").reloadChart();
846 | ```
847 |
848 | Reloading a single graph of the chart.
849 | ```javascript
850 | $("#myChart").reload({
851 | "graphid": 0
852 | });
853 | ```
854 |
855 |
856 | #### .removeScaleValue( object ) ####
857 | Removes a value from the scale specified by the **scale** and the **nodeindex**.
858 |
859 | Value | Type | Details
860 | --- | --- | ---
861 | Parameter | Object | [Scale Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removescalevalue)
862 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
863 |
864 | ```javascript
865 | $("#myChart").removeScaleValue({
866 | "scale": "scale-x",
867 | "nodeindex": 4
868 | });
869 |
870 | // The scale value at index 4 on the x-axis has now been removed.
871 | ```
872 |
873 |
874 | #### .resizeChart( object ) ####
875 | 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%").
876 |
877 | Value | Type | Details
878 | --- | --- | ---
879 | Parameter | Object | [Size Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__resize)
880 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
881 |
882 | ```javascript
883 | $("#myChart").resize({
884 | "width": 600,
885 | "height": 400
886 | });
887 |
888 | // Wha-Bam! Your chart is now 600px wide and 400px tall.
889 | ```
890 |
891 |
892 | #### .setData( object ) ####
893 | Takes a full JSON packet to replace the current one. Like the .zingchart() method, you can pass the object through directly or by reference.
894 |
895 | Value | Type | Details
896 | --- | --- | ---
897 | Parameter | Object | [Data Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__setdata)
898 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
899 |
900 | ```javascript
901 | $("#myChart").setData({
902 | "data": {
903 | "type": "bar",
904 | "title": {
905 | "text": "A whole new chart"
906 | },
907 | "subtitle": {
908 | "text": "A new fantastic point of view"
909 | },
910 | "series": [
911 | {
912 | "values": [1,2,3,4,5,6,7]
913 | }
914 | ]
915 | }
916 | });
917 | ```
918 |
919 |
920 | #### .update() ####
921 | Flushes and applies all queued data manipulation changes set via API calls.
922 |
923 | Value | Type | Details
924 | --- | --- | ---
925 | Parameter | |
926 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
927 |
928 | ```javascript
929 | $("#myChart").update();
930 | ```
931 |
932 |
933 | ## History ##
934 | #### .goBack() ####
935 | Goes to the previous page in the chart history. This is very useful for navigating drilldown charts.
936 |
937 | Value | Type | Details
938 | --- | --- | ---
939 | Parameter | |
940 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
941 |
942 | ```javascript
943 | $("#myChart").goBack();
944 | ```
945 |
946 |
947 | #### .goForward() ####
948 | Goes forward one page in the chart history. This is very useful for navigating drilldown charts.
949 |
950 | Value | Type | Details
951 | --- | --- | ---
952 | Parameter | |
953 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
954 |
955 | ```javascript
956 | $("#myChart").goForward();
957 | ```
958 |
959 |
960 | ## Interactive ##
961 | #### .addNodeIA( object ) ####
962 | 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).
963 |
964 | Value | Type | Details
965 | --- | --- | ---
966 | Parameter | Object (optional) | [Added Node Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__addnodeia)
967 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
968 |
969 | For a non-bubble graph
970 | ```javascript
971 | $("#myChart").addNodeIA();
972 | ```
973 |
974 | For a bubble graph
975 | ```javascript
976 | $("#myChart").addNodeIA({
977 | "size": 10
978 | });
979 | ```
980 |
981 |
982 | #### .enterEditMode( object ) ####
983 | 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.
984 |
985 | Value | Type | Details
986 | --- | --- | ---
987 | Parameter | Object (optional) | [Graph ID](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__entereditmode)
988 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
989 |
990 | ```javascript
991 | $("#myChart").enterEditMode();
992 | ```
993 |
994 |
995 | #### .exitEditMode( object ) ####
996 | 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.
997 |
998 | Value | Type | Details
999 | --- | --- | ---
1000 | Parameter | Object (optional) | [Graph ID](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__exiteditmode)
1001 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1002 |
1003 | ```javascript
1004 | $("#myChart").exitEditMode();
1005 | ```
1006 |
1007 |
1008 | #### .removeNodeIA( object ) ####
1009 | 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.
1010 |
1011 | Value | Type | Details
1012 | --- | --- | ---
1013 | Parameter | Object (optional) | [Graph ID](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removenodeia)
1014 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1015 |
1016 | ```javascript
1017 | $("#myChart").removeNodeIA();
1018 | ```
1019 |
1020 |
1021 | #### .removePlotIA( object ) ####
1022 | 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.
1023 |
1024 | Value | Type | Details
1025 | --- | --- | ---
1026 | Parameter | Object (optional) | [Graph ID](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removeplotia)
1027 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1028 |
1029 | ```javascript
1030 | $("#myChart").removePlotIA();
1031 | ```
1032 |
1033 |
1034 | ## Notes ##
1035 |
1036 | **Requires the zingchart-html5-api-annotations-min.js module**
1037 |
1038 | ***
1039 | #### .addNote( object ) ####
1040 | Adds a note to a chart. The **id** of the note allows it to be updated or removed later.
1041 |
1042 | Value | Type | Details
1043 | --- | --- | ---
1044 | Parameter | Object | [Note Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__addnote)
1045 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1046 |
1047 | ```javascript
1048 | $("#myChart").addNote({
1049 | "id": "note1",
1050 | "type": "node",
1051 | "text": "I am a note. Hear me roar.",
1052 | "plotindex": 0,
1053 | "nodeindex": 3,
1054 | "style": {
1055 | "background-color": "#F90"
1056 | }
1057 | });
1058 | ```
1059 |
1060 |
1061 | #### .removeNote( string OR array) ####
1062 | 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.
1063 |
1064 | Value | Type | Details
1065 | --- | --- | ---
1066 | Parameter | String OR Array | [Note Name or Note Array](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removenote)
1067 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1068 |
1069 | Removing a single note
1070 | ```javascript
1071 | $("#myChart").removeNote("note1");
1072 | ```
1073 |
1074 | Removing multiple notes
1075 | ```javascript
1076 | $("#myChart").removeNote(["note1","note2","note3"]);
1077 | ```
1078 |
1079 |
1080 | #### .updateNote( object ) ####
1081 | 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.
1082 |
1083 | Value | Type | Details
1084 | --- | --- | ---
1085 | Parameter | Object | [Node Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__updatenote)
1086 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1087 |
1088 | ```javascript
1089 | $("#myChart").updateNote({
1090 | "id": "note1",
1091 | "style": {
1092 | "border-color": "#F7A93E"
1093 | },
1094 | "type": "node",
1095 | "text": "I have been updated."
1096 | });
1097 | ```
1098 |
1099 |
1100 | ## Objects ##
1101 | #### .addObject( object ) ####
1102 | 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.
1103 |
1104 | Value | Type | Details
1105 | --- | --- | ---
1106 | Parameter | Object | [Shape/Label Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__addobject)
1107 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1108 |
1109 | Adding a single object
1110 | ```javascript
1111 | $("#myChart").addObject({
1112 | "type": "label",
1113 | "data": {
1114 | "id": "label1",
1115 | "text": "Made in San Diego",
1116 | "x": 200,
1117 | "y": 100
1118 | }
1119 | });
1120 | ```
1121 |
1122 | Adding multiple objects
1123 | ```javascript
1124 | $("#myChart").addObject({
1125 | "type": "shape",
1126 | "data":[
1127 | {
1128 | "id": "shape1",
1129 | "x": 100,
1130 | "y": 200,
1131 | "type": "circle",
1132 | "size": 20,
1133 | "label": {
1134 | "text": "I AM A CIRCLE!"
1135 | }
1136 | },
1137 | {
1138 | "id": "shape2",
1139 | "x": 200,
1140 | "y": 300,
1141 | "type": "star5",
1142 | "size": 15,
1143 | "label": {
1144 | "text": "I AM A STAR!"
1145 | }
1146 | }
1147 | ]
1148 | })
1149 | ```
1150 |
1151 |
1152 | #### .removeObject( object ) ####
1153 | Removes one or more objects (labels or shapes) from the chart.
1154 | 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.
1155 |
1156 | Value | Type | Details
1157 | --- | --- | ---
1158 | Parameter | Object | [Shape/Label Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removeobject)
1159 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1160 |
1161 | Removing a single object
1162 | ```javascript
1163 | $("#myChart").removeObject({
1164 | "type": "label",
1165 | "id": "label1"
1166 | });
1167 | ```
1168 |
1169 | Removing multiple objects
1170 | ```javascript
1171 | $("#myChart").removeObject({
1172 | "type": "shape",
1173 | "id": ["shape1","shape2"]
1174 | });
1175 | ```
1176 |
1177 |
1178 | #### .repaintObjects( object ) ####
1179 | 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.
1180 |
1181 | Value | Type | Details
1182 | --- | --- | ---
1183 | Parameter | Object (optional) | [GraphID Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__repaintobjects)
1184 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1185 |
1186 | ```javascript
1187 | $("#myChart").repaintObjects();
1188 | ```
1189 |
1190 |
1191 | #### .updateObject( object ) ####
1192 | 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.
1193 |
1194 | Value | Type | Details
1195 | --- | --- | ---
1196 | Parameter | Object | [Shape/Label Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__updateobject)
1197 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1198 |
1199 | Updating a single object
1200 | ```javascript
1201 | $("#myChart").updateObject({
1202 | "type": "label",
1203 | "data": {
1204 | "id": "label1",
1205 | "background-color": "pink"
1206 | }
1207 | });
1208 | ```
1209 |
1210 | Updating multiple objects
1211 | ```javascript
1212 | $("#myChart").updateObject({
1213 | "type": "shapes",
1214 | "data": [
1215 | {
1216 | "id": "shape1",
1217 | "type": "square",
1218 | "label": {
1219 | "text": "I AM A SQUARE!"
1220 | }
1221 | },
1222 | {
1223 | "id": "shape2",
1224 | "type": "square",
1225 | "label": {
1226 | "text": "¡SOY UN CUADRADO!"
1227 | }
1228 | }
1229 | ]
1230 | });
1231 | ```
1232 |
1233 |
1234 | ## Labels ##
1235 | #### .addLabel( object ) ####
1236 | Adds a single label to the chart. This is just a shortcut from addObject.
1237 |
1238 | Value | Type | Details
1239 | --- | --- | ---
1240 | Parameter | Object | [Label Object](http://www.zingchart.com/docs/json-attributes-syntax/graph-objects/labels/)
1241 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1242 |
1243 | ```javascript
1244 | $("#myChart").addLabel({
1245 | "id": "label1",
1246 | "text":"Donde esta la biblioteca?",
1247 | "font-size":"20px",
1248 | "color":"white",
1249 | "background-color":"pink",
1250 | "x":20,
1251 | "y":20
1252 | });
1253 | ```
1254 |
1255 |
1256 | ## Rules ##
1257 |
1258 | **Requires the zingchart-html5-api-rules-min.js module**
1259 |
1260 | ***
1261 | #### .addRule( object ) ####
1262 | Adds a rule to a chart, applying the effect to any node that meets the conditions. The rules make use of the [various tokens](http://www.zingchart.com/docs/features/tokens/#tokens__rules) that ZingChart has available. [Visit here](http://www.zingchart.com/docs/features/tokens/#tokens__list) to see the full range of available tokens (be warned: there are lots).
1263 |
1264 | Value | Type | Details
1265 | --- | --- | ---
1266 | Parameter | Object | [Rule Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__addrule)
1267 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1268 |
1269 | ```javascript
1270 | $("#myChart").addRule({
1271 | "id": "rule1",
1272 | "plotindex": 0,
1273 | "rule": "%node-value < 50",
1274 | "style": {
1275 | "background-color": "#FF0"
1276 | }
1277 | });
1278 |
1279 | // Now, any nodes with a value below 50 will have a background color of #FF0. Pretty simple!
1280 | ```
1281 |
1282 |
1283 | #### .removeRule( object ) ####
1284 | Removes either a single rule or a series of rules from a chart.
1285 |
1286 | Value | Type | Details
1287 | --- | --- | ---
1288 | Parameter | Object | [Rule Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__removerule)
1289 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1290 |
1291 | Removing a single rule.
1292 | ```javascript
1293 | $("#myChart").removeRule({
1294 | "id": "rule1"
1295 | });
1296 |
1297 | // Poof. Rule1 is gone.
1298 | ```
1299 |
1300 | Removing multiple rules.
1301 | ```javascript
1302 | $("#myChart").removeRule({
1303 | "id": ["rule1","rule2",...]
1304 | });
1305 | ```
1306 |
1307 |
1308 | #### .updateRule( object ) ####
1309 | Update an existing rule, specified by the **id** and the **plotindex** if there are multiple plots.
1310 |
1311 | Value | Type | Details
1312 | --- | --- | ---
1313 | Parameter | Object | [Rule Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__updaterule)
1314 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1315 |
1316 | ```javascript
1317 | $("#myChart").updateRule({
1318 | "id": "rule1",
1319 | "plotindex": 0,
1320 | "style": {
1321 | "background-color": "#F00 #00F"
1322 | }
1323 | });
1324 |
1325 | // rule1 on plotindex 0 now has a background gradient from red to blue
1326 | ```
1327 |
1328 |
1329 | ## Selection ##
1330 | #### .clearSelection( object ) ####
1331 | 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.
1332 |
1333 | Value | Type | Details
1334 | --- | --- | ---
1335 | Parameter | Object (optional) | [GraphID Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__clearselection)
1336 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1337 |
1338 | ```javascript
1339 | $("#myChart").clearSelection();
1340 |
1341 | // Any nodes specified by selection are now deselected.
1342 | ```
1343 |
1344 |
1345 | #### .deselect( object ) ####
1346 | 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]).
1347 |
1348 | Value | Type | Details
1349 | --- | --- | ---
1350 | Parameter | Object | [Select Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__deselect)
1351 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1352 |
1353 | Deselecting from a single plot.
1354 | ```javascript
1355 | $("#myChart").deselect({
1356 | "plotindex":0,
1357 | "nodeindex":"1-3"
1358 | });
1359 |
1360 | // Nodes at index 1-3 in plot 0 have been deselected.
1361 | ```
1362 |
1363 | Deselecting from multiple plots.
1364 | ```javascript
1365 | $("#myChart").deselect([
1366 | {
1367 | "plotindex":0,
1368 | "nodeindex":[0,2]
1369 | },
1370 | {
1371 | "plotindex":1,
1372 | "nodeindex":1
1373 | }
1374 | ]);
1375 |
1376 | // Nodes at index 0 and 2 in plot 0 and the node at index 1 in plot 1 have been deselected.
1377 | ```
1378 |
1379 |
1380 | #### .getSelection( object ) ####
1381 | Returns the current node(s) selected.
1382 |
1383 | Value | Type | Details
1384 | --- | --- | ---
1385 | Parameter | Object (optional) | [GraphID Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__getselection)
1386 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1387 |
1388 | ```javascript
1389 | mySelection = $("#myChart").getSelection();
1390 | ```
1391 |
1392 |
1393 | #### .select( object ) ####
1394 | 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]).
1395 |
1396 | Value | Type | Details
1397 | --- | --- | ---
1398 | Parameter | Object | [Select Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__select)
1399 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1400 |
1401 | ```javascript
1402 | $("#myChart").select({
1403 | [
1404 | {
1405 | "plotindex":0,
1406 | "nodeindex":[0,2]
1407 | },
1408 | {
1409 | "plotindex":1,
1410 | "nodeindex":3
1411 | }
1412 | ]
1413 | })
1414 | ```
1415 |
1416 |
1417 | #### .setSelection( object ) ####
1418 | 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.
1419 |
1420 | Value | Type | Details
1421 | --- | --- | ---
1422 | Parameter | Object | [Select Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__setselection)
1423 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1424 |
1425 | ```javascript
1426 | $("#myChart").setSelection({
1427 | "selection": [
1428 | [1,2],
1429 | [0,3]
1430 | ]
1431 | });
1432 |
1433 | // 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.
1434 | ```
1435 |
1436 |
1437 | ## Toggle ##
1438 | #### .disableChart( string) ####
1439 | 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.
1440 |
1441 | Value | Type | Details
1442 | --- | --- | ---
1443 | Parameter | String (optional) | [Disable Message](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__disable)
1444 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1445 |
1446 | ```javascript
1447 | $("#myChart").disableChart("Waiting on the world to change...");
1448 |
1449 | // Disclaimer: you don't have to use John Mayer lyrics in your disable message but no one would fault you if you did.
1450 | ```
1451 |
1452 |
1453 | #### .enableChart() ####
1454 | Enables a chart for user interactions, turning off the disabled attribute.
1455 |
1456 | Value | Type | Details
1457 | --- | --- | ---
1458 | Parameter | |
1459 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1460 |
1461 | ```javascript
1462 | $("#myChart").enableChart();
1463 | ```
1464 |
1465 | #### .fullscreen() ####
1466 | Randers the chart in fullscreen. Can be exited with .exitFullscreen() or hitting the escape key.
1467 |
1468 | Value | Type | Details
1469 | --- | --- | ---
1470 | Parameter | |
1471 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1472 |
1473 | ```javascript
1474 | $("#myChart").fullscreen();
1475 | ```
1476 |
1477 |
1478 | #### .exitFullscreen() ####
1479 | Destroys the fullscreen render of the chart.
1480 |
1481 | Value | Type | Details
1482 | --- | --- | ---
1483 | Parameter | |
1484 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1485 |
1486 | ```javascript
1487 | $("#myChart").exitFullscreen();
1488 | ```
1489 |
1490 |
1491 | #### .maximizeLegend() ####
1492 | Maximizes the legend.
1493 |
1494 | Value | Type | Details
1495 | --- | --- | ---
1496 | Parameter | |
1497 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1498 |
1499 | ```javascript
1500 | $("#myChart").maximizeLegend();
1501 | ```
1502 |
1503 |
1504 | #### .minimizeLegend() ####
1505 | Minimizes the legend.
1506 |
1507 | Value | Type | Details
1508 | --- | --- | ---
1509 | Parameter | |
1510 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1511 |
1512 | ```javascript
1513 | $("#myChart").minimizeLegend();
1514 | ```
1515 |
1516 |
1517 | #### .showMenu() ####
1518 | Shows the context menu.
1519 |
1520 | Value | Type | Details
1521 | --- | --- | ---
1522 | Parameter | |
1523 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1524 |
1525 | ```javascript
1526 | $("#myChart").showMenu();
1527 | ```
1528 |
1529 |
1530 | #### .hideMenu() ####
1531 | Hides the context menu.
1532 |
1533 | Value | Type | Details
1534 | --- | --- | ---
1535 | Parameter | |
1536 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1537 |
1538 | ```javascript
1539 | $("#myChart").hideMenu();
1540 | ```
1541 |
1542 |
1543 | #### .showPlot( object ) ####
1544 | Shows the plot specified by **plotindex** or **plotid**.
1545 |
1546 | Value | Type | Details
1547 | --- | --- | ---
1548 | Parameter | Object | [Plot Index Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__showplot)
1549 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1550 |
1551 | ```javascript
1552 | $("#myChart").showPlot({
1553 | "plotindex": 1
1554 | });
1555 | ```
1556 |
1557 |
1558 | #### .showAllPlots( object ) ####
1559 | Shows ALL plots. Takes an optional object as a parameter than can specify a **graphid**.
1560 |
1561 | Value | Type | Details
1562 | --- | --- | ---
1563 | Parameter | Object | Graph ID Object
1564 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1565 |
1566 | Show all plots for all graphs.
1567 | ```javascript
1568 | $("#myChart").showAllPlots();
1569 | ```
1570 | Show all plots for a specific graph.
1571 | ```javascript
1572 | $("#myChart").showAllPlots({
1573 | graphid: "graph1"
1574 | });
1575 | ```
1576 |
1577 |
1578 | #### .showAllPlotsBut( object ) ####
1579 | > This won't have a visible effect unless some charts have been hidden.
1580 |
1581 | Shows ALL plots EXCEPT the **plotindex** you specify.
1582 | An optional **graphid** attribute can be passed as well to affect only that graph.
1583 |
1584 | Value | Type | Details
1585 | --- | --- | ---
1586 | Parameter | Object | Specify the plotindex (required) and the graphid (optional)
1587 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1588 |
1589 | Show all plots except plotindex 0 for all graphsets.
1590 | ```javascript
1591 | $("#myChart").showAllPlotsBut({
1592 | plotindex: 0
1593 | });
1594 | ```
1595 |
1596 | Show all plots except plotindex 0 for graphid "graph0".
1597 | ```javascript
1598 | $("#myChart").showAllPlotsBut({
1599 | graphid: "graph0",
1600 | plotindex: 0
1601 | });
1602 | ```
1603 |
1604 |
1605 | #### .hidePlot( object ) ####
1606 | Hides the plot specified by **plotindex** or **plotid**.
1607 |
1608 | Value | Type | Details
1609 | --- | --- | ---
1610 | Parameter | Object | [Plot Index Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__hideplot)
1611 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1612 |
1613 | ```javascript
1614 | $("#myChart").hidePlot({
1615 | plotindex: 1
1616 | });
1617 | ```
1618 |
1619 |
1620 | #### .hideAllPlots( object ) ####
1621 | Hides ALL plots. Takes an optional object as a parameter than can specify a **graphid**.
1622 |
1623 | Value | Type | Details
1624 | --- | --- | ---
1625 | Parameter | Object | Graph ID Object
1626 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1627 |
1628 | Hide all plots for all graphs.
1629 | ```javascript
1630 | $("#myChart").hideAllPlots();
1631 | ```
1632 | Hide all plots for a specific graph.
1633 | ```javascript
1634 | $("#myChart").hideAllPlots({
1635 | graphid: "graph1"
1636 | });
1637 | ```
1638 |
1639 |
1640 | #### .hideAllPlotsBut( object ) ####
1641 | Hides ALL plots EXCEPT the plot index you specify via the attribute **plotindex**.
1642 | An optional graphset can be set via the attribute **graphid**.
1643 |
1644 | Value | Type | Details
1645 | --- | --- | ---
1646 | Parameter | Object | Specify the plotindex (required) and the graphid (optional)
1647 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1648 |
1649 | **Hide all plots across all graphsets except plotindex 0**
1650 |
1651 | ```javascript
1652 | $("#myChart").hideAllPlotsBut({
1653 | plotindex: 0
1654 | });
1655 | ```
1656 |
1657 | **Hide all plots on the graphid "graph0" except plotindex 0**
1658 |
1659 | ```javascript
1660 | $("#myChart").hideAllPlotsBut({
1661 | graphid: "graph0",
1662 | plotindex: 0
1663 | });
1664 | ```
1665 |
1666 |
1667 | #### .toggleAbout() ####
1668 | Toggle the 'About' screen on and off.
1669 |
1670 | Value | Type | Details
1671 | --- | --- | ---
1672 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1673 |
1674 | ```javascript
1675 | $("#myChart").toggleAbout();
1676 | ```
1677 |
1678 |
1679 | #### .toggleBugReport() ####
1680 | Toggle the 'Bug Report' screen on an off.
1681 |
1682 | Value | Type | Details
1683 | --- | --- | ---
1684 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1685 |
1686 | ```javascript
1687 | $("#myChart").toggleBugReport();
1688 | ```
1689 |
1690 |
1691 | #### .toggleDimension() ####
1692 | For graphs with the option of 3D mode, toggles between 2D and 3D.
1693 |
1694 | Value | Type | Details
1695 | --- | --- | ---
1696 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1697 |
1698 | ```javascript
1699 | $("#myChart").toggleDimension();
1700 | ```
1701 |
1702 |
1703 | #### .toggleLegend() ####
1704 | Toggle the visibility of the legend.
1705 |
1706 | Value | Type | Details
1707 | --- | --- | ---
1708 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1709 |
1710 | ```javascript
1711 | $("#myChart").toggleLegend();
1712 | ```
1713 |
1714 |
1715 | #### .toggleSource() ####
1716 | Toggle the visibility of the View Source Screen.
1717 |
1718 | Value | Type | Details
1719 | --- | --- | ---
1720 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1721 |
1722 | ```javascript
1723 | $("#myChart").toggleSource();
1724 | ```
1725 |
1726 |
1727 | ## Zoom ##
1728 | #### .viewAll() ####
1729 | Resets the zoom of the chart to 'view all'. Big surprise, eh?
1730 |
1731 | Value | Type | Details
1732 | --- | --- | ---
1733 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1734 |
1735 | ```javascript
1736 | $("#myChart").viewAll();
1737 | ```
1738 |
1739 |
1740 | #### .zoomIn( object ) ####
1741 | Zooms in the graph. **zoomx** and **zoomy** allow you to determine which scales will zoom by setting them to ```true``` or ```false```.
1742 |
1743 | Value | Type | Details
1744 | --- | --- | ---
1745 | Parameter | Object | [Zoom Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__zoomin)
1746 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1747 |
1748 | ```javascript
1749 | $("#myChart").zoomIn({
1750 | "zoomx": true,
1751 | "zoomy": false
1752 | });
1753 |
1754 | // The chart will now zoom in only by scaling the x-scale.
1755 | ```
1756 |
1757 |
1758 | #### .zoomOut( object ) ####
1759 | Zooms out the graph. **zoomx** and **zoomy** allow you to determine which scales will zoom out by setting them to ```true``` or ```false```.
1760 |
1761 | Value | Type | Details
1762 | --- | --- | ---
1763 | Parameter | Object | [Zoom Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__zoomout)
1764 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1765 |
1766 | ```javascript
1767 | $("#myChart").zoomOut({
1768 | "zoomx": false,
1769 | "zoomy": true
1770 | });
1771 |
1772 | // The chart will now zoom out only by scaling the y-scale.
1773 | ```
1774 |
1775 |
1776 | #### .zoomTo( object ) ####
1777 | Zooms to a specific area in a graph specified by **xmin**, **xmax**, **ymin**, **ymax**.
1778 |
1779 | Value | Type | Details
1780 | --- | --- | ---
1781 | Parameter | Object | [Zoom To Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__zoomto)
1782 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1783 |
1784 | ```javascript
1785 | $("#myChart").zoomTo({
1786 | "xmin": 10,
1787 | "xmax": 30,
1788 | "ymin": 12,
1789 | "ymax": 17
1790 | });
1791 |
1792 | // The chart will now be zoomed in to show
1793 | // values 10 through 30 on the x-scale and
1794 | // values 12 through 17 on the y scale.
1795 | ```
1796 |
1797 |
1798 | #### .zoomToValues( object ) ####
1799 | Zooms to a specific area in a graph specified by x-scale values or labels. Use this option when you're x-axis doesn't use numbers (i.e. months, names, etc).
1800 |
1801 | Value | Type | Details
1802 | --- | --- | ---
1803 | Parameter | Object | [Zoom To Values Object](http://www.zingchart.com/docs/api/api-methods/#zingchart__exec__api__zoomtovalues)
1804 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQuery)
1805 |
1806 | ```javascript
1807 | $("#myChart").zoomToValues({
1808 | "xmin": "Feb",
1809 | "xmax": "Apr",
1810 | "ymin": 200,
1811 | "ymax": 300
1812 | });
1813 |
1814 | // The chart will now be zoomed in to show
1815 | // values "Feb" through "Apr" on the x-scale
1816 | // and values 200 through 300 on the y scale.
1817 | ```
1818 |
1819 |
1820 | # Events[](#events) #
1821 |
1822 | Events are one of the most powerful aspects of the ZingChart API. While other charting libraries have only a handful of events, ZingChart provides dozens of built-in events to monitor and track.
1823 |
1824 | All events take a callback as a argument. Within that callback, you have access to both the jQuery object (the DOM element in which the chart resides) and the event object, an object which reveals different data for each event.
1825 |
1826 |
1827 | To access the jQuery object, simply use ```this```.
1828 |
1829 | To access the event object, use ```this.event```.
1830 |
1831 | Here's an example using the node click event:
1832 |
1833 | ```javascript
1834 | $("#myChart").nodeClick(function(){
1835 |
1836 | // Below, we're accessing the event object
1837 | console.log("Node Value:"+this.event.value); // Print the node's value
1838 | console.log("Node Index:"+this.event.nodeindex); // Print the node's index
1839 | console.log("Plot Index:"+this.event.plotindex); // Print the plot index
1840 | console.log("Chart ID:"+this.event.id); // Print the chart's ID
1841 |
1842 | // Down here, we're accessing the jQuery object and using normal
1843 | // jQuery functionality on the chart's DOM element. Snazzy!
1844 | $(this).css("border","5px solid #F00");
1845 |
1846 | });
1847 | ```
1848 |
1849 | **Under The Hood**
1850 | > What we're doing here is extending the jQuery object with a custom 'event' attribute. That event attribute holds all the event data returned by the ZingChart event API call. What this allows us to do is retain access to the jQuery element and all it's associated attributes and functionality while also providing easy and granular access to the event attributes. The scope of the extended jQuery object only exists inside the event function and doesn't affect jQuery performance or functionality in anyway. That means less code and more win.
1851 |
1852 | **The Event Object**
1853 |
1854 | ```javascript
1855 | {
1856 | ev: MouseEvent,
1857 | graphid: "myChart-graph-id0",
1858 | id: "myChart",
1859 | key: 2,
1860 | nodeindex: 2,
1861 | plotid: "",
1862 | plotindex: 0,
1863 | scaletext: "2",
1864 | text: "9",
1865 | value: 9
1866 | }
1867 | ```
1868 |
1869 | Let's get down to business with the events.
1870 |
1871 | ## Animation Events
1872 | #### .animationStart( callback )
1873 | Fires the callback when the chart's animation starts.
1874 |
1875 | **Sample Event Object**
1876 | ```javascript
1877 | {
1878 | // The id of the chart
1879 | id: "myChart",
1880 | // The id of the graph
1881 | graphid: "myChart-graph-id0"
1882 | }
1883 | ```
1884 |
1885 | ```javascript
1886 | $("#myChart").animationStart(function(){
1887 | // Make some magic
1888 | });
1889 | ```
1890 |
1891 |
1892 | #### .animationEnd( callback )
1893 | Fires the callback when the chart's animation ends.
1894 |
1895 | **Sample Event Object**
1896 | ```javascript
1897 | {
1898 | // The id of the chart
1899 | id: "myChart",
1900 | // The id of the graph
1901 | graphid: "myChart-graph-id0"
1902 | }
1903 | ```
1904 |
1905 | ```javascript
1906 | $("#myChart").animationEnd(function(){
1907 | // Make some magic
1908 | });
1909 | ```
1910 |
1911 |
1912 | #### .animationStep( callback )
1913 | Fires the callback for every step of the animation, for every plot/node. That means it fires A LOT. Like, dozens of times. Be **very** careful what you do inside the callback as it is very easy to kill your browser if you use this improperly.
1914 |
1915 | **Sample Event Object**
1916 | ```javascript
1917 | {
1918 | // The id of the chart
1919 | id: "myChart",
1920 | // The id of the graph
1921 | graphid: "myChart-graph-id0",
1922 | // The index of the node being animated
1923 | nodeindex: 0,
1924 | // The index of the plot being animated
1925 | plotindex: 0,
1926 | // The "position" in the animation timeline.
1927 | // It starts from 0 and ends as 1 but for several animation methods, intermediate values can exceed 1
1928 | stage: 1
1929 | }
1930 | ```
1931 |
1932 | ```javascript
1933 | $("#myChart").animationStep(function(){
1934 | // Make some magic
1935 | });
1936 | ```
1937 |
1938 |
1939 | ## Data Manipulation Events
1940 | #### .chartModify( callback )
1941 | Fires the callback when ZingChart is modified via the modify API call. This applies to both the wrapper method and the hand-coded modify method.
1942 |
1943 | **Sample Event Object**
1944 | ```javascript
1945 | {
1946 | // The id of the chart
1947 | id: "myChart",
1948 | // The id of the graph
1949 | graphid: "myChart-graph-id0",
1950 | // The object being modified
1951 | object: 'title',
1952 | // The data passed through to modify the object.
1953 | // In this case, it's text for a new title.
1954 | text: 'A whole new title',
1955 | }
1956 | ```
1957 |
1958 | ```javascript
1959 | $("#myChart").chartModify(function(){
1960 | // Make some magic
1961 | });
1962 | ```
1963 |
1964 | #### .nodeAdd( callback )
1965 | Fires the callback when a node is added to the chart.
1966 |
1967 | **Sample Event Object**
1968 | ```javascript
1969 | {
1970 | // The id of the chart
1971 | id: "myChart",
1972 | // The id of the graph
1973 | graphid: "myChart-graph-id0",
1974 | // The node's key
1975 | key: 5,
1976 | // The node's index.
1977 | nodeindex: 5,
1978 | // The plot's index to which the node was added.
1979 | plotindex: 0,
1980 | // The text of the node (similar to value)
1981 | text: 11,
1982 | // The value of the node
1983 | value: 11
1984 | }
1985 | ```
1986 |
1987 | ```javascript
1988 | $("#myChart").nodeAdd(function(){
1989 | // Make some magic
1990 | });
1991 | ```
1992 |
1993 |
1994 | #### .nodeRemove( callback )
1995 | Fires the callback when a node is removed from the chart.
1996 |
1997 | **Sample Event Object**
1998 | ```javascript
1999 | {
2000 | // The id of the chart
2001 | id: "myChart",
2002 | // The id of the graph
2003 | graphid: "myChart-graph-id0",
2004 | // The node's key
2005 | key: 2,
2006 | // The node's index.
2007 | nodeindex: 2,
2008 | // The plot's index from which the node was removed.
2009 | plotindex: 1,
2010 | // The text of the node (similar to value)
2011 | text: 21,
2012 | // The value of the node
2013 | value: 21
2014 | }
2015 | ```
2016 |
2017 | ```javascript
2018 | $("#myChart").nodeRemove(function(){
2019 | // Make some magic
2020 | });
2021 | ```
2022 |
2023 |
2024 | #### .plotAdd( callback )
2025 | Fires the callback when a plot is added to the chart.
2026 |
2027 | **Sample Event Object**
2028 | ```javascript
2029 | {
2030 | // The id of the chart
2031 | id: "myChart",
2032 | // The id of the graph
2033 | graphid: "myChart-graph-id0",
2034 | // The index of the added plot.
2035 | plotindex: 1,
2036 | // Data about the added plot (object)
2037 | data: {
2038 | // This object contains information about the added plot.
2039 | // Example data includes: an array of values, the palette, etc.
2040 | }
2041 | }
2042 | ```
2043 |
2044 | ```javascript
2045 | $("#myChart").plotAdd(function(){
2046 | // Make some magic
2047 | });
2048 | ```
2049 |
2050 |
2051 | #### .plotRemove( callback )
2052 | Fires the callback when a plot is removed from the chart.
2053 |
2054 | **Sample Event Object**
2055 | ```javascript
2056 | {
2057 | // The id of the chart
2058 | id: "myChart",
2059 | // The id of the graph
2060 | graphid: "myChart-graph-id0",
2061 | // The node's key
2062 | key: 2,
2063 | // The index of the removed plot.
2064 | plotindex: 1
2065 | }
2066 | ```
2067 |
2068 | ```javascript
2069 | $("#myChart").plotRemove(function(){
2070 | // Make some magic
2071 | });
2072 | ```
2073 |
2074 |
2075 | #### .plotModify( callback )
2076 | Fires the callback when a plot of the chart is modified.
2077 |
2078 | **Sample Event Object**
2079 | ```javascript
2080 | {
2081 | // The id of the chart
2082 | id: "myChart",
2083 | // The id of the graph
2084 | graphid: "myChart-graph-id0",
2085 | // The index of the added plot.
2086 | plotindex: 0,
2087 | // Data about the added plot (object)
2088 | data: {
2089 | // This object contains information about the modified plot.
2090 | // Whatever info is passed in the data object when modifyPlot
2091 | // is called will appear here.
2092 | // Example data includes: an array of values, the color, etc.
2093 | }
2094 | }
2095 | ```
2096 |
2097 | ```javascript
2098 | $("#myChart").plotModify(function(){
2099 | // Make some magic
2100 | });
2101 | ```
2102 |
2103 |
2104 | #### .chartReload( callback )
2105 | Fires the callback when the chart is reloaded.
2106 |
2107 | **Sample Event Object**
2108 | ```javascript
2109 | {
2110 | // The id of the chart
2111 | id: "myChart",
2112 | // The render type of the added chart.
2113 | output: 'canvas',
2114 | // The new height of the chart.
2115 | height: 300,
2116 | // The new width of the chart.
2117 | width: 500,
2118 | // The x position of the chart.
2119 | x: 0,
2120 | // The y position of the chart.
2121 | y: 0,
2122 | // Data about the reload call (object)
2123 | params: { }
2124 | }
2125 | ```
2126 |
2127 | ```javascript
2128 | $("#myChart").chartReload(function(){
2129 | // Make some magic
2130 | });
2131 | ```
2132 |
2133 |
2134 | #### .dataSet( callback )
2135 | Fires the callback when the chart is reloaded.
2136 |
2137 | **Sample Event Object**
2138 | ```javascript
2139 | {
2140 | // The id of the chart
2141 | id: "myChart",
2142 | // The data packet that was sent (object)
2143 | data: { }
2144 | }
2145 | ```
2146 |
2147 | ```javascript
2148 | $("#myChart").dataSet(function(){
2149 | // Make some magic
2150 | });
2151 | ```
2152 |
2153 |
2154 | ## Export Events
2155 | #### .dataExport( callback )
2156 | Fires the callback when the user exports the graph data.
2157 |
2158 | **NOTE**: Only works if exportdataurl is set in .zingchart options.
2159 |
2160 | ```javascript
2161 | $("#myChart").dataExport(function(){
2162 | // Make some magic
2163 | });
2164 | ```
2165 |
2166 |
2167 | #### .imageSave( callback )
2168 | Fires the callback when the user saves an image of the graph.
2169 |
2170 | **NOTE**: Only works if exportimageurl is set in .zingchart options.
2171 |
2172 | ```javascript
2173 | $("#myChart").imageSave(function(){
2174 | // Make some magic
2175 | });
2176 | ```
2177 |
2178 |
2179 | #### .chartPrint( callback )
2180 | Fires the callback when the user prints the graph.
2181 |
2182 | **Sample Event Object**
2183 | ```javascript
2184 | {
2185 | // The id of the chart
2186 | id: "myChart",
2187 | // The render type of the printed chart.
2188 | output: 'canvas',
2189 | // The height of the chart.
2190 | height: 300,
2191 | // The width of the chart.
2192 | width: 500,
2193 | // The x position of the chart.
2194 | x: 0,
2195 | // The y position of the chart.
2196 | y: 0,
2197 | // Data about the print call (object)
2198 | params: { }
2199 | }
2200 | ```
2201 |
2202 | ```javascript
2203 | $("#myChart").chartPrint(function(){
2204 | // Make some magic
2205 | });
2206 | ```
2207 |
2208 |
2209 | ## Feed Events
2210 | #### .feedClear( callback )
2211 | Fires the callback when the feed is cleared.
2212 |
2213 | Value | Type | Details
2214 | --- | --- | ---
2215 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2216 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2217 |
2218 | **Sample Event Object**
2219 | ```javascript
2220 | {
2221 | // The id of the chart
2222 | id: "myChart",
2223 | // The render type of the feed chart.
2224 | output: 'canvas',
2225 | // The height of the chart.
2226 | height: 300,
2227 | // The width of the chart.
2228 | width: 500,
2229 | // The x position of the chart.
2230 | x: 0,
2231 | // The y position of the chart.
2232 | y: 0,
2233 | // Data about the clearFeed call (object)
2234 | params: { }
2235 | }
2236 | ```
2237 |
2238 | ```javascript
2239 | $("#myChart").feedClear(function(){
2240 | // Make some magic
2241 | });
2242 | ```
2243 |
2244 |
2245 | #### .feedIntervalModify( callback )
2246 | Fires the callback when the feed's interval is modified.
2247 |
2248 | ```javascript
2249 | $("#myChart").feedIntervalModify(function(){
2250 | // Make some magic
2251 | });
2252 | ```
2253 |
2254 |
2255 | #### .feedStart( callback )
2256 | Fires the callback when the feed starts.
2257 |
2258 | **Sample Event Object**
2259 | ```javascript
2260 | {
2261 | // The id of the chart
2262 | id: "myChart",
2263 | // The render type of the feed chart.
2264 | output: 'canvas',
2265 | // The height of the chart.
2266 | height: 300,
2267 | // The width of the chart.
2268 | width: 500,
2269 | // The x position of the chart.
2270 | x: 0,
2271 | // The y position of the chart.
2272 | y: 0,
2273 | // Data about the clearFeed call (object)
2274 | params: { }
2275 | }
2276 | ```
2277 |
2278 | ```javascript
2279 | $("#myChart").feedStart(function(){
2280 | // Make some magic
2281 | });
2282 | ```
2283 |
2284 |
2285 | #### .feedStop( callback )
2286 | Fires the callback when the feed stops.
2287 |
2288 | **Sample Event Object**
2289 | ```javascript
2290 | {
2291 | // The id of the chart
2292 | id: "myChart",
2293 | // The render type of the feed chart.
2294 | output: 'canvas',
2295 | // The height of the chart.
2296 | height: 300,
2297 | // The width of the chart.
2298 | width: 500,
2299 | // The x position of the chart.
2300 | x: 0,
2301 | // The y position of the chart.
2302 | y: 0,
2303 | // Data about the stopFeed call (object)
2304 | params: { }
2305 | }
2306 | ```
2307 |
2308 | ```javascript
2309 | $("#myChart").feedStop(function(){
2310 | // Make some magic
2311 | });
2312 | ```
2313 |
2314 |
2315 | ## Global Events
2316 | #### .graphClick( callback )
2317 | Fires the callback when the user clicks anywhere in the graph.
2318 | All attributes of the event object are dependent on where the click originated.
2319 |
2320 | **Sample Event Object**
2321 | ```javascript
2322 | {
2323 | // The id of the chart
2324 | id: "myChart",
2325 | // The id of the graph
2326 | graphid: "myChart-graph-id0",
2327 | // If the click was inside, the plotarea, this will be true.
2328 | // Otherwise, it will be false.
2329 | plotarea: true,
2330 | // The target will be set to whatever element of the chart was clicked.
2331 | // If no specific object was clicked, target will equal "none".
2332 | target: "node",
2333 | // The targetid will be the ID in the DOM of the object you clicked.
2334 | targetid: "myChart-graph-id0-plotset0-plot0-plot-1-node-0"
2335 | // The x position of the click event.
2336 | x: 168.203125,
2337 | // The y position of the click event.
2338 | y: 21.5625,
2339 | // Touch tells if the event was triggered by a touch-screen.
2340 | touch: false,
2341 | // Data about the stopFeed call (object)
2342 | ev: { } // MouseEvent
2343 | }
2344 | ```
2345 |
2346 | ```javascript
2347 | $("#myChart").graphClick(function(){
2348 | // Make some magic
2349 | });
2350 | ```
2351 |
2352 |
2353 | #### .graphComplete( callback )
2354 | Fires the callback when the graphset is completely rendered. It's called even on API calls that require chart repaint.
2355 |
2356 | Value | Type | Details
2357 | --- | --- | ---
2358 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2359 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2360 |
2361 | ```javascript
2362 | $("#myChart").graphComplete(function(){
2363 | // Make some magic
2364 | });
2365 | ```
2366 |
2367 |
2368 | #### .graphDataParse( callback )
2369 | Fires the callback when the data is availabe for the chart, prior to parsing routines. Useful for changing/adding elements into the data.
2370 |
2371 | Value | Type | Details
2372 | --- | --- | ---
2373 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2374 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2375 |
2376 | ```javascript
2377 | $("#myChart").graphDataParse(function(){
2378 | // Make some magic
2379 | });
2380 | ```
2381 |
2382 |
2383 | #### .graphDataReady( callback )
2384 | Fires the callback when the data is ready to be parsed.
2385 |
2386 | Value | Type | Details
2387 | --- | --- | ---
2388 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2389 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2390 |
2391 | ```javascript
2392 | $("#myChart").graphDataReady(function(){
2393 | // Make some magic
2394 | });
2395 | ```
2396 |
2397 |
2398 | #### .graphGuideMouseMove( callback )
2399 | Fires the callback when the guide position changes.
2400 |
2401 | Value | Type | Details
2402 | --- | --- | ---
2403 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2404 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2405 |
2406 | ```javascript
2407 | $("#myChart").graphGuideMouseMove(function(){
2408 | // Make some magic
2409 | });
2410 | ```
2411 |
2412 |
2413 | #### .graphLoad( callback )
2414 | Fires the callback only the first time the graphset is completely rendered.
2415 |
2416 | Value | Type | Details
2417 | --- | --- | ---
2418 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2419 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2420 |
2421 | ```javascript
2422 | $("#myChart").graphLoad(function(){
2423 | // Make some magic
2424 | });
2425 | ```
2426 |
2427 |
2428 | #### .graphMenuItemClick( callback )
2429 | Fires the callback when a context menu item is clicked.
2430 |
2431 | Value | Type | Details
2432 | --- | --- | ---
2433 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2434 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2435 |
2436 | ```javascript
2437 | $("#myChart").graphMenuItemClick(function(){
2438 | // Make some magic
2439 | });
2440 | ```
2441 |
2442 |
2443 | #### .graphResize( callback )
2444 | Fires the callback when the graph is resized.
2445 |
2446 | Value | Type | Details
2447 | --- | --- | ---
2448 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2449 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2450 |
2451 | ```javascript
2452 | $("#myChart").graphResize(function(){
2453 | // Make some magic
2454 | });
2455 | ```
2456 |
2457 |
2458 | ## History Events
2459 | #### .historyForward( callback )
2460 | Fires the callback when the users goes forward in the chart history.
2461 |
2462 | Value | Type | Details
2463 | --- | --- | ---
2464 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2465 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2466 |
2467 | ```javascript
2468 | $("#myChart").historyForward(function(){
2469 | // Make some magic
2470 | });
2471 | ```
2472 |
2473 |
2474 | #### .historyBack( callback )
2475 | Fires the callback when the user goes backward in the chart history.
2476 |
2477 | Value | Type | Details
2478 | --- | --- | ---
2479 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2480 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2481 |
2482 | ```javascript
2483 | $("#myChart").historyBack(function(){
2484 | // Make some magic
2485 | });
2486 | ```
2487 |
2488 |
2489 | ## Interactive Events
2490 | #### .nodeSelect( callback )
2491 | Fires the callback when Interactive Mode is on and a node is selected.
2492 |
2493 | Value | Type | Details
2494 | --- | --- | ---
2495 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2496 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2497 |
2498 | ```javascript
2499 | $("#myChart").nodeSelect(function(){
2500 | // Make some magic
2501 | });
2502 | ```
2503 |
2504 |
2505 | #### .nodeDeselect( callback )
2506 | Fires the callback when Interactive Mode is on and a node is deselected.
2507 |
2508 | Value | Type | Details
2509 | --- | --- | ---
2510 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2511 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2512 |
2513 | ```javascript
2514 | $("#myChart").nodeDeselect(function(){
2515 | // Make some magic
2516 | });
2517 | ```
2518 |
2519 |
2520 | #### .plotSelect( callback )
2521 | Fires the callback when Interactive Mode is on and a plot is selected.
2522 |
2523 | Value | Type | Details
2524 | --- | --- | ---
2525 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2526 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2527 |
2528 | ```javascript
2529 | $("#myChart").plotSelect(function(){
2530 | // Make some magic
2531 | });
2532 | ```
2533 |
2534 |
2535 | #### .plotDeselect( callback )
2536 | Fires the callback when Interactive Mode is on and a plot is deselected.
2537 |
2538 | Value | Type | Details
2539 | --- | --- | ---
2540 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2541 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2542 |
2543 | ```javascript
2544 | $("#myChart").plotDeselect(function(){
2545 | // Make some magic
2546 | });
2547 | ```
2548 |
2549 |
2550 | ## Legend Events
2551 | #### .legendItemClick( callback )
2552 | Fires the callback when a legend item is clicked.
2553 |
2554 | Value | Type | Details
2555 | --- | --- | ---
2556 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2557 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2558 |
2559 | ```javascript
2560 | $("#myChart").legendItemClick(function(){
2561 | // Make some magic
2562 | });
2563 | ```
2564 |
2565 |
2566 | #### .legendMarkerClick( callback )
2567 | Fires the callback when a legend marker is clicked.
2568 |
2569 | Value | Type | Details
2570 | --- | --- | ---
2571 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2572 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2573 |
2574 | ```javascript
2575 | $("#myChart").legendMarkerClick(function(){
2576 | // Make some magic
2577 | });
2578 | ```
2579 |
2580 |
2581 | #### .legendShow( callback )
2582 | Fires the callback when the legend is shown.
2583 |
2584 | Value | Type | Details
2585 | --- | --- | ---
2586 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2587 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2588 |
2589 | ```javascript
2590 | $("#myChart").legendShow(function(){
2591 | // Make some magic
2592 | });
2593 | ```
2594 |
2595 |
2596 | #### .legendHide( callback )
2597 | Fires the callback when the legend is hidden.
2598 |
2599 | Value | Type | Details
2600 | --- | --- | ---
2601 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2602 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2603 |
2604 | ```javascript
2605 | $("#myChart").legendHide(function(){
2606 | // Make some magic
2607 | });
2608 | ```
2609 |
2610 |
2611 | #### .legendMaximize( callback )
2612 | Fires the callback when the legend is maximized.
2613 |
2614 | Value | Type | Details
2615 | --- | --- | ---
2616 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2617 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2618 |
2619 | ```javascript
2620 | $("#myChart").legendMaximize(function(){
2621 | // Make some magic
2622 | });
2623 | ```
2624 |
2625 |
2626 | #### .legendMinimize( callback )
2627 | Fires the callback when the legend is minimized.
2628 |
2629 | Value | Type | Details
2630 | --- | --- | ---
2631 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2632 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2633 |
2634 | ```javascript
2635 | $("#myChart").legendMinimize(function(){
2636 | // Make some magic
2637 | });
2638 | ```
2639 |
2640 | ## Node Events
2641 | #### .nodeClick( callback )
2642 | Fires the callback when a node is clicked.
2643 |
2644 | Value | Type | Details
2645 | --- | --- | ---
2646 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2647 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2648 |
2649 | ```javascript
2650 | $("#myChart").nodeClick(function(){
2651 | // Make some magic
2652 | });
2653 | ```
2654 |
2655 |
2656 | #### .nodeDoubleClick( callback )
2657 | Fires the callback when a node is double clicked.
2658 |
2659 | Value | Type | Details
2660 | --- | --- | ---
2661 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2662 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2663 |
2664 | ```javascript
2665 | $("#myChart").nodeDoubleClick(function(){
2666 | // Make some magic
2667 | });
2668 | ```
2669 |
2670 |
2671 | #### .nodeMouseOver( callback )
2672 | Fires the callback when the user's mouse enters a node.
2673 |
2674 | Value | Type | Details
2675 | --- | --- | ---
2676 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2677 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2678 |
2679 | ```javascript
2680 | $("#myChart").nodeMouseOver(function(){
2681 | // Make some magic
2682 | });
2683 | ```
2684 |
2685 |
2686 | #### .nodeMouseOut( callback )
2687 | Fires the callback when the user's mouse exits a node.
2688 |
2689 | Value | Type | Details
2690 | --- | --- | ---
2691 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2692 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2693 |
2694 | ```javascript
2695 | $("#myChart").nodeMouseOut(function(){
2696 | // Make some magic
2697 | });
2698 | ```
2699 |
2700 |
2701 | #### .nodeHover( callback, callback )
2702 | Fires the first callback when the user's mouse enters a node. Fires the second callback when the user's mouse exits a node.
2703 |
2704 | Value | Type | Details
2705 | --- | --- | ---
2706 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2707 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2708 |
2709 | ```javascript
2710 | $("#myChart").nodeHover(
2711 | // Fires on nodeMouseOver
2712 | function(){
2713 | // Make some magic
2714 | },
2715 | // Fires on nodeMouseOut
2716 | function(){
2717 | // Make some more magic
2718 | }
2719 | );
2720 | ```
2721 |
2722 |
2723 | ## Label Events
2724 | #### .labelClick( callback )
2725 | Fires the callback when the user clicks a label.
2726 |
2727 | Value | Type | Details
2728 | --- | --- | ---
2729 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2730 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2731 |
2732 | ```javascript
2733 | $("#myChart").labelClick(function(){
2734 | // Make some magic
2735 | });
2736 | ```
2737 |
2738 |
2739 | #### .labelMouseOver( callback )
2740 | Fires the callback when the user's mouse enters a label.
2741 |
2742 | Value | Type | Details
2743 | --- | --- | ---
2744 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2745 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2746 |
2747 | ```javascript
2748 | $("#myChart").labelMouseOver(function(){
2749 | // Make some magic
2750 | });
2751 | ```
2752 |
2753 |
2754 | #### .labelMouseOut( callback )
2755 | Fires the callback when the user's mouse exits a label.
2756 |
2757 | Value | Type | Details
2758 | --- | --- | ---
2759 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2760 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2761 |
2762 | ```javascript
2763 | $("#myChart").labelMouseOut(function(){
2764 | // Make some magic
2765 | });
2766 | ```
2767 |
2768 |
2769 | #### .labelHover( callback, callback )
2770 | Fires the first callback when the user's mouse enters a label. Fires the second callback when the user's mouse exits a label.
2771 |
2772 | Value | Type | Details
2773 | --- | --- | ---
2774 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2775 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2776 |
2777 | ```javascript
2778 | $("#myChart").labelHover(
2779 | // Fires on labelMouseOver
2780 | function(){
2781 | // Make some magic
2782 | },
2783 | // Fires on labelMouseOut
2784 | function(){
2785 | // Make some more magic
2786 | }
2787 | );
2788 | ```
2789 |
2790 |
2791 | ## Shape Events
2792 | #### .shapeClick( callback )
2793 | Fires the callback when the user clicks a shape.
2794 |
2795 | Value | Type | Details
2796 | --- | --- | ---
2797 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2798 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2799 |
2800 | ```javascript
2801 | $("#myChart").shapeClick(function(){
2802 | // Make some magic
2803 | });
2804 | ```
2805 |
2806 |
2807 | #### .shapeMouseOver( callback )
2808 | Fires the callback when the user's mouse enters a shape.
2809 |
2810 | Value | Type | Details
2811 | --- | --- | ---
2812 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2813 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2814 |
2815 | ```javascript
2816 | $("#myChart").shapeMouseOver(function(){
2817 | // Make some magic
2818 | });
2819 | ```
2820 |
2821 |
2822 | #### .shapeMouseOut( callback )
2823 | Fires the callback when the user's mouse exits a shape.
2824 |
2825 | Value | Type | Details
2826 | --- | --- | ---
2827 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2828 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2829 |
2830 | ```javascript
2831 | $("#myChart").shapeMouseOut(function(){
2832 | // Make some magic
2833 | });
2834 | ```
2835 |
2836 |
2837 | #### .shapeHover( callback, callback )
2838 | Fires the first callback when the user's mouse enters a shape. Fires the second callback when the user's mouse exits a shape.
2839 |
2840 | Value | Type | Details
2841 | --- | --- | ---
2842 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2843 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2844 |
2845 | ```javascript
2846 | $("#myChart").shapeHover(
2847 | // Fires on shapeMouseOver
2848 | function(){
2849 | // Make some magic
2850 | },
2851 | // Fires on shapeMouseOut
2852 | function(){
2853 | // Make some more magic
2854 | }
2855 | );
2856 | ```
2857 |
2858 |
2859 | ## Plot Events
2860 | #### .plotClick( callback )
2861 | Fires the callback when the user clicks a plot.
2862 |
2863 | Value | Type | Details
2864 | --- | --- | ---
2865 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2866 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2867 |
2868 | ```javascript
2869 | $("#myChart").plotClick(function(){
2870 | // Make some magic
2871 | });
2872 | ```
2873 |
2874 |
2875 | #### .plotDoubleClick( callback )
2876 | Fires the callback when the user double-clicks a plot.
2877 |
2878 | Value | Type | Details
2879 | --- | --- | ---
2880 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2881 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2882 |
2883 | ```javascript
2884 | $("#myChart").plotDoubleClick(function(){
2885 | // Make some magic
2886 | });
2887 | ```
2888 |
2889 |
2890 | #### .plotMouseOver( callback )
2891 | Fires the callback when the user's mouse enters a plot.
2892 |
2893 | Value | Type | Details
2894 | --- | --- | ---
2895 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2896 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2897 |
2898 | ```javascript
2899 | $("#myChart").plotMouseOver(function(){
2900 | // Make some magic
2901 | });
2902 | ```
2903 |
2904 |
2905 | #### .plotMouseOut( callback )
2906 | Fires the callback when the user's mouse exits a plot.
2907 |
2908 | Value | Type | Details
2909 | --- | --- | ---
2910 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2911 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2912 |
2913 | ```javascript
2914 | $("#myChart").plotMouseOut(function(){
2915 | // Make some magic
2916 | });
2917 | ```
2918 |
2919 |
2920 | #### .plotHover( callback, callback )
2921 | Fires the first callback when the user's mouse enters a plot. Fires the second callback when the user's mouse exits a plot.
2922 |
2923 | Value | Type | Details
2924 | --- | --- | ---
2925 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2926 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2927 |
2928 | ```javascript
2929 | $("#myChart").plotHover(
2930 | // Fires on plotMouseOver
2931 | function(){
2932 | // Make some magic
2933 | },
2934 | // Fires on plotMouseOut
2935 | function(){
2936 | // Make some more magic
2937 | }
2938 | );
2939 | ```
2940 |
2941 |
2942 | #### .plotShow( callback )
2943 | Fires the callback when a plot is shown.
2944 |
2945 | Value | Type | Details
2946 | --- | --- | ---
2947 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2948 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2949 |
2950 | ```javascript
2951 | $("#myChart").plotShow(function(){
2952 | // Make some magic
2953 | });
2954 | ```
2955 |
2956 |
2957 | #### .plotHide( callback )
2958 | Fires the callback when a plot is hidden.
2959 |
2960 | Value | Type | Details
2961 | --- | --- | ---
2962 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2963 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2964 |
2965 | ```javascript
2966 | $("#myChart").plotHide(function(){
2967 | // Make some magic
2968 | });
2969 | ```
2970 |
2971 |
2972 | ## Toggle Events
2973 | #### .aboutShow( callback )
2974 | Fires the callback when the About Screen is opened.
2975 |
2976 | Value | Type | Details
2977 | --- | --- | ---
2978 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2979 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2980 |
2981 | ```javascript
2982 | $("#myChart").aboutShow(function(){
2983 | // Make some magic
2984 | });
2985 | ```
2986 |
2987 |
2988 | #### .aboutHide( callback )
2989 | Fires the callback when the About Screen is closed.
2990 |
2991 | Value | Type | Details
2992 | --- | --- | ---
2993 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
2994 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
2995 |
2996 | ```javascript
2997 | $("#myChart").aboutHide(function(){
2998 | // Make some magic
2999 | });
3000 | ```
3001 |
3002 |
3003 | #### .bugReportShow( callback )
3004 | Fires the callback when the Report Bug Screen is opened.
3005 |
3006 | Value | Type | Details
3007 | --- | --- | ---
3008 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
3009 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
3010 |
3011 | ```javascript
3012 | $("#myChart").bugReportShow(function(){
3013 | // Make some magic
3014 | });
3015 | ```
3016 |
3017 |
3018 | #### .bugReportHide( callback )
3019 | Fires the callback when the Bug Report Screen is closed.
3020 |
3021 | Value | Type | Details
3022 | --- | --- | ---
3023 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
3024 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
3025 |
3026 | ```javascript
3027 | $("#myChart").bugReportHide(function(){
3028 | // Make some magic
3029 | });
3030 | ```
3031 |
3032 |
3033 | #### .dimensionChange( callback )
3034 | Fires the callback when the dimension is toggled between 2D and 3D.
3035 |
3036 | Value | Type | Details
3037 | --- | --- | ---
3038 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
3039 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
3040 |
3041 | ```javascript
3042 | $("#myChart").dimensionChange(function(){
3043 | // Make some magic
3044 | });
3045 | ```
3046 |
3047 |
3048 | #### .sourceShow( callback )
3049 | Fires the callback when the source is shown.
3050 |
3051 | Value | Type | Details
3052 | --- | --- | ---
3053 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
3054 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
3055 |
3056 | ```javascript
3057 | $("#myChart").sourceShow(function(){
3058 | // Make some magic
3059 | });
3060 | ```
3061 |
3062 |
3063 | #### .sourceHide( callback )
3064 | Fires the callback when the source is hidden.
3065 |
3066 | Value | Type | Details
3067 | --- | --- | ---
3068 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
3069 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
3070 |
3071 | ```javascript
3072 | $("#myChart").sourceHide(function(){
3073 | // Make some magic
3074 | });
3075 | ```
3076 |
3077 |
3078 | ## Zoom Events
3079 | #### .zoomEvent( callback )
3080 | Fires the callback when a zoom event occurs.
3081 |
3082 | Value | Type | Details
3083 | --- | --- | ---
3084 | Parameter | [Callback](https://developer.mozilla.org/en-US/docs/Mozilla/js-ctypes/js-ctypes_reference/Callbacks)
3085 | Return | [jQuery](http://api.jquery.com/Types/#jQuery)
3086 |
3087 | ```javascript
3088 | $("#myChart").zoomEvent(function(){
3089 | // Make some magic
3090 | });
3091 | ```
3092 |
3093 |
3094 | ## Additional Methods
3095 |
3096 | The following methods are amalgamations of other ZingChart methods. While not built in, they make use of the API and allow you to perform tedious tasks with minimal code and that's pretty sweet.
3097 |
3098 | #### .setTitle( string OR object )
3099 | Allows the title to be set dynamically. This method accepts either a string or an object.
3100 | The string parameter is useful if you just with to set the title's text and not style the title.
3101 | The object parameter allows you to set both the text and the style for the title of the chart.
3102 |
3103 | Value | Type | Details
3104 | --- | --- | ---
3105 | Parameter | String OR Object | String of new text OR Object with style and text.
3106 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQueuery)
3107 |
3108 | Setting just text.
3109 | ```javascript
3110 | $("#myChart").setTitle("Woohoo! New title!");
3111 | ```
3112 |
3113 | Setting text and style.
3114 | ```javascript
3115 | $("#myChart").setTitle({
3116 | text: "My fandangled chart",
3117 | color: "#F0F",
3118 | backgroundColor = "#333"
3119 | });
3120 | ```
3121 |
3122 |
3123 | #### .setSubtitle( string OR object )
3124 | Allows the subtitle to be set dynamically. This method accepts either a string or an object.
3125 | The string parameter is useful if you just with to set the subtitle's text and not style the subtitle.
3126 | The object parameter allows you to set both the text and the style for the subtitle of the chart.
3127 |
3128 | Value | Type | Details
3129 | --- | --- | ---
3130 | Parameter | String OR Object | String of new text OR Object with style and text.
3131 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQueuery)
3132 |
3133 | Setting just text.
3134 | ```javascript
3135 | $("#myChart").setSubitle("Catchy Subtitle");
3136 | ```
3137 |
3138 | Setting text and style.
3139 | ```javascript
3140 | $("#myChart").setSubtitle({
3141 | text: "Catchy Subtitle with Color!",
3142 | color: "#00BAF0",
3143 | backgroundColor:"#003849"
3144 | });
3145 | ```
3146 |
3147 |
3148 | #### .setType( string )
3149 | Allows the type of the chart to be set dynamically. Want to make your bar chart a line chart? Done. How about a scatter chart? Wha-bam! Party time.
3150 |
3151 | Value | Type | Details
3152 | --- | --- | ---
3153 | Parameter | String | [Chart Type](http://www.zingchart.com/docs/chart-types/)
3154 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQueuery)
3155 |
3156 | ```javascript
3157 | $("#myChart").setType("scatter");
3158 | ```
3159 |
3160 |
3161 | #### .drawTrendline( object )
3162 | Draws a trendline based off the data on the 0th plotindex. An optional object can be passed through to style the trendline.
3163 |
3164 | Value | Type | Details
3165 | --- | --- | ---
3166 | Parameter | Object | Trendline Style
3167 | Return | jQuery | [jQuery Object](http://api.jquery.com/Types/#jQueuery)
3168 |
3169 | Using default style.
3170 | ```javascript
3171 | $("#myChart").drawTrendline();
3172 | ```
3173 |
3174 | Using custom style.
3175 | ```javascript
3176 | $("#myChart").drawTrendline({
3177 | lineColor: "#0FF",
3178 | lineWidth: 1,
3179 | alpha: 1,
3180 | lineStyle: "solid"
3181 | });
3182 | ```
3183 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ZingChart-jQuery",
3 | "version": "2.0.0",
4 | "homepage": "https://github.com/zingchart/ZingChart-jQuery",
5 | "authors": [
6 | "ZingChart"
7 | ],
8 | "description": "ZingChart jQuery wrapper for the ZingChart charting library",
9 | "main": "zingchart.jquery.js",
10 | "keywords": [
11 | "ZingChart",
12 | "jQuery",
13 | "wrapper",
14 | "javascript charts",
15 | "html5 charts",
16 | "jquery charts",
17 | "charting library"
18 | ],
19 | "license": "MIT",
20 | "ignore": [
21 | "**/.*",
22 | "node_modules",
23 | "bower_components",
24 | "test",
25 | "tests"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------
/docs/ajax.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zingchart/ZingChart-jQuery/aa66a15b9807ff603121aad7659c06d29c82e52c/docs/ajax.gif
--------------------------------------------------------------------------------
/docs/chartManipulation.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zingchart/ZingChart-jQuery/aa66a15b9807ff603121aad7659c06d29c82e52c/docs/chartManipulation.gif
--------------------------------------------------------------------------------
/docs/chartToDom.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zingchart/ZingChart-jQuery/aa66a15b9807ff603121aad7659c06d29c82e52c/docs/chartToDom.gif
--------------------------------------------------------------------------------
/docs/domToChart.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zingchart/ZingChart-jQuery/aa66a15b9807ff603121aad7659c06d29c82e52c/docs/domToChart.gif
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
946 |
947 |
948 |
949 |
950 |
Example 1: Basic Usage
951 |
The jQuery plugin for ZingChart allows devs to create and manipulate charts, and generally access the ZingChart API, in familiar jQuery syntax.
952 |
The most basic usage of the plugin entails using jQuery to select an element to apply the chart to and calling .zingchart() on it:
953 |
$('#myDiv').zingchart();
954 |
Technically this will initiate a ZingChart jQuery object on the selected element, but we want to pass in some data for ZingChart to work with.
955 | The .zingchart() function takes one parameter, an object. This object
956 | can contain a variety of key-value pairs. The main one you'll need in order to render a chart is 'data'. This should be another object that corresponds with
957 | the JSON data structure passed to ZingChart's render() function as the 'data' variable, and the syntax should be as described here:
958 | http://www.zingchart.com/docs/json-attributes-syntax/.
The data has now been rendered in the '#myDiv' element. In most cases though, you'll probably want to save the ZingChart jQuery object
975 | you've just created to manipulate it later, e.g.:
976 |
var myChart = $('#myDiv').zingchart({ data: data });
977 |
978 |
Example 2: Executing functions on the ZingChart jQuery object
979 |
Once you've created a zingchart object, you can execute function on it in regular jQuery fashion.
This plugin takes the data from an HTML table and converts renders it in a ZingChart. It allows the user to submit JSON data along with the table
20 | when rendering, or to pull data from HTML5 custom data attributes.
21 |
22 | note: the JS code snippets below are assumed to be within a jQuery $(document).ready() block
23 |
24 |
Configuration
25 |
Using the plugin requires you include the following scripts:
26 |