Using ChartJs from IPython

chartjs-ipython.py

import json
from IPython.display import display, Javascript

def chartjs(chartType, data, options={}, width="700px", height="400px"):
    """ Custom iphython extension allowing chartjs visualizations
    
    Usage:
        chartjs(chartType, data, options, width=1000, height=400)
    
    Args:
        chartType: one of the supported chart type options (line, bar, radar, polarArea, pie, doughnut)
        data: a python dictionary with datasets to be rapresented and related visualization settings, as expected 
              by chart js (see data parameter in http://www.chartjs.org/docs/)
        options: defaults {}; a python dictionary with additional graph options, as expected 
              by chart js (see options parameter in http://www.chartjs.org/docs/)
        width: default 700px
        height: default 400px
        
        NB. data and options structure depends on the chartType
    """
    display(
        Javascript("""
            require(['https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'], function(chartjs){
                var chartType="%s";
                var data=%s;
                var options=%s;
                var width="%s";
                var height="%s";
                
                element.append('<canvas width="' + width + '" height="' + height + '">s</canvas>');
                var ctx = element.children()[0].getContext("2d");
                
                switch(chartType.toLowerCase()) {
                    
                    case "line":
                        var myChart = new Chart(ctx).Line(data, options);
                        break;
                    case "bar":
                        var myChart = new Chart(ctx).Bar(data, options);
                        break;
                    case "radar":
                        var myChart = new Chart(ctx).Radar(data, options);
                        break;
                    case "polarArea":
                        var myChart = new Chart(ctx).PolarArea(data, options);
                        break;
                    case "pie":
                        var myChart = new Chart(ctx).Pie(data, options);
                        break;
                    case "doughnut":
                        var myChart = new Chart(ctx).Doughnut(data, options);
                        break;
                }
            });
            """ % (chartType, json.dumps(data), json.dumps(options), width, height)
        )
    )

ipython-notebook.py

#Sample extract from an IPython notebook:

%run chartjs-ipython.py

data = {
    "labels": [1,2,3,4,5,6],
    "datasets": [
        {
            "label": "Sample dataset",
            "fillColor": "rgba(151,187,205,0.2)",
            "strokeColor": "rgba(151,187,205,1)",
            "pointColor": "rgba(151,187,205,1)",
            "pointStrokeColor": "#fff",
            "pointHighlightFill": "#fff",
            "pointHighlightStroke": "rgba(151,187,205,1)",
            "data": h[1]
        }
]}

chartjs("bar", data)