Blog Help & Support Contact About Login

 Show Nav

ZingChart Object and Methods

Overview

The ZingChart object contains properties to set global attributes such as general font face or size. The object also contains three important methods: the render method (zingchart.render()), which controls the rendering formats and characteristics to display the chart; the exec method (zingchart.exec()), which provides a mechanism to invoke various API calls on a chart; and the bind (zingchart.bind()) and unbind (zingchart.unbind()) methods, which listen for events that occur in the chart, and then do something with that event.

ZingChart Object

The ZingChart object contains the necessary properties and methods for chart rendering.

Attribute Type Info
ASYNC Boolean

Renders the chart in "steps", providing faster (but incremental) visual results. This is useful in case of big charts that take longer time to render.

true | false | 1 | 0

bind Function

Binds an event to a chart (or to all charts in a page).

zingchart.bind("id", "eventName", function() {...})

exec Function

The API entry method, used to call various API commands against the chart.

zingchart.exec("id", "call", {...})

FONTFAMILY String

Global setting for the font family used by all the elements of the library.

"Arial" | "Helvetica" | ...

FONTSIZE Numeric

Global setting for the font size used by all the elements of the library.

9 | 11 | ...

MODULESDIR
render Function

Main rendering method.

unbind Function

Unbinds an event from a chart (or from all charts in a page).

zingchart.bind("id", "eventName", function() {...})

ZCOUTPUT Boolean

Sets whether an optional parameter called zcoutput, containing the rendering option, will be passed for every data request.

true | false | 1 | 0

Methods

The ZingChart object has various methods, specifically the render method, exec method (for API methods), and bind and unbind methods (for API events).

Render Method

The ZingChart render method is used to set various chart render options. At a minimum, you must specify the id and data elements for the chart to properly render and display.

zingchart.render({ 
  id : 'myChart', 
  data : { ... }, 
  height: 400, 
  width: 600 
});
Attribute Type Info
auto-resize
autoResize
Boolean

 

true | false | 1 | 0

background-color
backgroundColor
String

 

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

bgcolor String

 

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

border-color
borderColor
String

 

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

border-width
borderWidth
Numeric

To set the width of the chart.

1 | 5 | ...

cache Object

 

{
      data: true | false
      defaults: true | false
      css: true | false
      csv: true | false
      }

cache-control
cacheControl
String

 

"http-headers" | "query-string" | "none"

color String

 

"none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...

container String

 

"mydiv_id"

csvdata String

 

"..."

customprogresslogo String

Allows user to specify what image appears on the loading screen, in lieu of the default ZingChart logo. Refer to our documentation on Removing ZingChart Branding for more information.

"image.png" | ...

data Object

The chart data. For the chart to properly render, this and the id element are required.

{...}

dataurl String

 

"myjson.php" | "http://www.domain.com/myjson.php" | ...

defaults Object

 

{...}

defaultsurl String

 

"mydefaults.php" | "http://www.domain.com/mydefaults.php" | ...

events Object

 

{
      complete: function(p) { ... }
      load: function(p) { ... }
      ...
      }

exportdataurl String

 

"dataexportscript.php" | ...

exportimageurl String

 

"imageexportscript.php" | ...

fullscreen Boolean

 

true | false | 1 | 0

height Mixed

To set the height of the chart.

300 | "100%" | "auto" | ...

hideprogresslogo Boolean

To hide or remove the ZingChart logo that appears on the loading screen (generally only visible on charts with larger data sets). Refer to our documentation on Removing ZingChart Branding for more information.

true | false | 1 | 0

id String

The element in the HTML document where you want the chart to render. For the chart to properly render, this and the data element are required.

"mydiv_id"

locale String

 

"en_us" | "fr" | "es" | ...

output String

 

"canvas" | "svg" | "vml" | "auto"

width Mixed

 

300 | "100%" | "auto" | ...

API Methods

The exec method is used with API methods, allowing you to act upon your chart (e.g., adding nodes, removing nodes). Refer to our documentation on API Methods for more information.

Exec Method

The API entry method, used to call various API commands against the chart.

zingchart.exec(id,'apicall',{
 ... options ...
});
Attribute Type Info
apicall String

The name of the API call.

"reload" | "resize" | ...

id String

The ID of the chart.

"mydiv" | ...

API Events

The bind and unbind methods are used with API events, allowing you to listen for events that happen in the chart (e.g., node mouseover, node click), and then doing something with that event. Refer to our documentation on API Events for more information.

Bind Method

Binds an event to a chart (or to all charts in a page).

zingchart.bind('id','eventName',function(event){ 
  ... event.value ...
});
Attribute Type Info
eventName String

The name of the event.

"load" | "complete" | ...

handler Function

Handler fired when the event takes place.

function(params) {...}

id String

The ID of the chart or null if event is bound to all the charts in a page.

"mydiv" | null | ...

Unbind Method

Unbinds an event from a chart (or from all charts in a page).

zingchart.unbind('id','eventName',function(event){ 
  ... event.value ...
});
Attribute Type Info
eventName String

The name of the event.

"load" | "complete" | ...

handler Function

Handler fired when the event takes place.

function(params) {...}

id String

The ID of the chart or null if event is bound to all the charts in a page.

"mydiv" | null | ...

Summary

Got a question about how the ZingChart object and its methods work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.