CODEWITHSUNDEEP
pythondjangohighcharts
Simon TheChain
Simon TheChain

Reputation: 277

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

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: resulting highchart graph

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.

Upvotes: 0

Views: 2306

Answers (2)

Simon TheChain
Simon TheChain

Reputation: 277

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.

Upvotes: 0

Kamil Kulig
Kamil Kulig

Reputation: 5826

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.

Upvotes: 1

Related Questions