Simple HTML5 Charts using the canvas tag.
/*
:: Vendor Path
node_modules/chart.js/
:: Installed
npm install chart.js
:: SOW Controller Init
*/ $.SOW.vendor.chartjs.init('.chartjs');
// Note: Chartjs is responsive so parent container is important!
// Wrap the chart inside a container like this, using Smarty classes:
<div class="position-relative min-h-250 max-h-300-xs h-100">
chartjs code
</div>
<!-- save image button -->
<a href="#" data-chartjs-id="smartySimple" data-file-name="smartySimple" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image button -->
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartySimple" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="top"
data-chartjs-grid="true"
data-chartjs-tooltip="false"
data-chartjs-title="Chart Title"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits"
data-chartjs-line-width="5"
data-chartjs-type="line"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"fill": true,
"backgroundColor": "rgba(133, 145, 255, 0.5)"
}]'></canvas>
<!-- save image button -->
<a href="#" data-chartjs-id="smartyMultiple" data-file-name="smartyMultiple" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image button -->
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartyMultiple" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="top"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Multiple Charts"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits vs Orders"
data-chartjs-line-width="5"
data-chartjs-type="line"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"fill": true,
"backgroundColor": "rgba(255, 159, 64, 0.5)"
},{
"label": "Orders",
"data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
"fill": true,
"backgroundColor": "rgba(255, 159, 64, 0.9)"
}]'
></canvas>
<!-- save image button -->
<a href="#" data-chartjs-id="graphLineMixed" data-file-name="graphLineMixed" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image button -->
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="graphLineMixed" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="left"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Line Chart"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits vs Orders"
data-chartjs-line-width="5"
data-chartjs-type="line"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [30, 32, 34, 31, 33, 36, 34, 63, 31, 64, 33, 32],
"fill": true,
"backgroundColor": "rgba(201, 203, 207, 0.3)"
},{
"label": "Orders",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"fill": false,
"backgroundColor": "rgba(255, 99, 132, 0.6)"
}]'
></canvas>
<!-- save image button -->
<a href="#" data-chartjs-id="graphLine" data-file-name="graphLine" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image button -->
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="graphLine" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="left"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Line Chart"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits vs Orders"
data-chartjs-line-width="5"
data-chartjs-type="line"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [30, 32, 34, 31, 33, 36, 34, 63, 31, 64, 33, 32],
"fill": false,
"backgroundColor": "rgba(75, 192, 192, 1)"
},{
"label": "Orders",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"fill": false,
"backgroundColor": "rgba(153, 102, 255, 0.6)"
}]'
></canvas>
<!--
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas class="w--250 h--250 chartjs"
data-chartjs-dots="false"
data-chartjs-legend="false"
data-chartjs-grid="false"
data-chartjs-tooltip="false"
data-chartjs-line-width="3"
data-chartjs-type="line"
data-chartjs-labels='["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [11, 11, 17, 11, 15, 12, 13, 16, 11, 18],
"fill": false,
"backgroundColor": "rgba(255, 99, 132, 1)"
}]'
></canvas>
<!-- save image -->
<a href="#" data-chartjs-id="smartyBarSimple" data-file-name="smartyBarSimple" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image -->
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartyBarSimple" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="true"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Simple Bar Charts"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits"
data-chartjs-type="bar"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"backgroundColor": "rgba(139, 195, 74, 0.35)"
}]'
></canvas>
<!-- save image button -->
<a href="#" data-chartjs-id="smartyBarMultiple" data-file-name="smartyBarMultiple" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image button -->
<!--
data-chartjs-type="line|bar"
data-chartjs-grid="true|false|xAxes|yAxes"
data-chartjs-legend="false|top|bottom|left|right"
Color Examples
Red: rgb(255, 99, 132, 1)
Orange: rgb(255, 159, 64, 1)
Yellow: rgb(255, 205, 86, 1)
Green: rgb(75, 192, 192, 1)
Blue: rgb(54, 162, 235, 1)
Purple: rgb(153, 102, 255, 1)
Grey: rgb(201, 203, 207, 1)
To set opacity, change the last value (0 - 1).
Example: rgb(255, 99, 132, 0.5)
:: Use Smarty Colorpicker :)
-->
<canvas id="smartyBarMultiple" class="chartjs"
data-chartjs-dots="false"
data-chartjs-legend="top"
data-chartjs-grid="true"
data-chartjs-tooltip="true"
data-chartjs-title="Multiple Bar Charts"
data-chartjs-xaxes-label="Month"
data-chartjs-yaxes-label="Visits vs Orders"
data-chartjs-line-width="5"
data-chartjs-type="bar"
data-chartjs-labels='["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]'
data-chartjs-datasets='[{
"label": "Visits",
"data": [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
"backgroundColor": "rgba(3, 169, 244, 0.7)"
},{
"label": "Orders",
"data": [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
"backgroundColor": "rgba(255, 193, 7, 0.61)"
}]'
></canvas>
<!-- save image button -->
<a href="#" data-chartjs-id="pieChart" data-file-name="pieChart" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image button -->
<!--
data-chartjs-legend="false|top|bottom|left|right"
-->
<canvas class="chartjs"
data-chartjs-title="Pie Chart"
data-chartjs-legend="left"
data-chartjs-tooltip="true"
data-chartjs-type="doughnut"
data-chartjs-datasets='[
["Visitors", 544, "#ff0000"],
["Orders", 412, "#377dff"],
["Green Stuff", 455, "#6dbb30"],
["This is Yellow", 511, "#fad776"]
]'></canvas>
<!-- save image button -->
<a href="#" data-chartjs-id="donutChart" data-file-name="donutChart" class="btn btn-sm btn-light rounded-circle chartjs-save float-end m-0" title="Save Chart" aria-label="Save Chart">
<i class="fi fi-arrow-download m-0"></i>
</a>
<!-- /save image button -->
<!--
data-chartjs-legend="false|top|bottom|left|right"
-->
<canvas id="donutChart" class="chartjs"
data-chartjs-title="Donut Chart"
data-chartjs-legend="left"
data-chartjs-tooltip="true"
data-chartjs-type="doughnut"
data-chartjs-datasets='[
["Visitors", 544, "#ff0000"],
["Orders", 412, "#377dff"],
["Green Stuff", 455, "#6dbb30"],
["This is Yellow", 511, "#fad776"]
]'></canvas>
You can pass your custom Chart.js code directly via attribute.
Very similar with javascript code but used as json (params inside quotes).
Please pay attention to the format - the controller is not throwing any error
because will treat an incorrect format as string instead of object and
will be automatically ignored. If no Chart is showing, you probably missed
a comma (or there is more than needed, at the last line before closing a bracket)
or missed a quote. The format (as you see below) is very important - each comma/quote matter!
Spaces are not important!
This format is used for more customization control.
If this is not enough for your needs, please see the next example where
you can use directly a Javascript object so you can fully
customize your charts, no matter how complicated it gets.
At this point, Smarty Controller is not handling anymore your code, is everything
under your control. Please consult official documentation.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<canvas id="byAttributes" class="chartjs"
data-chartjs='{
"type": "bar",
"data": {
"labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
"datasets": [{
"label": "# of Votes",
"data": [12, 19, 3, 5, 2, 3],
"backgroundColor": [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)"
],
"borderColor": [
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)"
],
"borderWidth": 1
}]
},
"options": {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
}'></canvas>
THE CODE IS LONGER THAN PREVIOUS EXAMPLES BECAUSE THIS IS PURE CHART.JS CODE
ALL PREVIOUS EXAMPLES ARE HANDLED BY SMARTY CONTROLLER, A LOT SIMPLIFIED FOR YOU.
Use this if you need a lot more advanced charts.
Please consult chart.js official documentation.
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<canvas id="byObject" class="chartjs" data-custom="customChartJs"></canvas>
<script>
var customChartJs = {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Visits',
data: [20, 22, 24, 21, 23, 26, 24, 23, 21, 24, 23, 22],
fill: true,
pointHoverRadius: 4,
pointHoverBorderWidth: 12,
pointBackgroundColor: 'rgba(133, 133, 145, 0)',
pointBorderColor: 'rgba(133, 145, 255, 0)',
pointHoverBackgroundColor: 'rgba(133, 145, 255, 0)',
pointHoverBorderColor: 'rgba(133, 145, 255, 0)',
borderWidth: 0,
backgroundColor: 'rgba(133, 145, 255, 0.5)',
borderColor: 'rgb(133, 145, 255, 0)',
categoryPercentage: 0.35,
barPercentage: 0.70,
},
{
label: 'Orders',
data: [14, 16, 16, 14, 13, 12, 14, 14, 13, 14, 12, 10],
fill: true,
pointHoverRadius: 4,
pointHoverBorderWidth: 12,
pointBackgroundColor: 'rgba(133, 133, 145, 0)',
pointBorderColor: 'rgba(133, 145, 255, 0)',
pointHoverBackgroundColor: 'rgba(133, 145, 255, 0)',
pointHoverBorderColor: 'rgba(133, 145, 255, 0)',
borderWidth: 0,
backgroundColor: 'rgba(133, 145, 255, 0.9)',
borderColor: 'rgb(133, 145, 255, 0)',
}
]
},
options: {
responsive: true,
maintainAspectRatio: true,
hover: {
mode: 'index'
},
legend: {
display: true,
position: 'top',
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Month'
},
ticks: {
display: true,
beginAtZero: true,
fontColor: '#999999',
fontSize: 13,
padding: 10
},
categoryPercentage: 0.35,
barPercentage: 0.70,
display: true,
gridLines: false,
}],
yAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Value'
},
gridLines: {
color: '#dddddd',
borderDash: [2, 3],
zeroLineBorderDash: [2, 3],
zeroLineWidth: 1,
},
ticks: {
max: 50,
stepSize: 10,
display: true,
beginAtZero: true,
fontColor: '#999999',
fontSize: 13,
padding: 10
}
}]
},
title: {
display: false,
text: 'Legend Position: top'
},
tooltips: {
enabled: true,
intersect: false,
mode: 'nearest',
bodySpacing: 5,
yPadding: 10,
xPadding: 15,
caretPadding: 0,
displayColors: false,
backgroundColor: '#121212',
titleFontColor: '#ffffff',
cornerRadius: 4,
footerSpacing: 0,
titleSpacing: 0
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
}
}
};
</script>