Tutorial - Wetterdaten Diagramme mit amcharts - Teil 4.1 - Diagrammtypen (amcharts)

Teil 4.1 - Diagrammtypen (amcharts)

Achtung: Neue und aktualisierte Versionen der Tutorials finden Sie hier:

http://www.pscl.ch

Hier einige Diagrammtypen von amcharts. (nicht stockcharts)

01 - Säulendiagramm mit Max Temperatur:

Ein einfaches Diagramm ohne "dateparsing". Es stellt dies heißesten Tage eines Jahres dar:

// DATA
var chartData = [
 {date: "2013-6-27",tmax:36.0},
 {date: "2013-5-17",tmax:34.7},
 {date: "2013-7-2",tmax:34.5},
 {date: "2013-5-19",tmax:33.8},
 {date: "2013-5-18",tmax:33.7},
 {date: "2013-6-26",tmax:33.3},
 {date: "2013-6-22",tmax:33.1},
 {date: "2013-6-23",tmax:33.1},
 {date: "2013-6-21",tmax:31.9},
 {date: "2013-7-1",tmax:31.6}
];

//CHART
AmCharts.makeChart("chartdiv", {
 type: "serial",
 dataProvider: chartData,
 categoryField: "date",
 categoryAxis: {
  labelRotation:45,
 },
 valueAxes: [{
  position: "top",
  title: "temp",
  minorGridEnabled: true
 }],
 graphs: [{
  type: "column",
  title: "Temp",
  valueField: "tmax",
  fillAlphas:1
 }],
 legend: {
  useGraphSettings: true
 },
 creditsPosition:"top-right"
 }
);

02 - Einfaches Liniendiagramm

Ein einfaches Diagramm mit "dateparsing". Es stellt den Temperaturverlauf dar:

//DATA
var chartData = [
{date: new Date(2013,11,12,0,0),t:-2.2,h:89.0,p:1032.1},
{date: new Date(2013,11,12,0,5),t:-2.1,h:89.0,p:1032.1},
etc.
];

//CHART
AmCharts.makeChart("chartdiv", {
type: "serial",
dataProvider: chartData,
categoryField: "date",
categoryAxis: {
 parseDates: true,
 minPeriod: "mm"
},
valueAxes: [{
 position: "top",
 title: "t"
}],
graphs: [{
 type: "line",
 title: "Temp",
 valueField: "t",
 fillAlphas:0
}],
legend: {
 useGraphSettings: true
},
chartCursor:{
},
creditsPosition:"top-right"
}
);

03 - Gauge Diagramm mit Temperatur (min max avg)

Ein "gauge" Diagramm. Hier werden Durchschnittstemperatur (Zeiger), sowie Min und Max dargestellt.

//CHART
var chart = AmCharts.makeChart("chartdiv", {
type: "gauge",

axes: 
[{
startValue: -25,
axisThickness: 1,
endValue: 55,
valueInterval: 5,
inside: false,
fontSize:14,
labelOffset:20,

bands: 
[
 {
  startValue: 0,
  endValue: 25,
  color: "#0099cc"
 },
 {
  startValue: 25,
  endValue: 80,
  color: "#cc0000"
 },
 {
  startValue: 38.3,
  endValue: 44.5,
  color: "#0099cc",
  radius:"90%",
  innerRadius: "40%",
  alpha: 0.6
 }
]
}],

arrows: 
[
 {
  value: 40.55938,
  innerRadius:"30%",
  radius:"92%",
  startWidth:3,
  color: "#cc0000",
  nailAlpha: 0
 }
]
}
);

04 - Radar Diagramm mit Windrichtungen

Ein Radar Diagramm. Hier werden die Durchschnittswindrichtungen eines Tages dargestellt.

//DATA
var chartData = [
{direction:"N", value:0.88333},
{direction:"N-NE", value:0.90000},
{direction:"NE", value:1.45455},
{direction:"E-NE", value:1.90667},
{direction:"E", value:2.15714},
{direction:"E-SE", value:1.78333},
{direction:"SE", value:1.45556},
{direction:"S-SE", value:1.23077},
{direction:"S", value:0.76250},
{direction:"S-SW", value:1.43333},
{direction:"SW", value:1.10000},
{direction:"W-SW", value:0.86875},
{direction:"W", value:1.06471},
{direction:"W-NW", value:1.08000},
{direction:"NW", value:0.81143},
{direction:"N-NW", value:0.80625}
];

//CHART
AmCharts.makeChart("chartdiv", {
type: "radar",
dataProvider: chartData,
categoryField: "direction",

valueAxes:
[{
 gridType: "circles",
 fillAlpha: 0.05,
 fillColor: "#000000",
 axisAlpha: 0.2,
 gridAlpha: 0,
 fontWeight: "bold",
 minimum: 0
}],

graphs: 
[{
 lineColor: "#FFCC00",
 fillAlphas: 0.4,
 bullet: "round",
 valueField: "value",
 balloonText: "[[category]]: AVG [[value]] km/h",
}]

}
);