Topic: Bar chart only shows bar after resizing (IE) or open Dev Tools (Chrome)
Expected behavior Bar chart to show bars when web page is accessed
Actual behavior The bart chart is shown withour bars. They only appear when doing a resizing (restore down) in IE or opening the developers tools in Chrome. When maximizing the window (IE) or closing the developers tools in Chrome the bars remain displayed.
Resources (screenshots, code snippets etc.)
Material Design Bootstrap
<!-- Navbar brand -->
<a class="navbar-brand" href="#">WaterSpy</a>
<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="basicExampleNav">
<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Day
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Month</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Year</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Meter</a>
<a class="dropdown-item" href="#">Webserver</a>
<a class="dropdown-item" href="#">Thingspeak</a>
<a class="dropdown-item" href="#">MQTT</a>
<a class="dropdown-item" href="#">History</a>
<a class="dropdown-item" href="#">About Watermeter</a>
</div>
</li>
</ul>
<!-- Links -->
</div>
<!-- Collapsible content -->
</nav>
<!--Grid column-->
© 2018 Copyright: EHemeleers Engineering
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.4/js/mdb.min.js"></script>
<script>
var data= {};
var GraphData = [];
/* $(document).ready(function(){ */
$.getJSON('/dayjson',function(data){
for (i=0; i < Object.keys(data.measures).length ; i++) {
GraphData.push(data.measures[i].HourUse);
};
});
/* }); */
console.log(GraphData);
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["00-01","01-02","02-03","03-04","04-05","05-06","06-07","07-08","08-09","09-10","10-11","11-12","12-13","13-14","14-15","15-16","16-17","17-18","18-19","19-20","20-21","21-22","22-23","23-00"],
datasets: [{
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(255,99,132,1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
],
borderWidth: 1,
data: GraphData
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
scaleLabel: {
display: true,
labelString: 'Use (liter)'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Hour interval'
}
}]
}
}
});
</script>
By the way, behaviour stays the same when $(document).ready(function() is not commented...
Hi,
would you reproduce your issue in the snippet here: https://mdbootstrap.com/snippets/? It will be easier for me to help you when I see your code and live preview in one place.
Best, Marta
hemeleerse commented 6 years ago
Hi Marta, being new to programming, I hope I will be able to do this :-) I guess I can read somewhere how to do it.
Marta Szymanska staff pro premium commented 6 years ago
Hi,
it is very simple, here https://mdbootstrap.com/snippets/ you have a button "create a snippet", so just click on it, add a title and save. After that, you can write your code inside a snippet and whet you finish, just publish the snippet and paste here a link.
Best, Marta
hemeleerse commented 6 years ago
This first snippet https://mdbootstrap.com/snippets/jquery/hemeleerse/445950 is where I have the issue . As it is using a get function, i added line 113 where you seen an example of the response sent by the server. Just to avoid any misunderstanding: the get() function automatically recognizes the response from the web server as json and returns an object. I added the typeof statement and checked in the chrome console. Which is why there is no parse statement.The second snippet https://mdbootstrap.com/snippets/jquery/hemeleerse/445866 is where I'm simulating the response from the webserver and where all goes well.
I hope this allows you to help,regardsErik
Bartłomiej Malanowski staff pro premium commented 6 years ago
Could you please tell us what the response from "dayjson" looks like?
hemeleerse commented 6 years ago
'{"DayTotal":7.5,"DayPeakHour":10,"DayPeakUse":7.5,"Leak":false,"LeakVol":0,"measures":[{"HourInt":23,"HourUse":0},{"HourInt":22,"HourUse":0},{"HourInt":21,"HourUse":0},{"HourInt":20,"HourUse":0},{"HourInt":19,"HourUse":0},{"HourInt":18,"HourUse":0},{"HourInt":17,"HourUse":0},{"HourInt":16,"HourUse":0},{"HourInt":15,"HourUse":0},{"HourInt":14,"HourUse":0},{"HourInt":13,"HourUse":0},{"HourInt":12,"HourUse":0},{"HourInt":11,"HourUse":0},{"HourInt":10,"HourUse":7.5},{"HourInt":9,"HourUse":0},{"HourInt":8,"HourUse":0},{"HourInt":7,"HourUse":0},{"HourInt":6,"HourUse":0},{"HourInt":5,"HourUse":0},{"HourInt":4,"HourUse":0},{"HourInt":3,"HourUse":0},{"HourInt":2,"HourUse":0},{"HourInt":1,"HourUse":0},{"HourInt":0,"HourUse":0}]}';
hemeleerse commented 6 years ago
You can also look at snippet https://mdbootstrap.com/snippets/jquery/hemeleerse/445866 line 112 where I simulate the response.
The issue also happens when I open the page in Chrome on my IPad. When I open the page: no bars. When I then turn the iPad 90 degrees the bars appear. When I turn back 90 degrees, the bars remain visible.
Hi,
you can add this recorded video to google drive and provide me a link here in the message.
Best, Marta
hemeleerse commented 6 years ago
Hi, here's the link when opening the webpage on a Windows laptop using chrome and opening the development tools: https://drive.google.com/file/d/1_d8LhqVMFn-7v4pWlMaU9Bkg2mlohmRT/view?usp=drivesdk
Hi there,
if I understand you correctly, you make an ajax request to get the data and you want to visualise the response as a chart, right? Please notice, that get request is asynchronous, so the javascript engine won't wait for it but it continues to interpret the next lines of code. So the chart is created and after a moment you get the response with the data.
To resolve this, try to move the part of the code responsible for creating a chart to the callback function:
$.get('/dayjson', function (response) {
var myChart = new Chart(ctx, { .....
});
hemeleerse commented 6 years ago
Issue solved! I tested on pc, tablet, smartphone and it works fine. Thanks very much Anna for your kind assistance.
Anna Morawska staff commented 6 years ago
Happy to hear that :)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No