{"id":16702,"date":"2018-01-08T12:54:47","date_gmt":"2018-01-08T07:24:47","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16702"},"modified":"2026-01-20T14:37:29","modified_gmt":"2026-01-20T09:07:29","slug":"backbone-js-charts","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/","title":{"rendered":"How to Create Charts in Backbone.js: 2026 Legacy Fix"},"content":{"rendered":"Released in 2010 Backbone.js is a javascript library which gives structure to web applications. Being one of the frameworks, it provides models with key-value binding and custom events. Backbone.js is used in many places for the development purpose. Some of the big names are listed below:\r\n<ul>\r\n \t<li>Trello<\/li>\r\n \t<li>USA Today<\/li>\r\n \t<li>DocumentCloud<\/li>\r\n \t<li>Quartz<\/li>\r\n \t<li>Vox<\/li>\r\n \t<li>Gawker Media<\/li>\r\n \t<li>NewsBlur, etc<\/li>\r\n<\/ul>\r\nBackbone.js also allows structuring of Javascript code in MVC format. It allows you to save the state of your Javascript application via URL. In Backbone.js Models and Collections are not linked to the databases. They are linked to the REST interfaces from the backend. Backbone.js adopts an imperative programming style when it handles the DOM.\r\n\r\nBackbone.js is designed to develop single-page web applications and also for keeping various parts of web applications synchronized. Backbone.js is one of the lightweight libraries, and that is why it is mostly used to structure client-side applications.\r\n<h2>When to use Backbone.js<\/h2>\r\nBackbone.js is useful when you want to represent your data as models. These models can be created, validated, destroyed and saved to the server. This whole process is also known as CRUD.\r\nBackbone.js provides a better design with less code as its functionalities are well organized and are structured to develop your application.\r\n\r\nIn this tutorial, we\u2019ll go through a step by step process of how to render charts using FusionCharts with backbone.js.\r\n<h2>Integrating FusionCharts with Backbone.js<\/h2>\r\n<strong>Algorithm<\/strong>\r\n\r\n<strong>Step 1<\/strong>\r\nCreate the Backbone view which holds an HTML template with the model object.\r\n\r\n<em>Note:<\/em> Before that make sure you have included all the CDN links to render a backbone sample.\r\n\r\nList of the CDN links to be added are as follows:\r\n<code>https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js<\/code>\r\n<code>https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/backbone.js\/1.3.3\/backbone-min.js<\/code>\r\n<code>https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/underscore.js\/1.8.3\/underscore-min.js<\/code>\r\n\r\nNote: To create a project using Backbone framework, the framework is dependent on the above CDN links. The major dependencies are on jquery plugin and underscore js. Jquery plugin is used to handle the internal DOM elements whereas underscore js takes care of mapping and invoking methods. To know more about the CDN dependencies click <a href=\"https:\/\/backbonejs.org\/\" target=\"_blank\" rel=\"noopener\">here<\/a>.\r\n\r\n<strong>Step 2<\/strong>\r\n\r\nThe view object takes a parameter <code>el<\/code> which is the container, as every view has an element associated in with HTML where the content will be rendered. Next, declare the initialize method which is the first function to be called when the view is instantiated. Once the declaration is done, create the render method on which we will be writing the FusionCharts object. Write the implementation code to render the chart. As the primary architecture is ready, let&#8217;s create the UI of the page. The brief code snippet of the above steps are shown below:\r\n<pre class=\"lang:js decode:true\">var AppView = Backbone.View.extend({\r\n  \/\/ el - stands for element. Every view has a element associate in with HTML\r\n  \/\/      content will be rendered.\r\n  el: '#container',\r\n  \/\/ It's the first function called when this view it's instantiated.\r\n  initialize: function() {\r\n    this.render();\r\n  },\r\n  render: function() {\r\n\u2026..\/\/ FusionCharts code here\r\n}\r\n }\r\n});\r\nvar appView = new AppView();\r\n<\/pre>\r\n<strong>Step 3<\/strong>\r\n\r\nCreate all the HTML elements based on the requirements.\r\n<pre class=\"lang:js decode:true\">&lt;div class=\"wrapper\"&gt;\r\n  &lt;div class=\"header\"&gt;\r\n    &lt;a href=\"https:\/\/www.fusioncharts.com\" class=\"logo-wrapper\"&gt;&lt;img src=\"https:\/\/www.fusioncharts.com\/apple-touch-icon-114x114.png\" alt=\"\"&gt;&lt;\/a&gt;\r\n    &lt;ul class=\"thumbnails\"&gt;\r\n      &lt;li&gt;\r\n        &lt;div id=\"thumbnail-column\" class=\"thumbnail\"&gt;&lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div id=\"thumbnail-pie\" class=\"thumbnail\"&gt;&lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div id=\"thumbnail-bar\" class=\"thumbnail\"&gt;&lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n      &lt;li&gt;\r\n        &lt;div id=\"thumbnail-line\" class=\"thumbnail\"&gt;&lt;\/div&gt;\r\n      &lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"container\"&gt;\r\n    &lt;div class=\"left-column\"&gt;\r\n      &lt;ul class=\"properties\"&gt;\r\n        &lt;li&gt;\r\n          &lt;h2&gt;Data Value&lt;\/h2&gt;\r\n\r\n          &lt;div class=\"property\"&gt;\r\n            &lt;label&gt;\r\n              &lt;input name='dv' id='show' type='radio' value='1' checked=\"true\" \/&gt; Show&lt;\/label&gt;\r\n            &lt;label&gt;\r\n              &lt;br&gt;\r\n              &lt;input name='dv' id='hide' type='radio' value='0' \/&gt; Hide\r\n            &lt;\/label&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/li&gt;\r\n        &lt;li&gt;\r\n          &lt;br&gt;\r\n          &lt;h2&gt;Animation&lt;\/h2&gt;\r\n\r\n          &lt;div class=\"property\"&gt;\r\n            &lt;label&gt;\r\n              &lt;input name='anim' id='show' type='radio' value='1' \/&gt; On &lt;\/label&gt;\r\n            &lt;label&gt;\r\n              &lt;br&gt;\r\n              &lt;input name='anim' id='hide' type='radio' value='0' \/&gt; Off\r\n            &lt;\/label&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/li&gt;\r\n        &lt;li&gt;\r\n          &lt;br&gt;\r\n          &lt;h2&gt;Theme Manager&lt;\/h2&gt;\r\n\r\n          &lt;div class=\"property\"&gt;\r\n            &lt;label&gt;\r\n              &lt;input name='dh' id='c-theme' type='radio' value='carbontheme'\/&gt; Carbon&lt;\/label&gt;\r\n            &lt;label&gt;\r\n              &lt;br&gt;\r\n              &lt;input name='dh' id='z-theme' type='radio' value='zunetheme'\/&gt; Zune\r\n            &lt;\/label&gt;\r\n          &lt;\/div&gt;\r\n        &lt;\/li&gt;\r\n      &lt;\/ul&gt;\r\n    &lt;\/div&gt;\r\n    &lt;div class=\"right-column\"&gt;\r\n      &lt;div id=\"chart-container\" class=\"chart-container\"&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\r\n<strong>Step 4<\/strong>\r\n\r\nNow, the <code>FusionCharts.ready<\/code> method is called which contains an object <code>chartData<\/code>. <code>chartData<\/code> holds the dataSource of all the charts.\r\n\r\nSome more CDN links should be added in order to render FusionCharts, those are as follows:\r\n<code>https:\/\/static.fusioncharts.com\/code\/latest\/fusioncharts.js<\/code>\r\n<code>https:\/\/static.fusioncharts.com\/code\/latest\/themes\/fusioncharts.theme.ocean.js<\/code>\r\n<code>https:\/\/static.fusioncharts.com\/code\/latest\/themes\/fusioncharts.theme.carbon.js<\/code>\r\n<code>https:\/\/static.fusioncharts.com\/code\/latest\/themes\/fusioncharts.theme.zune.js<\/code>\r\n\r\nGiven below is the content for the chartData:\r\n<pre class=\"lang:js decode:true \"> chartData = {\r\n          \"chart\": {\r\n            \"caption\": \"Top 5 Companies Of 2017\",\r\n            \"subCaption\": \"Based on Market Value (In Millions)\",\r\n            \"yAxisName\": \"Market Value\",\r\n            \"numberPrefix\": \"$\",\r\n            \"theme\": \"ocean\",\r\n            \"bgcolor\": \"#DCEAFC\",\r\n            \"canvasbgcolor\": \"#DCEAFC\",\r\n            \"canvasbgalpha\": \"10\",\r\n            \"rotateValues\": \"1\",\r\n            \"exportEnabled\": \"1\",\r\n            \"transposeAnimation\": \"1\",\r\n            \"pieRadius\": \"70\"\r\n          },\r\n\r\n          \"data\": [{\r\n            \"label\": \"Apple\",\r\n            \"value\": \"752\"\r\n          }, {\r\n            \"label\": \"Alphabet\",\r\n            \"value\": \"579.5\"\r\n          }, {\r\n            \"label\": \"Microsoft\",\r\n            \"value\": \"507.5\"\r\n          }, {\r\n            \"label\": \"Amazon\",\r\n            \"value\": \"427\"\r\n          }, {\r\n            \"label\": \"Berkshire Hathaway\",\r\n            \"value\": \"409.9\"\r\n          }]\r\n        }\r\n<\/pre>\r\n<strong>Step 5<\/strong>\r\n\r\nCreate all the chart instance required to draw the charts. Example:\r\n<pre class=\"lang:js decode:true \">revenueChartColumn = new FusionCharts({\r\n          type: 'column2d',\r\n          renderAt: 'chart-container',\r\n          width: '420',\r\n          height: '350',\r\n          dataFormat: 'json',\r\n          id: 'revenue-chart-column',\r\n          dataSource: chartData\r\n        })\r\n<\/pre>\r\n<strong>Step 6<\/strong>\r\n\r\nCreate a method <code>createThumbNail<\/code> for the thumbnails of our chart. The chart will be rendered when we click on the thumbnails, using the method created. The code snippet is shown below:\r\n<pre class=\"lang:js decode:true\">createThumbNail = function(chartId, width, height, divId) {\r\n\r\n          chartRef = FusionCharts(chartId),\r\n            clonedChart = chartRef.clone({\r\n              \"width\": width,\r\n              \"height\": height\r\n            });\r\n          clonedChart.setChartAttribute({\r\n            \"showValues\": \"0\",\r\n            \"showLabels\": \"0\",\r\n            \"animation\": \"0\",\r\n            \"exportEnabled\": \"0\",\r\n            \"showTooltip\": \"0\",\r\n            \"showHoverEffect\": \"0\",\r\n            \"showYAxisValues\": \"0\",\r\n            \"caption\": \"\",\r\n            \"subCaption\": \"\",\r\n            \"xAxisName\": \"\",\r\n            \"pieRadius\": \"30\",\r\n            \"yAxisName\": \"\",\r\n            \"showXAxisLine\": \"0\",\r\n            \"showYAxisLine\": \"0\",\r\n            \"numDivLines\": \"0\",\r\n            \"enableSlicing\": \"0\",\r\n            \"enableRotation\": \"0\"\r\n          });\r\n\r\n\r\n          clonedChart.addEventListener('chartClick', function() {\r\n            var tmpData = chartinfo.getJSONData();\r\n\r\n            FusionCharts(chartId).setJSONData(tmpData);\r\n            FusionCharts(chartId).render('chart-container');\r\n            chartinfo = FusionCharts(chartId);\r\n          });\r\n          clonedChart.render(divId, 'append');\r\n        },\r\n\r\n\r\n        \/\/ create thumbnails for all the three charts\r\n        createThumbNail('revenue-chart-column', 95, 90, 'thumbnail-column');\r\n      createThumbNail('revenue-chart-pie', 95, 90, 'thumbnail-pie');\r\n      createThumbNail('revenue-chart-bar', 95, 90, 'thumbnail-bar');\r\n      createThumbNail('revenue-chart-line', 95, 90, 'thumbnail-line');\r\n<\/pre>\r\nTo know more about FusionCharts Thumbnail feature please check <a href=\"https:\/\/www.fusioncharts.com\/dev\/common-use-cases\/render-thumbnail-versions-of-chart\">here<\/a>.\r\n\r\n<strong>Step 7<\/strong>\r\n\r\nIt\u2019s time to render the chart. Let\u2019s choose the most basic chart i.e., column 2D chart. When you load the page, the 1st chart gets rendered in the view container.\r\n<pre class=\"lang:js decode:true \">revenueChartColumn.render();<\/pre>\r\n<strong>Step 8<\/strong>\r\n\r\nCreate a mechanism for the group of radio buttons which will help in displaying and hiding the data values. Refer to the code given below:\r\n<pre class=\"lang:js decode:true\">radio = document.getElementsByTagName('input');\r\n      for (i = 0; i &lt; radio.length; i++) {\r\n        radElem = radio[i];\r\n        if (radElem.name === 'dv') {\r\n          radElem.onclick = function() {\r\n            val = this.getAttribute('value');\r\n            val &amp;&amp; chartinfo.setChartAttribute(\"showValues\", val);\r\n          };\r\n        }\r\n<\/pre>\r\n<h2>Step 9<\/h2>\r\nCreate the mechanism for the group of radio buttons by the help of which we will set the value of animation to true or false. Setting it to true will animate the chart. Refer to the code given below:\r\n<pre class=\"lang:js decode:true \">else if (radElem.name === 'anim') {\r\n          radElem.onclick = function() {\r\n            val = this.getAttribute('value');\r\n            val &amp;&amp; chartinfo.setChartAttribute(\"animation\", val);\r\n            chartinfo.render();\r\n          };\r\n        }\r\n<\/pre>\r\n<strong>Step 10<\/strong>\r\n\r\nNext, create the mechanism for the group of radio buttons which by the help of which we will change the theme of the chart at runtime. Refer to the code given below:\r\n<pre class=\"lang:js decode:true\">else {\r\n          radElem.onclick = function() {\r\n\r\n            val = this.getAttribute('value');\r\n\r\n            if (val === 'carbontheme') {\r\n              chartinfo.setChartAttribute(\"theme\", \"carbon\");\r\n            } else if (val === 'zunetheme') {\r\n              chartinfo.setChartAttribute(\"theme\", \"zune\");\r\n            }\r\n\r\n          };\r\n        }\r\n<\/pre>\r\n<strong>Step 11<\/strong>\r\n\r\nCreate the new appView instance to load our Backbone view object and to load the view on its lifecycle. Refer to the code given below:\r\n<pre class=\"lang:js decode:true\">var appView = new AppView();<\/pre>\r\nIf you\u2019ve followed the above steps correctly, your output should look like this:\r\n\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" src=\"https:\/\/jsfiddle.net\/a4mL85eb\/5\/embedded\/result,js,html,css\/\" frameborder=\"0\" width=\"100%\" height=\"500\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\r\n\r\nIf you have trouble running the code, feel free to reach out to us. And, if you&#8217;ve any suggestions for us do let us know in the comments section below.","protected":false},"excerpt":{"rendered":"<p>Released in 2010 Backbone.js is a javascript library which gives structure to web applications. Being one of the frameworks, it provides models with key-value binding and custom events. Backbone.js is used in many places for the development purpose. Some of the big names are listed below: Trello USA Today DocumentCloud Quartz Vox Gawker Media NewsBlur, [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16715,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,648],"class_list":["post-16702","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create charts in Backbone.js<\/title>\n<meta name=\"description\" content=\"Explore how to create charts in Backbone.js. Learn how to integrate our charting suite with this ultra-light MVC JavaScript framework for year of 2026.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create charts in Backbone.js\" \/>\n<meta property=\"og:description\" content=\"Explore how to create charts in Backbone.js. Learn how to integrate our charting suite with this ultra-light MVC JavaScript framework for year of 2026.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-08T07:24:47+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:07:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2016\" \/>\n\t<meta property=\"og:image:height\" content=\"750\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jonathan, Ayan Bhadury\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jonathan, Ayan Bhadury\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"Article\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/\"\n\t            },\n\t            \"author\": {\n\t                \"name\": \"Jonathan\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\"\n\t            },\n\t            \"headline\": \"How to Create Charts in Backbone.js: 2026 Legacy Fix\",\n\t            \"datePublished\": \"2018-01-08T07:24:47+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:29+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/\"\n\t            },\n\t            \"wordCount\": 769,\n\t            \"commentCount\": 0,\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png\",\n\t            \"articleSection\": [\n\t                \"Tutorials\"\n\t            ],\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"CommentAction\",\n\t                    \"name\": \"Comment\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#respond\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/\",\n\t            \"name\": \"How to create charts in Backbone.js\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\"\n\t            },\n\t            \"primaryImageOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png\",\n\t            \"datePublished\": \"2018-01-08T07:24:47+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:07:29+00:00\",\n\t            \"description\": \"Explore how to create charts in Backbone.js. Learn how to integrate our charting suite with this ultra-light MVC JavaScript framework for year of 2026.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"ImageObject\",\n\t            \"inLanguage\": \"en-US\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"charts in backbone js\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.fusioncharts.com\/blog\/\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"How to Create Charts in Backbone.js: 2026 Legacy Fix\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#website\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"name\": \"FusionBrew - The FusionCharts Blog\",\n\t            \"description\": \"Get tips and tricks on how to build effective Data Visualisation using FusionCharts\",\n\t            \"publisher\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\"\n\t            },\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Organization\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#organization\",\n\t            \"name\": \"FusionCharts\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/\",\n\t            \"logo\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\",\n\t                \"url\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg\",\n\t                \"width\": 1,\n\t                \"height\": 1,\n\t                \"caption\": \"FusionCharts\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/\"\n\t            }\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb\",\n\t            \"name\": \"Jonathan\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c\",\n\t                \"url\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"contentUrl\": \"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg\",\n\t                \"caption\": \"Jonathan\"\n\t            },\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create charts in Backbone.js","description":"Explore how to create charts in Backbone.js. Learn how to integrate our charting suite with this ultra-light MVC JavaScript framework for year of 2026.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/","og_locale":"en_US","og_type":"article","og_title":"How to create charts in Backbone.js","og_description":"Explore how to create charts in Backbone.js. Learn how to integrate our charting suite with this ultra-light MVC JavaScript framework for year of 2026.","og_url":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2018-01-08T07:24:47+00:00","article_modified_time":"2026-01-20T09:07:29+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png","type":"image\/png"}],"author":"Jonathan, Ayan Bhadury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Ayan Bhadury","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Create Charts in Backbone.js: 2026 Legacy Fix","datePublished":"2018-01-08T07:24:47+00:00","dateModified":"2026-01-20T09:07:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/"},"wordCount":769,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/","url":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/","name":"How to create charts in Backbone.js","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png","datePublished":"2018-01-08T07:24:47+00:00","dateModified":"2026-01-20T09:07:29+00:00","description":"Explore how to create charts in Backbone.js. Learn how to integrate our charting suite with this ultra-light MVC JavaScript framework for year of 2026.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png","contentUrl":"\/blog\/wp-content\/uploads\/2018\/01\/Creating-Interactive-Charts-in-Backbonejs.png","width":2016,"height":750,"caption":"charts in backbone js"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/backbone-js-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.fusioncharts.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Create Charts in Backbone.js: 2026 Legacy Fix"}]},{"@type":"WebSite","@id":"https:\/\/www.fusioncharts.com\/blog\/#website","url":"https:\/\/www.fusioncharts.com\/blog\/","name":"FusionBrew - The FusionCharts Blog","description":"Get tips and tricks on how to build effective Data Visualisation using FusionCharts","publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.fusioncharts.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.fusioncharts.com\/blog\/#organization","name":"FusionCharts","url":"https:\/\/www.fusioncharts.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/","url":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","contentUrl":"\/blog\/wp-content\/uploads\/2020\/03\/idera-fc-logo.svg","width":1,"height":1,"caption":"FusionCharts"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb","name":"Jonathan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/image\/0b58dff9af412d6ac90a1569df4d596c","url":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","contentUrl":"\/blog\/wp-content\/wphb-cache\/gravatar\/15c\/15cb55f5147ef4d792cabb9144f8160bx96.jpg","caption":"Jonathan"},"url":"https:\/\/www.fusioncharts.com\/blog\/author\/jonathan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/comments?post=16702"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16702\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16715"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16702"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}