To execute the example, create an HTML page and perform the following operations:
1. Add a link to the PP.css file. Also add links to the following JS files:
PP.js.
PP.Charts.js.
PP.GraphicsBase.js.
PP.Util.js.
resources.ru.js.
2. Then add a script that creates a cylinder in the <head> tag:
<script> var cylinder; function createCylinder() { // Create a cylinder cylinder = new PP.Ui.Cylinder({ AnimationDuration: 4000, // Animation duration UseAnimation: false, // Animation is disabled ParentNode: document.body, // Root node // Cylinder flask and plot area sizes are not related IsRelativeDimensions: false, Width: 350, // Cylinder plot area width FlaskWidth: 130, // Cylinder flask width Height: 250, // Cylinder plot area height FlaskHeight: 170, // Cylinder flask height Orientation: PP.Orientation.Vertical, Loaded: function(sender, args) { console.log("Cylinder is loaded"); } }); // Draw cylinder
cylinder.draw(); // Rerender cylinder cylinder.redraw(); // Create a cylinder axis this.createGaugeAxis(); // Enable animation cylinder.setUseAnimation(true); // Set cylinder value this.createGaugeValue(7); cylinder._Values = [cylinder.getValue()]; // Disable animation cylinder.setUseAnimation(false); // Create a trend line this.createTrendLine(5); // Create a cylinder header this.createCylindHeader(); // Rerender cylinder values cylinder.redrawValues(); // Create a frame for cylinder plot area this.createBorder(); }
// Creates a cylinder axis var createGaugeAxis = function() { var axis = new PP.Ui.CylinderGaugeAxis({ ParentCylinder: cylinder, // Parent cylinder MajorTicksCount: 6, // Number of major axis tick marks Width: 450, // Axis width Height: 250, // Axis height Min: 0, // Minimum axis value Max: 10, // Maximum axis value LabelStyle: new PP.Style(), // Tick mark style ValuesMode: PP.Ui.AxisValuesMode.MinMax, // Axis value dusplay mode Position: PP.LTRB.Right // Place axis at the right }); // Set axis cylinder.setAxis(axis.getSettings()); // Refresh cylinder axis style this.applyStyleForAxis(axis);
axis.setAxisUnits("cm"); // Move label to specify axis measurement unit axis.getUnit().setLeft(axis.getUnit().getLeft() - 30); // Refresh cylinder axis this.updateAxis(axis); } // Refreshes cylinder axis var updateAxis = function(axis) { cylinder._Axis = axis; } // Returns axis values var getAxisValues = function(minValue, maxValue, majorTicksCount) { var values = []; var step = Math.round((maxValue - minValue) / (majorTicksCount - 1)); for (var i = minValue; i <= maxValue; i += step) { values.push(i + " cm"); } return values; }
// Apply style for cylinder axis var applyStyleForAxis = function(axis) { // Create a style for axis tick marks var border = new PP.Border({ Width: 1, // Tick mark width }); // Create a style for major axis tick marks var majorTickStyle = { Border: border, Length: 20 }; // Create a style for minor axis tick marks var minorTickStyle = { Border: border, Length: 10 }; // Set style for major axis tick marks axis.setMajorTickStyle(majorTickStyle); // Set style for minor axis tick marks axis.setMinorTickStyle(minorTickStyle); }
// Creates a trend line var createTrendLine = function(value) { var trendLine = new PP.Ui.CylinderTrend({ Color: new PP.Color(0, 0, 255), // Line color LabelStyle: { Text: value.toString() // Label }, Label: null, Length: 300, // Line length ParentCylinder: cylinder, // Parent cylinder Value: value, // Value that corresponds to trend line Width: 1, // Line width LineStyle: PP.Ui.LineTypes.Dot // Line style });
// Draw trend line trendLine.draw(); trendLine.redraw(); // Set trend line cylinder.setTrends([trendLine]); // Get label var label = cylinder.getTrends()[0].getLabel(); if (label) { // Correct label position label.setPosition(label.getLeft() - 10, label.getTop()); } }
// Creates cylinder value var createGaugeValue = function(value) { var gaugeValue = new PP.Ui.CylinderGaugeValue({ Value: value, // Top cylinder base coordinate StartValue: 0, // Bottom cylinder base coordinate ParentAxis: cylinder.getAxis(), // Coordinate axis along the cylinder Fill: new PP.SolidColorBrush({ Color: "#FF0000" // fill color of cylinder side surface }), UpFill: new PP.SolidColorBrush({ Color: "#00FF00" // fill color of top cylinder base }) });
// Draw cylinder value gaugeValue.draw(); gaugeValue.redraw(); // Play trend line animation if (cylinder.getUseAnimation()) { objAnim = new PP.Ui.Animation({ Duration: cylinder.getAnimationDuration(), Start: 0, End: value }); objAnim.animateProp(gaugeValue, "Value"); } else { gaugeValue.setValue(value); }
// Set value cylinder.setValue(gaugeValue); } // Creates a cylinder header var createCylindHeader = function() { var header = new PP.Ui.CylinderHeader({ ParentCylinder: cylinder, // Cylinder, to which header belongs VerticalAlign: PP.VerticalAlignment.Top, HorizontalAlign: PP.HorizontalAlignment.Left, Font: new PP.Font({ IsBold: true, Size: 18 }) }) // Set header cylinder._Header = header;
// Rerender header cylinder.getHeader().redraw(); // Set header position cylinder.getHeader().setPosition(30, 0); } // Determines header shadow var applyShadowForHeader = function(header) { var shadow = new PP.Shadow({ Enabled: true, Color: new PP.Color(PP.Color.Colors.blue), Angle: 45, Size: 1,
EnableBlur: true, EnableOpacity: true, BlurSize: 20, Distance: 10, Opacity: 0.5 }); header.setShadow(shadow); } // Creates a frame for cylinder plot area var createBorder = function() {
var rectElem = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rectElem.setAttributeNS(null, "width", cylinder.getWidth()); rectElem.setAttributeNS(null, "height", cylinder.getHeight()); rectElem.setAttributeNS(null, "stroke-width", 1); rectElem.setAttributeNS(null, "stroke", "rgb(195,195,195)"); rectElem.setAttributeNS(null, "fill-opacity", 0); cylinder.getSVGNode().appendChild(rectElem); } </script>
3. In the <body> tag as the value of the onLoad attribute, specify name of the function for creating a cylinder:
<body onload="createCylinder()"> </body>
After executing the example the Cylinder component is placed on the HTML page:
The browser console also displays a message about loading the component:
Cylinder is loaded
See also: