When having more than 1 chart displayed in a view/page, X-Axis labels of last chart drawn overwrites the labels of all previous charts. Although data is correct.
<!-- Main content -->
<section class="content">
<!-- Your Page Content Here -->
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-x">
<div class="panel-heading">Dummy1</div>
<div class="panel-body">
<script src="/js/moment.js"></script>
<script src="/js/Chart.min.js"></script>
<div class="container-fluid">
<canvas id="BarChart1" width="100px" height="100px"></canvas>
</div>
<script>
/**
* This script is to allow for more than one window.onload in our page,
* in case we need to use more than one chart per page
*/
/**
* The addLoadEvent function.
* @author Willison, Simon (http://simonwillison.net/)
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
</script>
<!--suppress BadExpressionStatementJS -->
<script type="text/javascript">
var label = []; // graphic label array
var infor = []; // graphic data array
// incremeting labels array
label.push("Jan");
label.push("Apr");
/**
* This function is responsible for loading the window.load and instantiate our chart.
* The parameters of data and options are passed directly to avoid conflict with the
* variable names when using more than one report.
*/
addLoadEvent(function() {
var BarChart1 = document.getElementById("BarChart1").getContext("2d");
window.myBar = new Chart(BarChart1).Bar(
// ---------------------------------------------------------------
// Data sections
// ---------------------------------------------------------------
{
labels: label,
datasets:
[
{
label: "Dados primários",
fillColor: "rgba(212, 141, 63, .7)",
strokeColor: "rgba(212, 141, 63, .7)",
highlightFill: "rgba(212, 141, 63, .7)",
highlightStroke: "rgba(212, 141, 63, .7)",
data : [333.4, 50]
}, {
label: "Dados primários",
fillColor: "rgba(181, 90, 164, .7)",
strokeColor: "rgba(181, 90, 164, .7)",
highlightFill: "rgba(181, 90, 164, .7)",
highlightStroke: "rgba(181, 90, 164, .7)",
data : [87, 60]
}, {
label: "Dados primários",
fillColor: "rgba(35, 102, 154, .7)",
strokeColor: "rgba(35, 102, 154, .7)",
highlightFill: "rgba(35, 102, 154, .7)",
highlightStroke: "rgba(35, 102, 154, .7)",
data : [100, 70]
}, {
label: "Dados primários",
fillColor: "rgba(86, 160, 59, .7)",
strokeColor: "rgba(86, 160, 59, .7)",
highlightFill: "rgba(86, 160, 59, .7)",
highlightStroke: "rgba(86, 160, 59, .7)",
data : [45, 35]
} ]
},
// End data section
// ---------------------------------------------------------------
// Options section
// ---------------------------------------------------------------
{
responsive:true
});
// End options section
});
</script>
</div>
</div>
<!-- ========================================================= -->
<div class="col-md-4 col-md-offset-x">
<div class="panel-heading">Dummy2</div>
<div class="panel-body">
<script src="/js/moment.js"></script>
<script src="/js/Chart.min.js"></script>
<div class="container-fluid">
<canvas id="BarChart2" width="100px" height="100px"></canvas>
</div>
<script>
/**
* This script is to allow for more than one window.onload in our page,
* in case we need to use more than one chart per page
*/
/**
* The addLoadEvent function.
* @author Willison, Simon (http://simonwillison.net/)
*/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
</script>
<!--suppress BadExpressionStatementJS -->
<script type="text/javascript">
var label = []; // graphic label array
var infor = []; // graphic data array
// incremeting labels array
label.push("Orange");
label.push("Apple");
label.push("Banana");
/**
* This function is responsible for loading the window.load and instantiate our chart.
* The parameters of data and options are passed directly to avoid conflict with the
* variable names when using more than one report.
*/
addLoadEvent(function() {
var BarChart2 = document.getElementById("BarChart2").getContext("2d");
window.myBar = new Chart(BarChart2).Bar(
// ---------------------------------------------------------------
// Data sections
// ---------------------------------------------------------------
{
labels: label,
datasets:
[
{
label: "Dados primários",
fillColor: "rgba(214, 158, 100, .7)",
strokeColor: "rgba(214, 158, 100, .7)",
highlightFill: "rgba(214, 158, 100, .7)",
highlightStroke: "rgba(214, 158, 100, .7)",
data : [23.4, 32.8, 20]
}, {
label: "Dados primários",
fillColor: "rgba(28, 216, 135, .7)",
strokeColor: "rgba(28, 216, 135, .7)",
highlightFill: "rgba(28, 216, 135, .7)",
highlightStroke: "rgba(28, 216, 135, .7)",
data : [47, 45, 23]
}]
},
// End data section
// ---------------------------------------------------------------
// Options section
// ---------------------------------------------------------------
{
responsive:true
});
// End options section
});
</script>
</div>
</div>
</div>