Using Google motion chart for generating graph in django. i came accross with date format issue while converting from django t0 JavaScript date form new Date(2011, 01, 01).
motion chart link :http://code.google.com/apis/chart/interactive/docs/gallery/motionchart.html
below is the code how did :
ml =[]
for i in data:
year = m['month'].strftime('%Y')
month = m['month'].strftime('%m')
day = m['month'].strftime('%d')
check = 'new Date(%s, %s, %s)' % (year, month, day)
ml.append([str(m[selected_mode]),check, m['total']])
ml returned a list
i have this output in hmtl :
<script type="text/javascript">
google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualizati开发者_开发知识库on.DataTable();
data.addColumn('string', 'Mode');
data.addColumn('date', 'Date');
data.addColumn('number', 'Total');
data.addRows([["sl", "new Date(2011, 01, 01)", 31], ["kl", "new Date(2011, 02, 01)", 13], ["ml", "new Date(2011, 01, 01)", 51], ["rl", "new Date(2011, 03, 01)", 30], ["ml", "new Date(2011, 02, 01)", 22], ["sl", "new Date(2011, 03, 01)", 30], ["kl", "new Date(2011, 03, 01)", 28], ["sl", "new Date(2011, 02, 01)", 24], ["rl", "new Date(2011, 01, 01)", 17], ["rl", "new Date(2011, 02, 01)", 4], ["kl", "new Date(2011, 01, 01)", 5], ["sl", "new Date(2011, 04, 01)", 1]]);
var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart.draw(data, {width: 600, height:300});
}
</script>
here "new Date(2011, 01, 01)" takes as string but it should be in new Date(2011, 01, 01) , can you please help me how to make it has new Date(2011, 01, 01)
"new Date(2011, 01, 01)" ==> new Date(2011, 01, 01)
Below is the template
{% extends "newbase.html" %}
{% block extra_js %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Mode');
data.addColumn('date', 'Date');
data.addColumn('number', 'Total');
data.addRows({{ m1|safe }});
var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart.draw(data, {width: 600, height:300});
}
</script>
{% endblock %}
{% block content %}
<div id="chart_div" style="width: 600px; height: 300px;"></div>
</center>
{% endblock %}
Finally i solved my problem .created a dic and rendered to html, below is the snippet
<script type="text/javascript">
google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Mode');
data.addColumn('date', 'Date');
data.addColumn('number', 'Total');
data.addRows([
{% for fetch in m1 %}
[" {{ fetch.mode }}", new Date("{{ fetch.month|date:'D M d 00:00:00 Y' }}"), {{ fetch.total }}],
{% endfor %}
]);
var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));
chart.draw(data, {width: 1000, height:300});
}
</script>
dataTable.addRows( [
{% for d in data %}
["{{d.id}}","{{d.description|escapejs}}",new Date({{d.StartDate|date:"Y"}},{{dL.StartDate|date:"n"}}-1,{{d.StartDate|date:"j"}}),new Date()],
{% endfor %}
]);
Google Chart takes only Date() Object. Hence implemented as above and it is working for me.
精彩评论