2013-10-28 10 views
7

zeigt Ich habe einen Google-Chart Liniendiagramm, das ich auf eine Trendlinie zeigen will, aber es wird nicht angezeigt.Google Chart Trendlinie nicht

Die Daten geholt aus einer Datenbank und die Javascript wird erzeugt, indem PHP aber die resultierende Javascript sieht wie folgt aus:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

// Load the Visualization API and the piechart package. 
google.load('visualization', '1.0', {'packages':['corechart']}); 

// Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawChart); 

// Callback that creates and populates a data table, 
// instantiates the pie chart, passes in the data and 
// draws it. 
function drawChart() { 
    var dataS = new google.visualization.DataTable(); 
    dataS.addColumn('string', 'Dag'); 
    dataS.addColumn('number', 'Poäng'); 
    dataS.addRows([ 
     ['1', 32], 
     ['2', 37], 
     ['3', 37], 
     ['4', 40], 
     ['5', 31], 
     ['6', 38], 
     ['7', 28], 
     ['8', 34], 
     ['9', 41], 
     ['10', 41], 
    ]); 

    var optionsS = { 
     title: '', 
     legend: 'none', 
     hAxis: {title: 'Serie'}, 
     vAxis: {title: 'Poäng'}, 
     pointSize: 4, 
     trendlines: { 0: {} } 
    }; 

    // Instantiate and draw our chart, passing in some options. 
    var chart = new google.visualization.LineChart(document.getElementById('chart_div_series')); 
    chart.draw(dataS, optionsS); 
} 
</script> 

Das Skript hauptsächlich Copypaste aus dem Charts Beispiel Google ist. Das Diagramm funktioniert gut, außer für die Trendlinie nicht angezeigt. Irgendwelche Ideen warum?

+0

Dies ist nicht die Quelle für Ihr Problem sein könnte, aber Sie haben ein Komma am Ende Ihres 'dataS.addRows' Array-Arguments, Dies kann in einigen Browsern zu Problemen führen. –

Antwort

17

Sie haben eine kontinuierliche Domäne Achsen (Typen „Zahl“, „Datum“, „Datetime“ oder „timeofday“) haben, um eine Trendlinie zu verwenden. Durch Ihre erste Spalte mit einem „string“ Typ-Einstellung (und es mit Streichern bevöl) werden deaktivieren Sie die Trendlinie. Wechseln Sie zu einer „Nummer“ Typ Spalte und die Trendlinie funktioniert:

var dataS = new google.visualization.DataTable(); 
dataS.addColumn('number', 'Dag'); 
dataS.addColumn('number', 'Poäng'); 
dataS.addRows([ 
    [1, 32], 
    [2, 37], 
    [3, 37], 
    [4, 40], 
    [5, 31], 
    [6, 38], 
    [7, 28], 
    [8, 34], 
    [9, 41], 
    [10, 41] 
]);