{"id":16796,"date":"2018-01-30T20:04:21","date_gmt":"2018-01-30T14:34:21","guid":{"rendered":"http:\/\/www.fusioncharts.com\/blog\/?p=16796"},"modified":"2026-01-20T14:41:05","modified_gmt":"2026-01-20T09:11:05","slug":"underscore-js-charts","status":"publish","type":"post","link":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/","title":{"rendered":"How to Create Charts Using Underscore.js: 2026 Guide"},"content":{"rendered":"Underscore.JS, developed by Jeremy Ashkenas in the year 2009, is a JavaScript library that has more than 100 inbuilt functions to manipulate data quickly and efficiently. These functions, based on the datatype they are used for, can be categorized as functions that can be used to manipulate:\r\n<ul>\r\n \t<li>Arrays<\/li>\r\n \t<li>Objects<\/li>\r\n \t<li>Arrays and objects (these functions are also called collections)<\/li>\r\n \t<li>Other functions<\/li>\r\n<\/ul>\r\nThese functions include simple functions, like the ones used for mapping data, filtering data, and so on, as well as complex functions, like the ones used for JavaScript templating, function binding, and so on.\r\n\r\nUnderscore.JS also comes with two utility categories, namely:\r\n<ul>\r\n \t<li>Utility<\/li>\r\n \t<li>Chaining<\/li>\r\n<\/ul>\r\nWhat makes Underscore.JS so useful is its ability to manipulate objects, arrays, and functions using just about 2-3 lines of code. Underscore simplifies work when you are working with a non-DOM code or with a complex MVC. For a developer who is familiar with JavaScript, switching to Underscore.JS comes without any hassles given the simplicity of its template.\r\n\r\nFor a library that is just about 4kb in size, the Underscore library definitely includes quite a lot of functionality that helps create code that is concise and clearly readable.\r\n<h2>Charting in Underscore.JS [using FusionCharts]<\/h2>\r\nUnderscore\u2019s functions, when combined with the data visualization capabilities of <a href=\"https:\/\/www.fusioncharts.com\" target=\"_blank\" rel=\"noopener noreferrer\">FusionCharts<\/a>, simplify processes like mapping data labels to data values and sorting data to create meaningful visualizations. Also, making the code short and less complex.\r\n\r\nTo demonstrate how you can use FusionCharts and Underscore.JS together to create charts, we\u2019ll create a sample of a column 2D chart. This chart showcases the average number of runs scored by a cricketer against the average number of runs scored by the opposition team. The chart will also have the half-century target mark.\r\n\r\nSo let\u2019s get started!\r\n\r\n<strong>Step 1: Adding the dependencies<\/strong>\r\n\r\nTo add the dependencies, paste the following links to your file:\r\n<pre class=\"lang:js decode:true\">https:\/\/static.fusioncharts.com\/code\/latest\/fusioncharts.js\r\nhttps:\/\/cdnjs.cloudflare.com\/ajax\/libs\/underscore.js\/1.8.3\/underscore.js\r\nhttps:\/\/csm.fusioncharts.com\/projects\/themes\/hulk-light.js (optional)<\/pre>\r\n<strong>Step 2: Creating the HTML elements<\/strong>\r\n\r\nCorresponding to the requirements for the sample, create the HTML elements using the code snippet given below:\r\n<pre class=\"lang:js decode:true\">&lt;h3&gt;&lt;font face=\"Roboto\"&gt;\r\nFusionCharts using UnderScore JS\r\n&lt;\/font&gt;\r\n&lt;\/h3&gt;\r\n&lt;div id=\"chart-container\"&gt;\r\nFusionCharts will render here...\r\n&lt;\/div&gt;\r\n<\/pre>\r\n<strong>Step 3: Calling the <code>FusionCharts ready()<\/code> method<\/strong>\r\n\r\nCall the <code>FusionCharts ready()<\/code> method that will be the entry point for the chart framework using the structure given below:\r\n<pre class=\"lang:js decode:true\">FusionCharts.ready(function() {\r\n...\r\n\u2026.\r\n\u2026..\r\n\/\/your code here\r\n});\r\n<\/pre>\r\n<strong>Step 4: Creating the chart instance<\/strong>\r\n\r\nTo create the chart instance, add the code snippet given below within the <code>ready()<\/code> method:\r\n<pre class=\"lang:js decode:true\">var scoreCard = new FusionCharts({\r\n      type: bar2d,\r\n      renderAt: 'chart-container',\r\n      width: '100%',\r\n      height: '350',\r\n      dataFormat: 'json',\r\n      dataSource: \u2026. \r\n\/\/to be created later\r\n});\r\n<\/pre>\r\n<strong>Step 5: Preparing the chart data<\/strong>\r\n\r\nThe Underscore.JS Utility Library lets you perform various operations on your data, like merging data arrays, creating data objects, sorting data within the objects, and so on. Click <a href=\"https:\/\/underscorejs.org\/#objects\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a> to know more.\r\n\r\n<strong>Step 5.1: Creating data arrays and converting them into objects<\/strong>\r\n\r\nCreate two arrays, one with the team names, or the labels, and another with the average number of runs, or the data values, and then convert them into objects.\r\n\r\nTo do this, use the code snippet given below:\r\n<pre class=\"lang:js decode:true\">var a = ['Players standing {br} around between plays', 'Commercials', 'Replays', 'Gameplay', 'Coach Shots', 'Referee Shots', 'Halftime', 'Sideline player shots', 'On-screen promotions', 'Other'];\r\n  var b = [35.5, 24.5, 10.7, 8.3, 4.9, 3.2, 3.2, 2.2, 2, 5.5];\r\n\r\n  var t = _.object(a, b);\r\n<\/pre>\r\n<strong>Step 5.2: Creating object arrays<\/strong>\r\n\r\nCreate object arrays in order to map the data labels (the team names) with the data values (the average number of runs) and convert them into FusionCharts\u2019 prescribed JSON data format for a single series chart.\r\n\r\nTo do this, use the code snippet given below:\r\n<pre class=\"lang:js decode:true\">var maindata = [];\r\n\r\n for (var i = 0; i &lt; a.length; i++) {\r\n    var k = new Object();\r\n    k.label = a[i];\r\n    k.value = b[i];\r\n    maindata.push(k);\r\n}\r\n<\/pre>\r\n<strong>Step 5.3: Sorting the objects<\/strong>\r\n\r\nSort the objects according to the data values using Underscore\u2019s <code>sortBy<\/code> collection.\r\n\r\nTo do this, use the code line given below:\r\n<pre class=\"lang:js decode:true\">var sortedmaindata = _.sortBy(maindata, 'value').reverse();\r\n<\/pre>\r\nThe <code>sortedmaindata<\/code> variable now holds the sorted data values and their corresponding data labels.\r\n\r\n<strong>Step 5.4: Preparing the data source<\/strong>\r\n\r\nPass the <code>sortedmaindata<\/code> variable as the value to FusionCharts\u2019 data object along with defining the other cosmetics and functionalities of the chart.\r\n\r\nTo do this, use the code given below:\r\n<pre class=\"lang:js decode:true\">var scoreCard = new FusionCharts({\r\n      type: 'bar2d',\r\n      renderAt: 'chart-container',\r\n      width: '100%',\r\n      height: '400',\r\n      dataFormat: 'json',\r\n      dataSource: {\r\n        \"chart\": {\r\n          \"caption\": \"What actually happens in an NFL game\",\r\n          \"captionAlignment\": \"left\",\r\n          \"subcaption\": \"An NFL broadcast, minute by minute\",\r\n          \"subCaptionFontSize\": \"13\",\r\n          \"paletteColors\": \"#0075C2\",\r\n          \"placeValuesInside\": \"0\",\r\n          \"exportEnabled\": \"1\",\r\n          \"theme\": \"hulk-light\",\r\n          \"valuefontcolor\": \"#0000000\",\r\n          \"yaxisminvalue\": \"0\",\r\n          \"yaxismaxvalue\": \"40\",\r\n          \"divlinealpha\": \"0\",\r\n          \"showAlternateVGridColor\": \"0\",\r\n          \"showYAxisValues\": \"1\",\r\n          \"showPlotBorder\": \"0\",\r\n\t\t\t\t\t\r\n          \"showYAxisLine\": \"1\",\r\n          \"yAxisLineColor\":\"#000000\",\r\n          \"numbersuffix\": \"%\",\r\n          \"useRoundEdges\": \"1\",\r\n          \"showLabels\": \"1\"\r\n\r\n        },\r\n        \"data\": sortedmaindata,\r\n\r\n\r\n      }\r\n\r\n    })\r\n<\/pre>\r\n<strong>Step 6: Rendering the chart<\/strong>\r\n\r\nCall the <code>render()<\/code> method from the FusionCharts API to render the chart.\r\n\r\nThe complete code for this sample, also showing how the <code>render()<\/code> method will be used, is:\r\n<pre class=\"lang:js decode:true\">FusionCharts.ready(function() {\r\n\r\n  var a = ['Players standing {br} around between plays', 'Commercials', 'Replays', 'Gameplay', 'Coach Shots', 'Referee Shots', 'Halftime', 'Sideline player shots', 'On-screen promotions', 'Other'];\r\n  var b = [35.5, 24.5, 10.7, 8.3, 4.9, 3.2, 3.2, 2.2, 2, 5.5];\r\n\r\n  var t = _.object(a, b);\r\n  console.log(t);\r\n\r\n  var maindata = [];\r\n\r\n\r\n  for (var i = 0; i &lt; a.length; i++) {\r\n    var k = new Object();\r\n    k.label = a[i];\r\n    k.value = b[i];\r\n    maindata.push(k);\r\n\r\n  }\r\n  \/\/console.log(maindata);\r\n\r\n  var sortedmaindata = _.sortBy(maindata, 'value').reverse();\r\n  console.log(sortedmaindata);\r\n\r\n  var scoreCard = new FusionCharts({\r\n      type: 'bar2d',\r\n      renderAt: 'chart-container',\r\n      width: '100%',\r\n      height: '400',\r\n      dataFormat: 'json',\r\n      dataSource: {\r\n        \"chart\": {\r\n          \"caption\": \"What actually happens in an NFL game\",\r\n          \"captionAlignment\": \"left\",\r\n          \"subcaption\": \"An NFL broadcast, minute by minute\",\r\n          \"subCaptionFontSize\": \"13\",\r\n          \"paletteColors\": \"#0075C2\",\r\n          \"placeValuesInside\": \"0\",\r\n          \"exportEnabled\": \"1\",\r\n          \"theme\": \"hulk-light\",\r\n          \"valuefontcolor\": \"#0000000\",\r\n          \"yaxisminvalue\": \"0\",\r\n          \"yaxismaxvalue\": \"40\",\r\n          \"divlinealpha\": \"0\",\r\n          \"showAlternateVGridColor\": \"0\",\r\n          \"showYAxisValues\": \"1\",\r\n          \"showPlotBorder\": \"0\",\r\n\t\t\t\t\t\r\n          \"showYAxisLine\": \"1\",\r\n          \"yAxisLineColor\":\"#000000\",\r\n          \"numbersuffix\": \"%\",\r\n          \"useRoundEdges\": \"1\",\r\n          \"showLabels\": \"1\"\r\n\r\n        },\r\n        \"data\": sortedmaindata,\r\n\r\n\r\n      }\r\n\r\n\r\n    })\r\n    .render();\r\n});\r\n<\/pre>\r\n<h2>Output<\/h2>\r\nThe output looks like the chart shown in the image below:\r\n\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" width=\"100%\" height=\"550\" src=\"\/\/jsfiddle.net\/bmbxqgb1\/embedded\/result,js,html\/\" 0=\"allowpaymentrequest\" allowfullscreen=\"allowfullscreen\" frameborder=\"0\" scrolling=\"yes\" class=\"iframe-class\"><\/iframe>\n\r\n<h2>Troubleshooting<\/h2>\r\nIf you see any errors in your code or have trouble executing the above sample, refer to the fiddle sample. If you are stuck anywhere, drop us a line at <span style=\"text-decoration: underline\">support@fusioncharts.com<\/span> and we\u2019ll be happy to help!","protected":false},"excerpt":{"rendered":"<p>Underscore.JS, developed by Jeremy Ashkenas in the year 2009, is a JavaScript library that has more than 100 inbuilt functions to manipulate data quickly and efficiently. These functions, based on the datatype they are used for, can be categorized as functions that can be used to manipulate: Arrays Objects Arrays and objects (these functions are [&hellip;]<\/p>\n","protected":false},"author":39,"featured_media":16804,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"coauthors":[675,648],"class_list":["post-16796","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 using Underscore.js<\/title>\n<meta name=\"description\" content=\"Manipulate data with ease using Underscore.js. Follow our 2026 guide to learn how to create interactive charts by leveraging its powerful functions now.\" \/>\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\/underscore-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 using Underscore.js\" \/>\n<meta property=\"og:description\" content=\"Manipulate data with ease using Underscore.js. Follow our 2026 guide to learn how to create interactive charts by leveraging its powerful functions now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"FusionBrew - The FusionCharts Blog\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-30T14:34:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-20T09:11:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.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=\"5 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\/underscore-js-charts\/#article\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/underscore-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 Using Underscore.js: 2026 Guide\",\n\t            \"datePublished\": \"2018-01-30T14:34:21+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:05+00:00\",\n\t            \"mainEntityOfPage\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/\"\n\t            },\n\t            \"wordCount\": 687,\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\/underscore-js-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.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\/underscore-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\/underscore-js-charts\/\",\n\t            \"url\": \"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/\",\n\t            \"name\": \"How to create charts using Underscore.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\/underscore-js-charts\/#primaryimage\"\n\t            },\n\t            \"image\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#primaryimage\"\n\t            },\n\t            \"thumbnailUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png\",\n\t            \"datePublished\": \"2018-01-30T14:34:21+00:00\",\n\t            \"dateModified\": \"2026-01-20T09:11:05+00:00\",\n\t            \"description\": \"Manipulate data with ease using Underscore.js. Follow our 2026 guide to learn how to create interactive charts by leveraging its powerful functions now.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/underscore-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\/underscore-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\/underscore-js-charts\/#primaryimage\",\n\t            \"url\": \"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png\",\n\t            \"contentUrl\": \"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png\",\n\t            \"width\": 2016,\n\t            \"height\": 750,\n\t            \"caption\": \"how to create charts in Underscore.js\"\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.fusioncharts.com\/blog\/underscore-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 Using Underscore.js: 2026 Guide\"\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 using Underscore.js","description":"Manipulate data with ease using Underscore.js. Follow our 2026 guide to learn how to create interactive charts by leveraging its powerful functions now.","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\/underscore-js-charts\/","og_locale":"en_US","og_type":"article","og_title":"How to create charts using Underscore.js","og_description":"Manipulate data with ease using Underscore.js. Follow our 2026 guide to learn how to create interactive charts by leveraging its powerful functions now.","og_url":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/","og_site_name":"FusionBrew - The FusionCharts Blog","article_published_time":"2018-01-30T14:34:21+00:00","article_modified_time":"2026-01-20T09:11:05+00:00","og_image":[{"width":2016,"height":750,"url":"https:\/\/www.fusioncharts.com\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png","type":"image\/png"}],"author":"Jonathan, Ayan Bhadury","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Jonathan, Ayan Bhadury","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#article","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/"},"author":{"name":"Jonathan","@id":"https:\/\/www.fusioncharts.com\/blog\/#\/schema\/person\/14fbfb07e81bfbcd524a4202f34bdcbb"},"headline":"How to Create Charts Using Underscore.js: 2026 Guide","datePublished":"2018-01-30T14:34:21+00:00","dateModified":"2026-01-20T09:11:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/"},"wordCount":687,"commentCount":0,"publisher":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/","url":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/","name":"How to create charts using Underscore.js","isPartOf":{"@id":"https:\/\/www.fusioncharts.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#primaryimage"},"image":{"@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#primaryimage"},"thumbnailUrl":"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png","datePublished":"2018-01-30T14:34:21+00:00","dateModified":"2026-01-20T09:11:05+00:00","description":"Manipulate data with ease using Underscore.js. Follow our 2026 guide to learn how to create interactive charts by leveraging its powerful functions now.","breadcrumb":{"@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-js-charts\/#primaryimage","url":"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png","contentUrl":"\/blog\/wp-content\/uploads\/2018\/01\/How-to-create-charts-with-Underscore.js-and-FusionCharts-.png","width":2016,"height":750,"caption":"how to create charts in Underscore.js"},{"@type":"BreadcrumbList","@id":"https:\/\/www.fusioncharts.com\/blog\/underscore-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 Using Underscore.js: 2026 Guide"}]},{"@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\/16796","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=16796"}],"version-history":[{"count":0,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/posts\/16796\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media\/16804"}],"wp:attachment":[{"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/media?parent=16796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/categories?post=16796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/tags?post=16796"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.fusioncharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}