chart js same label, multi data - chart.js

Question

hey guys thanks for reading, and helping...
i have chart bar using chart.js, i found similar on js fiddle
here is the link http://jsfiddle.net/uh9vw0ao/
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [
{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}
]
};
var ctx = document.getElementById("myChart1").getContext("2d");
var myLine = new Chart(ctx).Line(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.points.forEach(function (points) {
ctx.fillText(points.value, points.x, points.y - 10);
});
})
}
});
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function (dataset) {
dataset.bars.forEach(function (bar) {
ctx.fillText(bar.value, bar.x, bar.y - 5);
});
})
}
});
question is how can i add value beside existing data, example :
example please click..
Thankyou very much!

Answer 1

A very quick and dirty method would be to use a paired array that has the values you want to disaply for each data point at the same index point
i.e. var supportingData = [12, 14, 15, 16, 17, 26];
then in the onAnimation complete use the index of the current data set to draw out the data form this array at the same time
dataset.bars.forEach(function(bar, index) {
//keep a refence of the fillstyle to change back to later
var ctxColour = ctx.fillStyle;
ctx.fillText(bar.value, bar.x, bar.y - 5);
ctx.fillStyle = "#FF0000";
ctx.fillText("$" + supportingData[index], bar.x + (ctx.measureText(bar.value).width)+10, bar.y - 5);
//reset the fill style
ctx.fillStyle = ctxColour;
});
because this is chartjs 1.x I do not think extra data you give to the chart is passed to the actual chart so if you wanted something a bit nicer you would need to extend your own chart and allow it to take this extra supporting data, but the method for displaying would be the same
var chartData = {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
fillColor: "#79D1CF",
strokeColor: "#79D1CF",
data: [60, 80, 81, 56, 55, 40]
}]
};
//add an array to have your paird data in
var supportingData = [12, 14, 15, 16, 17, 26];
var ctx = document.getElementById("myChart2").getContext("2d");
var myBar = new Chart(ctx).Bar(chartData, {
showTooltips: false,
onAnimationComplete: function() {
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.datasets.forEach(function(dataset) {
dataset.bars.forEach(function(bar, index) {
//keep a refence of the fillstyle to change back to later
var ctxColour = ctx.fillStyle;
ctx.fillText(bar.value, bar.x, bar.y - 5);
ctx.fillStyle = "#FF0000";
ctx.fillText("$" + supportingData[index], bar.x + (ctx.measureText(bar.value).width)+10, bar.y - 5);
//reset the fill sty;e
ctx.fillStyle = ctxColour;
});
})
}
});
<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<canvas id="myChart2" height="300" width="500"></canvas>