Skip to content

Instantly share code, notes, and snippets.

@trAve3113r

trAve3113r/candlesticks_and_sr_lines.html

Last active September 1, 2017 07:57
Show Gist options
  • Save trAve3113r/261e48614a3699c779337cc083a70c7c to your computer and use it in GitHub Desktop.
Save trAve3113r/261e48614a3699c779337cc083a70c7c to your computer and use it in GitHub Desktop.
Download ZIP
A page that displays candlesticks and SR lines with Google Charts via AJAX
Raw
candlesticks_and_sr_lines.html
<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
{% for ohlcdf in object_list %}
<script language="JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
[ {{ohlcdf.timestamp|date}}, {{ohlcdf.open}}, {{ohlcdf.high}}, {{ohlcdf.low}}, {{ohlcdf.close}}]
// Treat first row as data as well.
], true);
// Set chart options
var options = {
legend: "none",
};
// Instantiate and draw the chart.
var chart = new google.visualization.CandlestickChart(document.getElementById('container'));
// var chart = new google.visualization.ComboChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
{% empty %}
<div class="stylish">
Oops! No Ohlc data to display
</div>
{% endfor %}
</div>
</body>
</html>
@trAve3113r
Copy link
Author

trAve3113r commented Sep 1, 2017 •
edited
Loading

The ListView

`from django.views.generic import ListView
from django_ajax.mixin import AJAXMixin

class MyListView(AJAXMixin, ListView):
template_name = 'my_template_list.html'
def get_queryset(self):
queryset = OhlcDf.objects.filter(Q(instrument=#)& Q(time_frame=#))
return queryset
`
Further readings:
https://developers.google.com/chart/interactive/docs/gallery/combochart

https://developers.google.com/chart/interactive/docs/roles

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment