You are here

views-simplechart-graph.html.twig in Views Simple Chart 8

{{ attach_library('views_simplechart/google-chart') }}
<div id="views-simplechart-{{id}}" class="{{ classes }}">
  <script type="text/javascript">
    google.charts.load('current', {
        'packages': ['corechart','timeline','orgchart']
    });
    google.charts.setOnLoadCallback(function(){
      var data = new google.visualization.arrayToDataTable({{ jsondata|raw }});
      var options = {
        {% if isStacked %} 'isStacked':true, {% endif %}
        'is3D':true,
        'legend':'{{metadata.chart_legend_position}}',
        'title':'{{metadata.chart_title}}',
        'width':{{metadata.chart_width}},
        'height':{{metadata.chart_height}},
        'allowHtml':true
      };
      var container = document.getElementById('views-simplechart-graph-{{id}}');
      var chart = new google.visualization.{{metadata.chart_type}}(container);
      chart.draw(data, options);
    });
  </script>
  <div id="views-simplechart-graph-{{id}}"></div>
</div>

File

templates/views-simplechart-graph.html.twig
View source
  1. {{ attach_library('views_simplechart/google-chart') }}
  2. <div id="views-simplechart-{{id}}" class="{{ classes }}">
  3. <script type="text/javascript">
  4. google.charts.load('current', {
  5. 'packages': ['corechart','timeline','orgchart']
  6. });
  7. google.charts.setOnLoadCallback(function(){
  8. var data = new google.visualization.arrayToDataTable({{ jsondata|raw }});
  9. var options = {
  10. {% if isStacked %} 'isStacked':true, {% endif %}
  11. 'is3D':true,
  12. 'legend':'{{metadata.chart_legend_position}}',
  13. 'title':'{{metadata.chart_title}}',
  14. 'width':{{metadata.chart_width}},
  15. 'height':{{metadata.chart_height}},
  16. 'allowHtml':true
  17. };
  18. var container = document.getElementById('views-simplechart-graph-{{id}}');
  19. var chart = new google.visualization.{{metadata.chart_type}}(container);
  20. chart.draw(data, options);
  21. });
  22. </script>
  23. <div id="views-simplechart-graph-{{id}}"></div>
  24. </div>