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
ASYNCBooleanRenders 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

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

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

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

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

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

"Arial" | "Helvetica" | ...

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

9 | 11 | ...

MODULESDIR
renderFunctionMain rendering method.
unbindFunctionUnbinds an event from a chart (or from all charts in a page).

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

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

true | false | 1 | 0

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 
});
        

"none" | "transparent" | "#f00" | "#f00


          
    #00f" | "red yellow" | "rgb(100, 15, 15)" | ...</td>
</tr>
<tr>
  <td style="text-align:left">bgcolor</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"none" | "transparent" | "#f00" | "#f00
    #00f" | "red yellow" | "rgb(100, 15, 15)" | ...</td>
</tr>
<tr>
  <td style="text-align:left">border-color
    <br />borderColor</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"none" | "transparent" | "#f00" | "#f00
    #00f" | "red yellow" | "rgb(100, 15, 15)" | ...</td>
</tr>
<tr>
  <td style="text-align:left">border-width
    <br />borderWidth</td>
  <td style="text-align:left">Numeric</td>
  <td style="text-align:left">
    <p>To set the width of the chart.</p>
    <p>1 | 5 | ...</p>
  </td>
</tr>
<tr>
  <td style="text-align:left">cache</td>
  <td style="text-align:left">Object</td>
  <td style="text-align:left"><code>{ data: true | false defaults: true | false css: true | false csv: true | false }</code>
  </td>
</tr>
<tr>
  <td style="text-align:left">cache-control
    <br />cacheControl</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"http-headers" | "query-string" | "none"</td>
</tr>
<tr>
  <td style="text-align:left">color</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"none" | "transparent" | "#f00" | "#f00
    #00f" | "red yellow" | "rgb(100, 15, 15)" | ...</td>
</tr>
<tr>
  <td style="text-align:left">container</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"mydiv_id"</td>
</tr>
<tr>
  <td style="text-align:left">csvdata</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"..."</td>
</tr>
<tr>
  <td style="text-align:left">customprogresslogo</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">
    <p>Allows user to specify what image appears on the loading screen, in lieu
      of the default ZingChart logo. Refer to our documentation on <a href="https://www.zingchart.com/docs/faq/removing-zingchart-branding/">Removing ZingChart Branding</a> for
      more information.</p>
    <p>"image.png" | ...</p>
  </td>
</tr>
<tr>
  <td style="text-align:left">data</td>
  <td style="text-align:left">Object</td>
  <td style="text-align:left">
    <p>The chart data. For the chart to properly render, this and the <code>id</code> element
      are required.</p>
    <p>{...}</p>
  </td>
</tr>
<tr>
  <td style="text-align:left">dataurl</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"myjson.php" | "http://www.domain.com/myjson.php"
    | ...</td>
</tr>
<tr>
  <td style="text-align:left">defaults</td>
  <td style="text-align:left">Object</td>
  <td style="text-align:left">{...}</td>
</tr>
<tr>
  <td style="text-align:left">defaultsurl</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"mydefaults.php" | "http://www.domain.com/mydefaults.php"
    | ...</td>
</tr>
<tr>
  <td style="text-align:left">events</td>
  <td style="text-align:left">Object</td>
  <td style="text-align:left"><code>{ complete: function(p) { ... } load: function(p) { ... } ... }</code>
  </td>
</tr>
<tr>
  <td style="text-align:left">exportdataurl</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"dataexportscript.php" | ...</td>
</tr>
<tr>
  <td style="text-align:left">exportimageurl</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"imageexportscript.php" | ...</td>
</tr>
<tr>
  <td style="text-align:left">fullscreen</td>
  <td style="text-align:left">Boolean</td>
  <td style="text-align:left">true | false | 1 | 0</td>
</tr>
<tr>
  <td style="text-align:left">height</td>
  <td style="text-align:left">Mixed</td>
  <td style="text-align:left">
    <p>To set the height of the chart.</p>
    <p>300 | "100%" | "auto" | ...</p>
  </td>
</tr>
<tr>
  <td style="text-align:left">hideprogresslogo</td>
  <td style="text-align:left">Boolean</td>
  <td style="text-align:left">
    <p>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 <a href="https://www.zingchart.com/docs/faq/removing-zingchart-branding/">Removing ZingChart Branding</a> for
      more information.</p>
    <p>true | false | 1 | 0</p>
  </td>
</tr>
<tr>
  <td style="text-align:left">id</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">
    <p>The element in the HTML document where you want the chart to render. For
      the chart to properly render, this and the <code>data</code> element are
      required.</p>
    <p>"mydiv_id"</p>
  </td>
</tr>
<tr>
  <td style="text-align:left">locale</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"en_us" | "fr" | "es" | ...</td>
</tr>
<tr>
  <td style="text-align:left">output</td>
  <td style="text-align:left">String</td>
  <td style="text-align:left">"canvas" | "svg" | "vml" | "auto"</td>
</tr>
<tr>
  <td style="text-align:left">width</td>
  <td style="text-align:left">Mixed</td>
  <td style="text-align:left">300 | "100%" | "auto" | ...</td>
</tr>
        

#### 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
apicallStringThe name of the API call.

"reload" | "resize" | ...

idStringThe ID of the chart.

"mydiv" | ...

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 ...
});
        
AttributeTypeInfo
eventNameStringThe name of the event.

"load" | "complete" | ...

handlerFunctionHandler fired when the event takes place.

function(params) {...}

idStringThe 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
eventNameStringThe name of the event.

"load" | "complete" | ...

handlerFunctionHandler fired when the event takes place.

function(params) {...}

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

"mydiv" | null | ...

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.