更新使用Ajax

Question

我創建了一個wheight圖表使用海軍報插件和我做海軍報圖表：

$(document).ready(function() { 
var data1 = [ 
    [gd(2012, 0, 1), 67], 
    [gd(2012, 1, 1), 68], 
    [gd(2012, 2, 1), 75], 
    [gd(2012, 3, 1), 69] 
]; 

var data2 = [ 
    [gd(2012, 0, 1), 60], 
    [gd(2012, 1, 1), 60], 
    [gd(2012, 2, 1), 60], 
    [gd(2012, 3, 1), 60] 
]; 
var dataset = [{ 
    label: "weight", 
    data: data1 
}, { 
    label: "Goal weight", 
    data: data2 
}]; 

var options = { 
    series: { 
     lines: { 
      show: true 
     }, 
     points: { 
      radius: 3, 
      fill: true, 
      show: true 
     } 
    }, 
    xaxis: { 
     mode: "time", 
     tickSize: [5, "day"], 
     tickLength: 0, 
     axisLabel: "2013", 
     axisLabelUseCanvas: true, 
     axisLabelFontSizePixels: 12, 
     axisLabelFontFamily: 'Verdana, Arial', 
     axisLabelPadding: 10 
    }, 
    yaxes: [{ 
     axisLabel: "", 
     axisLabelUseCanvas: true, 
     axisLabelFontSizePixels: 12, 
     axisLabelFontFamily: 'Verdana, Arial', 
     axisLabelPadding: 3, 
     tickFormatter: function (v, axis) { 
      return $.formatNumber(v, { 
       format: "#,###", 
       locale: "us" 
      }); 
     } 
    }], 
    legend: { 
     noColumns: 0, 
     labelBoxBorderColor: "#000000", 
     position: "nw" 
    }, 
    grid: { 
     hoverable: true, 
     borderWidth: 2, 
     borderColor: "#633200", 
     backgroundColor: { 
      colors: ["#ffffff", "#EDF5FF"] 
     } 
    }, 
    colors: ["#FFA100", "#B7C84B"] 
}; 

$(document).ready(function() { 
    $.plot($("#flot-placeholder1"), dataset, options); 
    $("#flot-placeholder1").UseTooltip(); 
}); 

function gd(year, month, day) { 
    return new Date(year, month, day).getTime(); 
} 

var previousPoint = null, 
    previousLabel = null; 
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 


$.fn.UseTooltip = function() { 
    $(this).bind("plothover", function (event, pos, item) { 
     if (item) { 
      if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) { 
       previousPoint = item.dataIndex; 
       previousLabel = item.series.label; 
       $("#tooltip").remove(); 

       var x = item.datapoint[0]; 
       var y = item.datapoint[1]; 

       var color = item.series.color; 
       var month = new Date(x).getDay(); 

       //console.log(item); 

       if (item.seriesIndex == 0) { 
        showTooltip(item.pageX, 
         item.pageY, 
         color, 
         "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)"); 
       } else { 
        showTooltip(item.pageX, 
         item.pageY, 
         color, 
         "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)"); 
       } 
      } 
     } else { 
      $("#tooltip").remove(); 
      previousPoint = null; 
     } 
    }); 
}; 

function showTooltip(x, y, color, contents) { 
    $('<div id="tooltip">' + contents + '</div>').css({ 
     position: 'absolute', 
     display: 'none', 
     top: y - 40, 
     left: x - 120, 
     border: '2px solid ' + color, 
     padding: '3px', 
     'font-size': '9px', 
     'border-radius': '5px', 
     'background-color': '#fff', 
     'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif', 
     opacity: 0.9 
    }).appendTo("body").fadeIn(200); 
} 

}）;

我需要的正是：

1把數據在一個單獨的文件，例如ajax.json：

var data1 = [ 
[gd(2012, 0, 1), 67], 
[gd(2012, 1, 1), 68], 
[gd(2012, 2, 1), 75], 
[gd(2012, 3, 1), 69] 
]; 

var data2 = [ 
[gd(2012, 0, 1), 60], 
[gd(2012, 1, 1), 60], 
[gd(2012, 2, 1), 60], 
[gd(2012, 3, 1), 60] 
]; 

，因爲我會從數據庫中值，但我不知道如何與功能GD（）做的事：

function gd(year, month, day) { 
    return new Date(year, month, day).getTime(); 
} 

2-第二個問題是，我希望能刷新圖表更新data.I嘗試，但每次我得到錯誤和圖表剛剛消失，我的想法是使用Ajax和點擊功能：

$("button.dataUpdate").click(function() { 

.... 

function onDataReceived() { 

    $.plot("#flot-placeholder1", data, options); 
} 

$.ajax({ 
    url: "ajax.json", 
    type: "GET", 
    dataType: "json", 
    success: onDataReceived 
}); 

所以我想通過點擊「dataupdate」運行AJAX按鈕移到然後我得到ajax.json頁面數據最後更新和刷新圖表任何我的想法？

備註：我花了2天時間找到解決的最後一個代碼在我的第一個正確的代碼集成到讓所有的工作，所以請我希望與代碼不只是一個評論直接解...

Answer 1

只是一些一般的提示：如果你長時間停留在某些東西上，試着花一些時間，也許幾天到一週時間學習AJAX，flot，JSON等，然後再回到所有問題上你有新的知識。此外，您應該嘗試使用自動代碼檢查器（如jshint.com）檢查您的代碼。

以下是我使用JSHint檢測到的一些錯誤，這可能會導致您的問題。請評論你的代碼是否仍然無效。

 
Line 1: $(document).ready(function() { 
Unmatched '{'. 

Line 136: } 
Expected ')' and instead saw ''. 

Line 136: } 
Missing semicolon. 

Answer 2

你的第一個問題在於沒有在「onDataReceived」函數中做任何事情來更新數據。這個函數中的代碼應該看起來更像是這樣的：

function onDataReceived(series) { 
    data = []; // Delete this line if you want to add graphs, not replace them. 
    data.push(series); 
    $.plot("#flot-placeholder1", data, options); 
} 

這應該給你與你的要求看起來像這樣的頁面上的數據的工作示例：

"label": "Label Name", 
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] 

你的最後一個問題是您嘗試使用的「gd」功能。您在代碼中要求提供JSON響應，然後嘗試解析JSON數據。只有gd（）不能被識別。

欲瞭解更多信息輪到自己的AJAX例子，看看源代碼：http://www.flotcharts.org/flot/examples/ajax/

祝你好運！

編輯：而不是使用gd（）函數，只需使用unix時間戳（乘以1000爲javascript目的）。它像一個魅力。