Tooltips and charts

Step 1 - tooltips

Every UI we build should be as intuitive as possible. As developers, we have to remember, that projects we create cannot be just art for art's sake.

In such a complicated structures like Dashboard, we have to provide an additional help to the user.That's the moment when Tooltips come into play.

Tooltips are little clouds with a brief text message, triggered by clicking on a specific element or hovering over it. They significantly increase User Experience, especially with advanced UI elements, which often require additional explanation.

In the second column of card-body place the following code:

<!--Summary-->
<p>Total sales:
    <strong>2000$</strong>
    <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Total sales in the given period">
        <i class="fas fa-question"></i>
    </button>
</p>
<p>Average sales:
    <strong>100$</strong>
    <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Average daily sales in the given period">
        <i class="fas fa-question"></i>
    </button>
</p>

    

Tooltips also have to be initialized. Below previous initialization, paste this code:

// Tooltip Initialization
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

    

You can easily manipulate the tooltip via attributes.

By changing data-placement you can adjust the position.

data-placement="top"

    

Available options:

• top
• bottom
• right
• left

title attribute holds a message of the tooltip.

title="Total sales in the given period"

    

To learn more about Tooltips have a look at Tooltips documentation.

If you need to place more complex content within the Tooltip use Popovers instead.

Step 2 - minimalist chart

Charts are an essential component of any dashboards. It's time to create our first chart.

In the second column of card-body, below Tooltips, place the following code:

<!--Change chart-->
<span class="min-chart my-4" id="chart-sales" data-percent="76">
    <span class="percent"></span>
</span>
<h5>
    <span class="badge green p-2">Change
        <i class="fas fa-arrow-circle-up ml-1"></i>
    </span>
    <button type="button" class="btn btn-info btn-sm p-2" data-toggle="tooltip" data-placement="top" title="Percentage change compared to the same period in the past">
        <i class="fas fa-question"></i>
    </button>
</h5>

    

As you can see, we set an id="chart-sales" to the chart. We'll refer to it very soon when we call the javascript function to initialize chart.

We also set a value 76 to the data-percent attribute. This is the value which will be presented on the chart. You can set whatever number you want (between 0 - 100 of course).

Below is just a badge with tooltip. We've already talked about it so there is nothing more to explain.

Now let's initialize the chart.

In the scripts section, below initialization functions, open new <scirpt> tags and place this code:

// Minimalist chart
$(function () {
    $('.min-chart#chart-sales').easyPieChart({
        barColor: "#4caf50",
        onStep: function (from, to, percent) {
            $(this.el).find('.percent').text(Math.round(percent));
        }
    });
});

    

By manipulating this variable you can change the color of the chart. Just place any hexadecimal color you like.

barColor: "#4caf50",

    

Save the file and refresh the browser. The chart is working!

Step 3 - line chart

As our main chart, we'll use line chart. It's perfect for presenting a data change through the time.

In the second column of the main panel place this code:

<!--Grid column-->
<div class="col-md-7">

    <!--Panel Header-->
    <div class="view view-cascade py-3 gradient-card-header info-color-dark mb-4">

        <canvas id="lineChart"></canvas>

    </div>
    <!--/Card image-->

</div>
<!--Grid column-->

    

Now we make a reference to this ID and initialize the line chart with the data and configuration we need.

In the scripts section, below initialization of minimalist chart, place the following code:

// Main chart
var ctxL = document.getElementById("lineChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
fillColor: "#fff",
backgroundColor: 'rgba(255, 255, 255, .3)',
borderColor: 'rgba(255, 255, 255)',
data: [0, 10, 5, 2, 20, 30, 45],
}]
},
options: {
legend: {
labels: {
    fontColor: "#fff",
}
},
scales: {
xAxes: [{
    gridLines: {
        display: true,
        color: "rgba(255,255,255,.25)"
    },
    ticks: {
        fontColor: "#fff",
    },
}],
yAxes: [{
    display: true,
    gridLines: {
        display: true,
        color: "rgba(255,255,255,.25)"
    },
    ticks: {
        fontColor: "#fff",
    },
}],
}
}
});

    

data object allows you to manipulate the data. options let you adjust the chart itself.

If you want to learn more about charts take a look at Charts documentation.