Code Snippets

Adding a combined custom chart manually to a template.

First, add the configuration to skin.conf, under the combined_observations key:

[[[combined_observations]]]
    [[[[my_custom_chart]]]]
        label = "My custom Chart"
        curve="natural"
        [[[[[obs]]]]]
            [[[[[[rain]]]]]]
                observation = "rain"
            [[[[[[outTemp]]]]]]
                observation = "outTemp"

Then, add this to the template where you want the chart to be rendered.

<div class="bx--row">
    #set global $comb_obs = "my_custom_chart"
    #set global $combined_diagram = $DisplayOptions.get("diagrams", {}).get("combined_observations", {}).get('my_custom_chart', {})
    #set global $diagram_index = 9999
    #include "includes/combined-diagram-tile.inc"
 </div>

Basic Layouts

1 Column Layout

<div class="bx--row">
    <div class="bx--col">
        <div class="bx--tile">
            <p>Place your content here</p>
        </div>
    </div>
</div>

2 Column Layout

<div class="bx--row">
    <!--Column 1-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6">
        <div class="bx--tile">
            <p>Place your content here</p>
        </div>
    </div>
    <!--Column 2-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6">
        <div class="bx--tile">
            <p>Place your content here</p>
        </div>
    </div>
</div>

4 Column Layout

<div class="bx--row">
    <!--Column 1-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6" style="margin-bottom: 1rem;">
        <div class="bx--tile">
            <p>Place your content here</p>
        </div>
    </div>
    <!--Column 2-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6" style="margin-bottom: 1rem;">
        <div class="bx--tile">
            <p>Place your content here</p>
        </div>
    </div>
    <!--Column 3-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6" style="margin-bottom: 1rem;">
        <div class="bx--tile">
            <p>Place your content here</p>
        </div>
    </div>
    <!--Column 4-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6" style="margin-bottom: 1rem;">
        <div class="bx--tile">
            <p>Place your content here</p>
        </div>
    </div>
</div>

Tip: bx--tile renders a tile component, the 2 Column layout without tiles would look like this:

<div class="bx--row">
    <!--Column 1-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6">
        <p>Place your content here</p>
    </div>
    <!--Column 2-->
    <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--col-xlg-6">
        <p>Place your content here</p>
    </div>
</div>

For more about IBM Carbon Grid System, see https://carbondesignsystem.com/guidelines/2x-grid/implementation