How to format a pandas dataframe for use with pandas-highcharts within Django

Question

I'm trying to use pandas-highcharts within a Django project; I'm able to produce the graph, but the data is not plotted, so I'm guessing my pandas dataframe is not formatted correctly, or maybe I'm not using the right method to render the template.

The result:

My dataframe:

                           Entrée d'eau - Archimède - 0013A2004166CFCD
timestamp                                                             
2016-12-23 00:05:18+00:00                                         29.0
2016-12-23 00:05:27+00:00                                         29.0
2016-12-23 00:05:37+00:00                                         29.0
2016-12-23 00:05:47+00:00                                         29.0
2016-12-23 00:05:58+00:00                                         29.0

My view:

from django.shortcuts import render
from data.models import Value
import pandas as pd
from pandas_highcharts.core import serialize

# [...]

df = pd.DataFrame.from_records(
    Value.objects.filter(device=a).values("timestamp", "leak_value"))

df.dropna(inplace=True)  # not sure about this
df.set_index("timestamp", inplace=True)
df.sort_index(inplace=True)
df = df.truncate(
    before=pd.to_datetime(request.POST.get("start")),
    after=pd.to_datetime(request.POST.get("stop")))
df = df.rename(
    index=str,
    columns={"leak_value": "{} - {} - {}".format(
        Room.objects.filter(unit=unit_sel).get(device=a),
        Device.objects.get(address=a).devicetype,
        a)})

print(df.head())  # DEBUG

chart = serialize(
    df=df,
    render_to='Leak Values',
    title="Leak Values",
    output_type='json')

return render(request, "leak_chart.html", context={"chart": chart})

My template (I include jquery and highcharts in base.html):

{% extends "base.html" %}

{% block body %}

    {% load staticfiles %}

    <div id="Leak Values"></div>

    <script type="text/javascript">
      new Highcharts.Chart({{chart|safe}});
    </script>

{% endblock %}

The page source: https://pastebin.com/EkJYQPLQ

By the way I haven't found a tag for pandas-highcharts and I don't think I have the privileges to create it. I'm using pandas-highcharts 0.5.2

EDIT: This question seems related but I'm unable to apply the answer to my specific situation.

Can you check what's the format is being passed to leak_chart.html of chart..?? Is it even a JSON format..?? — MoChen
– MoChen, Commented Oct 8, 2017 at 6:32
The series should look like this: series: [{ name: 'Jane', data: [1, 0, 4] }, { name: 'John', data: [5, 7, 3] }] This is what I extracted from the page source after generating the graph: "series": [{ "data": [ ["2016-12-23 00:05:18+00:00", 29.0], ["2016-12-23 00:05:27+00:00", 29.0], ["2016-12-23 19:11:34+00:00", 29.0] ], "yAxis": 0, "name": "Entr\u00e9e d'eau - Archim\u00e8de - 0013A2004166CFCD" }] — Simon TheChain
– Simon TheChain, Commented Oct 9, 2017 at 3:27

Kamil Kulig · Accepted Answer · 2017-10-09 09:30:11Z

1

Categories in Highcharts work as the values for axis' labels. If you want to assign a point's coordinate (x, y or z) to a category you should use a category index from categories array:

xAxis: {
  categories: ['cat1', 'cat2']
}

series: [{
  data: [
    [0 /*refers to the 'cat1' category */, someValue], 
    [1,/*refers to the 'cat1' category */, someValue]
  ]
}]

I think that in this example the better approach is to use datetime type of the x axis (http://api.highcharts.com/highcharts/xAxis.type) and convert your x values to timestamps. In this case there's no need to use categories at all.

answered Oct 9, 2017 at 9:30

Kamil Kulig

5,8261 gold badge10 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon TheChain Over a year ago

Thank you for your answer, it lead me to find precisely how to fix my code to use pandas-highcharts.

nick · Accepted Answer · 2018-08-14 22:31:02Z

0

Turns out all I had to change was to add use_index=False, now my data is shown:

chart = serialize(
            df=final_df,
            render_to='Leak Values',
            title="Leak Values",
            use_index=False,
            output_type='json')

However the timestamps are not shown, so I guess I'll have to make pandas-highcharts recognize them as datetime, as @Kamil Kulig suggested.

edited Aug 14, 2018 at 22:31

nick

1,1602 gold badges11 silver badges26 bronze badges

answered Oct 11, 2017 at 19:13

Simon TheChain

2771 silver badge16 bronze badges

Collectives™ on Stack Overflow

How to format a pandas dataframe for use with pandas-highcharts within Django

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related