CODEWITHSUNDEEP
pythonjsonpython-3.xhighcharts
Siddalmia22
Siddalmia22

Reputation: 43

Adding series dynamically to highcharts using python 3

I am not able to add dynamic series in High charts from a panda data frame based on CSV file.

Data in the CSV file looks like this. 

    Installation    Manufacturing   Sales & Distribution    Project Development Other
          43,934           24,916                 11,744        -               12,908 
          52,503           24,064                 17,722        -               5,948 
          57,177           29,742                 16,005        7,988           8,105 
          69,658           29,851                 19,771        12,169          11,248 
          97,031           32,490                 20,185        15,112          8,989 
          119,931          30,282                 24,377        22,452          11,816 
          137,133          38,121                 32,147        34,400          18,274 
          154,175          40,434                 39,387        34,227          18,111

Code I am using 

import pandas as pd 
import csv
from highcharts import Highchart

FileName = "C:/Users/kumarso/Documents/Pthon/Pthon.csv"
FileName1 = "C:/ExcelP/Highcharts_Test.html"

H = Highchart()


data = pd.read_csv(FileName) 


for i, series in enumerate(data):
    H.add_data_set(series,
                    series_type='line',
                    name= data.columns)

# write out the html
with open(FileName1, "wt") as fh:
    fh.write(H.htmlcontent)

when I am opening the Html file to view the chart it shows no values, legends etc. only an empty chart. The issue I have is how to add the series like this with the headers.

series: [{
        name: 'Installation',
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
    }, {
        name: 'Manufacturing',
        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
    }, {
        name: 'Sales & Distribution',
        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
    }, {
        name: 'Project Development',
        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
    }, {
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

Edit 1 : The result of the chart should looks like this

enter image description here

Chart series looks like below in the source. It doesn't take the data. 

var chart = new Highcharts.Chart(option);

            var data = [{"data": "Installation", "type": "line", "name": "Series 1"}, {"data": "Manufacturing ", "type": "line", "name": "Series 2"}, {"data": "Sales & Distribution", "type": "line", "name": "Series 3"}, {"data": "Project Development", "type": "line", "name": "Series 4"}, {"data": "Other", "type": "line", "name": "Series 5"}];
            var dataLen = data.length;
            for (var ix = 0; ix < dataLen; ix++) {
                chart.addSeries(data[ix]);
            }

Upvotes: 1

Views: 845

Answers (1)

cucuru
cucuru

Reputation: 3698

I had a quite similar problem and solving using your post as reference, adapting your code, for you it should work this:

for series in enumerate(data):
   for serie in series: 
       H.add_data_set(serie.data,
                series_type='line',
                name= serie.name)

Hope it helps.

Upvotes: 1

Related Questions