Gromadzę pewne dane w arkuszu kalkulacyjnym Google. Z zebranych danych tworzę wykres aby graficznie zobrazować skalę poszczególnych zbiorów. Wykres ten chciałbym zamieścić na stronie internetowej, ponieważ chciałbym się z nim podzielić z innymi. Nie chciał bym natomiast, aby inni użytkownicy mieli wgląd do pozostałych danych (które są pominięte na wykresie). Wykres powinien być interaktywny, ponad to wybrałem sobie aby był kołowy i w 3D. Kliknąwszy w opcję Publikuj wykres... został mi wygenerowany gotowy kod do wklejenia na stronę www.
Niestety po umieszczeniu go na mojej stronie został mi wyświetlony napis: Pie chart should have a first column of type string
Sam nie wiem w czym tkwi problem, ale nawet na tym blogu nie mogę pokazać wykresu w ten sposób. Być może WordPress powoduje jakiś konflikt… Z problemem poradziłem sobie w inny sposób:
Do treści wpisu wkleiłem taki kod:
<div id="visualization_div" style="width: 600px; height: 400px;"></div>
Natomiast źródło danych umieściłem w pliku header.php mojego szablonu.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0');
function drawVisualization() {
google.visualization.drawChart({
"containerId": "visualization_div",
"dataSourceUrl": "https://docs.google.com/spreadsheet/XXXXXXXXXXXXXXXXXX",
"options":{"titleTextStyle":{"bold":true,"color":"#000000","fontSize":16},
"legendTextStyle":{"color":"#000000","fontSize":12},
"is3D":true,"pieSliceText":"label",
"hAxis":{"useFormatFromData":true,
"title":"Tytu\u0142 osi poziomej",
"viewWindow":{"min":null,"max":null},
"maxValue":null},
"vAxes":[{"useFormatFromData":true, "title":"Tytu\u0142 lewej osi pionowej","minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null},{"useFormatFromData":true,"minValue":null,"viewWindow":{"min":null,"max":null},"maxValue":null}],
"focusTarget":"series","annotations":{"domain":{}},"width":898,"height":392,"animation":{"duration":0}},"state":{},
"view":{},"isDefaultVisualization":false,"chartType":"PieChart","chartName":"Wykres 1"
});
}
google.setOnLoadCallback(drawVisualization);
</script>
Gdzie w miejsce XXXXXXXXXXXXXXXXXX wpisałem pełny adres mojego wykresu skopiowany z wygenerowanego przez Google kodu.
Wykres wyświetla się poprawnie, jest interaktywny, i nie ma już ostrzeżenia :”Pie chart should have a first column of type string”
