爲圖表添加噪音（Google圖表api）

Question

我必須在線圖中顯示大約20行，並使用Google的折線圖。這可能發生，這些行重疊。向數據添加噪聲的最佳方式是什麼，以便所有行都可見。

爲cat1，cat2和cat3值是相同的，但我想的是，這是顯而易見的形象，他們是非常接近 - 所以我的想法是，該行不應重疊，但相隔一個位。用戶不能假設所有值都重疊，因爲對於某些事件，我們假設D，這些值可能會丟失。

Answer 1

鑑於這種圖表：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', '#1', '#2', '#3'], 
    ['A', 1, 1, 1], 
    ['B', 2, 2, 2], 
    ['C', 3, 3, 3], 
    ['D', 4, 4, 4], 
    ['E', 5, 5, 5], 
    ['F', 6, 6, 6], 
    ['G', 7, 7, 7], 
    ['H', 8, 8, 8], 
    ['I', 9, 9, 9], 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {width: 500, height: 400, 
        vAxis: {maxValue: 10}} 
     ); 
} 

的一個方法是添加一個一致的+/-每個系列：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', '#1', '#2', '#3'], 
    ['A', 1, 1, 1], 
    ['B', 2, 2, 2], 
    ['C', 3, 3, 3], 
    ['D', 4, 4, 4], 
    ['E', 5, 5, 5], 
    ['F', 6, 6, 6], 
    ['G', 7, 7, 7], 
    ['H', 8, 8, 8], 
    ['I', 9, 9, 9], 
    ]); 

    for (var i = 1;i < data.getNumberOfColumns();i++) { 
    // Algorithm to add +/- 0.1 for each series 
    var dither = Math.round((i - 1)/2)/5; 
    if ((i - 1) % 2 == 0) { 
     dither = dither * -1; 
    } 
    for (var j = 0;j < data.getNumberOfRows();j++){ 
     // Add dither to series to display differently, but keep same data for tooltip 
     data.setCell(j, i, data.getValue(j, i) + dither, data.getValue(j, i) + '', undefined) 
    } 
    } 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {width: 500, height: 400, 
       vAxis: {maxValue: 10}} 
     ); 
} 

這個問題方法是，如果你的軸或數據的值改變了顯着性很顯然，你將無法看到差距（因爲屏幕的分辨率不夠大）。爲了解決這個問題，我們需要手動設置軸的最小/最大值，以便能夠提出一個適當的因子。例如，從this answer我們可以採取以下算法來確定最小和最大軸是大致與谷歌會爲我們自動的設定值：

// Take the Max/Min of all data values in all graphs 
var totalMax = 345; 
var totalMin = -123; 

// Figure out the largest number (positive or negative) 
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin)); 

// Round to an exponent of 10 appropriate for the biggest number 
var roundingExp = Math.floor(Math.log(biggestNumber)/Math.LN10); 
var roundingDec = Math.pow(10,roundingExp); 

// Round your max and min to the nearest exponent of 10 
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec; 
var newMin = Math.floor(totalMin/roundingDec)*roundingDec; 

// Determine the range of your values 
var range = newMax - newMin; 

// Define the number of gridlines (default 5) 
var gridlines = 5; 

// Determine an appropriate gap between gridlines 
var interval = range/(gridlines - 1); 

// Round that interval up to the exponent of 10 
var newInterval = Math.ceil(interval/roundingDec)*roundingDec; 

// Re-round your max and min to the new interval 
var finalMax = Math.ceil(totalMax/newInterval)*newInterval; 
var finalMin = Math.floor(totalMin/newInterval)*newInterval; 

我們可以添加這一切在一起，並認爲它甚至會工作，如果所有的值由10因數提高（這不會與硬編碼版本的工作）：

function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['x', '#1', '#2', '#3'], 
    ['A', 10, 10, 10], 
    ['B', 20, 20, 20], 
    ['C', 30, 30, 30], 
    ['D', 40, 40, 40], 
    ['E', 50, 50, 50], 
    ['F', 60, 60, 60], 
    ['G', 70, 70, 70], 
    ['H', 80, 80, 80], 
    ['I', 90, 90, 90], 
    ]); 

    // Get max and min values for the data table 

    var totalMin = data.getValue(0,1); 
    var totalMax = data.getValue(0,1); 

    for (var i = 1;i < data.getNumberOfColumns();i++) { 
    for (var j = 0;j < data.getNumberOfRows();j++){ 
     if (data.getValue(j, i) < totalMin) { 
     totalMin = data.getValue(j, i); 
     }   
     if (data.getValue(j, i) > totalMax) { 
     totalMax = data.getValue(j, i); 
     } 
    } 
    } 

    // Calculate grid line axes and min/max settings 

    // Figure out the largest number (positive or negative) 
    var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin)); 

    // Round to an exponent of 10 appropriate for the biggest number 
    var roundingExp = Math.floor(Math.log(biggestNumber)/Math.LN10); 
    var roundingDec = Math.pow(10,roundingExp); 

    // Round your max and min to the nearest exponent of 10 
    var newMax = Math.ceil(totalMax/roundingDec)*roundingDec; 
    var newMin = Math.floor(totalMin/roundingDec)*roundingDec; 

    // Determine the range of your values 
    var range = newMax - newMin; 

    // Define the number of gridlines (default 5) 
    var gridlines = 5; 

    // Determine an appropriate gap between gridlines 
    var interval = range/(gridlines - 1); 

    // Round that interval up to the exponent of 10 
    var newInterval = Math.ceil(interval/roundingDec)*roundingDec; 

    // Re-round your max and min to the new interval 
    var finalMax = Math.ceil(totalMax/newInterval)*newInterval; 
    var finalMin = Math.floor(totalMin/newInterval)*newInterval; 

    // Calculate Dither 

    for (var i = 1;i < data.getNumberOfColumns();i++) { 
    // Algorithm to add +/- 0.1 for each series 
    var dither = Math.round((i - 1)/2)/(10/newInterval); 
    if ((i - 1) % 2 == 0) { 
     dither = dither * -1; 
    } 
    for (var j = 0;j < data.getNumberOfRows();j++){ 
     // Add dither to series to display differently, but keep same data for tooltip 
     data.setCell(j, i, data.getValue(j, i) + dither, data.getValue(j, i) + '', undefined) 
     } 
     } 

     // Create and draw the visualization. 
     new google.visualization.LineChart(document.getElementById('visualization')). 
     draw(data, {width: 500, height: 400, 
     vAxis: {minValue: finalMin, maxValue: finalMax}} 
     ); 
    }