{"id":18678135,"url":"https://github.com/zingchart/zingchart-backbone","last_synced_at":"2026-03-07T17:33:18.247Z","repository":{"id":30576507,"uuid":"34131508","full_name":"zingchart/ZingChart-Backbone","owner":"zingchart","description":"Turn simple Models and Views into snazzy charts with our Backbone extension for ZingChart","archived":false,"fork":false,"pushed_at":"2023-12-20T23:04:26.000Z","size":49,"stargazers_count":20,"open_issues_count":0,"forks_count":2,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-06-21T12:38:15.714Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.zingchart.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zingchart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-04-17T17:53:08.000Z","updated_at":"2023-12-20T23:04:30.000Z","dependencies_parsed_at":"2024-11-07T09:38:28.016Z","dependency_job_id":"d502ca1c-9765-4765-a24a-5700c19cd38d","html_url":"https://github.com/zingchart/ZingChart-Backbone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zingchart/ZingChart-Backbone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2FZingChart-Backbone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2FZingChart-Backbone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2FZingChart-Backbone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2FZingChart-Backbone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingchart","download_url":"https://codeload.github.com/zingchart/ZingChart-Backbone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2FZingChart-Backbone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30223405,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T17:00:40.062Z","status":"ssl_error","status_checked_at":"2026-03-07T17:00:39.026Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-07T09:36:08.250Z","updated_at":"2026-03-07T17:33:18.207Z","avatar_url":"https://github.com/zingchart.png","language":"JavaScript","readme":"# Backbone.ZingChart\n\n**Turning simple Models and Views into snazzy charts.**\n\n\n\n## About\n\nBackbone.ZingChart is a lighweight Backbone extension that allows for fast and simple creation of charts with a traditional Model and View structure.\n\n## Installation\n\n**Use our CDN**:\nThe 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.\n\n```\n\u003cscript src=\"cdn.zingchart.com/zingchart.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"cdn.zingchart.com/backbone/backbone.zingchart.min.js\"\u003e\u003c/script\u003e\n```\n\nThe first script loads the ZingChart file and the second one loads the actual backbone.zingchart wrapper. Both are necessary for this wrapper to work.\n\n**Install with Bower**:\nThe 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.\n\n**Git Clone**:\nAlternatively, you could simply clone this repo.\n\n\n\n## Getting Started\n\nView the files in the [example directory](examples) for working samples.\n\nYou 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.\n\nIn 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.\n\nA simple example:\n\n```javascript\n// Create ZingChart Model Passing in Data to Plot\nvar chartData = new ZingChart.ZingChartModel(\n            {\n                data: [[3,2,3,3,9] , [1,2,3,4,5]],\n                charttype: 'bar',\n                width: 500,\n                height: 400\n            });\n\n\n// Render the Chart\n// Note that the el must already be added to the DOM\nvar chartView = new ZingChart.ZingChartView({model: chartData, el: $('#chartDiv')});\nchartView.render();\n```\nPassing in a full JSON structure:\n\n```javascript\nvar json = {    \n            \"type\":\"pie\",\n            \"series\":[\n                {\n                    \"text\":\"Apples\",\n                    \"values\":[5]\n                },\n                {\n                    \"text\":\"Oranges\",\n                    \"values\":[8]\n                },\n                {\n                    \"text\":\"Bananas\",\n                    \"values\":[22]\n                }\n            ]\n        };\n        \nvar chartData = new ZingChart.ZingChartModel(\n            {\n                json: json\n            });\n\n\n// Render the Chart\n// Note that the el must already be added to the DOM\nvar chartView = new ZingChart.ZingChartView({model: chartData, el: $('#chartDiv')});\nchartView.render();\n\n\n```\n\nAfter the chart is rendered, it is possible to change the json or data simply by updating the `ZingChartModel.json` or `ZingChartModel.data` property respectively.\n\n#### Change the Chart Data:\n\n```javascript\nvar newData = [\n\t[50,32,36,8,10],\n\t[34,64,23,54,41],\n\t[12,43,51,39,29]\n];\n\nchartData.set('data', newData);\n\n```\n\n#### Change the entire Chart JSON:\n\n```javascript\nvar newJSON = {\n\t\"type\":\"area\",\n\t\"series\":[\n\t   \t{\n       \t\"values\":[11,36,7,44,11,28,42,26,13,32,12,24,16,11,43,39]\n\t   \t},\n\t   \t{\n       \t\"values\":[21,29,14,16,28,35,21,18,11,7,4,9,25,15,33,13]\n\t   \t}\n\t]\n};\n  \nchartData.set('json', newJSON);\n\n```\n\nThe 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/).  \n\nYou can access the API methods by calling the view's `exec` method.\n\n```javascript\nvar values = [39,26,54,28,51,44];\n\nchartView.exec('addplot', {\n\tdata : {\n   \t\tvalues : values\n   }\n });\n  \n```\n\nIf you include the extended javascript file, there is individual access to every API method.\n\n```javascript\nvar values = [39,26,54,28,51,44];\n\nchartView.addPlot({\n\tdata:{\n   \t\tvalues: values\n   }\n});\n\n```\n\nYou can access the API events by using the view's bind method to bind to the ZingChart events.\n\n```javascript\nchartView.bind('legend_item_click', myClickCallback);\n\n```\n\n\nIf you include the extended javascript file, there is individual access to all of the events.\n\n```javascript\nchartView.legendItemClick(myClickCallback);\n```\n\n### ZingChart.ZingChartModel\nRepresents ZingChart object. Extends Backbone.Model.\n                \n#### Properties\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eProperty\u003c/td\u003e\u003ctd\u003eDefault Value\u003c/td\u003e\u003ctd\u003eDescription\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003echarttype\u003c/td\u003e\n\t\t\u003ctd\u003eline\u003c/td\u003e\n\t\t\u003ctd\u003eThe chart type.  Only used if rendering from data and not from full JSON\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003edata\u003c/td\u003e\n\t\t\u003ctd\u003e[]\u003c/td\u003e\n\t\t\u003ctd\u003eArray of chart data.  A chart can be automatically generated based soley on the data.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003edefaults\u003c/td\u003e\n\t\t\u003ctd\u003e{}\u003c/td\u003e\n\t\t\u003ctd\u003eObject 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\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eheight\u003c/td\u003e\n\t\t\u003ctd\u003e480\u003c/td\u003e\n\t\t\u003ctd\u003eThe height of the rendered chart.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003ejson\u003c/td\u003e\n\t\t\u003ctd\u003e{}\u003c/td\u003e\n\t\t\u003ctd\u003eA complete ZingChart JSON packet.\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd\u003ewidth\u003c/td\u003e\n\t\t\u003ctd\u003e640\u003c/td\u003e\n\t\t\u003ctd\u003eThe width of the rendered chart.\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n## Documentation\n\n### ZingChart.ZingChartView\n\nView controller for a ZingChart.ZingChartView. Extends Backbone.View.\n\n#### Properties\n\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eProperty\u003c/td\u003e\n\t\t\u003ctd\u003eDefault Value\u003c/td\u003e\n\t\t\u003ctd\u003eDescription\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eel\u003c/td\u003e\n\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\u003ctd\u003eThe el where the chart should be rendered.  The el must already be included in the DOM.\u003c/td\u003e\n\t\u003c/tr\u003e\n    \u003ctr\u003e\n\t\t\u003ctd\u003emodel\u003c/td\u003e\n\t\t\u003ctd\u003eZingChart.ZingChartView\u003c/td\u003e\n\t\t\u003ctd\u003eThe model that is used to generate the ZingChart.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\n\u003c/table\u003e\n\n\n#### Methods\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eMethod\u003c/td\u003e\n\t\t\u003ctd\u003eParameters\u003c/td\u003e\n\t\t\u003ctd\u003eReturn Value\u003c/td\u003e\n\t\t\u003ctd\u003eDescription\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003erender\u003c/td\u003e\n\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\u003ctd\u003eRenders the ZingChart in the given el based on the ZingChartModel data.\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003ebind\u003c/td\u003e\n\t\t\u003ctd\u003eeventname, callback\u003c/td\u003e\n\t\t\u003ctd\u003ethis\u003c/td\u003e\n\t\t\u003ctd\u003eBinds the ZingChart event to the given callback.  \u003ca href=\"http://www.zingchart.com/docs/api/api-events/\"\u003eView ZingChart Events\u003c/a\u003e \u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eexec\u003c/td\u003e\n\t\t\u003ctd\u003eapimethod, apioptions\u003c/td\u003e\n\t\t\u003ctd\u003eThe results of the API call\u003c/td\u003e\n\t\t\u003ctd\u003eCalls a ZingChart API method and passes it the given options.  \u003ca href=\"http://www.zingchart.com/docs/api/api-methods/\"\u003eView ZingChart Methods\u003c/a\u003e \u003c/td\u003e\n\t\u003c/tr\u003e\n\t\n\u003c/table\u003e\n\n## In The Wild...\n\nHere 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.\n\nIf you're using the backbone-zingchart extension on your own project, \u003ca href=\"mailto:support@zingchart.com?Subject=Backbone-ZingChart%20in%20the%20Wild\" target=\"_top\"\u003elet us know!\u003c/a\u003e We'd love to feature it.\n\n## Issues\n\nFound a bug or have a feature request? Submit an issue and we'll get to work.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-backbone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingchart%2Fzingchart-backbone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-backbone/lists"}