如何在Django中格式化pandas数据框以与pandas-highcharts一起使用

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.

Answer 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.

Answer 2

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.