Can a footer or extra table be added to the plot?

[junajo10]

Hello,

I would like to know if there is some way to add a footer or extra table to the plot. I wan to to add information such as Sharpe, Drawdown, P/L...

Rgds,

JJ

[flyjohn02]

Hi JJ,

Python-highchart basically can do all that highchart (highstock, highmap) API allows you to do but only those highchart has. It is better to first check their API docs (http://api.highcharts.com/highcharts) to see if you can find what you need. If you cannot find it and still want to do that. You may consider to write you own javascript (if you want it interactive).

Python-highchart provides a function (add_JSscript) to embed your (Java)script into highchart. However, it is limited to be in beginning or the end of the all script (including highchart's script). If you are not sure how it really works, please check some examples like lazy-loading.py in highstock, which is the same as this one:http://www.highcharts.com/stock/demo/lazy-loading on highchart's website.

I hope this helps.

Thanks,

Hank

[junajo10]

hi,

Thanks a lot, perhaps this link could be my solution. http://nbviewer.jupyter.org/github/oscar6echo/ezhc/blob/master/demo_ezhc.ipynb

[junajo10]

I have found what i want to develop, but i don`t know JS, could you help me to migrate this code to the library. http://jsfiddle.net/highcharts/z9zXM/

thank a lot

[junajo10]

Solution:

from highcharts import * H = Highchart()

s="""

Highcharts.drawTable = function () { Highcharts.tableLine = function (renderer, x1, y1, x2, y2) { renderer.path(['M', x1, y1, 'L', x2, y2]) .attr({ 'stroke': 'silver', 'stroke-width': 1 }) .add(); }

    var chart = $('#container').highcharts();

var tableTop = 310,
    colWidth = 100,
    tableLeft = 20,
    rowHeight = 20,
    cellPadding = 2.5,
    valueDecimals = 1,
    valueSuffix = ' °C';

// internal variables
var series = chart.series,
    renderer = chart.renderer,
    cellLeft = tableLeft;

// draw category labels
$.each(chart.xAxis[0].categories, function(i, name) {
    renderer.text(
        name, 
        cellLeft + cellPadding, 
        tableTop + (i + 2) * rowHeight - cellPadding
    )
    .css({
        fontWeight: 'bold'
    })       
    .add();
});
$.each(series, function(i, serie) {
    cellLeft += colWidth;

    // Apply the cell text
    renderer.text(
            serie.name,
            cellLeft - cellPadding + colWidth, 
            tableTop + rowHeight - cellPadding
        )
        .attr({
            align: 'right'
        })
        .css({
            fontWeight: 'bold'
        })
        .add();

    $.each(serie.data, function(row, point) {

        // Apply the cell text
        renderer.text(
                Highcharts.numberFormat(point.y, valueDecimals) + valueSuffix, 
                cellLeft + colWidth - cellPadding, 
                tableTop + (row + 2) * rowHeight - cellPadding
            )
            .attr({
                align: 'right'
            })
            .add();

        // horizontal lines
        if (row == 0) {
            Highcharts.tableLine( // top
                renderer,
                tableLeft, 
                tableTop + cellPadding,
                cellLeft + colWidth, 
                tableTop + cellPadding
            );
            Highcharts.tableLine( // bottom
                renderer,
                tableLeft, 
                tableTop + (serie.data.length + 1) * rowHeight + cellPadding,
                cellLeft + colWidth, 
                tableTop + (serie.data.length + 1) * rowHeight + cellPadding
            );
        }
        // horizontal line
        Highcharts.tableLine(
            renderer,
            tableLeft, 
            tableTop + row * rowHeight + rowHeight + cellPadding,
            cellLeft + colWidth, 
            tableTop + row * rowHeight + rowHeight + cellPadding
        );

    });

    // vertical lines        
    if (i == 0) { // left table border  
        Highcharts.tableLine(
            renderer,
            tableLeft, 
            tableTop + cellPadding,
            tableLeft, 
            tableTop + (serie.data.length + 1) * rowHeight + cellPadding
        );
    }

    Highcharts.tableLine(
        renderer,
        cellLeft, 
        tableTop + cellPadding,
        cellLeft, 
        tableTop + (serie.data.length + 1) * rowHeight + cellPadding
    );

    if (i == series.length - 1) { // right table border    

        Highcharts.tableLine(
            renderer,
            cellLeft + colWidth, 
            tableTop + cellPadding,
            cellLeft + colWidth, 
            tableTop + (serie.data.length + 1) * rowHeight + cellPadding
        );
    }

});

} """ data_Tokyo = [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] data_NY = [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5] data_Berlin = [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] data_London = [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

H.add_data_set(data_Tokyo, 'line', 'Tokyo') H.add_data_set(data_NY, 'line', 'New York') H.add_data_set(data_Berlin, 'line', 'Berlin') H.add_data_set(data_London, 'line', 'London')

options = { 'chart': { 'height':600, 'renderTo': 'container' , 'events':{'load':s} } ,

'title': {
    'text': 'Average monthly temperatures'
},

'xAxis': {
    'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
'yAxis': {
    'title': {
        'text': 'Temperature (°C)'
    }
},

'legend': {
    'y': -300
}

}

H.set_dict_options(options)

H.save_file("test")

[flyjohn02]

Thanks for your contribution. You are welcome to add new functions (like drawTable) in the source code and commit to this project. We will review it.