Example of Creating the RatingChart Component

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

1. Add a link to the CSS file named PP.css.

Also, add links to the following JS files: PP.js, PP.GraphicsBase.js, PP.Charts.js, dataSource.js and resources.ru.js.

The DataSource.js file determines a variable named dataSource that contains a data source for the PP.Ui.RatingChart component.

Contents of the DataSource.js file

2. Next in the <head> tag add a script that creates a rating chart:

<script type="text/javascript">
    var ratingChart; // Rating chart
    function createRatingChart() {
        // Set path to the root folder containing resource files
        PP.resourceManager.setRootResourcesFolder("../resources/");
        // Set language settings for resources
        PP.setCurrentCulture(PP.Cultures.ru);
        // Create time line
        var timeline = new PP.Ui.Timeline({
            ParentNode: "timeline", // Parent element identifier
            ImagePath: "../build/img/", // Path to the file with images
            Width: 500, // Scale width
            CurrentStep: 0, // Scale step
            Slider: { // Scale tick marks
                Ticks: ["2007", "2006", "2005", "2004", "2003", "2002", "2001", "2000", 
                   "1999", "1998", "1997", "1996", "1995", "1994", "1993", "1992", 
                   "1991", "1990", "1989", "1988", "1987", "1986", "1985", "None"]
            }
        });
        /* Create rating chart */
        ratingChart = new PP.Ui.RatingChart({
            AllowMultipleSelection: false, // Disable multiple selection of elements
            ParentNode: "ratingChart", // Parent element identifier
            ImagePath: "../build/img/", // Path to the image folder
            DataSource: dataSource, // Set data source
            Timeline: timeline, // Determine time line
            NumberFormat: "#,##0.00", // Data format
            TrendLine: { // Set trend line
                LineType: PP.Ui.LineTypes.ShortDashDotDot, // Line type
                LineWidth: 2, // Trend line width
                LineColor: "#AA3333", // Line color
                Value: 100 // Value corresponding to the trend line
            },
            ColumnSpacing: 0, // Distance between columns
            MinColumnWidth: 30, // Minimum column width
            SplittedTop: 2, // Number of displayed over splitter data series on the first chart rendering
            UseAnimation: true, // Enable to use animations
            ShowValueTimeout: 800, // Chart modification animation duration
            MoveItemsTimeout: 800, // Data series order change animation duration
            DelayDuration: 1500, // Animation delay duration of time line step change
            MoveActiveToEnd: true, // Enable automatic moving of the active value column to the end
            AreDataColumnsResizable: true, // Enable column width change using mouse
            Height: 250,
            Width: 500
        });
    };
</script>

3. In the <body> tag specify name of the function that creates a rating chart as value of the onLoad attribute. Within this tag place a block with the ratingChart identifier that will store the created rating chart and the timeline block that will store the timeline:

<body onload="createRatingChart()">
    <div style="border: #CCCCCC 1px solid; padding: 1px; margin: 1px; width: 512px">
        <div style="border: #CCCCCC 1px solid; margin: 5px; width: 500px " id="ratingChart">
        </div>
        <div id="timeline" style="height: 80px;"></div>
    </div>
</body>

To execute custom scenarios with the rating chart, including the examples given in pages with description of properties, methods and events of this component and its constituent elements, place the code either after the script specified above or in the browser console.

4. In the end of the document insert code that sets styles corresponding to client OS to the document.body node:

<script type="text/javascript">
    PP.initOS(document.body);
</script>

After executing the example the PP.Ui.RatingChart component is placed on the HTML page:

See also:

RatingChart