Tutorial Blog von wetterbinningen.ch: Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1.2

Teil 1.2 - Panel mit mehreren Graphen

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

http://www.pscl.ch

Für diesen Teil verwende ich zusätzlich Taupunkt Werte (hier: "dp"). Diese müssen im Datenbereich vorhanden sein.

1. Das Diagramm aus Teil 1

Das ist das Diagrammscript aus Teil 1. An zwei Orten müssen wir Änderungen vornehmen.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


        <link rel="stylesheet" href="amcharts/style.css" type="text/css">
        <script src="amcharts/amcharts.js" type="text/javascript"></script>
        <script src="amcharts/serial.js" type="text/javascript"></script>
        <script src="amcharts/amstock.js" type="text/javascript"></script>    
    
        <script type="text/javascript">
        
        // Start amcharts

        // Chart Daten
        var chartData = [   Hier kommen die Daten rein  ];

        // Start StockChart
        AmCharts.makeChart("chartdiv", 
        {
        
            //Chart Einstellungen
            type: "stock",
            pathToImages: "../amcharts/images/",
            
            //Datesets definieren
            dataSets: 
            [
            {

                fieldMappings: 
                [
                {
                    fromField: "t",
                    toField: "t"
                }
                ],
                
                dataProvider: chartData,
                categoryField: "date",
            }
            ],
            
            //Zeitachse (minPeriod: "mm" für minuten "DD" für Tage)
            categoryAxesSettings:
            {
                minPeriod: "mm",
                maxSeries: 1000
            },

            //Chart Panels
            panels: 
            [
            {
                title: "Panel 1",
                percentHeight: 100,
                
                //Panel graphs (Datenlinie)
                stockGraphs: 
                [
                {
                    id: "g1",
                    title: "Temperature",
                    valueField: "t",
                    lineColor: "#cc0000",
                    negativeLineColor: "#0099CC",
                    useDataSetColors: false,
                    fillColors: ["#cc0000","#ffffff"],
                    negativeFillColors: ['#0099CC', '#ffffff'],
                    fillAlphas: 0.5

                }
                ],
                
                //Panel Legende
                stockLegend: 
                {
                    valueTextRegular: "[[value]]",
                    markerType: "square"
                }
            }
            ],

            //chart scrollbar
            chartScrollbarSettings: 
            {
                enabled: false
            },
            
            //Chart Cursor
            chartCursorSettings: 
            {
                valueBalloonsEnabled: true,
                graphBulletSize: 1
            },
            
            //chart period selector
            periodSelector: 
            {
                inputFieldsEnabled: false,
                periods: 
                [
                {
                    period: "MAX",
                    label: "MAX"
                }
                ]
            },
            
            // Einstellungen für alle Panels
            panelsSettings: 
            {
                usePrefixes: false
            }            
        }
        );
        </script>
      
    </head>

    <body>

        <div id="chartdiv" style="width:100%; height:600px;"></div>

    </body>

</html>

2. fieldMappings

Im Bereich "fieldMappings" muss ein neuer Wert erst zugewiesen werden:

fieldMappings: 
                [
                {
                    fromField: "t",
                    toField: "t"
                }
                ],

Wir fügen Wert "dp" aus dem Datenbereich hinzu. (Taupunkt muss im Datenbereich vorhanden sein).

fieldMappings: 
                [
                {
                    fromField: "t",
                    toField: "t"
                },
                {
                    fromField: "dp",
                    toField: "dp"
                }
                ],

3. Graphs

Im Bereich "stockGraphs", werden die Graphen definiert:

                stockGraphs: 
                [
                {
                    id: "g1",
                    title: "Temperature",
                    valueField: "t",
                    lineColor: "#cc0000",
                    negativeLineColor: "#0099CC",
                    useDataSetColors: false,
                    fillColors: ["#cc0000","#ffffff"],
                    negativeFillColors: ['#0099CC', '#ffffff'],
                    fillAlphas: 0.5

                }
                ]

Fügen wir einen zweiten dazu:

                stockGraphs: 
                [
                {
                    id: "g1",
                    title: "Temperature",
                    valueField: "t",
                    lineColor: "#cc0000",
                    negativeLineColor: "#0099CC",
                    useDataSetColors: false,
                    fillColors: ["#cc0000","#ffffff"],
                    negativeFillColors: ['#0099CC', '#ffffff'],
                    fillAlphas: 0.5

                },
                {
                    id: "g2",
                    title: "Dewpoint",
                    valueField: "dp",
                    lineColor: "#cc0000",
                    negativeLineColor: "#0099CC",
                    useDataSetColors: false,
                    fillColors: ["#cc0000","#ffffff"],
                    negativeFillColors: ['#0099CC', '#ffffff'],
                    fillAlphas: 0.5

                }
  ]

Fertig:

Beachten: Beide Graphen benutzen derzeit dieselbe Achse. Unterschiedliche Einheiten machen hier keinen Sinn (zB. Luftdruck). Daher habe ich eine 2. Temperatur (Taupunkt) verwendet. Mehrere Achsen sind aber auch möglich.

4. Mehrere Achsen (ValueAxes)

Das betreffende Panel wird mit "valueAxes:" erweitert. Darin werden zwei Achsen definiert. (p2va1 auf der linken und p2va2 auf der rechten Seite des Diagramms)

{
title: "Panel 2",
percentHeight: 50,


valueAxes:
[
{
id: "p2va1",
position: "left"
},
{
id: "p2va2",
color:"#1CB30B",
position: "right"
}
],
...

Nun können wir die Achsen den Graphen zuweisen: (Hier)

stockGraphs: 
[
{
id: "g3",
title: "Hum",
valueField: "h",

valueAxis: "p2va1",

lineColor: "#cc0000",
negativeLineColor: "#0099CC",
useDataSetColors: false,
fillColors: ["#cc0000","#ffffff"],
negativeFillColors: ['#0099CC', '#ffffff'],
fillAlphas: 0.5

},
{
id: "g4",
title: "Pressure",
valueField: "p",

valueAxis:"p2va2",

lineColor: "#1CB30B",
useDataSetColors: false,
fillColors: ["#1CB30B","#ffffff"],
fillAlphas: 0

}
],

Tutorial Blog von wetterbinningen.ch

Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1.2 - Panel mit mehreren Graphen