raben.com

In the previous article in this series, a Planetary Kp bar chart graph was presented and there was brief description of the Kp index.

The Planetary Kp bar chart displays time-series data. A Planetary Kp data item consists of a date-time and an index value  -- nothing more, nothing less. On this chart, we want to display data for an interval of 4 days with a bar for each 3 hour period. Here a Barchart.Series is defined for each 3 hour interval:

def barChartSeries : BarChart.Series[] = [
    BarChart.Series { name: "0" },
    BarChart.Series { name: "3" },
    BarChart.Series { name: "6" },
    BarChart.Series { name: "9" },
    BarChart.Series { name: "12" },
    BarChart.Series { name: "15" },
    BarChart.Series { name: "18" },
    BarChart.Series { name: "21" },
];

Each individual Kp item will be entered into the BarChart.Series -- each array item of the Series corresponds to the values received for a particular date and time.

/**
 * Insert data values into barchart
 * hr: starting hour of data
 * val: the value (0 to 9)
*/
function insertData(hr:Integer, val:Number)
{
    var i :Integer = hr / 3;

    /*
    Color code values
      Kp 0 to 3 = green
         3 to 5 = yellow
         5 to 7 = orange
         7 to 9 = red (go outside and look for Aurora!)
    */
    var colorCode:Color;

    if (val >= 0 and val < 3) {
        colorCode = Color.GREEN;
    }
    else if (val >= 3 and val < 5) {
        colorCode = Color.YELLOW;
    }
    else if (val >= 5 and val < 7) {
        colorCode = Color.ORANGE;
    }
    else {
        colorCode = Color.RED;
    }
    // Change 0 to small value so that 0 value will showup on graph.
    var pval: Number = val;
    if (val == 0.0) {
        pval = 0.05;
    }

    insert BarChart.Data {value: bind pval fill:colorCode}  into barChartSeries[i].data;
    var size = sizeof barChartSeries[i].data;

    if (size > 8) {
       delete barChartSeries[i].data[0];
    }
}

An index "i" into the array is calculated by simply dividing the hour value hr by 3 (line 8).  So that the bar for Kp of 0 will show up, the value is set to small number (0.05).  Then the fill color of the bar is set depending on it current value (lines 19 thru 30). The value and its color code are inserted in the barChartSeries array (line 37).  The size of the array is then checked in case the bar chart is being updated (line 38). If there are more than 8 values, the first one is removed (lines 40 to 42).

Ok, lets define the actual bar chart. Its pretty much just a matter of defining the title and setting up the horizontal or x-axis (called categoryAxis in this chart) and the y-axis which is referred to as the "valueAxis" below. The barChart width is bound to stage.scene.width so that chart can work as a mobile phone application. The data for the chart is the barChartSeries array we defined above.

/**
 * Specify the bar chart
*/
def barChart: BarChart = BarChart {
        legendVisible: false
        title: "Estimated Planetary K Index"
        titleFill: Color.BLACK;
        blocksMouse: true;
        width: bind stage.scene.width;
        height: bind stage.scene.height;

        categoryAxis: CategoryAxis {
            categories: bind dates;
            label: "{ymd[0]} (Universal Time)";
            axisStrokeWidth: 2;
            tickLabelsVisible: true;
            tickLabelTickGap: 1;
            tickMarkLength: 5;
            tickMarkVisible: true;
        }

        valueAxis: NumberAxis {
            lowerBound: 0.0;
            upperBound: 9.0;
            tickUnit: 1;
            minorTickCount: 0;
            label:"Kp Index";
        }

        data: barChartSeries;
        onMouseDragged: function( e: MouseEvent ):Void {
            stage.x += e.dragX;
            stage.y += e.dragY;
        }

}

def stage: Stage = Stage {
        
        title:"Estimated Planetary Kp (3 hr)";

        scene: Scene {
            width: 400;
            height: 400;
            content: [
                barChart
            ]
        }
    }

}

Next time I'll present the code that retrieves the Kp data from a drupal webservice.