implementing a javascript graph application to the existing admin panel's listing view

Question

Hello I want to implement a javascript graph plot application (ie http://people.iola.dk/olau/flot/examples/turning-series.html) to the existing admin view, where the instances of a model at the listing view also showing charts of these items and can be filtered through by using the already implemented list_filter option which I added at the admin.py of my application.

I would be greatful for any direction, example or already existing tutorial

Cheers.

Answer 1

If you follow the FLOT tutorials they are pretty complete.

• include jQuery
• include flot

Then just follow the examples / API

Essentially you "attach" the chart to a container...

<div id="myChartGoesHere" style="width:500px;height:250px;"></div>

Then populate it with the data you want:

<script>
   //data can be points [ [x1, y1], [x2, y2], ... ]
   var data = [ [3,4], [5,7], [2,9] ]
   //options is an object containing all your desired features
   var options = {
      lines: { show: true },
      points: { show: true }
   };
   var plot = $.plot($('myChartGoesHere'), data, options)
</script>

Answer 2

I would look into django admin templates. http://www.djangobook.com/en/1.0/chapter17/ is a good place to start. At the top of the page, do a for loop over all your data, and print it out as a variable to your javascript. I hope this can help you in the right direction.