Chart.js - Toggle visibility of charts - javascript

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.net/ttum6ppu/
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/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

In 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();
}

Related

I want to zoom image but inside the div

I want to zoom the image inside the div but when I am trying to zoom the image the size of the div is also increasing.
<img src="" alt="Image Preview" id="zoom" class="image-preview__image">
<div class="btn-group mt-2" role="group" aria-label="">
<button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info" onclick="zoomout()" >100%</button>
<button ng-click="Size=200" class="btn btn-sm btn-group btn-outline-info" onclick="zoomin()" >200%</button>
<button ng-click="Size=300" class="btn btn-sm btn-group btn-outline-info">300%</button>
<button ng-click="Size=400" class="btn btn-sm btn-group btn-outline-info">400%</button>
</div>
<script type="text/javascript">
function zoomin() {
var GFG = document.getElementById("zoom");
var currHeight = GFG.clientHeight;
GFG.style.height = (currHeight + 40) + "px";
}
function zoomout() {
var GFG = document.getElementById("zoom");
var currHeight = GFG.clientHeight;
GFG.style.height = (currHeight - 40) + "px";
}
Instead of using the width/height, you can use the transform property to scale the image. If you place that image inside a container with overflow:hidden, you can resize the image to any size you like without it overflowing the container and the image will retain its original size for layout purposes.
With that said, you don't need a container with overflow hidden, but without one, the image will visually grow to whatever size you specify, though it will still maintain the intrinsic layout size.
document.querySelectorAll("button").forEach(e => {
e.addEventListener("click", function(){
let size = this.getAttribute("ng-click").split("=")[1];
let image = document.getElementById("zoom");
image.style.transform = `scale(${size}%)`;
});
});
.image-container
{
width: 200px;
height: 200px;
overflow: hidden;
}
.image-container img
{
transition-duration: 1s;
}
<div class="btn-group mt-2" role="group" aria-label="">
<button ng-click="Size=100" class="btn btn-sm btn-group btn-outline-info">100%</button>
<button ng-click="Size=200" class="btn btn-sm btn-group btn-outline-info">200%</button>
<button ng-click="Size=300" class="btn btn-sm btn-group btn-outline-info">300%</button>
<button ng-click="Size=400" class="btn btn-sm btn-group btn-outline-info">400%</button>
</div>
<div class="image-container">
<img alt="Image Preview" id="zoom" class="image-preview__image" src="https://via.placeholder.com/200x200">
</div>

JQuery mutiple Button on click show different on output

<div class="btn-toolbar">
<button type="button1" class="btn btn-primary btn mr-3" >Add Recyclable</button>
<button id="edit" type="button2" class="btn btn-secondary btn mr-3" disabled>Edit Recyclable</button>
<button type="button3" class="btn btn-primary custom btn mr-3">Add Type</button>
<button id="delete" type="button4" class="btn btn-danger custom" disabled>Delete</button>
<div id="windowForAssign"></div>
<script>
$('button').click(createAndShowPopup);
var kendoWindowAssign = $("#windowForAssign");
var title = "Test";
var url = ""
function createAndShowPopup(){
kendoWindowAssign.kendoWindow({
width: "650px",
modal: true,
height: '500px',
iframe: true,
resizable: false,
title: title,
content: "test.html",
visible: false,
});
var popup = $("#windowForAssign").data('kendoWindow');
popup.open();
popup.center();
}
</script>
however as mention the button is classified as all button
how can i indicate that each button it do different pop up
like title and content ?
Example of pop up with different clicks
example of how it look like
if i change to $("button2").click ...
it wouldnt work as i wan to seperate them how can i do ?

Chartjs line chart not rendering

I have two charts in my application right now that both use chartjs. One is a bar chart, which works perfectly. The second, doesn't render at all and I'm not sure why. I created the second in a dummy html page and copied the code over, but when I put it in my real application, it breaks.
I have this html:
<div class="card text-white">
<div class="card-header">
<div class="row">
<h3 class="display-4" id="graphTitle"></h3>
</div>
</div>
<div class="card-body">
<canvas id="myLineChart"></canvas>
</div>
<div class="card-footer text-center">
<div class="btn-group" role="group">
<button class="btn btn-success" name="graphBTN" id="1DBTN">1D</button>
<button class="btn btn-success" name="graphBTN" id="1mBTN">1M</button>
<button class="btn btn-success" name="graphBTN" id="3mBTN">3M</button>
<button class="btn btn-success" name="graphBTN" id="6mBTN">6M</button>
<button class="btn btn-success" name="graphBTN" id="ytdBTN">YTD</button>
<button class="btn btn-success" name="graphBTN" id="1YBTN">1Y</button>
<button class="btn btn-success" name="graphBTN" id="2YBTN">2Y</button>
<button class="btn btn-success" name="graphBTN" id="5YBTN">5Y</button>
</div>
</div>
</div>
As for the javascript,
I have the following global variables.
// graphing global variables
var ctx;
var myBarChart;
var myLineChart;
I have a function to generate a line chart (this is static test data):
function createLineChart() {
// Our labels along the x-axis
var years = [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050];
// For drawing the lines
var africa = [86,114,106,106,107,111,133,221,783,2478];
var asia = [282,350,411,502,635,809,947,1402,3700,5267];
var europe = [168,170,178,190,203,276,408,547,675,734];
var latinAmerica = [40,20,10,16,24,38,74,167,508,784];
var northAmerica = [6,3,2,2,7,26,82,172,312,433];
ctx = $('#myLineChart');
myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: years,
datasets: [
{
data: africa
}
]
}
});
}
Then, inside a button click, I call about 8 functions, one of them being this one.
createLineChart();
All of the functions work on the button click (see picture), but the graph. I get no errors. All console logs appear to be normal. It just doesn't show up like my other (bar chart) graphs do - which are using dynamic data sets.

How to update Bootstrap 3 tooltip text on each hover?

I'd like to just simply update the tooltip each time on hover before display. I have a warning icon that pops up if there's been an error, and on hover I'd like the most recent error to show up. What I have doesn't work, though.
HTML Snippet
<div id="title">App</div>
<button id="warningbtn" type="button" class="btn-default btn-sm"
data-toggle="errortip" data-placement="right" title="">
<span class="glyphicon glyphicon-warning-sign"></span>
</button>
JavaScript/JQuery:
function start(){
let result = addon.start();
if (result == -1){
recentError = "Your license is invalid.";
}
}
$(document).ready(function(){
$('[data-toggle="errortip"]').tooltip({
trigger : 'hover',
title: errorVariable
});
Start is called from a simple start button on the page. recentError is declared at the top of the .js file.
Thanks for the help!
You can set this attribute whenever you will need a new value for the tooltip:
$('#warningbtn').attr('data-original-title','something else');
There is an issue reported here, and it seems to be a problem with setting the tooltip title dynamically
https://github.com/twbs/bootstrap/issues/14769
You may use data-original-title attribute on show.bs.tooltip event:
var errorVariable = Date.now() % 100;
$(function () {
$('[data-toggle="errortip"]').tooltip({
trigger : 'hover',
title: errorVariable
}).on('show.bs.tooltip', function(e) {
$(this).attr('data-original-title', errorVariable);
});
$('#myBtn').on('click', function(e) {
errorVariable = Date.now() % 100;
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn-default btn-sm" id="myBtn">Click Me to create a random tooltip message</button>
<div id="title">App</div>
<button id="warningbtn" type="button" class="btn-default btn-sm"
data-toggle="errortip" data-placement="right" title="">
<span class="glyphicon glyphicon-warning-sign"></span>
</button>
Try this
$('#warningbtn').on('show.bs.tooltip', function() {
$('#warningbtn').tooltip({
title: errorVariable
})
});
You can use following code. I have updated according to your requirement. :
var recentError;
function start() {
var result = -1;
if (result == -1) {
recentError = "Your license is invalid.";
}
}
$(document).ready(function() {
$('[data-toggle="errortip"]').tooltip({
title : recentError
});
});
start();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<div id="title">App</div>
<button id="warningbtn" type="button" class="btn-default btn-sm"
data-toggle="errortip" data-placement="right" title="">
<span class="glyphicon glyphicon-warning-sign"></span>
</button>

How can I show Bootstrap modal when on click in individual bars in chart.js

I am working on a project using chart.js. I am trying to show a bootstrap modal when clicking individual bars instead of tooltip in chart js. Right now I am using chart id's onclick function for showing a bootstrap modal. Is there any way to make it possible.?
Here is my code:
HTML:
<div class="chart1">
<canvas id="barchart5"></canvas>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
JAVASCRIPT :
<script type="text/javascript">
var data5 ={
labels: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8"],
datasets : [
{
fillColor : "#F64747",
strokeColor : "#F64747",
highlightFill: "#F64747",
highlightStroke: "#F64747",
data: [4, 6, 3, 2, 10, 5, 5, 7]
},
{
fillColor : "#19B5FE",
strokeColor : "#19B5FE",
highlightFill : "#19B5FE",
highlightStroke : "#19B5FE",
data: [3, 6, 4, 3, 10, 10, 5, 8]
},
{
fillColor : "#F7CA18",
strokeColor : "#F7CA18",
highlightFill : "#F7CA18",
highlightStroke : "#F7CA18",
data: [4, 6, 10, 4, 7, 6, 2, 4]
}
]
};
var ctx = document.getElementById("barchart5").getContext("2d");
var barchart5 = new Chart(ctx).Bar(data5, {
responsive : true,
showTooltips: false,
onAnimationComplete: function () {
var ctx = this.chart.ctx;
alert(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);
});
})
}
});
$( "#barchart5" ).click(function() {
$('#myModal').modal('show');
});
</script>
canvas.onclick = function(evt) {
var points = chart.getBarsAtEvent(evt);
var value = chart.datasets[0].points.indexOf(points[0]);
if(value == 5){
$('#myModal').modal('show');
} else if(value == 4){
$('#myModal1').modal('show');
}
};
see this,
Click events on Pie Charts in Chart.js
don't know much about chart.js but I'm sure this library has some method to do this easily, no need to use jquery.

Categories