Working with Table > Components > Sparkline > Example of Creating the Sparkline Component

Example of Creating the Sparkline Component

To execute the example, the HTML page must contain links to the PP.js scenario file and P.css styles file in the <body> tag of HTML document of the <div> element with the "sparkline" identifier. It is required to add calling of the createSparkline() function to the "onload" event of the <body> tag. Add a sparkline with data to HTML page:

function createSparkline() {
    // Create a sparkline
    sparkline = new PP.Ui.Sparkline({
        // Set a parent element
        ParentNode: document.getElementById("sparkline"),
        // Set size
        Width: 395,
        Height: 100,
        // Set point values
        Values: [2, 8, 10, 15, 3, 1, 9, 1, 4, 8, 20, 15, 13, 12, 6, 8, 21, 16, 13, 20],
        // Set display modes
        ViewMode: [PP.Ui.SparklineViewMode.Line, PP.Ui.SparklineViewMode.Column],
        // Set background color
        BackgroundColor: PP.Color.Colors.lightgray,
        // Set line color
        LineColor: PP.Color.Colors.darkred,
        // Set line width
        LineThickness: 2,
        // Set column color
        FillColor: PP.Color.Colors.blue,
        // Set column border color
        StrokeColor: PP.Color.Colors.darkblue,
        // Set column border width
        StrokeThickness: 3,
        // Set padding by line margins
        Padding: 2,
        // Set column rendering for all values
        UsePeakValuesToColumns: False   
    });
}

As a result a new sparkline is created: