Example of Creating the Cylinder Component

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:

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:

Cylinder