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.

AttributeTypeInfo
ASYNCBoolean

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

bindFunction

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

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

execFunction

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

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

FONTFAMILYString

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

"Arial" | "Helvetica" | ...

FONTSIZENumeric

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

9 | 11 | ...

MODULESDIR  
unbindFunction

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

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

ZCOUTPUTBoolean

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

true | false | 1 | 0

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 
});
AttributeTypeDefaultInfo
auto-resize
autoResize
Boolean true | false | 1 | 0
background-color
backgroundColor
String "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
bgcolorString "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 | ...

cacheObject  
cache-control
cacheControl
String 

ZingChart has a default set of headers when making requests to external assets. You can control and turn that off on an individual chart basis on render.

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

colorString "none" | "transparent" | "#f00" | "#f00 #00f" | "red yellow" | "rgb(100, 15, 15)" | ...
containerString "mydiv_id"
csvdataStringnull"..."
customprogresslogoString 

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" | ...

dataObjectnull

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

{...}

dataurlString "myjson.php" | "http://www.domain.com/myjson.php" | ...
defaultsObject {...}
defaultsurlStringnull"mydefaults.php" | "http://www.domain.com/mydefaults.php" | ...
eventsObject{} 
exportdataurlString "dataexportscript.php" | ...
exportimageurlString "imageexportscript.php" | ...
fullscreenBooleanfalsetrue | false | 1 | 0
heightMixed450px

To set the height of the chart.

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

hideprogresslogoBooleanfalse

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

idStringnull

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"

localeString "en_us" | "fr" | "es" | ...
outputStringssvg"canvas" | "svg" | "vml" | "auto"
widthMixed100%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 ...
});
AttributeTypeInfo
apicallString

The name of the API call.

"reload" | "resize" | ...

idString

The ID of the chart.

"mydiv" | ...

Bind Method

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

zingchart.bind('id','eventName',function(event){ 
  ... event.value ...
});
AttributeTypeInfo
eventNameString

The name of the event.

"load" | "complete" | ...

handlerFunction

Handler fired when the event takes place.

function(params) {...}

idString

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

"mydiv" | null | ...

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

zingchart.unbind('id','eventName',function(event){ 
  ... event.value ...
});
AttributeTypeInfo
eventNameString

The name of the event.

"load" | "complete" | ...

handlerFunction

Handler fired when the event takes place.

function(params) {...}

idString

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

"mydiv" | null | ...