Teil 4 - Grundlagen (amcharts)
Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:
http://www.pscl.chHier einige Beispiele mit amcharts (Achtung: nicht stockcharts)
Im Gegensatz zu den Stockcharts fallen hier die Panels weg. Es gibt nur ein Panel, welches jedoch mehrere Graphen enthalten kann.
Es müssen je Diagrammtyp die richtigen .js Dateien verlinkt werden. (z.B. serial.js oder für "gauge" Diagramme die "gauge.js", radar.js für radarcharts etc.)
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
//DATA
...
//CHART
...
</script>
Ansonsten ist der Aufbau etwa gleich:
<html>
<head>
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<script type="text/javascript">
//DATA
var chartData = [ HIER DIE DATEN ];
//CHART
AmCharts.makeChart("chartdiv", {
type: "serial",
dataProvider: chartData,
categoryField: "date",
categoryAxis:
{
labelRotation:45,
},
valueAxes:
[
{
position: "top",
title: "temp"
}
],
graphs:
[
{
type: "column",
title: "Temp",
valueField: "tmax",
fillAlphas:1
}
],
legend:
{
useGraphSettings: true
},
}
);
</script>
</head>
<body>
<div id="chartdiv" style="width:50%; height:300px;"></div>
</body>
</html>
Keine Kommentare:
Kommentar veröffentlichen