Tutorial - Wetterdaten Diagramme mit amcharts - Teil 1.1 - Diagramm mit mehreren Panels

Teil 1.1 - Diagramm mit mehreren Panels



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

http://www.pscl.ch

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 den Wert "h" aus dem Datenbereich hinzu.(Luftfeuchtigkeit)

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

3. Panels


Im Bereich "panels", werden die Panels definiert:

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

                }
                ],
                
                // panel Legend
                stockLegend: 
                {
                    valueTextRegular: " ",
                    markerType: "square"
                }
            }
            ],

Fügen wir ein zweites Panel dazu:

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

                }
                ],
                
                // panel Legend
                stockLegend: 
                {
                    valueTextRegular: "[[value]]",
                    markerType: "square"
                }
            },
            {
                title: "Panel 2",
                percentHeight: 100,
                
                //Panel graphs (dataline)
                stockGraphs: 
                [
                {
                    id: "g2",
                    title: "Humity",
                    valueField: "h",
                    lineColor: "#0099cc",
                    useDataSetColors: false,
                    fillColors: ["#0099cc","#ffffff"],
                    fillAlphas: 0.5

                }
                ],
                
                // panel Legend
                stockLegend: 
                {
                    valueTextRegular: "[[value]]",
                    markerType: "square"
                }
            }
            ],


4. Fertig. 




Labels: , , ,

Keine Kommentare:

Kommentar veröffentlichen

Abonnieren Kommentare zum Post (Atom)