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: