[Solved]-Making a Highcharts plot with Python-Highcharts

they have a question like this on the high charts website

https://www.highcharts.com/forum/viewtopic.php?t=32634 which says

one option is to use getsvg - export image without any server: http://api.highcharts.com/highcharts#chart.getsvg second option would be to use highcharts default exporting server - post chart's options and get image: http://www.highcharts.com/docs/export-m ... e-overview third option is to set up your own exporting server:

http://www.highcharts.com/docs/export-m ... the-server

https://www.highcharts.com/blog/news/52-serverside-generated-charts/

main code segment:

function(chart) {
    chart.renderer.arc(200, 150, 100, 50, -math.pi, 0).attr({
        fill : '#fcffc5',
        stroke : 'black',
        'stroke-width' : 1
     }).add();
}

and on stackoverflow:

how to save an image of the chart on the server with highcharts?

this shows a variety of methods and adapts the questions code to

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

// load js libraries
page.injectjs("js/jquery.min.js");
page.injectjs("js/highcharts/highcharts.js");
page.injectjs("js/highcharts/exporting.js");

// chart demo
var args = {
width: 600,
height: 500
};

var svg = page.evaluate(function(opt){
$('body').prepend('<div id="container"></div>');

var chart = new highcharts.chart({
    chart: {
        renderto: 'container',
        width: opt.width,
        height: opt.height
    },
    exporting: {
        enabled: false
    },
    title: {
        text: 'combination chart'
    },
    xaxis: {
        categories: ['apples', 'oranges', 'pears', 'bananas', 'plums']
    },
    yaxis: {
        title: {
            text: 'y-values'
        }
    },
    labels: {
        items: [{
            html: 'total fruit consumption',
            style: {
                left: '40px',
                top: '8px',
                color: 'black'
            }
        }]
    },
    plotoptions: {
        line: {
            datalabels: {
                enabled: true
            },
            enablemousetracking: false
        },
        series: {
            enablemousetracking: false, 
            shadow: false, 
            animation: false
        }
    },
    series: [{
        type: 'column',
        name: 'andrii',
        data: [3, 2, 1, 3, 4]
    }, {
        type: 'column',
        name: 'fabian',
        data: [2, 3, 5, 7, 6]
    }, {
        type: 'column',
        name: 'joan',
        data: [4, 3, 3, 9, 0]
    }, {
        type: 'spline',
        name: 'average',
        data: [3, 2.67, 3, 6.33, 3.33],
        marker: {
            linewidth: 2,
            linecolor: 'white'
        }
    }, {
        type: 'pie',
        name: 'total consumption',
        data: [{
            name: 'andrii',
            y: 13,
            color: '#4572a7'
        }, {
            name: 'fabian',
            y: 23,
            color: '#aa4643'
        }, {
            name: 'joan',
            y: 19,
            color: '#89a54e'
        }],
        center: [100, 80],
        size: 100,
        showinlegend: false,
        datalabels: {
            enabled: false
        }
    }]
});

return chart.getsvg();
},  args);

// saving svg to a file
fs.write("demo.svg", svg);
// saving diagram as pdf
page.render('demo.pdf');

phantom.exit();

there are two ways of doing it. one as an image and the other as an interactive chart/hacky.

image. you will need to import requests,image and json. the fig.options generated by justpy will be sent as a payload to the highcharts export server and will return an image.

import requests
from ipython.display import image
import json

#using the fig output from the justpy.plot extension
#fig = wm.jp.plot(0,  ......

payload = {"async": true,
           "constr": "chart",
           "infile": fig.options,
           "scale": false,
           "type": "image/png",
           "width": false}

response = requests.post("""https://export.highcharts.com/""" ,json=payload)

image(url='https://export.highcharts.com/'+response.text)

jupyter notebook interactive/hacky way of doing it for jupyter as interactive. i copied the approach here embedding d3.js

you will need to import 2 things and then use the %%javascript cell magic. these are needed since the charts for highcharts need javascript to be rendered.

cell 1

#import needed
ipython.display import javascript
import json

cell 2

#using the fig output from the justpy.plot extension
#fig = wm.jp.plot(0,  ......

#this converts the dict(addict is actually whats used by justpy) into json
javascript("""
           window.dataforchart={};
           """.format(json.dumps(fig.options)))

cell 3
this runs the javascript code that renders the chart and displays it in the notebook

%%javascript
require.config({
    packages: [{
        name: 'highcharts',
        main: 'highcharts'
    }],
    paths: {
        'highcharts': 'https://code.highcharts.com'
    }
});
$("#chart1").remove();
element.append(`<div id="chart1"></div>`);
require([
    'highcharts',
    'highcharts/modules/exporting',
    'highcharts/modules/accessibility'
], function (highcharts){highcharts.chart("chart1", window.dataforchart)});

jupyter lab interactive/hacky

cell 1

from ipython.display import javascript,html
import json
import requests

cell 2

#loads highcharts into the notebook. succeeding calls for 
#highchart will work if you open this notebook.
response = requests.get('https://code.highcharts.com/highcharts.js')
javascript(response.text)

cell 3

javascript("""
           window.dataforchart={};
           """.format(json.dumps(fig.options)))

cell 4

#the html function has to be in the last line of the cell
#for this to work. also this become the output cell
html('<div id="chart123"></div>')

cell 5

#make sure that the chart id for the divs you make are unique so they
#dont overwrite each other
javascript('highcharts.chart("chart123", window.dataforchart);')

the image below is for the fruit chart example

this one is for your specific example