Highchart/ROR - 從數據庫表中提取數據

我有一個rails應用程序，我已經實施了highcharts。我現在試圖擴展它，以便列出在特定項目上花費的小時數。我已經建立了一個JSfiddle示例，說明我正在努力實現的目標。 JSfiddle我所intially試圖做的是以下幾點：Highchart/ROR - 從數據庫表中提取數據

當前登錄的用戶進入他們的時間表，選擇一個項目或多個項目，進入他們的小時
小時輸入的數量和選定的項目（S ）被記錄到一個ProjectsHours表中。
當前用戶可以訪問項目小時頁面，該頁面將從ProjectsHours表中提取數據，並像我提供的JSfiddle示例一樣顯示它。

我已經做了一些研究，如何認爲它可能被完成。我在highcharts website 上看到，您可以通過設置Ajax請求來請求數據。

我寫這個問題，因爲我仍然是一個初學者在ror和JavaScript。

我也實現了一個使用ajax請求並使用JSON檢索數據的自動完成功能。我將我的自動完成功能設置爲以下，這是稍微不重要的，但是我爲我的自動完成發佈了以下JavaScript代碼，因爲。我個人認爲，我正在嘗試做的事情與我正在嘗試做的事情略有相似。我可能是錯的。如果有人能糾正我，謝謝。

自動完成

的application.js

function log(message) { 
     $("<div/>").text(message).prependTo("#log"); 
    } 

    $("#tags1").autocomplete({ 
     minLength: 2, 
     source: function(request, response) { 
      $.ajax({ 
       url: "/positionlist", 
       dataType: "json", 
       data: { 
        style: "full", 
        maxRows: 12, 
        term: request.term 
       }, 
       success: function(data) { 
        var results = []; 
        $.each(data, function(i, item) { 
         var itemToAdd = { 
          value: item, 
          label: item 
         }; 
         results.push(itemToAdd); 
        }); 
        return response(results); 

       } 
      }); 
     } 
    });

來源

2011-08-23 David

檢查firebug輸出，它訪問哪個URL以及請求的響應是什麼？ – Gazler

我有我的自動填充功能正常工作。我正在嘗試使用highcharts使用JSON發出Ajax請求來收集有關當前用戶時間表信息的信息，這些信息由ProjectHours表中的以下屬性組成：：week_commencing，：hours，：user_id，：project_task_id – David

我添加了上面的示例代碼只是爲了解釋我的想法是我認爲它可能會使用與我自動完成功能相似的Ajax請求。 JSfiddle顯示了我想要實現的目標，但我不知道如何去做這件事。我看了一下highcharts網站上的例子，但那是做了一些完全不同的事情，並且正在使用highcharts – David

當使用AJAX與highcharts，我通常是這樣的：

setInterval(function(){ 
    $.getJSON('traffic_sources.json', null, function(data) { 
     pie_chart("traffic_sources_graph", data.traffic_sources); 
    }); 
}, 3000); 

function pie_chart(div, data) 
{ 
    new Highcharts.Chart({ 
     chart: { 
     renderTo: div, 
     backgroundColor: '#dddddd' 
     }, 
     title: false, 
     tooltip: { 
     formatter: function() { 
      return '<b>'+ this.point.name +'</b>: '+ this.y +' %'; 
     } 
     }, 
     plotOptions: { 
     pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: true 
     } 
     }, 
     legend: { 
     layout: 'vertical', 
     align: 'right', 
     floating: false, 
     labelFormatter: function() { 
      return this.name + "(" + this.y + ")"; 
     } 
     }, 
     series: [{ 
     type: 'pie', 
     name: 'Browser share', 
     data: data 
     }] 
    }); 
}

的JSON對於上述這個樣子的，但是這是一個餅圖，對於一個酒吧cahrt的數據可能是slighlty不同：

{"traffic_sources":[["Direct",5465465],["Search Engines",345876],["Referring Sites",4578767]]}

希望這會有所幫助。

來源

2011-08-23 15:59:11 Gazler

感謝您的迴應，請看看 – David

Highchart/ROR - 從數據庫表中提取數據

回答

相關問題