1

I'm trying to learn how to pass through my own values/labels to a Highcharts graph using Django, and I've been running into some issues with properly structuring data/passing arguments.

I looked at this example (https://www.highcharts.com/demo/line-basic), and the data looked to be in the shape of an array of arrays, so I figured that's what my series should look like.

This is what my views looks like:

// in views.py:
def make_graph(request):
    dates = // A list of datetime.date objects.
    values = [1, 2, 3, 4, 5, 2, 3, 5, 3, 3]

    data = [[d, v] for d, v in zip(dates, values)]

    context = {"data": data}

    return render("graph.html", context)

Now, this is my Highcharts script:

<script>
var data = {{ data|safe }};

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: 'some title'
    },
    subtitle: {
        text: 'some subtitle'
    },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
    yAxis: {
        title: {
            text: 'y value'
        }
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br>',
        pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
    },

    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },

    colors: ['#6CF', '#39F', '#06C', '#036', '#000'],

    series: [{
        name: "Trend",
        data: data
    }]
});
</script>

When this HTML template is run, no chart appears. It's just a blank page, so I'm guessing the way I structure data and pass it into the template is wrong. (I've been using a CDN, and the sample charts work, so I don't think its a js issue).

So, my question is, what is the proper way to format data in views.py, and how do I correctly set the series data to that data? Thank you.

LeetCoder
  • 563
  • 1
  • 5
  • 17

1 Answers1

0

Solved this issue using this: How to convert datetime string to UTC to plot points on Highcharts

Essentially converted datetime objects to integer values.

LeetCoder
  • 563
  • 1
  • 5
  • 17