ZingChart Render
ZingChart.render()
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, // Set to 100% to fully scale to parent container width: '100%', // Default output: 'svg', // Default customprogresslogo: 'bl', // Placement of ZingChart watermark });
| 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 {...} |
| 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 datasets). 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 "mydiv_id" |
| locale | String | "en_us" | "fr" | "es" | ... |
| output | String | "canvas" | "svg" | "vml" | "auto" |
| width | Mixed | 300 | "100%" | "auto" | ... |
Summary
The ZingChart render method has many configuration options to allow you to modify and render your charts.For more information on the ZingChart object, see the ZingChart object page.