I really need help for this thing i'm working on. Basically I have 4 charts rendered by chartjs. I've made 4 buttons, that simply show or hide the desired DIV. I'm pretty sure it's works on jQuery side, but I'm not so skilled to understand what's happening here on Chart.js side.
This is a demo /
<script src=".js/1.0.2/Chart.js"></script>
<script src=".1.1/jquery.min.js"></script>
<body>
<p>
<button type="button" class="btn btn-default btn-xs stanza_button" id="stanza" style="display:none;">Per stanza</button>
<button type="button" class="btn btn-primary btn-xs stanza_selected" id="stanza"><i class="fa fa-eye"></i> Per stanza</button>
<button type="button" class="btn btn-default btn-xs settimanale_button" id="settimanale">Andamento settimanale</button>
<button type="button" class="btn btn-primary btn-xs settimanale_selected" id="settimanale" style="display:none;"><i class="fa fa-eye"></i> Andamento settimanale</button>
<button type="button" class="btn btn-default btn-xs mensile_button" id="mensile">Andamento mensile</button>
<button type="button" class="btn btn-primary btn-xs mensile_selected" id="mensile" style="display:none;"><i class="fa fa-eye"></i> Andamento mensile</button>
<button type="button" class="btn btn-default btn-xs annuo_button" id="annuo">Andamento annuo</button>
<button type="button" class="btn btn-primary btn-xs annuo_selected" id="annuo" style="display:none;"><i class="fa fa-eye"></i> Andamento annuo</button>
</p>
<script>
$(document).ready(function(){
$("#stanza").click(function(){
$(".stanza, .stanza_selected, .settimanale_button, .mensile_button, .annuo_button").show();
$(".settimanale, .mensile, .annuo, .stanza_button, .settimanale_selected, .mensile_selected, .annuo_selected").hide();
});
$("#settimanale").click(function(){
$(".settimanale, .settimanale_selected, .stanza_button, .mensile_button, .annuo_button").show();
$(".stanza, .mensile, .annuo, .stanza_selected, .settimanale_button, .mensile_selected, .annuo_selected").hide();
});
$("#mensile").click(function(){
$(".mensile, .mensile_selected, .stanza_button, .settimanale_button, .annuo_button").show();
$(".stanza, .settimanale, .annuo, .stanza_selected, .settimanale_selected, .mensile_button, .annuo_selected").hide();
});
$("#annuo").click(function(){
$(".annuo, .annuo_selected, .stanza_button, .settimanale_button, .mensile_button").show();
$(".stanza, .settimanale, .mensile, .stanza_selected, .settimanale_selected, .mensile_selected, .annuo_button").hide();
});
});
</script>
<div style="width: 50%">
<div style="height:70%;" class="stanza">
<canvas id="canvas" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="settimanale">
<canvas id="canvas2" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="mensile">
<canvas id="canvas3" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="annuo">
<canvas id="canvas4" height="100px;"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas2").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas3").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas4").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
</script>
</body>I really need help for this thing i'm working on. Basically I have 4 charts rendered by chartjs. I've made 4 buttons, that simply show or hide the desired DIV. I'm pretty sure it's works on jQuery side, but I'm not so skilled to understand what's happening here on Chart.js side.
This is a demo https://jsfiddle/ttum6ppu/
<script src="https://cdnjs.cloudflare./ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>
<button type="button" class="btn btn-default btn-xs stanza_button" id="stanza" style="display:none;">Per stanza</button>
<button type="button" class="btn btn-primary btn-xs stanza_selected" id="stanza"><i class="fa fa-eye"></i> Per stanza</button>
<button type="button" class="btn btn-default btn-xs settimanale_button" id="settimanale">Andamento settimanale</button>
<button type="button" class="btn btn-primary btn-xs settimanale_selected" id="settimanale" style="display:none;"><i class="fa fa-eye"></i> Andamento settimanale</button>
<button type="button" class="btn btn-default btn-xs mensile_button" id="mensile">Andamento mensile</button>
<button type="button" class="btn btn-primary btn-xs mensile_selected" id="mensile" style="display:none;"><i class="fa fa-eye"></i> Andamento mensile</button>
<button type="button" class="btn btn-default btn-xs annuo_button" id="annuo">Andamento annuo</button>
<button type="button" class="btn btn-primary btn-xs annuo_selected" id="annuo" style="display:none;"><i class="fa fa-eye"></i> Andamento annuo</button>
</p>
<script>
$(document).ready(function(){
$("#stanza").click(function(){
$(".stanza, .stanza_selected, .settimanale_button, .mensile_button, .annuo_button").show();
$(".settimanale, .mensile, .annuo, .stanza_button, .settimanale_selected, .mensile_selected, .annuo_selected").hide();
});
$("#settimanale").click(function(){
$(".settimanale, .settimanale_selected, .stanza_button, .mensile_button, .annuo_button").show();
$(".stanza, .mensile, .annuo, .stanza_selected, .settimanale_button, .mensile_selected, .annuo_selected").hide();
});
$("#mensile").click(function(){
$(".mensile, .mensile_selected, .stanza_button, .settimanale_button, .annuo_button").show();
$(".stanza, .settimanale, .annuo, .stanza_selected, .settimanale_selected, .mensile_button, .annuo_selected").hide();
});
$("#annuo").click(function(){
$(".annuo, .annuo_selected, .stanza_button, .settimanale_button, .mensile_button").show();
$(".stanza, .settimanale, .mensile, .stanza_selected, .settimanale_selected, .mensile_selected, .annuo_button").hide();
});
});
</script>
<div style="width: 50%">
<div style="height:70%;" class="stanza">
<canvas id="canvas" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="settimanale">
<canvas id="canvas2" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="mensile">
<canvas id="canvas3" height="100px;"></canvas>
</div>
<div style="height:70%; display: none;" class="annuo">
<canvas id="canvas4" height="100px;"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var barChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas2").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas3").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
var ctx = document.getElementById("canvas4").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}
</script>
</body>The first chart is displayed correctly, but when You press the second button it shows nothing. Thank You in advance
Share Improve this question asked Aug 25, 2015 at 15:50 Luca ScalviLuca Scalvi 812 gold badges4 silver badges12 bronze badges3 Answers
Reset to default 2In my view a better solution is to modify the DOM to replace the canvas element, so you can redraw it with your new data :
var canvas_html = '<canvas id="canvas" height="100px;"></canvas>';
var drawChart = function(data) {
// reinit canvas
$('#canvas_container').html(canvas_html);
// redraw chart
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(data, {
responsive : true
});
};
I have made an update of your fiddle so you can see the result.
This is fiddly, think it's because your using Chart.js which creates the charts using iframes which are never fun to work with. Without forcing a page reload I dont think you're going to be able to do it. The canvas is being drawn at 0px height and width on the hidden charts so just changing their parents divs display using jQuery to block isn't going to cut the mustard.
I've updated your fiddle so that clicking on each button shows each chart separately but the only thing I couldnt fix was hiding the last three charts on page load. Hopefully this is something that you can work with.
I've removed display: none from the charts
I had same issue and solved it by looking at visibility of container div, if div is visible render chart otherwise do nothing. so on switch tab call function to render chart, by that time div should be visible. here is sample code,
if ($(".canvas-holder2").is(":visible")) {
window['myDoughnut'] = new Chart($("#chart-area")[0]
.getContext("2d"))
.Doughnut(data, {
responsive: true,
animateScale: true
});
window['myDoughnut'].update();
}