Building Interactive Mobile Dashboards with D3 and other Charting Libraries

Tablets offer a great way to visually explore data using touch-based interactions. I’ve recently been looking at HTML/JavaScript charting libraries from a Mobile perspective, and I thought I’d share the sample application I used to experiment with different options.

Sample Application

It’s Olympic season, so I decided to create an interactive dashboard to explore the results of the last five Winter Olympics. I had three key requirements for my simple Olympic dashboard:

  1. Mobile first: Uncompromised performance and user experience on mobile devices.
  2. Interactive: Support for touch-based interactions and animations.
  3. Modern look.


Charting Libraries

There has traditionally been a number of free (Flot, Flotr2, jqPlot, etc.) and commercial (amCharts, Highcharts, FusionCharts, etc.) options in the charting library landscape. In the last couple of years, d3.js (D3) has emerged as a de-facto standard for data visualization, and enjoys fast-growing adoption. D3 is based on Web standards (SVG, JavaScript, HTML, and CSS), and its fairly low level APIs give you complete control over the final result. D3 also has a broader scope than the charting libraries mentioned above (examples here).

Based on the requirements mentioned above, I eliminated a few options. For example, the Chart.js charts look good, but a quick look at the documentation indicates that “If you are looking to add interaction as a layer to charts, Chart.js is not the library for you…”. Different applications have different requirements, and these requirements may lead to different choices. One lesson I learned is to test on device early: some charting libraries may work great in your computer’s browser, but not so well on mobile devices, especially when it comes to touch-based interactions.


I tried different libraries as part of my experiments, and I’ll share two implementations below. This doesn’t mean that other options are not as good: I just didn’t have time to fully implement the dashboard with every single library. If you use one of the other libraries, I’d love to hear what you think. Also feel free to fork the repo and implement the dashboard with your favorite library, or submit a pull request to improve the implementations below. It would be great to see additional implementations.


ChartJS (different form Chart.js mentioned above) has good looking and mobile-ready components out-of-the box, and allowed me to build a prototype quickly.

Note: ChartJS is a commercial product but has a “free for non commercial use” option. This is by no means an endorsement of the product.

Watch the ChartJS implementation video:

Click here to run the ChartJS implementation in your browser.


As mentioned above, D3 has become a standard for data visualization. There are also libraries built on top of D3 (dimple, NVD3, xCharts, Rickshaw, …) for people looking for higher level APIs. I used xCharts for some of the charts in my D3 implementation.

Watch the D3 implementation video:

Click here to run the D3 implementation in your browser.


Because of its broader scope and lower level API, D3 has a steeper learning curve compared to other charting libraries. However, it gives you complete control over the final result and it’s definitely worth the time investment. It also has a fast growing community, and an impressive list of examples you can learn from. If you are looking for an out-of-the-box solution with higher level APIs, you may also consider one of the other free or commercial options mentioned above. As always, evaluate the options based on your own background and your own requirements. I’d love to hear about your own experience building interactive mobile dashboards.

Source Code

The source code for the ChartJS implementation is available in this GitHub repository.

The source code for the D3 implementation is available in this GitHub repository.

  • Amer

    Wow, this remind me with your good old days when you did this with Flex :)

  • Pingback: Building Interactive Mobile Dashboards with D3 and other Charting Libraries | SDK News()

  • Colin Scroggins

    Great post! Could not be more timely. Thanks for the introduction to ChartJS.

  • i never test D3 but highchartJs has all that you need for both, mobile and desktop. Could you update this post why highchartJs not included in your experiment?

    thanks stephen

  • JEL

    can you just guide us on complete tuto

  • Pingback: Building Interactive Mobile Dashboards for the Salesforce Platform | Christophe Coenraets()

  • If you’re building complete dashboards for a mobile-first world, with performance and touch-interactivity as key elements, you may also want to look at RazorFlow JavaScript SDK @

    It abstracts you from having to deal with cross-browser and cross-device issues, and gives you a standardised way to build complete dashboards (which automatically adapt to different forms and devices), with built-in support for different chart types, filters etc.

  • BlueSandy


    Is this code under a specific license agreement ?

    Best regards

  • Thank you for the posting. I guess, if the javascript chart library work with HTML 5, then the library will work well with Phonegap. Is this assumption correct?

    Also, you mentioned the following in your post:

    “If you are looking to add interaction as a layer to charts, Chart.js is not the library for you…”.

    Can you elaborate a little in regard to this comment? What do you mean with interaction layers?

    Thank you,

    Ricardo Rocha

  • com – Of course you will want to change the “URL” to
    your own website’s name. Spiders will have ann easier time crawling your site if there is a site map.

    You might run a blog & wopnder why you don’t have any readers or youu
    want too drive more traffic to yur products.

  • Thank you for posting this.

  • Pingback: Building Interactive Mobile Dashboards with D3 and other Charting Libraries | Christophe Coenraets |()

  • Lukasz

    Christophe. This demo is really great. Very interesting example of putting d3.js into a mobile framework.

    I bet lot’s of people incl me would benefit a lot from a tutorial explaining this implementation. In particular the non d3 but js part as well as use of ionic. Hope you could find some time on giving us this gem

  • noob

    Thanks a lot for this.

    Hope you find some time to give some pointers on implementing this with ionic+angular+d3.

    I have been trying but have hit some block, seems to be an issue with render being fired before the page load.


  • Pingback: Google Polymer with Salesforce : Develop Fascinating Chart Components for Platform()

  • Juan

    Chirstophe thanks for this and the immense number of post that are of great use for us (developers trying new frameworks, languages and tools, especially for those unexperienced like me).

    I wanted to ask you a kind of general question related to this and other posts post: We are considering the architecture, frameworks and tools to start a project of a web app for management for a niche vertical. It will have a dashboard, forms, and a simple menu (If you know podio it’ll be like that but much simple). We are trying to match the pieces we are going to use I’d love to hear any insight (opinion, advice, books, tutorials or courses) you have with respect to this

    – Front-end
    Eclipse, ¿Maven (Not sure if its something i could even use for the front-end?
    Google App Engine to host it (Maybe not the better option for a front-end, not sure, like it a lot for backend)
    Bootstrap 3 framework
    Backbone.js (More documentation than Angular even though the learning curve is longer seems worth it)
    D3.js (Most rich chart library with tones of examples – even though the learning curve is longer seems worth it)

    APIRest through Jersey (More documentation, Compatible with GAE and more standard that Google End Points)

    Eclipse, Java, MAVEN, GAE

  • Pingback: boldial03 | Building Chart Components with Google Polymer and

  • vinay pandravada

    Awesome post thamk you so much

  • Ткани, которые мы используем в нашей форме; Первый класс микро-блокировки; Flex-форме, антибактериальный, имеет термо-баланс, и сразу же сушки. Это дает вам свободу, чтобы переместить трикотажные изделия футбола в матче; Он предназначен стильный достаточно, чтобы носить на ежедневной основе. Наши модели выпускаются в двух типах, как мои специальных трикотажных изделий и другой цифровой распечатать.
      Его высокая производство нашей компании, мы используем спортивные носки продукты: хлопок, хлопок, полиэстер, нейлон и лайкра. Она включает в себя антибактериальные..

  • admin duka seni cok seviyor ok.

  • A Developer Diary
  • james mmoore

    I am regularly surfing online for tales that can fit me. I feel you made a couple of healthy and balanced as well as balanced factors in Characteristics moreover. Capture active, phenomenal occupation! injury law new york

  • james mmoore

    It’s appropriate time to make some preparations for the future and furthermore, it is time to be pleased. I have in truth read this message in addition to likewise if I can I desire to suggest you a number of fascinating aspects or suggestions. guide wealth advisors

  • james mmoore

    All you have actually reached do is take cool as well as a hot hip bath on a daily basis. a Or you might also try using an ice bag or splashing cold water on the influenced area. Mudpack is just as helpful for varicose veins. backpacking guides