Embedding Interactive Charts on an IPython Notebook - Part 2

Plotting census data using Pandas, D3.js, Chart.js and HighCharts in an IPython Notebook.

On Part 1 we discussed the basics of embedding JavaScript code into an IPython Notebook, and saw how to use this feature to integrate D3.js charts. On this part we’ll show you how to do the same with Chart.js.

IPython Notebook

This post is also available as an IPython Notebook on github.com

Part 2 - Embedding ChartJS

First we need to declare the requirement using RequireJS:

%%javascript
require.config({
    paths: {
        chartjs: '//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min'
    }
});

The procedure is the same as before, we define a template that will contain the rendered JavaScript code, and we use display to embed the code into the running page.

Chart.js is an HTML5 charting library capable of producing beautiful graphics with very little code. Now we want to plot the male and female population by region, division an state. We’ll use interact with a new callback function called display_chart_chartjs, but this time we don’t need custom widgets as we’re only selecting a single item (we’ll use a DropdownWidget). We’ve also included the show_javascript checkbox.

i = interact(
    display_chart_chartjs,
    sc_est2012_sex=widgets.fixed(sc_est2012_sex),
    region=widgets.fixed(region),
    division=widgets.fixed(division),
    show_javascript=widgets.CheckboxWidget(value=False),
    show=widgets.DropdownWidget(
        values={'By Region':'by_region', 'By Division': 'by_division', 'By State': 'by_state'},
        value='by_region'
    ),
    div=widgets.HTMLWidget(value='<canvas width=800 height=400 id="chart_chartjs"></canvas>')
)
/static/media/uploads/uploads/javascript_charts_3.png

As you can see, the library generates an beautiful and simple animated column chart. There’s not much in terms of customization of Chart.js charts, but that makes it very easy to use.

On the last part, we’ll show you how to embed HighCharts charts.

Want to read more? Follow us on Twitter @machinalis


Previous / Next posts


Comments