Google Chart API

Display temperature in a line chart

• Add script in block head
  1. Add annotation to display point value on the line: data.addColumn({type: 'number', role: 'annotation'})
  2. Use '' for string value: '{{ day['weekday'] }}'

{% block head %}
  {{ super() }}
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable()
      data.addColumn('string', 'Day');
      data.addColumn('number', 'Low');
      data.addColumn({type: 'number', role: 'annotation'});
      data.addColumn('number', 'High');
      data.addColumn({type: 'number', role: 'annotation'});

      data.addRows([
        {% for day in daily %}
          ['{{ day['weekday'] }}', {{ day['temp_min'] }}, {{ day['temp_min'] }}, {{ day['temp_max'] }}, {{ day['temp_max'] }}],
        {% endfor %}
      ]);

      var options = {
        chartArea:{left:0,top:0,width:'100%',height:'80%'},
        pointSize:10,
        legend: {position: 'none'},
        annotations: {
          textStyle: {
            fontSize: 14,
            bold: true
          }
        },
        hAxis: {
          textStyle: {
            fontSize: 14,
            bold: true
          }
        }
      };

      var chart = new google.visualization.LineChart(document.getElementById('daily_temp_chart'));

      chart.draw(data, options);
    }
  </script>
{% endblock %}

Then in block content:

```html
<div class="col-md-12">
  <div id="daily_temp_chart"></div>
</div>

Chart options

1. chartArea:{left:0,top:0,width:'100%',height:'80%'}, Control the chart position in html

2. pointSize:10, The point size of the annotation

3. legend: {position: 'none'}, Remove the legend

4. Annotation style:

   annotations: {
            textStyle: {
              fontSize: 14,
              bold: true
            }
          },
   

5. Horizontal line style:

   hAxis: {
            textStyle: {
              fontSize: 14,
              bold: true
            }
          }
   

Final View: