2012-07-30 4 views
4

이 코드를 작성하여 차트, 표 및 툴바를 만들었습니다. Google 차트 내보내기?

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); 
}; 

구글은 URL에서 데이터 소스를 얻을,하지만 난 컨트롤러에서이 동적으로 데이터 소스를 얻을

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; 
      } 
     } 
    }); 
} 

. 내보내려고하면 다음과 같은 페이지를 다른 페이지로 전달합니다.

http://localhost:49972/Enerji/%5Bobject%20Object%5D?tqx=out%3Acsv%3B 

어떻게 동적 Json 데이터를 내보내기 도구 모음을 사용할 수 있습니까? 이 주제에 대한 예가 있습니까?

답변