Charts Tutorial


The python Charts library enables you to use the amazing Highcharts javascript library in your Python code to create beautiful and interactive charts. The library is structured in such a way that anything you can do with Highcharts, you can do with Charts... Even right in your IPython Notebook!

Contents

Installation

All you need to do to get started is download the library using pip:

pip install charts

Import the libary in Python to get started:

In [2]:
import charts
Server running in the folder /Users/arnoutaertgeerts/Projects/python-highcharts at 127.0.0.1:51780

Chart has two main functions which essentialy do the same thing, plot a chart:

  • charts.plot(series, options)
  • charts.plotasync(series, options)

In this quickstart we will discuss the plot() method and leave plotasync() for a different notebook.

Data configuration

In charts, each data serie you want to plot has to have a name. You can specify this name in three ways:

  1. If you want to plot a single series, you can use the name argument:
    charts.plot(data, name='My list')
  2. If you want to plot multiple series, you have to use the series format. This format is a dictionary containing two properties: data and name:
    charts.plot(dict(data=data, name='My series'))
    To plot multiple series in one chart, just create a list of the series dictionaries:
    charts.plot([series])
  3. You can also use a pandas dataframe:
    charts.plot(dataframe)

The data itself has to be one of these two options:

  1. A single list (or numpy array):

    data = [1,2,5,9,6,3,4,8]
  2. A list containing x,y pairs:

    data = [[1,8],[2,7],[3,4],[4,3],[5,9],[6,0],[7,10],[8,5]]

Lets try this for the 3 different methods. Note that we add the option show='inline' to show the charts inline in the notebook:

1) A single series with the name argument

In [3]:
data = [1,2,5,9,6,3,4,8]
options = dict(height=400, title=dict(text='My first chart!'))
charts.plot(data, options=options, name='List data', save='temp.svg', show='inline')
Out[3]:

Adjust chart settings

.json
In [4]:
data = [[1,8],[2,7],[3,4],[4,3],[5,9],[6,0],[7,10],[8,5]]
charts.plot(data, name='Second list data', show='inline', options=dict(title=dict(text='My second chart!')))
Out[4]:

Adjust chart settings

.json

2) If we want both we have to use the series approach:

In [5]:
s1 = dict(name='List data', data=[1,2,5,9,6,3,4,8], color='#2b908f')
s2 = dict(name='Second list data', data=[[1,8],[2,7],[3,4],[4,3],[5,9],[6,0],[7,10]])

options = {
    'title': {'text': 'A chart with two lines, wow!'}
}

charts.plot([s1, s2], show='inline', options=options)
Out[5]:

Adjust chart settings

.json

3) You can also directly use a pandas dataframe. (If you do not have pandas installed just skip this cell)

First we create a pandas dataframe based on dates and then plot it using charts. Notice we use two new options: stock=True and display=['A', 'Q', 'Z'].

  • The stock option can be set to True to use Higstock instead of Highcharts, which is a specialized version of the library for timeseries.
  • In our case we have a dataframe with 26 variables which can be become difficult to plot all in one chart. Charts gives you the option to add all these variables to the chart but initially only show a selection. We do this by setting the display argument and provide it with a list of names we want to view initially.

After the chart is plotted you can still change which variables are shown by clicking the button in the left corner and adding/removing variables from the chart!

In [6]:
import pandas as pd
import numpy as np
start = pd.Timestamp("20150101")
end = pd.Timestamp("20150201")
index = pd.DatetimeIndex(freq='900S', start=start, end=end)
columns = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 
'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']

data = np.zeros((26, len(index)))
for i, c in enumerate(columns):
    data[i] = i*np.linspace(0, 100, len(index))

df = pd.DataFrame(index=index, columns=columns, data=data.T)
In [7]:
options = {
    'title': {'text': 'An entire pandas dataframe'}
}

charts.plot(df, options=options, show='inline', stock=True, display=['A', 'Q', 'Z'])
Out[7]:

Adjust chart settings

.json