Chart

Pie chart

The pie chart outputs information as a circle diagram, with optional label in the center. Example markup:

<div
    class="control-chart centered wrap-legend"
    data-control="chart-pie"
    data-size="200"
    data-center-text="100">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

image

Line chart

The next example shows a line chart markup. Data sets are defined with the SPAN elements inside the chart element.

<div
    data-control="chart-line"
    data-time-mode="weeks"
    style="height: 200px"
    data-chart-options="xaxis: {mode: 'time'}">
    <span
        data-chart="dataset"
        data-set-color="#008dc9"
        data-set-data="[1477857082000, 400], [1477943482000, 380], [1478029882000, 340], [1478116282000, 540], [1478202682000, 440], [1478289082000, 360], [1478375482000, 220]"
        data-set-name="Visits">
    </span>
</div>

image

Bar chart

The next example shows a bar chart markup. The wrap-legend class is optional, it manages the legend layout. The data-height and data-full-width attributes are optional as well.

<div
    class="control-chart wrap-legend"
    data-control="chart-bar"
    data-height="100"
    data-full-width="1">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

image

Example

<div
    class="control-chart centered wrap-legend"
    data-control="chart-pie"
    data-size="200"
    data-center-text="100">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

<div
    class="control-chart wrap-legend"
    data-control="chart-bar"
    data-height="100"
    data-full-width="1">
    <ul>
        <li>Label 1 <span>100</span></li>
        <li>Label 2 <span>100</span></li>
        <li>Label 3 <span>100</span></li>
    </ul>
</div>

Status list

A list of statuses and values

Example

<div class="control-status-list">
    <ul>
        <li>
            <span class="status-icon success"><i class="icon-check"></i></span>
            <span class="status-text success">Software is up to date</span>
            <a href="#" class="status-label link">Update</a>
        </li>

        <li>
            <span class="status-icon warning"><i class="icon-exclamation"></i></span>
            <span class="status-text warning">Some issues need attention</span>
            <a href="#" class="status-label link">View</a>
        </li>

        <li>
            <span class="status-icon"><i class="icon-info"></i></span>
            <span class="status-text">System build</span>
            <span class="status-label primary">313</span>
        </li>

        <li>
            <span class="status-icon"><i class="icon-info"></i></span>
            <span class="status-text">Event log items</span>
            <span class="status-label primary">200</span>
        </li>

        <li>
            <span class="status-icon"><i class="icon-info"></i></span>
            <span class="status-text">Online since</span>
            <span class="status-label link">4th April 2014</span>
        </li>
    </ul>
</div>

Keep informed

Sign up to our newsletter to receive updates on Winter CMS releases, new features in the works, and much more.
We'll never spam or give this address away.

Latest blog post

The Winter CMS Web Installer is now available!

Published June 17, 2021
We are super excited to announce that our new Web-based Installer is finally available for download, to make it super easy to get your next Winter CMS project started!

View this post Read all posts

Latest Winter CMS release

v1.1.3

Released April 26, 2021
3 UX/UI Improvements, 19 API Changes, 23 Bug Fixes, 3 Security Improvements, 4 Translation Improvements, 1 Community Improvement, 2 Dependencies

View details View all releases