0

I've been trying to follow this approach here to try and pass data from django models to a highcharts chart. However, it doesn't seem to be passing any data, even though there is indeed applicable data in my database. Here is the relevant code:

views.py:

def master(request):

    class ChartData(object):    
        def check_usage_data():
            data = {'usage': []}

            sources = RealTimeData.objects.all()

            for source in sources:
                data['usage'].append(source.usage)

            return data

    if request.user.is_authenticated():

        data = ChartData.check_usage_data()

        series = [
            {"data": data['usage']}
        ]

        return render(request, 'Properties/master.html', {'series': series})

    else:

        # If the usre isn't authenticated, the user is redirected to the Sign-n Page

        return render(request, 'SignIn/SignInPage.html')

master.html:

<!-- Chart builders -->
<script type="text/javascript">

    var RealTimeSeries = {{ series|safe }}

    // hours setting //
    hoursX = ['1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00']

    // categories/dates setting //
    oneYearX = ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'],
    sixMonthX = ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar']
    threeMonthX = ['Jan', 'Feb', 'Mar']

    // usage data sets //
    usageoneYearY = [9164950.4, 8154238.9, 3387452.8, 8849677.6, 9957030.6, 10740101.9, 9196562.5, 10532428.8, 10017343.7, 10190627.7, 9454554.3, 7832326.9]
    usagesixMonthY = [9196562.5, 10532428.8, 10017343.7, 10190627.7, 9454554.3, 7832326.9]
    usagethreeMonthY = [10190627.7, 9454554.3, 7832326.9]

    // rates data sets //
    oldRateoneYearY = [6.87, 10.62, 11.95, 10.65, 11.5, 12.74, 10.21, 11.16, 8.39, 8.78, 9.84, 9.81]
    oldRatesixMonthY = [10.21, 11.16, 8.39, 8.78, 9.84, 9.81]
    oldRatethreeMonthY = [8.39, 8.78, 9.84, 9.81]

    newRateoneYearY = [6.7087804, 8.452008, 6.2561854, 8.7319573, 6.2172567, 7.5617114, 10.1019943, 8.7198434, 8.1792204, 7.8935053, 6.1292755, 7.2133497]
    newRatesixMonthY = [10.1019943, 8.7198434, 8.1792204, 7.8935053, 6.1292755, 7.2133497]
    newRatethreeMonthY = [7.8935053, 6.1292755, 7.2133497]

    // costs data sets //
    costoneYearY = [614856.3935, 689196.9252, 211925.3278, 772750.0735, 619054.1545, 812135.5149, 929036.219, 918411.3026, 819340.6198, 804397.7345, 579495.6824, 564973.1276]
    costsixMonthY = [929036.219, 918411.3026, 819340.6198, 804397.7345, 579495.6824, 564973.1276]
    costthreeMonthY = [804397.7345, 579495.6824, 564973.1276]

    // savings data sets //
    savingsoneYearY = [14775.69899, 176783.2459, 192875.2818, 169740.5909, 526004.3645, 556153.4672, 9932.812293, 257007.7515, 21114.51661, 90339.37761, 350832.4608, 203378.1413]
    savingssixMonthY = [9932.812293, 257007.7515, 21114.51661, 90339.37761, 350832.4608, 203378.1413]
    savingsthreeMonthY = [90339.37761, 350832.4608, 203378.1413]

    $(document).ready(function(){
        // Construct RealTime chart //
        var usageChart = Highcharts.chart('realTime-chart', {
            chart: {
                type: 'column',
                style: {
                    fontFamily: 'Gotham-Book'
                }
            },
            title: {
                text: ''
            },
            xAxis: {
                categories: hoursX
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Usage (kWh)'
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Master',
                data: RealTimeSeries,
                color: 'rgb(33,93,125)',
            }],
            credits: {
                enabled: false,
            }
        });
    });
</script>

Right now, the page wont load as I'm getting a "unbound method check_usage_data() must be called with ChartData instance as first argument (got nothing instead)" error. However, I had previously played around with the placement of the ChartData(object) class definition, and when I had gotten the page to load, the layout of the chart would display but there wouldn't be any data on it (the axes titles and everything would be there though). Anyone know what's wrong with how I followed the linked approach?

paolompmojica
  • 83
  • 10

1 Answers1

1

The issue here is likely that highcharts doesn't understand the structure of the data you are passing it.

First of all though, you need to fix the problem with check_usage_data(). There seems to be no reason why this method has to be in its own class, so I would move it to a top level function within the your views.py module.

def check_usage_data():
    data = {'usage': []}
    sources = RealTimeData.objects.all()

    for source in sources:
        data['usage'].append(source.usage)

    return data

And then invoke it from the view:

def master(request):

   if request.user.is_authenticated():
       data = check_usage_data()

Assuming that your data is a list of floats, you should pass it to your template as:

return render(request, 'Properties/master.html', {'series': data['usage']})

So after doing all that your views.py would look like:

def master(request):

    if request.user.is_authenticated():
        data = check_usage_data()
        return render(request, 'Properties/master.html', {'series': data['usage']})

    return render(request, 'SignIn/SignInPage.html')

def check_usage_data():
    data = {'usage': []}
    sources = RealTimeData.objects.all()

    for source in sources:
        data['usage'].append(source.usage)

    return data

It may also be worth adding a semi-colon to where the list of data is output into the template:

var RealTimeSeries = {{ series|safe }};
Will Keeling
  • 22,055
  • 4
  • 51
  • 61