Chart usage example

4.0
Chart usage example
0
Tags: #<Tag:0x00007f4a05acfa98>

(scampano) #1

The example here consists in adding a chart to a form using the UI API, like so:

In order to do so, just add a SCRIPT ressource to the object:

And add / adapt the following snippet of code, which loads the chart library and draws a chart after the object form has loaded (of course you could use the object’s data instead of the hard-coded values in this example):

(function(ui) {
	var options = {
	    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
	                }
	            }]
	        }
	    }
	};
	
    if (!ui) return;
    var app = ui.getAjax();
    Simplicite.UI.hooks.DemoSupplier = function(o, cbk) {
        try {
            // In the example hooks will be available on main instance only
            if (o.isMainInstance()) {
                console.log("myObject hook loading...");
                // object UI parameters = clone of the globals properties
                var p = o.locals.ui;
                // When object form is loaded in the container ctn
                p.form.onload = function(ctn, obj) {
                    $ui.loadCharts(function(){
						debugger;
						$('#panel_work_2').after('<div id="chart-container"></div>');
						$ui.charts.chart($("#chart-container"), options);
					});
                };
            }
        }
        catch(e) {
            // Thank you to isolate your scripts
            app.error("Error in Simplicite.UI.hooks.myObject: "+e.message);
        }
        finally {
            // Required callback when hooks are loaded
            cbk && cbk();
        }
    };
})(window.$ui);

Ressources: https://www.simplicite.io/resources/documentation/04-ui/responsive.md