Anyone have idea on how to add high chart in view.py? which mean my data are filter base on the python code and from the dataframe convert to highchart.
Install django-highcharts using pip (we do recommend to do it in a virtualenv).
git clone https://github.com/novapost/django-highcharts.git
cd django-highcharts
pip install -e ./
To integrate it into a Django project, simply add it to your INSTALLED_APPS:
INSTALLED_APPS = [
# some interesting stuff...
'highcharts',
# some other stuff...
]
Don’t forget to set your STATIC_ROOT path and to run the following command to update the static files:
python manage.py collectstatic
view
from highcharts.views import HighChartsBarView
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
template
{% 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>
Please note that the highcharts.js file should be called after the JQuery library.
Look into Documentation PDF for details.
EDIT 1
Install the package using pip
pip install pandas-highcharts
Import it in your views
import pandas_highcharts
df = ... # create your dataframe here
chart = pandas_highcharts.serialize(df, render_to='my-chart', output_type='json')
n your templates
<div id="my-chart"></div>
<script type="text/javascript">
new Highcharts.Chart({{chart|safe}});
</script>