Integrate dynamic charts into autotest frontend.

frontend/croschart/templates/plot_chart.html

Index: frontend/croschart/templates/plot_chart.html
diff --git a/frontend/croschart/templates/plot_chart.html b/frontend/croschart/templates/plot_chart.html
new file mode 100644
index 0000000000000000000000000000000000000000..6f0fe7dee0db03b63564e3df1d281637c6309b10
--- /dev/null
+++ b/frontend/croschart/templates/plot_chart.html
@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+{% comment %}
+
+Copyright 2010 Google Inc. All Rights Reserved.
+
+This template builds a single plot on a single page for a zoomed-in view.
+{% endcomment %}
+{% block title %}ChromeOS Performance Chart{% endblock %}
+{% block html_block %}
+<!--Load the AJAX API-->
+<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+<script type="text/javascript">
+  // Load the Visualization API and the piechart package.
+  google.load('visualization', '1', {'packages':['corechart']});
+
+  // Set a callback to run when the Google Visualization API is loaded.
+  google.setOnLoadCallback(drawCharts);
+
+  // Callback that creates and populates a data table,
+  // instantiates the charts, passes in the data and
+  // draws them.
+  function drawCharts() {
+    var chart = new google.visualization.LineChart(
+        document.getElementById('{{ tpl_gviz_id }}'));
+    var json_data = new google.visualization.DataTable(
+        {% autoescape off %}{{ tpl_gviz_js }}{% endautoescape %}, 0.5);
+    google.visualization.events.addListener(chart, 'select', function(){
+      var build_tags = [
+      {% for job_tag in tpl_job_tags %}
+      '{{ job_tag }}'{% if not forloop.last %},{% endif %}
+      {% endfor %}
+      ];
+      window.open(
+          'http://cautotest/results/' +
+          build_tags[chart.getSelection()[0].row] +
+          '/' + '{{ tpl_gviz_title }}' +
+          '/results/keyval')
+      });
+    chart.draw(
+        json_data,
+        {colors: ['{{ tpl_colors|random }}'],
+         hAxis: {
+            slantedText: true,
+            slantedTextAngle: 90,
+            textStyle: {fontSize: 10}},
+         height: {{ tpl_height }},
+         is3D: true,
+         pointSize: 3,
+         legend: 'none',
+         title: '{{ tpl_gviz_title }} - {{ tpl_perf_key }}',
+         titlePosition: 'out',
+         width: {{ tpl_width }}});
+  }
+</script>
+<center>
+<span id="{{ tpl_gviz_id }}"></span>
+</center>
+{% endblock %}