I wrote this code to create a chart, table, and toolbar.
google.load("visualization", "1", { packages: ["corechart"] }); google.load('visualization', '1', { packages: ['table'] }); //google.setOnLoadCallback(drawChart); function drawChart() { $.ajax({ type: "GET", url: '@Url.Action("GunlukOkumalar", "Enerji")', data: "startDate=" + $('#start_date').val() + "&endDate=" + $('#end_date').val() + "&sayac_id=" + $("#sayaclar").val(), //belirli aralıklardaki veriyi cekmek için success: function (result) { if (result.success) { var evalledData = eval("(" + result.chartData + ")"); var opts = { curveType: "function", width: '100%', height: 500, pointSize: 5 }; new google.visualization.LineChart($("#chart_div").get(0)).draw(new google.visualization.DataTable(evalledData, 0.5), opts); $('#chart_div').show(); var visualization; var data; var options = { 'showRowNumber': true }; data = new google.visualization.DataTable(evalledData, 0.5); // Set paging configuration options // Note: these options are changed by the UI controls in the example. options['page'] = 'enable'; options['pageSize'] = 10; options['pagingSymbols'] = { prev: 'prev', next: 'next' }; options['pagingButtonsConfiguration'] = 'auto'; // Create and draw the visualization. visualization = new google.visualization.Table(document.getElementById('table')); visualization.draw(data, options); var components = [ { type: 'html', datasource: data }, { type: 'csv', datasource: data } ]; var container = document.getElementById('toolbar_div'); google.visualization.drawToolbar(container, components); return false; } else { $('#chart_div').html('<span style="color:red;"><b>' + result.Error + '</b></span>'); $('#chart_div').show(); $('#table').html('<span style="color:red;"><b>' + result.Error + '</b></span>'); $('#table').show(); return false; } } }); }
Google example
function drawToolbar() { var components = [ {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}}, {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'}, {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA', gadget: 'https://www.google.com/ig/modules/pie-chart.xml', userprefs: {'3d': 1}, style: 'width: 800px; height: 700px; border: 3px solid purple;'} ]; var container = document.getElementById('toolbar_div'); google.visualization.drawToolbar(container, components); };
Google receives dataSource from url, but dynamically get dataSource from controller. When I try to export this page forward to another page, for example:
http://localhost:49972/Enerji/%5Bobject%20Object%5D?tqx=out%3Acsv%3B
How can I use the export toolbar for Json dynamic data? Is there an example on this topic?