HighCharts in Jupyter

I created a version that would work for multiple time series for the StockChart. It needs to be cleaned and rethought, but it is working for the plots that I needed.

def plot_multiple_stock(data, time=None, names=None, htype=None, title='title', ylabel='Y'):
    """
    Parameters
    ----------
    data : - list of list of numbers
        or - list of dictionaries. In this case, the other parameters time, names and htype are ignored.
               Each dictionary needs to contain an entry 'data' and other possible entries accepted by 
               highcharts. Some examples are:
                  'data' : y value for each point
                  'time' : x value for each point of data
                  'name' : name of the serie
                  'type' : type of line ('spline', 'line')
    time : - list of list of numbers
        or - list of numbers
    """
    if isinstance(data, list) and isinstance(data[0], dict):
        seriesOptions = data
    else:
        if names is not None:
            assert(len(data) == len(names))
        if htype is not None:
            if isinstance(htype, list):
                assert(len(data) == len(htype))

        seriesOptions = []
        for i, serie_data in enumerate(data):
            serie = {}
            if time is not None:
                if isinstance(time[i], list):
                    serie_time = time[i]
                else:
                    serie_time = time
                if len(serie_time) > 0 and type(serie_time[0]) is str:
                    serie_time = [unix_time_miliseconds(parse(dt)) for dt in serie_time]
                serie['data'] = [list(a) for a in zip(serie_time, serie_data)]
            else:
                print('there is no time')
                serie['data'] = serie_data
            if htype is not None:
                if isinstance(htype, list):
                    serie['type'] = htype[i]
                else:
                    serie['type'] = htype
            if names is not None:
                if len(names) > 0:
                    serie['name'] = names[i]
                else:
                    serie['name'] = names
            seriesOptions.append(serie)
    
    template = """
     <html>
        <head>
        <title>highchart</title>
           <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
           <script src="https://code.highcharts.com/stock/highstock.js"></script>
           <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
        </head>
        <body>

        <div id="container%s" style="width: 800px; height: 600px; margin: 125 auto"></div>

        <script language="JavaScript">
            var seriesOptions = %s;

            /**
             * Create the chart when all data is loaded
             * @returns {undefined}
             */
            Highcharts.stockChart('container%s', {
                chart: {
                    zoomType: 'x'
                },
              title: {
                  text: '%s'
              },
              plotOptions: {
                series: {
                  showInNavigator: true,
                }
              },
                yAxis: {
                    title: {
                        text: '%s'
                    }
                },
              tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b>',
                valueDecimals: 2,
                split: true
              },
              series: seriesOptions
            });
        </script>

        </body>
        </html>
    """
    
    r = str(random.randint(0,10000))
    f = template % (r, seriesOptions, r, title, ylabel)
    
    display(HTML(f))

It can be called in various ways. One way is to pass a list of dictiionaries with all the data, in the same format that is expected by highcharts seriesOptions.

seriesOptions = [dict(name='data1', data=[9,5,7,2], type='spline'),
                 dict(name='data2', data=[2,7,3,8], type='spline'),
                 dict(name='data3', data=[3,1,3,1], type='line'),
                 dict(name='data4', data=[0,5,0,5], type='line')]
        
plot_multiple_stock(seriesOptions, title='test multi-output', ylabel='meters')

You can specify the individual time per each of the time series as well. E.g:

for i in range(len(seriesOptions)):
    data = seriesOptions[i]['data']
    for j, k in enumerate(data):
        data[j] = [j+i*1e10+99e10, k]
    seriesOptions[i]['data'] = data

plot_multiple_stock(seriesOptions, title='test multi-output', ylabel='meters')

Or you can give all the parameters separated, with common time values for all the series or different ones. E.g:

time = [[0,1,2,3],
        ['2/03/1999', '3/4/2001', 'Sept 2003', '3rd Aug 2005'],
        [0,1,2,3],
        ['May 2012', 'Jul 2014', 'Aug 2016', 'Dec 2016']]
data = [[9,5,7,2],
        [0, 5, 7, 2],
        [2, 7, 3, 8],
        [0, 5, 0, 5]]
htype= ['spline', 'line', 'spline', 'line']
names = ['data1', 'data2', 'data3', 'data4']
        
plot_multiple_stock(data, time=time, names=names, htype=htype, title='test multi-output', ylabel='meters')

As I said, the code should be cleaned. I hope it is useful.

Regards,

So-Cool/high.ipynb

perellonieto commented Jul 18, 2017

Uh oh!

sada-narayanappa commented Sep 11, 2018

Uh oh!