Example of Creating an Area Chart

To execute this example, create an HTML page and perform the following operations:

1. Add a link to CSS file named PP.css. Also add links to the following JS files:

2. Within the <head> tag add a style for the block with the "chart" identifier:

<style type="text/css">
    div#chart {
        border: #CCCCCC 1px solid;
        padding: 1px;
        margin: 1px;
        width: 600px;
        height: 500px;
    }
</style>

3. Then within the <head> tag add a script that creates an area chart:

<script>
var chart; // Chart
// Creates chart
function createChart() {
    // Create chart
    chart = new PP.Ui.Chart({
        Width: 600, // Chart width
        Height: 500, // Chart height
        ParentNode: "chart",
        Type: "Area", // Chart type
        // X axis
        XAxis: {
            Categories: ["2001", "2002", "2003", "2004", "2005", "2006"],
            Labels: {
                Enabled: true
            }
        },
        // Y axis
        YAxis: {
            Labels: {
                Enabled: true
            },
            Max: 60,
            Min: -10
        },
        // Y secondary axis
        YSAxis: {
            Enabled: false
        }
    });
}
// Creates data series for a chart
function createSeries() {
    var serie = createSerie();
    chart.setSeries([serie]);
    chart.redraw(true);
}
// Creates data series for a chart with areas
function createSerie() {
    var serie = new PP.Ui.ChartAreaSerie({
        Name: "Australia", // Series name
        Data: getSerieData(), // Values array
        Color: getColors()[0], // Color
        LineColor: getColors()[4], // Line color
        Parent: chart,
        Type: "Area"
    });
    var point = getChartAreaPoint(serie);
    // Add a point to the data series
    addPointToSerie(point, serie);
    return serie;
}
// Adds a point to the data series
function addPointToSerie(point, serie) {
    serie.getData().push({
        X: point.getX(),
        Y: point.getY(),
        YBottom: point.getYBottom()
    });
    serie.getPoints().push(point);
}
// Draw data labels for series point
function drawDataLabels() {
    for (var i in chart.getSeries()) {
        var serie = chart.getSerie(i);
        for (var j in serie.getPoints()) {
            var point = serie.getPoints()[j];
            var label = point.getBottomDataLabel();
            if (label) {
                // Determine coordinate of the second value on the X axis
                point.setPlotXBottom(point.getPlotX());
                // Determine label position
                if (point.getTopIsHovered()) {
                    label.setLeft(point.getPlotX());
                    label.setTop(point.getPlotY());
                } else {
                    label.setLeft(point.getPlotXBottom());
                    label.setTop(point.getPlotYBottom());
                }
                label.drawSelf();
            }
        }
    }
}
// Creates color array
function getColors() {
    var colors = ["rgb(192,217,253)", "rgb(163,200,252)", "rgb(134,183,251)",
        "rgb(96,161,250)", "rgb(192,142,204)", "rgb(192,107,188)"
    ];
    return colors;
}
// Display information about chart
function printChartInfo() {
    if (chart.getSeries().length > 0) {
        var serie = chart.getSerie(0);
        if (serie.getIsAreaRange()) {
            console.log("Chart with area and accumulation is displayed");
        } else {
            console.log("Chart with areas is displayed");
        }
        // Determine points included in the array (200, 300)
        var points = serie.getPolyInRange({
            X: 300,
            Y: 0
        }, {
            X: 200,
            Y: 0
        });
        console.log("Points included in the array from 200 to 300:");
        for (var i in points) {
            console.log("(%s, %s)", points[i].X, points[i].Y);
        }
    }
}
// Returns value array for data series
function getSerieData() {
    var data = [{
        X: 0,
        Y: 10,
        YBottom: 5
    }, {
        X: 1,
        Y: 30,
        YBottom: 15
    }, {
        X: 2,
        Y: 17,
        YBottom: -8
    }, {
        X: 3,
        Y: 25,
        YBottom: 12
    }, {
        X: 4,
        Y: 55,
        YBottom: 27
    }];
    return data;
}
// Returns point for chart data series
function getChartAreaPoint(serie) {
    var chartAreaPoint = new PP.Ui.ChartAreaPoint({
        Parent: serie, // Data series to which point belongs
        BottomDataLabel: new PP.Ui.ChartText({
            BackgroundColor: "rgb(255,239,153)",
            BorderWidth: 1,
            Radius: 12,
            Font: new PP.Font(),
            Text: "10",
            Parent: serie
        }), // Tick mark for the second value of the point
        X: getSerieData().length, // Point coordinate on the X axis
        Y: 20, // Coordinate of the first point value on the Y axis
        YBottom: 10, // // Coordinate of the second point value on the Y axis
    });
    //The tick mark for the second point value of data series will be displayed
    chartAreaPoint.setTopIsHovered(false);
    return chartAreaPoint;
}
function onReady() {
    // Create chart with areas
    createChart();
    // Create data series for chart
    createSeries();
    // Draw data tick marks for series points
    drawDataLabels();
    // Display information about chart
    printChartInfo();
}
</script>

4. Within the <body> tag specify name of the function creating a chart as the value of the onLoad attribute, and also add a block with the "chart" identifier:

<body onload="onReady()">
    <div id="chart"></div>
</body>

After executing the example area chart is placed on the HTML page:

The browser console shows a message informing on the type of the displayed chart, and also coordinates of the points in the range from 200 to 300:

Stacked area chart is displayed

Points in the range from 200 to 300:

(251.35677083333331, 277.2142857142857)

(251.35677083333331, 432.57142857142856)

See also:

Chart