{% import 'appbuilder/baselib.html' as baselib %}

<div id="chart" style="height: {{height}};">
</div>

<script nonce="{{ baselib.get_nonce() }}" src="{{url_for('appbuilder.static',filename='js/google_charts.js')}}"></script>
<script nonce="{{ baselib.get_nonce() }}">
            //load the Google Visualization API and the chart
            google.load('visualization', '1', {'packages': ['corechart','gauge']});

            //set callback
            google.setOnLoadCallback (createChart);

            //-----------------------------------
            // Attach listener for tab open event
            //-----------------------------------
            function attachRedrawForTab(chart, dataTable, options) {
            	var $tab_el = $('a[data-toggle="tab"]');
                $tab_el.on('shown.bs.tab', function () {
                    // Redraws the chart when the tab is activated, so that chart size on tab
                    // won't be too small.
                    $curr_tab_id = ($(this).attr('href'));
                    $curr_tab = $($curr_tab_id);
                    if ($curr_tab.children('div').attr('id')=='chart')
                    {
                    	chart.draw(dataTable, options);
                    }
                });
            }

            //------------------------------------------
            // Attach listener for Accordion open event
            //------------------------------------------
            function attachRedrawForAccord(chart, dataTable, options) {
            	var $accordion_el = $('.panel-collapse');
		$accordion_el.on('shown.bs.collapse', function(){
                    // Redraws the chart when the tab is activated, so that chart size on tab
                    // won't be too small.
                    $curr_tab_id = ($(this).attr('href'));
                    $curr_tab = $($curr_tab_id);
                    if ($curr_tab.children('div').attr('id')=='chart')
                    {
                        chart.draw(dataTable, options);
                    }
                });
            }

            //callback function
            function createChart() {

                //create data table object
                var dataTable = new google.visualization.DataTable();

                //define columns
                dataTable.addColumn('string','x1');
                dataTable.addColumn('number', 'Count');
				
		dataTable.addRows([
		{%- for str_r, str_v in value_columns %}                
	        	['{{str_r}}', {{str_v}}],    	      
		{%- endfor %}
		]);
				
                //instantiate our chart object
                var chart = new google.visualization.{{chart_type}}(document.getElementById('chart'));
                var options = {is3D: {{ chart_3d }}, title: '{{ chart_title }}' };

                attachRedrawForTab(chart, dataTable, options);
                attachRedrawForAccord(chart, dataTable, options);

		chart.draw(dataTable, options);
            }
</script>
