[Fixed]-How to pass all the data in dataframe that extract from excel sheet to highchart?

1👍

✅

Based on your error message, It seems that Django is unable to determine the url named as bar in your urls.py files, I think you forgot to put a named urls as bar, so that the javascript function can get the data from BarView.

Below add an example, the project name is questions, and create a new app named charts, the project structure will be like this:

–charts

–questions

–db.sqlite3

–manage.py

1, questions/urls.py:

from django.conf.urls import url, include
from django.contrib import admin
from charts import views as charts_views

urlpatterns = [
    url(r'^bar$', charts_views.BarView.as_view(), name='bar'),
    url(r'^charts/', include('charts.urls')),
    url(r'^admin/', admin.site.urls),
]

2, charts/urls.py:

from django.conf.urls import url

from . import views

app_name = 'charts'
urlpatterns = [
    url(r'^$', views.index),    
]

3, charts/views.py:

from django.shortcuts import render

# Create your views here.
from highcharts.views import HighChartsBarView
import random

def index(request):
    return render(request, 'charts/index.html')

class BarView(HighChartsBarView):
    categories = ['Orange', 'Bananas', 'Apples']

    @property
    def series(self):
        result = []
        for name in ('Joe', 'Jack', 'William', 'Averell'):
            data = []
            for x in range(len(self.categories)):
                data.append(random.randint(0, 10))
            result.append({'name': name, "data": data})
        return result

4, charts/templates/charts/index.html:

{% load staticfiles %}<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="{% static 'js/highcharts/highcharts.js' %}"></script>
    <script type="text/javascript">
    $(function () {
        $.getJSON("{% url 'bar' %}", function(data) {
            $('#container').highcharts(data);
        });
    });
    </script>
</head>
<body>
<div id="container" style="height: 300px"></div>
</body>
</html>

5, run the server, and in the browser, type in http://127.0.0.1:8000/charts/

it will show you the charts, hope it will help you.