pizza-chart.html 1.76 KB
{% load i18n %}

    <!--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.0', {'packages':['corechart']});
      
      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);
      
      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
      {% if type_count %}
        ['{% trans "Emails"%}', {% firstof type_count.thread '0' %}],
        ['{% trans "Tickets"%}', {% firstof type_count.ticket '0' %}],
        ['{% trans "Wiki"%}', {% firstof type_count.wiki '0' %}],
        ['{% trans "Code"%}', {% firstof type_count.changeset '0' %}],
      {% else %}
        ['{% trans "Willing to help" %}', 100],
      {% endif %}
      ]);

      // Set chart options
      var options = {
        height: '{{ chart_height }}',
        legend: {
          position: 'bottom',
          alignment: 'center',
        },
        chartArea: {
          height: "85%",
          width: "95%",
          top: 10,
        },
      };

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('{{ chart_div }}'));
      chart.draw(data, options);

      $(window).on("debouncedresize", function( event ) {
        chart.draw(data, options);
      });
    }
    </script>