开发者

problem with date formate in motion chart in django

开发者 https://www.devze.com 2023-03-06 16:42 出处:网络
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).

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.
0

精彩评论

暂无评论...
验证码 换一张
取 消