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
- {{ 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>