Vendor Plugin

Vendor : Chartjs

Simple HTML5 Charts using the canvas tag.

HINT! Use Smarty Colorpicker to get RGBA colors for your graphs!

/* 
	:: 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>

									
Single ChartJS SIMPLIFIED VIA SMARTY CONTROLLER
   
<!-- 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>
                                    
Multiple Charts SIMPLIFIED VIA SMARTY CONTROLLER
  
<!-- 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>
									
Line ChartJS SIMPLIFIED VIA SMARTY CONTROLLER

<!-- 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>
                                    
Line ChartJS SIMPLIFIED VIA SMARTY CONTROLLER
  
<!-- 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>
                                    
Simple Bar Charts SIMPLIFIED VIA SMARTY CONTROLLER
  
<!-- 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>
                                    
Multiple Bar Charts SIMPLIFIED VIA SMARTY CONTROLLER
  
<!-- 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>
                                    
Pie ChartJS SIMPLIFIED VIA SMARTY CONTROLLER
 
<!-- 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>
                                    
Donut ChartJS SIMPLIFIED VIA SMARTY CONTROLLER

<!-- 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>
                                    
Attributes CUSTOM BY ATTRIBUTE


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>
                                    
Javascript Object CUSTOM BY OBJECT


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>