Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using ChartJs from IPython
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)
)
)
#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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment