When I add a second line in the chart the caption is incorrect "without the $". How can I solve this problem? Thank you
function formatar(valor) {
var moeda = 'R$';
valor = ('' + valor).replace(',', '.');
valor = ('' + valor).split('.');
var parteInteira = valor[0];
var parteDecimal = valor[1];
// tratar a parte inteira
var rx = /(\d+)(\d{3})/;
parteInteira = parteInteira.replace(/^\d+/, function(w) {
while (rx.test(w)) {
w = w.replace(rx, '$1.$2');
}
return w;
});
// tratar a parte decimal
var formatoDecimal = 2;
if (parteDecimal) parteDecimal = parteDecimal.slice(0, formatoDecimal);
else if (!parteDecimal && formatoDecimal) {
parteDecimal = '';
while (parteDecimal.length < formatoDecimal) {
parteDecimal = '0' + parteDecimal;
}
}
if (parteDecimal.length < formatoDecimal) {
while (parteDecimal.length < formatoDecimal) {
parteDecimal = parteDecimal + '0';
}
}
var string = moeda + (parteDecimal ? [parteInteira, parteDecimal].join(',') : parteInteira);
console.log(string);
return string;
}
var options = {
scaleFontFamily: "'Verdana'",
scaleFontSize: 13,
animation: false,
scaleFontColor: "#484848",
responsive: true,
tooltipTemplate: function(data) {
return formatar(data.value);
},
scaleLabel: function(data) {
return formatar(data.value);
}
};
var data = {
labels: ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
datasets: [{
label: "2015",
fillColor: "rgba(0,145,255,0.2)",
strokeColor: "rgba(0,145,255,1)",
pointColor: "rgba(0,145,255,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(0,145,255,1)",
data: [199.9, 2888.99, 123.12, 3457.12, 124, 16885.33, 3578.34, 57853.34, 4678.12, 8754, 24657.55, 2345.33]
},{
label: "2016",
fillColor: "rgba(5,145,255,0.2)",
strokeColor: "rgba(5,145,255,1)",
pointColor: "rgba(5,145,255,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(0,145,255,1)",
data: [399.9, 7888.99, 323.12, 7457.12, 324, 36885.33, 6578.34, 97853.34, 7678.12, 9754, 44657.55, 4345.33]
}
]
};
window.onload = function() {
var ctx = document.getElementById("lineChart").getContext("2d");
new Chart(ctx).Line(data, options);
legend(document.getElementById("lineLegend"), data);
};
function legend(parent, data) {
legend(parent, data, null);
}
function legend(parent, data, chart, legendTemplate) {
legendTemplate = typeof legendTemplate !== 'undefined' ? legendTemplate : "<%= label %>";
parent.className = 'legend';
var datas = data.hasOwnProperty('datasets') ? data.datasets : data;
while (parent.hasChildNodes()) {
parent.removeChild(parent.lastChild);
}
var show = chart ? showTooltip : noop;
datas.forEach(function(d, i) {
// Span to div: legend appears to all element (color-sample and text-node)
var title = document.createElement('div');
title.className = 'title';
parent.appendChild(title);
var colorSample = document.createElement('div');
colorSample.className = 'color-sample';
colorSample.style.backgroundColor = d.hasOwnProperty('strokeColor') ? d.strokeColor : d.color;
colorSample.style.borderColor = d.hasOwnProperty('fillColor') ? d.fillColor : d.color;
title.appendChild(colorSample);
legendNode = legendTemplate.replace("<%= value %>", d.value);
legendNode = legendNode.replace("<%= label %>", d.label);
var text = document.createTextNode(legendNode);
text.className = 'text-node';
title.appendChild(text);
show(chart, title, i);
});
}
// Add events to legend that show tool tips on chart
var Chart;
function showTooltip(chart, elem, indexChartSegment) {
var helpers = Chart.helpers;
var segments = chart.segments;
// Only chart with segments
if (typeof segments !== 'undefined') {
helpers.addEvent(elem, 'mouseover', function() {
var segment = segments[indexChartSegment];
segment.save();
segment.fillColor = segment.highlightColor;
chart.showTooltip([segment]);
segment.restore();
});
helpers.addEvent(elem, 'mouseout', function() {
chart.draw();
});
}
}
function noop() {}
body {
margin: 0;
color: #484848;
font-family: Verdana;
font-size: 13px;
}
.box-grafico1 {
margin: 0px auto;
width: 90%;
}
.box-grafico2 {
width: 690px;
}
#fork {
position: absolute;
top: 0;
right: 0;
border: 0;
}
.legend {
margin-top: 15px;
width: 90%;
}
.legend .title {
float: left;
display: block;
margin-bottom: 0.5em;
line-height: 1.2em;
padding: 0 0.3em;
}
.legend .color-sample {
display: block;
float: left;
width: 1em;
height: 1em;
border: 2px solid;
border-radius: 100px;
margin-right: 0.5em;
}
<script src="http://www.chartjs.org/assets/Chart.js"></script><divclass="box-grafico1">
<canvas id="lineChart"></canvas>
<div id="lineLegend"></div>
</div>