How to make a stock chart in Django with Javascript?

Question

I want to build a stock website with Django, and I found a Javascript library (tickp) to make charts, but I don't know Javascript, nor do I know how to read json data in a Django template. I use this code to retrieve the stock data from Yahoo Finance.

I put these .py and .js in my folder, and my views like this:

from stock.stockretriever import StockRetriever

def stockretriever(request,number):
    data = StockRetriever().get_historical_info('YHOO')
    return HttpResponse(simplejson.dumps(data),mimetype='application/json')

But I don't know how I should write the template, can somebody tell me?

thanks.

Bernhard · Accepted Answer · 2011-11-28 14:37:25Z

1

You have two options:

render a template with data included
dynamically fetch data from the server

If you go for 1. you could add something like this to your template:

<script type="text/javascript">
   var my_data = {{ json_plot_data }};
</script>

The template includes also the javascript code that generates the plots from the data. The view function would include the data fetching and return a context object like so:

def my_stock_plot_view(request, number):
    # get stock data
    json_data = simplejson.dumps(data)
    django.shortcuts.render(request, 'template.html', {'json_plot_data':json_data})

If you go for 2. you would need to use something like jQuery.ajax to dynamically load json data using an ajax request. That request would invoke your view, in the jQuery.ajax call you specify that the request returns JSON which automatically makes the data available as an object to Javascript. In the jQuery.ajax success handler you would pass the data to your plot function.

answered Nov 28, 2011 at 14:37

Bernhard

8,8715 gold badges43 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sword Over a year ago

Thanks for your help,I can't unstand the doc of it,I don't konw how to write in html template.

sword Over a year ago

I write in the html template: <script type="text/javascript" src="/site_media/stats.js"></script> <script type="text/javascript" src="/site_media/tkcip.js"></script> <script type="text/javascript"> data = {{ hisdata }}; plot = window.tickp("#chart") plot.read(data) plot.plot() </script> <div id="chart" > 　{{hisdata}} </div> but nothing happen.

Bernhard Over a year ago

Take a look at the template jro suggests above. Use the body onload to call the plot commands in the way as you do. Also check the source of the rendered page whether the data appears at the place where you write data = {{ hisdata }}. Note, in my example I'm using json_plot_data for the template variable, so you'd need to change your template code to {{ json_plot_data }}.

sword Over a year ago

Thanks ,guys.:)Merry Chiristmas

jro · Accepted Answer · 2011-11-28 14:34:22Z

1

I don't have these libraries installed, but based on the readme of the tickp library, you'll need the following data: [date, open, high, low, close and optionally volume]. The get_historical_info function returns the columns [Date, Open, High, Low, Close, Volume, AdjClose]. The mismatch here is the AdjClose, so you'd need to strip that from the data you get from the StockRetriever:

from django.shortcuts import render
from stock.stockretriever import StockRetriever

def stockretriever(request, number):
    data = StockRetriever().get_historical_info('YHOO')
    # Assuming data is returned as a list of lists
    new_data = [d[:-1] for d in data]
    return render(request, 'stock.html', { 'data': simplejson.dumps(new_data) })

Following along with the readme, you need something along the following lines in your template:

<html>
<head><script src="tickp.js"></script><script src="stats.js"></script></head>
<body onload='plot = window.tickp("#chart"); plot.read({{ data }}); plot.plot();'>
  <div id="chart"></div>
</body>
</html>

Note that I've cut some corners with respect to possible Ajax calls or proper formatting and usage, but it should give you something to get started with. When you're missing something, please update your question with the specific issues you're having.

answered Nov 28, 2011 at 14:34

jro

9,5002 gold badges35 silver badges39 bronze badges

3 Comments

sword Over a year ago

Thanks jro,I look the format of the data when you told me that,I found that the data return back from stockretriever is a dict,and the tickp want that is a list.so,I can't use the json format?and other question is ,new_data = [d[:-1] for d in data] can't not pass in django.

jro Over a year ago

You didn't mention the format of the dict, but you'd need to convert it so that the data matches the expected format. Brief example, if your dict is d = {'date': '2011-11-28', 'open': 5.1, ...}, you should convert this to [d['date'], d['open'], ...]. Hope this helps you, if not: please post the structure of the dict.

sword Over a year ago

Thanks,I have already read the data in django,but nothing show in html template.

Collectives™ on Stack Overflow

How to make a stock chart in Django with Javascript?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related