Contents
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:
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.
In charts, each data serie you want to plot has to have a name. You can specify this name in three ways:
name
argument:charts.plot(data, name='My list')
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])
charts.plot(dataframe)
The data itself has to be one of these two options:
data = [1,2,5,9,6,3,4,8]
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:
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')
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!')))
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)
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']
.
stock
option can be set to True to use Higstock instead of Highcharts, which is a specialized version of the library for timeseries.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!
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)
options = {
'title': {'text': 'An entire pandas dataframe'}
}
charts.plot(df, options=options, show='inline', stock=True, display=['A', 'Q', 'Z'])
Now, lets go over some extra features of the Charts library in comparison with Highcharts.
object > title > text
.These features are the main differences between Charts and Highcharts and we try to stay out of your way for the rest.
In Charts, there are two types of options:
Let's try this to set the title of the chart and allow us to zoom in in both X and Y. When searching the API we can find how to set the title and the zoomType:
options = dict(
title=dict(text='Zoom me!'),
chart=dict(zoomType='xy')
)
charts.plot([s1, s2], options=options, show='inline')
Notice the title of the chart and try zooming in. Any option that is available on the highcharts API can be used in Charts by setting it in the options
dictionary.
plot()
function as keyword argumentsinline
, tab
or window
True
to show everything and to False
to show nothingSave your settings!
You can save your options by expanding the settings editor, choosing a name for your settings and pressing the save button. This will store your settings in a json file so you can use them again when you replot the chart. Note that you have to add .json
to be able to save the file.
You can plot a chart using these settings by specifying the name of the settings to the options parameter:
charts.plot([s1, s2], options='my-settings.json', show='inline')
This way you can replot a chart and keep the options you previously set!
All chart types or demos that you can find on the highchart website can be recreated using Charts. Make sure to take a look around and try some of the examples with Charts. To help you we plotted some common chart types in the next lines:
To create an area chart, we simply define some data and set the type to area.
series = [{
'name': 'John',
'data': [5, 3, 4, 7, 2]
}, {
'name': 'Jane',
'data': [2, -2, -3, 2, 1]
}, {
'name': 'Joe',
'data': [3, 4, 4, -2, 5]
}]
options = dict(title=dict(text='Area chart'))
charts.plot(series, options=options, show='inline', type='area')
No problem! Just change the type to bar and you are done. Note that you can even change the type
in the settings editor! Try changing this bar chart back to an area chart by setting object > chart > type
back to area.
options = {
'title': {'text': 'A bar chart'},
'plotOptions': {
'bar': {
'dataLabels': {'enabled': True}
}
}
}
charts.plot(series, options=options, show='inline', type='bar')
charts.plot(series, options={'title': {'text': 'A Spline chart'}}, show='inline', type='spline')
... and a scatter chart. All these charts will work separatly and stay interactive even after the notebook was shut down or in a static notebook on the web (Maybe you are even viewing a static notebook now!)
charts.plot(series, options={'title': {'text': 'A scatter chart'}}, show='inline', type='scatter')
Yep. Know that you mention it, I wanted to show you another chart type: The Pie chart. This chart type does need a different series format but for everything else behaves just the same as the other charts.
series = [{
'type': 'pie',
'name': 'Browser share',
'data': [
['Firefox', 45.0],
['IE', 26.8],
{
'name': 'Chrome',
'y': 12.8,
'sliced': True,
'selected': True
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
charts.plot(series, options={'title': {'text': 'A pie chart'}}, show='inline')
If you don't set a chart type globally, you can still set a chart type individually for every series. I can hear you asking: "Does that mean we can plot different types in the same graph?" Ofcourse! Highcharts has us covered there:
series = [{
'type': 'column',
'name': 'Jane',
'data': [3, 2, 1, 3, 4]
}, {
'type': 'line',
'name': 'John',
'data': [2, 3, 5, 7, 6]
}, {
'type': 'column',
'name': 'Joe',
'data': [4, 3, 3, 9, 0]
}, {
'type': 'spline',
'name': 'Average',
'data': [3, 2.67, 3, 6.33, 3.33],
'marker': {
'lineWidth': 2,
'lineColor': '#90ed7d',
'fillColor': 'white'
}
}]
charts.plot(series, options={'title': {'text': 'A Combination chart'}}, show='inline')
Well we have some more features :)
charts.plot()
can creates an HTML file with all data embedded in the file. This means you can easily share the HTML file and your friend just has to double click the file to see and interact with your chart!charts.plotasync()
method as a solution which has the exact same functionality as the charts.plot()
. Every series is saved in a separate JSON file and loaded asynchrounously when needed, preventing memory issuesNow go and try it! If you have any questions, feature requests or want to help visit the github page!