Hello everyone,
What I am trying to achieve is to display the values of graph data on my bar chart. In order to do that I am using chart.js implemented on an ui_template node. There is a chartjs plugin for displaying datalabels on chartjs. But I am having trouble implementing chart.js plugin datatable to my own ui_template.
Below I shared my code in template and flow I designed for displaying the graph.
Thanks for help in advance.
What I have on dashboard:
What I want to do:
Code I Implemented in ui_template node:
<canvas id="barChartTmplt_1" width="400" height="400"></canvas>
<script>
theScope = scope;
$(document).ready(function() {
create_chart();
function create_chart() {
try {
var myChart = null;
var DataLabel = {
anchor: 'end',
clamp: true,
align: 'top',
offset: -25,
color: '#fffaaa',
font: {
weight: 'normal',
size: 12,
}
};
var ctx = document.getElementById("barChartTmplt_1");
var config = {
type: 'bar',
data: {
labels: ["a", "b", "c", "d"],
datasets: [{
backgroundColor: "red",
borderColor: "blue",
borderWidth: 30,
label: '123',
data: [12, 99, 3, 5],
borderWidth: 0,
datalabels: DataLabel
},
{
backgroundColor: "blue",
borderColor: "red",
borderWidth: 30,
label: '456',
data: [9999, 19, 3, 5],
borderWidth: 0,
datalabels: DataLabel
},
{
backgroundColor: "green",
borderColor: "yellow",
borderWidth: 30,
label: '789',
data: [12, 19, 1, 5],
borderWidth: 0,
datalabels: DataLabel
}
]
},
options: {
responsive: false,
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#ffffff'
}
},
legend: {
display: true,
position: 'top',
align: 'center',
labels: {
fontColor: "#000000",
}
},
scales: {
xAxes: [{
gridLines: {
display: false
},
barPercentage: 0.9,
ticks: {
maxRotation: 0,
minRotation: 0
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero: true
//min: 0,
//max: 50
}
}]
}
}
};
myChart = new Chart(ctx, config);
//console.dir(scope) // this also works
//console.dir(scope.msg) // This doesn't because scope.msg doesn't yet exist
// Lambda function to access the Angular Scope
(function(theScope) {
//console.log('--- SCOPE ---')
//console.dir(scope) // this works but you only get it once (on startup)
//console.dir(scope.msg) // Doesn't work for because scope.msg doesn't yet exist
//Have to use $watch so we pick up new, incoming msg's
theScope.$watch('msg.payload', function(newVal, oldVal) {
//console.log('- Scope.msg -');
//console.dir(scope.msg);
//myChart.data.labels = ["x", "b", "c", "d"];
//updateChart(scope.msg);
updateChart(theScope.msg, myChart);
})
})(theScope);
} catch (e) {
console.log(e);
}
}
function update(x) {
//var config = dta;
//myChart.options.title.text = 'new title';
//myChart.update();
theScope.send({
payload: x
});
//theScope.send({payload:dta.lat});
//theScope.send({payload:dta.lng});
//theScope.send({payload:dta.position});
}
function updateChart(datain, myChart) {
try {
//myChart = localStorage.getItem("ChartObj");
if (myChart == null || datain == undefined) return;
var DataLabel = {
anchor: 'end',
clamp: true,
align: 'top',
offset: -25,
color: '#fffaaa',
font: {
weight: 'normal',
size: 12,
}
};
// ctx.height = 400;
//ctx.width = 400;
myChart.data.datasets[0].data = datain.data.datasets[0].data;
myChart.data.datasets[0].datalabels = DataLabel;
myChart.data.datasets[1].data = datain.data.datasets[1].data;
myChart.data.datasets[1].datalabels = DataLabel;
myChart.data.datasets[2].data = datain.data.datasets[2].data;
myChart.data.datasets[2].datalabels = DataLabel;
myChart.options.plugins.datalabels.color = '#ffffff';
//myChart.options.plugins.datalabels.display = true;
myChart.update();
//myChart = new Chart(ctx, config);
//localStorage.setItem("ChartObj",myChart);
} catch (e) {
console.log(e);
}
}
});
</script>
My Flow:
[{"id":"1136a538.dc6d5b","type":"ui_template","z":"d93a508b.a5607","group":"caf9ba81.0fca58","name":"","order":1,"width":0,"height":0,"format":"\n<canvas id=\"barChartTmplt_1\" width=\"400\" height=\"400\"></canvas>\n\n \n<script>\n\ntheScope = scope;\n\n$(document).ready(function() {\n\n\n create_chart();\n\n function create_chart() {\n\n\n try {\n\n\n var myChart = null;\n var DataLabel = {\n\n anchor: 'end',\n clamp: true,\n align: 'top',\n offset: -25,\n color: '#fffaaa',\n font: {\n weight: 'normal',\n size: 12,\n }\n };\n\n var ctx = document.getElementById(\"barChartTmplt_1\");\n var config = {\n type: 'bar',\n data: {\n labels: [\"a\", \"b\", \"c\", \"d\"],\n\n datasets: [{\n backgroundColor: \"red\",\n borderColor: \"blue\",\n borderWidth: 30,\n label: '123',\n data: [12, 99, 3, 5],\n borderWidth: 0,\n datalabels: DataLabel\n\n },\n {\n backgroundColor: \"blue\",\n borderColor: \"red\",\n borderWidth: 30,\n label: '456',\n data: [9999, 19, 3, 5],\n borderWidth: 0,\n datalabels: DataLabel\n\n },\n {\n backgroundColor: \"green\",\n borderColor: \"yellow\",\n borderWidth: 30,\n label: '789',\n data: [12, 19, 1, 5],\n borderWidth: 0,\n datalabels: DataLabel\n\n }\n ]\n\n },\n options: {\n responsive: false,\n plugins: {\n // Change options for ALL labels of THIS CHART\n datalabels: {\n color: '#ffffff'\n }\n },\n legend: {\n display: true,\n position: 'top',\n align: 'center',\n labels: {\n fontColor: \"#000000\",\n }\n },\n scales: {\n xAxes: [{\n gridLines: {\n display: false\n },\n barPercentage: 0.9,\n ticks: {\n maxRotation: 0,\n minRotation: 0\n }\n }],\n yAxes: [{\n gridLines: {\n display: false\n },\n ticks: {\n beginAtZero: true\n //min: 0,\n //max: 50\n }\n }]\n }\n }\n };\n myChart = new Chart(ctx, config);\n\n\n //console.dir(scope) // this also works\n //console.dir(scope.msg) // This doesn't because scope.msg doesn't yet exist\n\n // Lambda function to access the Angular Scope\n (function(theScope) {\n //console.log('--- SCOPE ---')\n //console.dir(scope) // this works but you only get it once (on startup)\n //console.dir(scope.msg) // Doesn't work for because scope.msg doesn't yet exist\n\n //Have to use $watch so we pick up new, incoming msg's\n theScope.$watch('msg.payload', function(newVal, oldVal) {\n //console.log('- Scope.msg -');\n //console.dir(scope.msg);\n //myChart.data.labels = [\"x\", \"b\", \"c\", \"d\"];\n //updateChart(scope.msg);\n updateChart(theScope.msg, myChart);\n })\n\n })(theScope);\n\n } catch (e) {\n console.log(e);\n }\n }\n\n\n function update(x) {\n\n //var config = dta;\n //myChart.options.title.text = 'new title';\n\n //myChart.update();\n theScope.send({\n payload: x\n });\n //theScope.send({payload:dta.lat});\n //theScope.send({payload:dta.lng});\n //theScope.send({payload:dta.position});\n }\n\n function updateChart(datain, myChart) {\n try {\n\n //myChart = localStorage.getItem(\"ChartObj\");\n\n if (myChart == null || datain == undefined) return;\n\n var DataLabel = {\n anchor: 'end',\n clamp: true,\n align: 'top',\n offset: -25,\n color: '#fffaaa',\n font: {\n weight: 'normal',\n size: 12,\n }\n };\n // ctx.height = 400;\n //ctx.width = 400;\n myChart.data.datasets[0].data = datain.data.datasets[0].data;\n myChart.data.datasets[0].datalabels = DataLabel;\n myChart.data.datasets[1].data = datain.data.datasets[1].data;\n myChart.data.datasets[1].datalabels = DataLabel;\n myChart.data.datasets[2].data = datain.data.datasets[2].data;\n myChart.data.datasets[2].datalabels = DataLabel;\n myChart.options.plugins.datalabels.color = '#ffffff';\n //myChart.options.plugins.datalabels.display = true;\n myChart.update();\n\n //myChart = new Chart(ctx, config);\n //localStorage.setItem(\"ChartObj\",myChart);\n } catch (e) {\n console.log(e);\n }\n\n }\n\n});\n\n\n\n\n\n\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1080,"y":820,"wires":[[]]},{"id":"74c6fd1f.d11954","type":"function","z":"d93a508b.a5607","name":"GenerateRandomDataset","func":"function getRandomArbitrary(min, max) {\n return (Math.random() * (max - min) + min).toFixed(0);\n}\n\nvar data = {};\nvar datasets = [];\nvar dataObj = {};\nvar dataArray = [];\n\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataObj.data = dataArray;\ndatasets.push(dataObj);\n\ndataObj = {};\ndataArray = [];\n\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataObj.data = dataArray;\ndatasets.push(dataObj);\n\ndataObj = {};\ndataArray = [];\n\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataArray.push(getRandomArbitrary(0,100));\ndataObj.data = dataArray;\ndatasets.push(dataObj);\n\ndata.datasets = datasets; \n\nmsg.data = data;\nreturn msg;","outputs":1,"noerr":0,"x":850,"y":820,"wires":[["1136a538.dc6d5b"]]},{"id":"5f324239.99b4bc","type":"inject","z":"d93a508b.a5607","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":600,"y":820,"wires":[["74c6fd1f.d11954"]]},{"id":"caf9ba81.0fca58","type":"ui_group","name":"Group 1","tab":"8bc33234.133f3","order":1,"disp":true,"width":26},{"id":"8bc33234.133f3","type":"ui_tab","name":"Tab 13","icon":"dashboard","order":13}]
