Example of Creating a Histogram

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

1. Add a link to CSS file named PP.css. Add links to the following files according to their order:

2. Then, in the <head> tag add a style for a 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, in the <head> tag add a scenario creating a histogram:

<script type="text/javascript">
var chart; // Chart
// Creates chart
function createChart() {
    // Create value arrays for data series
    var data0 = [-10, 10, -20, 20, -30];
    var data1 = [-20, 20, -30, 30, -40];
    var data2 = [-30, 30, -40, 40, -50];
    var data3 = [-40, 40, -50, 50, -60];
    var data4 = [-50, 50, -60, 60, -70];
    var trendData = [10, 20, 30, 40, 50];
    // Create array with color values
    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)"
    ];
    // Create chart
    chart = new PP.Ui.Chart({
        Width: 600, // Chart width
        Height: 500, // Chart height
        // Chart paddings
        PaddingLeft: 15,
        PaddingRight: 20,
        PaddingTop: 30,
        PaddingBottom: 40,
        UseSoftPadding: false, // Attribute of alternative padding calculation use
        ParentNode: "chart", // Parent element
        Type: "Column", // Chart type
        AlternateColumnPadding: true,
        PointPadding: -0.2,
        ExcludeInvisibleSeries: true, // Attribute that it is necessary to exclude invisible data series from calculation
        // Data series
        "Series": [{ // Series 1
            "Name": "Australia", // Series name
            "Data": data0, // Value array
            "Color": colors[0], // Color
            "LineColor": colors[1], // Line color
            "LineWidth": 4, // Line width
            "ShowInLegend": false, // Attribute whether series is shown in legend
            "IsVisible": true // Attribute whether series is visible
            }, { // Series 2
            "Name": "Asia",
            "Data": data1,
            "Color": colors[1],
            "LineColor": colors[2],
            "LineWidth": 4,
            "ShowInLegend": true
            }, { // Series 3
            "Name": "Africa",
            "Data": data2,
            "Color": colors[2],
            "LineColor": colors[3],
            "LineWidth": 4,
            "ShowInLegend": true
            }, { // Series 4
            "Name": "Europe",
            "Data": data3,
            "Color": colors[3],
            "LineColor": colors[4],
            "LineWidth": 4,
            "ShowInLegend": true
            }, { // Series 5
            "Name": "North America",
            "Data": data4,
            "Color": colors[4],
            "LineColor": colors[5],
            "LineWidth": 4,
            "ShowInLegend": true
            }, {
            // Trend line
            "Type": "Line", // Series type
            "Name": "Trend",
            "Data": trendData,
            "Color": colors[4],
            "LineColor": colors[5],
            "LineWidth": 2,
            "ShowInLegend": false,
            "Trend": true
        }],
        // Category axis
        "XAxis": {
            "Categories": ["2001", "2002", "2003", "2004", "2005"], // Category array
            // Label settings
            "Labels": {
                "Enabled": true
            }
        },
        // Value axis
        "YAxis": {
            "Labels": {
                "Enabled": true
            }, // Label settings
            "Max": 110, // Maximum value
            "Min": -110, // Minimum value
        },
        // Secondary value axis
        "YSAxis": {
            "Enabled": false // Attribute of axis activity
        },
        // Chart rendering area
        "PlotArea": {},
        // Chart legend
        "Legend": {
            CellSpacing: 60 // Paddings between legend elements
        },
        // Chart title
        "Title": {
            "Text": "Chart"
        }
    })
}
</script>

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

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

After executing the example the Chart component is placed on the HTML page:

See also:

Chart