CODEWITHSUNDEEP
javascriptpythonflaskhighcharts
nieka
nieka

Reputation: 269

Highcharts: How do I add data from a dict to a series

I am using flask and therefore I have a dictionary with all the data I want to display with highcharts.

my_dic = {
        'dataset1': 
            {'x_data': [1, 2, 3, 4, 5, 6], 
            'y_data': [7, 8, 9, 10, 11, 12]}, 
        'dataset2': 
            {'x_data': [1, 2, 3, 4, 5, 6], 
            'y_data': [1, 2, 3, 4, 5, 6]}
        }

As you can see here, each key of my_dic should be the name of the series, and then I have another dict, which contains the x and y data for each dataset.

This solution is quite convenient if I want to plot something with python and matplotlib, since I just have to use a regular loop to get everything.

for dataset in my_dic:
    data = my_dic[dataset]
    line = ax.plot(data["x_data"], data["y_data"], label=dataset)

Is there a way to do the same if I want to plot everything with highcharts? How do I create such a loop with javascript?

My function for the highcharts plot looks like this:

$(function () { 
    var myChart = Highcharts.chart('spectra', {
        chart: {
            type: 'line'
        },
        title: {
            text: 'Spectra for '+ '{{fconfig}}'+' in position '+ '{{fposition}}'
        },
        xAxis: {
            title: {
                text: 'My x-Axis '
            }
        },
        yAxis: {
            title: {
                text: 'My y-Axis'
            }
        },                      
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },

        series: [
              ... HERE SHOULD BE THE DATA ...
             ]
    });
});

Upvotes: 0

Views: 1547

Answers (1)

arshovon
arshovon

Reputation: 13661

We can manipulate the variables passed from Flask to Jinja2 template. This is same in this case too. We can pass the data dictionary from Flask to our template and then manipulate it in JavaScript.

We are going to pass the dictionary you mentioned in the question from Flask to the template as below:

from flask import Flask
from flask import request
from flask import render_template

app = Flask(__name__)

@app.route('/')
@app.route('/highchart')
def show_index():
    data = {
        'dataset1': 
            {
                'x_data': [1, 2, 3, 4, 5, 6], 
                'y_data': [7, 8, 9, 10, 11, 12]
            }, 
        'dataset2': 
            {
                'x_data': [1, 2, 3, 4, 5, 6], 
                'y_data': [1, 2, 3, 4, 5, 6]
            }
    }
    fconfig = "Fconfig name"
    fposition = "Fposition name"
    return render_template('highchart.html', data = data, fconfig = fconfig, fposition = fposition)

if __name__ == '__main__':
    app.run(debug = True)

Then in template file which is highchart.html in our case, we will manipulate the dictionary in JavaScript. For simplicity, we are going to use the Y axis data only. Modify it as necessary.

highchart.html:

<!DOCTYPE html>
<html>
<head>
    <title>Highchart</title>
    <meta author = "Ahmedur Rahman Shovon" >
</head>
<body>
    <h3>Highchart Example</h3>
    <div id="spectra"></div>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/series-label.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>    
    <script type="text/javascript">
        $(document).ready(function(){
            var myChart = Highcharts.chart('spectra', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: 'Spectra for '+ '{{fconfig}}'+' in position '+ '{{fposition}}'
                },
                xAxis: {
                    title: {
                        text: 'My x-Axis '
                    }
                },
                yAxis: {
                    title: {
                        text: 'My y-Axis'
                    }
                },                      
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },

                series: [
                    {% for key in data %}
                    {
                        name: '{{ key }}',
                        data: {{ data[key].y_data }}
                    },
                    {% endfor %}
                ]
            });
        });
    </script>
</body>
</html>

We now get a chart like this:

flask highchart example

Upvotes: 5

Related Questions