How to create FusionCharts heatmap from a list of dictionaries?

Question

I want to show below data using FusionCharts heatmap in python:

[{'day_of_like': 'Monday', 'hours_of_like': 18, 'avg_of_likes': 8}, {'day_of_like': 'Monday', 'hours_of_like': 23, 'avg_of_likes': 5}]

But I can't find guide for that in FusionCharts site. How can I do that using python?

Answer 1

• This answer usesseaborn.heatmap to illustrate the example.
• The issue seems to be, getting the data into a useful format.
• The thing about all visualization tools is, the data must be in the correct shape for the tool.
  • I would use pandas.json_normalize to convert the list of dict s to a panel data form.
  • FusionCharts Data Format : FusionCharts XT accepts XML or JSON data to plot the charts
    • This can be done with pandas.DataFrame.to_json , which outputs a JSON string, or with pandas.DataFrame.to_dict() , which outputs a python dict .

import pandas as pd
import seaborn as sns

# list of dictionaries
data = [{'day_of_like': 'Monday', 'hours_of_like': 18, 'avg_of_likes': 8}, {'day_of_like': 'Monday', 'hours_of_like': 23, 'avg_of_likes': 5}]

# convert to dataframe
df = pd.json_normalize(data)

# save the data to a csv if needed
df.to_csv('test.csv', index=False)

# display(df)
  day_of_like  hours_of_like  avg_of_likes
0      Monday             18             8
1      Monday             23             5

# to json
df.to_json()

[out]:
'{"day_of_like":{"0":"Monday","1":"Monday"},"hours_of_like":{"0":18,"1":23},"avg_of_likes":{"0":8,"1":5}}'

# to dict
df.to_dict()

[out]:
{'day_of_like': {0: 'Monday', 1: 'Monday'}, 'hours_of_like': {0: 18, 1: 23}, 'avg_of_likes': {0: 8, 1: 5}}

# plot
sns.heatmap(df[['hours_of_like', 'avg_of_likes']])

Answer 2

Based on the data shared, looks like you have to duplicate day_of_like property, you need to either set a unique value or set a unique value for each duplicate key here is a JavaScript representation of the same in FusionCharts - http://jsfiddle.net/j3r0avhz/3/

  "dataset": [{
          "data": [{
              "rowid": "hl",
              "columnid": "1",
              "value": "18",
              "colorRangeLabel": "Bad"
            },
            {
              "rowid": "al",
              "columnid": "1",
              "value": "8",
              "colorRangeLabel": "Bad"
            },
          {
              "rowid": "hl",
              "columnid": "2",
              "value": "23",
              "colorRangeLabel": "Good"
            },
            {
              "rowid": "al",
              "columnid": "2",
              "value": "5",
              "colorRangeLabel": "Bad"
            }
          ]
        }]