--- title: Going from Raw Data to Graphical Dashboard description: DC.js is one of the best visualization frameworks and it can be used to generate simple as well as complex visualizations. Read the blog to understand how to convert Raw Data to Graphical Dashboard image: https://blog.e-zest.com/hubfs/blog-files/Going%20from%20Raw%20Data%20to%20Graphical%20Dashboard-181228.png --- [![e-Zest logo\_An accion lab company\_Colour](https://blog.e-zest.com/hubfs/images/Logos%20with%20Tagline/Corporate/SVG/e-Zest%20logo_An%20accion%20lab%20company_Colour.svg "e-Zest logo_An accion lab company_Colour")](https://www.e-zest.com/) - [WORK](https://www.e-zest.com/our-work) - [SERVICES](https://www.e-zest.com/our-services) - [Product Engineering](https://www.e-zest.com/digital-product-engineering-services) - [Enterprise Data Services](https://www.e-zest.com/enterprise-data-services) - [Digital Commerce](https://www.e-zest.com/digital-commerce-services) - [Digital Operations](https://www.e-zest.com/digital-operations) - [Digital Consulting](https://www.e-zest.com/digital-transformation-consulting-services) - [Digital Experience Design](https://www.e-zest.com/digital-experience-design) - [INSIGHTS](https://blog.e-zest.com/) - [CAREERS](https://www.e-zest.com/careers) - [ENTERPRISE DATA SERVICES](https://www.e-zest.com/enterprise-data-services) - [GENERATIVE AI](https://www.e-zest.com/generative-ai) - [Healthcare](https://healthcare.e-zest.com) - [Contact Us](https://www.e-zest.com/contact-us) - ![Elevating Product Engineering with AI and ML](https://blog.e-zest.com/hubfs/Elevating%20Product%20Engineering%20with%20AI%20and%20ML.jpg) [BLOGS](https://blog.e-zest.com) #### Elevating Product Engineering with AI and ML As technology evolves and customer choices broaden, there is an increasing ... [Read more](https://blog.e-zest.com/elevating-product-engineering-with-ai-and-ml) - ![e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024](https://blog.e-zest.com/hubfs/e-Zest%20%E2%80%93%20An%20Accion%20Labs%20Company%20-%20Gets%20Recognition%20as%20a%20Contender%20in%20the%20ISG%20Provider%20LensTM%20Study%20on%20Digital%20Engineering%20Services%202024.jpg) [NEWS](https://blog.e-zest.com/news) #### e-Zest – An Accion Labs Company gets Recognition as a Contender in the ISG Provider Lens™ Study on Digital Engineering Services 2024 We are delighted to announce that e-Zest – An Accion Labs Company has been ... [Read more](https://blog.e-zest.com/news/e-zest-an-accion-labs-company-gets-recognition-as-a-contender-in-the-isg-provider-lens-study-on-digital-engineering-services-2024) - ![e-Zest Solutions supports Digital Pune Mission](https://blog.e-zest.com/hubfs/blog-files/Digital%20Literacy%20Bus%20e-Zest.png) [CSR](https://blog.e-zest.com/csr) #### e-Zest Solutions supports Digital Pune Mission **Pune, India:** e-Zest Solutions, a leading digital technology innovation ... [Read more](https://blog.e-zest.com/csr/e-zest-solutions-supports-digital-pune-mission) - [Work](https://www.e-zest.com/our-work) - [Services](https://www.e-zest.com/our-services) - [Insights](https://blog.e-zest.com) - [Careers](https://www.e-zest.com/careers) - [Enterprise Data](https://www.e-zest.com/enterprise-data-services) - [Generative AI](https://www.e-zest.com/generative-ai) - [Innovations](https://www.e-zest.com/innovations) - [Healthcare](https://healthcare.e-zest.com) - [About](https://www.e-zest.com/about-us) - [Contact](https://www.e-zest.com/contact-us) - [Blog](https://blog.e-zest.com/) - [News](https://blog.e-zest.com/news) - [CSR](https://blog.e-zest.com/csr) - [![Linkedin Icon](https://blog.e-zest.com/hubfs/icons/linkedin_icon_white.svg)](https://www.linkedin.com/company/e-zest-solutions/) - [![Twitter Icon](https://blog.e-zest.com/hubfs/twitter-logo-silhouette%20(5).svg)](https://twitter.com/ezest) - [![Facebook Icon](https://blog.e-zest.com/hubfs/facebook-app-logo%20(4).svg)](https://www.facebook.com/61259256638) - [![Instagram Icon](https://blog.e-zest.com/hubfs/instagram-logo%20(4).svg)](https://www.instagram.com/ezestsolutions/) - [![Youtube Icon](https://blog.e-zest.com/hubfs/icons/youtube_icon_white.svg)](https://www.youtube.com/user/ezestcorporate) [![Go to top icon](https://blog.e-zest.com/hubfs/AA%20Assets/top%20button.svg)](https://blog.e-zest.com/going-from-raw-data-to-graphical-dashboard#top) Hit enter to search or ESC to close Insights e-Zest members share technology ideas to foster digital transformation. - [Blog](https://blog.e-zest.com) - [Whitepaper](https://blog.e-zest.com/whitepaper) - [Playbook](https://blog.e-zest.com/playbook) - [News](https://blog.e-zest.com/news) - [Innovation](https://blog.e-zest.com/innovation) - [Media Kit](https://www.e-zest.com/media-kit) # Going from Raw Data to Graphical Dashboard [Dhevendhiran M](https://blog.e-zest.com/author/dhevendhiran-m) Dec 27, 2018 [HTML5](https://blog.e-zest.com/topic/html5) [JavaScript](https://blog.e-zest.com/topic/javascript) [DC.js](https://blog.e-zest.com/topic/dc-js) - - - - In this blog, I want to share my little experience with D3.js and DC.js. Let's start with D3.js. D3.js – Data-Driven Documents D3.js is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. It makes use of the widely implemented SVG, HTML5 and CSS standards. DC.js – Dimensional Charting JavaScript Library DC.js is a JavaScript charting library with native cross-filter support allowing highly efficient exploration on large multi-dimensional datasets. It leverages d3 to render charts in CSS friendly SVG formats. **Now let's explore DC.js features** DC.js is one of the best visualization frameworks and it can be used to generate simple as well as complex visualizations. Some of the salient features are listed below: - Extremely flexible - Easy to use - Fast rendering of the charts - Open source JavaScript library - Support large multi-dimensional datasets **The parts of the DC.js codebase** There are four major parts we can see in the DC.js code, which are: - DC.js library - Editor - Web browser - Web server **DC.js library** DC is an open source library, you can find from the link [https://github.com/dc-js/dc.js/releases](https://github.com/dc-js/dc.js/releases). Download the library packages from here and attach it to your code. **DC.js editor** We can use any editor to start writing the code. Some of the popular editors are: - Visual Studio code - WebStorm - Eclipse - Sublime text **Web Browser** DC.js works on all browsers except IE8 and lower. **Web Server** Most of the browsers serve local HTML files directly from the local file system. But when we use the external CSV and JSON files to load the data, it is mandatory to use the web server. **Our use cases** We are using DC.js to develop a graphical dashboard to view business data for better understanding. Through this DC.js charts, one can see the entire business perspective and possibilities in a single page. This will be more helpful to take some important business decision. In our use case, we have developed a Graphical Dashboard for a healthcare company. The company needs to organize their medical data in terms of products, clients, manufacturing units where a lot more factors are involved. Earlier the data used to be stored in CSV, TSV or spreadsheet format. They needed to analyze these data to make some improvement in their business tactics and understand their business growth. Analyzing CSV data manually was not an easy task. For such big company with a huge amount of data, CSV files are nearly impossible to analyze and make some decision on it. So here comes the picture of DC.js. It is a powerful JavaScript framework that helps to analyze and present this type of data in a graphical format. Their requirement was met with using DC.js. Moreover, most of the businesses today need this technology. Because all the raw data are in the above-mentioned formats like CSV, TSV or spreadsheet format and it is hard to get an overview of these data with this same format. **Onclick() event:** One of the major issues I have faced is onclick() event. Refer the link https://dc-js.github.io/dc.js/examples/ for some basic examples of using DC.js and some simple example of each chart type for DC.js. Here, I have described the onclick() event with the example pieces of codes for understanding purposes. Onclick() event is used to perform some user interaction with the dashboards. If the user wants to select the particular bar, this Onclick event comes into action. When a dashboard contains multiple charts based on any type of data, the user can customize the dashboard based using the same data. In this scenario, the filtering functionality comes into action. The user can filter the charts based on the Onclick event. So, this is the important part while developing a customer based dashboard. We can perform this onclick() event manually in D3.js. Because D3.js is fully manual functionality. We can perform this functionality in DC.js also. But it is hard to find the reference for this type of use case online. So, let’s consider a piece of code from the above bar chart example. chart .width(768) .height(380) .x(d3.scaleBand()) .xUnits(dc.units.ordinal) .brushOn(false) .xAxisLabel('Fruit') .yAxisLabel('Quantity Sold') .dimension(fruitDimension) .barPadding(0.1) .outerPadding(0.05) .group(sumGroup); chart.render(); So, this is the basic operation which is defining the properties of the bar chart. If we need to implement onclick() event in this, we have to add one more property within onclick(). .selectAll(rect.bar) .on(‘click’, function (d){ console.log(‘clicked on the bar with datum’, d); } Here ‘selectAll(rect.bar)’ is used to identify the particular bar which the user selects. Here ‘click’ is the event name and the parameter ‘d’ contains the value of the bar. This click event function varies according to the chart. For pie chart, it is like, *.selectAll(g.pie-slice)* *.on(‘click.my-click-event’, function (d){* *console.log(‘clicked on the bar with datum’, d);* *}* *And for row chart,* *.selectAll(g.row)* *.on(‘g.row rect’, function (d){* *console.log(‘clicked on the bar with datum’, d);* *}* You can find the complete reference of this particular part from here [https://github.com/dc-js/dc.js/wiki/Chart-selectors](https://github.com/dc-js/dc.js/wiki/Chart-selectors) **Conclusion** DC.js is the new framework. So, there are few tutorials and references available for the development process more than the official documents. But I can say, those references are more than enough to develop an interactive graphical dashboard with different required functionalities. There are some other chart frameworks available, but DC.js is the only one which is ruling this domain because of its unique features. - - - ### Similar Blog [![Migration from Adobe Flex to HTML5](https://blog.e-zest.com/hubfs/flex-to-html.png) Migration from Adobe Flex to HTML5 Adobe Flex/Flash is a sinking technology, and due to its technical limitations many Flex application owners are now moving ... By Atif Haddadi Mar 09, 2017](https://blog.e-zest.com/migration-from-adobe-flex-to-html5) [![Your Journey from Flash to HTML5-and-mobile](https://blog.e-zest.com/hubfs/flash-to-html-5.png) Your Journey from Flash to HTML5-and-mobile *Two roads diverged in a wood, and I took the one less traveled by, and that has made all the difference.* By Abhishek Mishra Jun 01, 2016](https://blog.e-zest.com/your-journey-from-flash-to-html-and-mobile) [Tech Digest – Week 11, 2014 **Wanting to become a Digital Enterprise? Then Cloud computing is sure the place to start with.** By Corporate Mar 21, 2014](https://blog.e-zest.com/tech-digest-week-11-2014/) [Tech Digest – Week 47, 2013 **Exploitation of Cloud to spy on the US by Chinese Hackers** By Corporate Nov 24, 2013](https://blog.e-zest.com/tech-digest-week-47-2013/) ## Helping Organizations Thrive in the Digital Age [Contact Us](https://www.e-zest.com/contact-us) - [About](https://www.e-zest.com/about-us) - [Services](https://www.e-zest.com/our-services) - [Work](https://www.e-zest.com/our-work) - [Insights](https://blog.e-zest.com/) - [Healthcare](https://healthcare.e-zest.com/) - [Accion Labs](https://www.accionlabs.com/) - - - - - - Dallas - Detroit - Hannover - Vienna - London - Pune © 2025 e-Zest Solutions - [Privacy Policy](https://www.e-zest.com/privacypolicy) - [Cookie Policy](https://www.e-zest.com/cookie-policy) Contact us Contact us e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.