https://github.com/zingchart/zingchart-backbone
Turn simple Models and Views into snazzy charts with our Backbone extension for ZingChart
https://github.com/zingchart/zingchart-backbone
Last synced: about 2 months ago
JSON representation
Turn simple Models and Views into snazzy charts with our Backbone extension for ZingChart
- Host: GitHub
- URL: https://github.com/zingchart/zingchart-backbone
- Owner: zingchart
- License: mit
- Created: 2015-04-17T17:53:08.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2023-12-20T23:04:26.000Z (over 2 years ago)
- Last Synced: 2025-06-21T12:38:15.714Z (10 months ago)
- Language: JavaScript
- Homepage: https://www.zingchart.com/
- Size: 47.9 KB
- Stars: 20
- Watchers: 16
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Backbone.ZingChart
**Turning simple Models and Views into snazzy charts.**
## About
Backbone.ZingChart is a lighweight Backbone extension that allows for fast and simple creation of charts with a traditional Model and View structure.
## Installation
**Use our CDN**:
The easiest way to get started with backbone.zingchart is to use our [snazzy CDN](http://cdn.zingchart.com/). Just paste these scripts in your HTML file **after** your backbone.js file.
```
```
The first script loads the ZingChart file and the second one loads the actual backbone.zingchart wrapper. Both are necessary for this wrapper to work.
**Install with Bower**:
The next simplest solution is to install via [bower](http://bower.io/). Just use `bower install backbone-zingchart` and reference the script in your HTML file **after** your backbone.js file.
**Git Clone**:
Alternatively, you could simply clone this repo.
## Getting Started
View the files in the [example directory](examples) for working samples.
You must have the ZingChart library loaded. We suggest you use our [CDN](http://cdn.zingchart.com/) to keep up to date with the latest build.
In addition, you must include this library. We support inclusion through [require.js](http://requirejs.org/) and you can view an example in the examples directory. For now, we will do a simple script include.
A simple example:
```javascript
// Create ZingChart Model Passing in Data to Plot
var chartData = new ZingChart.ZingChartModel(
{
data: [[3,2,3,3,9] , [1,2,3,4,5]],
charttype: 'bar',
width: 500,
height: 400
});
// Render the Chart
// Note that the el must already be added to the DOM
var chartView = new ZingChart.ZingChartView({model: chartData, el: $('#chartDiv')});
chartView.render();
```
Passing in a full JSON structure:
```javascript
var json = {
"type":"pie",
"series":[
{
"text":"Apples",
"values":[5]
},
{
"text":"Oranges",
"values":[8]
},
{
"text":"Bananas",
"values":[22]
}
]
};
var chartData = new ZingChart.ZingChartModel(
{
json: json
});
// Render the Chart
// Note that the el must already be added to the DOM
var chartView = new ZingChart.ZingChartView({model: chartData, el: $('#chartDiv')});
chartView.render();
```
After the chart is rendered, it is possible to change the json or data simply by updating the `ZingChartModel.json` or `ZingChartModel.data` property respectively.
#### Change the Chart Data:
```javascript
var newData = [
[50,32,36,8,10],
[34,64,23,54,41],
[12,43,51,39,29]
];
chartData.set('data', newData);
```
#### Change the entire Chart JSON:
```javascript
var newJSON = {
"type":"area",
"series":[
{
"values":[11,36,7,44,11,28,42,26,13,32,12,24,16,11,43,39]
},
{
"values":[21,29,14,16,28,35,21,18,11,7,4,9,25,15,33,13]
}
]
};
chartData.set('json', newJSON);
```
The Extension includes full access to the ZingChart API [methods](http://www.zingchart.com/docs/api/api-methods/) and [events](http://www.zingchart.com/docs/api/api-events/).
You can access the API methods by calling the view's `exec` method.
```javascript
var values = [39,26,54,28,51,44];
chartView.exec('addplot', {
data : {
values : values
}
});
```
If you include the extended javascript file, there is individual access to every API method.
```javascript
var values = [39,26,54,28,51,44];
chartView.addPlot({
data:{
values: values
}
});
```
You can access the API events by using the view's bind method to bind to the ZingChart events.
```javascript
chartView.bind('legend_item_click', myClickCallback);
```
If you include the extended javascript file, there is individual access to all of the events.
```javascript
chartView.legendItemClick(myClickCallback);
```
### ZingChart.ZingChartModel
Represents ZingChart object. Extends Backbone.Model.
#### Properties
PropertyDefault ValueDescription
charttype
line
The chart type. Only used if rendering from data and not from full JSON
data
[]
Array of chart data. A chart can be automatically generated based soley on the data.
defaults
{}
Object of default render settings. Can be used to apply settings to all charts rendered from that model, even ones rendered from updates to json or data
height
480
The height of the rendered chart.
json
{}
A complete ZingChart JSON packet.
width
640
The width of the rendered chart.
## Documentation
### ZingChart.ZingChartView
View controller for a ZingChart.ZingChartView. Extends Backbone.View.
#### Properties
Property
Default Value
Description
el
The el where the chart should be rendered. The el must already be included in the DOM.
model
ZingChart.ZingChartView
The model that is used to generate the ZingChart.
#### Methods
Method
Parameters
Return Value
Description
render
Renders the ZingChart in the given el based on the ZingChartModel data.
bind
eventname, callback
this
Binds the ZingChart event to the given callback. View ZingChart Events
exec
apimethod, apioptions
The results of the API call
Calls a ZingChart API method and passes it the given options. View ZingChart Methods
## In The Wild...
Here at ZingChart, we're currently using this extension on our [gallery chart view](http://www.zingchart.com/gallery/chart/#mixed-time-series-zoom). It allows us to tie the a `ZingChartModel` and `ZingChartView` to our Chart view, allowing for streamlined updating of charts via AJAX. The result is a smaller codebase and less boilerplate.
If you're using the backbone-zingchart extension on your own project, let us know! We'd love to feature it.
## Issues
Found a bug or have a feature request? Submit an issue and we'll get to work.