Example of Creating a Scatter Chart

To execute the 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: 450px;
        height: 400px;
    }
</style>

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

<script>
var chart;
// Creates chart
function createChart() {
    // Create chart
    chart = new PP.Ui.Chart({
        Width: 450, // Chart width
        Height: 400, // Chart height
        ParentNode: "chart",
        Series: [{
            Name: "Australia", // Series name
            Data: getSerieData1(), // Value array
            Color: getColors()[0], // Color
            LineColor: getColors()[4], // Line color
            LineWidth: 2, // Line width
            Marker: getMarker(getColors()[0])
        }, {
            Name: "Asia",
            Data: getSerieData2(),
            Color: getColors()[1],
            LineColor: getColors()[5],
            LineWidth: 2,
            Marker: getMarker(getColors()[1])
        }],
        Type: "Scatter", // Chart type
        // X axis
        XAxis: {
            Categories: ["2001", "2002", "2003", "2004", "2005", "2006"],
            IsX: true,
            Labels: {
                Enabled: true
            }
        },
        // Y secondary axis
        YSAxis: {
            Enabled: false
        }
    });
}
// Returns marker for chart data series
function getMarker(borderColor) {
    var marker = {
        BorderColor: borderColor,
        BorderWidth: 2,
        Color: "rgb(255, 255, 255)",
        Enabled: true,
        Radius: 8,
        Symbol: "Circle",
    };
    return marker;
}
// Creates Y axis for the chart
function createAxis() {
    var axis = new PP.Ui.ChartCanvasAxis({
        AllowDecimals: false, // Disable to use decimal values
        Parent: chart,
        // Set axis position determined by user
        Position: "custom",
        Min: 0,
        Max: 70,
        PlotBands: [],
        PositionValue: -1, // The Y axis is places to the left from the chart construction area
        Primary: true, // This axis is the main one
        // Number of axis intervals
        TickIntervalsCount: 5,
        // Axis title
        Title: {
            Text: "Value",
            DisplayUnit: "M. Rub.",
            Font: new PP.Font(),
            Wrap: PP.Ui.TextWrapping.WrapWithEllipsis,
            Align: "Middle"
        },
        // Disable to use maximum and minimum values by default
        UseDefaultExtremes: false,
        LabelClick: function(sender, args) {
            if (args.Tick) {
                if (args.Tick.getFont().getIsUnderline()) {
                    args.Tick.getFont().setIsUnderline(false);
                } else {
                    args.Tick.setFont(new PP.Font());
                    args.Tick.getFont().setIsUnderline(true);
                }
                this.redraw();
            }
        },
        LabelMouseOut: function(sender, args) {
            if (args.Tick) {
                args.Tick.setColor("rgb(0,0,0)");
                this.redraw();
            }
        },
        LabelMouseOver: function(sender, args) {
            if (args.Tick) {
                args.Tick.setColor("rgb(255,0,0)");
                this.redraw();
            }
        },
        TitleDblClick: function(sender, args) {
            if (args.Axis && args.Axis.getTitle()) {
                console.log("Axis title: «%s»", args.Axis.getTitle().Text);
            }
        }
    });
    // Set up access methods for the Color, Font and ticks properties
    PP.Object.defineProps(PP.Ui.ChartAxisTick, ["Color", "Font"], true);
    PP.Object.defineProps(PP.Ui.ChartCanvasAxis, ["ticks"], true);
    return axis;
}
// Display information about specified chart axis
function printAxisInfo(axis) {
    console.log("Y axis height in pixels: %s", axis.getPixelLength());
    value = 50;
    console.log("Y axis coordinate corresponding to the %s value: %s", value,
        axis.getPixelValue(value));
    console.log("Y axis value corresponding to the %s coordinate: %s", 100,
        axis.getAxisValue(100, true));
    console.log("Value of the axis tick mark: %s", axis.getTickInterval());
    console.log("Lenght of the axis tick nark in pixels: %s", axis.getTickPixelInterval());
    console.log("Y axis width: %s", axis.getSize());
    console.log("Data series linked to the axis:");
    for (var i in axis.getLinkedSeries()) {
        console.log("  %s", axis.getLinkedSeries()[i].getName());
    }
}
// Creates array of colors
function getColors() {
    var colors = [
        "rgb(147,61,168)",
        "rgb(255,217,0)",
        "rgb(255,145,145)",
        "rgb(107,188,128)",
        "rgb(160,203,200)",
        "rgb(195,214,108)",
        "rgb(239,193,100)",
        "rgb(239,193,100)",
        "rgb(255,191,191)",
        "rgb(169,216,181)",
        "rgb(205,227,226)",
        "rgb(223,233,178)",
        "rgb(247,223,175)",
    ];
    return colors;
}
// Returns array of values for the first data series
function getSerieData1() {
    var data = [{
        X: 0,
        Y: 10,
        Name: "2001",
        Color: getColors()[0]
    }, {
        X: 1,
        Y: 30,
        Name: "2002",
        Color: getColors()[1]
    }, {
        X: 2,
        Y: 17,
        Name: "2003",
        Color: getColors()[2]
    }, {
        X: 3,
        Y: 25,
        Name: "2004",
        Color: getColors()[3]
    }, {
        X: 4,
        Y: 55,
        Name: "2005",
        Color: getColors()[4]
    }];
    return data;
}
// Returns value color for the second data series
function getSerieData2() {
    var data = [{
        X: 0,
        Y: 15,
        Name: "2001",
        Color: getColors()[5]
    }, {
        X: 1,
        Y: 24,
        Name: "2002",
        Color: getColors()[6]
    }, {
        X: 2,
        Y: 19,
        Name: "2003",
        Color: getColors()[7]
    }, {
        X: 3,
        Y: 29,
        Name: "2004",
        Color: getColors()[8]
    }, {
        X: 4,
        Y: 28,
        Name: "2005",
        Color: getColors()[9]
    }];
    return data;
}
function onReady() {
    // Create scatter chart
    createChart();
    // Create Y axis
    var yAxis = createAxis();
    // Set this axis
    chart.setYAxis(yAxis, true);
    // Redraw the chart
    chart.redraw(true);
    // Display information about Y axis
    printAxisInfo(yAxis);
}
</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 a scatter chart is placed on the HTML page:

The browser console shows information about vertical axis of the chart:

Pixel length of Y axis: 302

Y axis coordinate corresponding to the value 50: 86.28571428571428

Y axis value corresponding to the coordinate 100: 49.139072847682115

Value of an axis tick interval: 14

Pixel length of an axis tick interval: 60.4

Y axis width: 66.21875

Data series linked to the axis:

  Australia

  Asia

See also:

Chart