{"id":44816,"date":"2018-06-12T21:01:39","date_gmt":"2018-06-12T13:01:39","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=44816"},"modified":"2018-06-12T20:34:53","modified_gmt":"2018-06-12T12:34:53","slug":"create-javascript-powered-data-charts-billboardjs","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-javascript-powered-data-charts-billboardjs\/","title":{"rendered":"Create JavaScript-Powered Data Charts With Billboard.js"},"content":{"rendered":"

Graphics and visuals play a vital role in improving the web content. With modern technology it\u2019s so easy to add custom visuals like SVG icons<\/a> into your page.<\/p>\n

But another surprising visual you can build from scratch is a web chart.<\/p>\n

This can help you graph the data visually<\/strong> so your visitors can quickly skim pertinent information. And rather than coding a graph yourself you can use a library like Billboard.js<\/a> to do all the heavy lifting.<\/p>\n

Read Also:<\/strong> 9 Javascript Libraries To Build Interactive Charts<\/a><\/p>\n

\"billboard<\/a><\/figure>\n

This is actually built on top of D3<\/a> which is a JavaScript data visualization library. It\u2019s easily the most popular one out there making it the safest dependency you could ask for.<\/p>\n

With Billboard.js you can access the D3 API quickly and easily. The primary goal of Billboard is ease of use, making it accessible to anyone<\/strong>. Although it does help to have some experience<\/a> with JavaScript, you certainly don\u2019t need to be an expert.<\/p>\n

Just note the entire codebase uses ES6 syntax which can be confusing to less-experienced JS devs.<\/p>\n

As long as you know how to compile the code<\/strong> you should be fine. We actually covered a few hot features<\/a> from ES6 if you wanna learn more.<\/p>\n

All the technical details about this plugin may seem nice. But you probably just wanna know what this can do<\/strong>.<\/p>\n

Have a look at the demo page<\/a> and click through some of the live examples.<\/p>\n

\"demos<\/a><\/figure>\n

You\u2019ll find everything from pie graphs to scatter plots and custom animated bar graphs.<\/p>\n

With Billboard.js you have full control over your data<\/strong>. You control how it appears on the page, how it\u2019s structured, and what type of UI\/UX features you add(if any).<\/p>\n

It\u2019s really a fantastic chart library and it\u2019s one of the easiest to pick up. Have a look at the project\u2019s GitHub repo<\/a> to learn more.<\/p>\n

You can also dig into this snippet<\/a> on CodePen if you wanna toy with the code in your browser.<\/p>\n