I am trying to make a slideshow of 2 Morris.js charts with w3css slideshow.
(I used this: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots and replace the images with 2 Morris.js charts with hardcoded data)
first chart is drawn correctly but the second one is somehow croped.
What I have tried is to store the Morris charts in local vars and redraw the charts when the slide changes, but still no luck.
any idea what I'm doing wrong?
<div class="w3-content" style="max-width:800px">
<div class="mySlides" id="graph1" style="width:100%"></div>
<div class="mySlides" id="graph2" style="width:100%"></div>
</div>
<div class="w3-center">
<div class="w3-section">
<button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
<button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
</div>
<button class="w3-button demo" onclick="currentDiv(1)">1</button>
<button class="w3-button demo" onclick="currentDiv(2)">2</button>
</div>
<script>
Morris.Line({
element: 'graph1',
data: week_data,
xkey: 'period',
ykeys: ['licensed'],
labels: ['Licensed']
});
Morris.Line({
element: 'graph2',
data: week_data,
xkey: 'period',
ykeys: ['licensed'],
labels: ['Licensed']
});
</script>
</body>
</html>
It seems that I cannot paste the entire html so, the rest of the code can be found in here:
https://jsfiddle.net/d5p16q2z/1/
You probably need to resize the width of the SVG element. When I have such problems, I do something like this:
$('#graph1 svg').width($('div.mySlides').width());
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.