Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion

Developer
Utcwebdev
Size
3,804 Kb
Views
60,720
  1. Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion Previews
  2. Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion HTML Codes
  3. Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion CSS Codes
  4. Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion JS Codes

How do I make an chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion?

What is a chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion? How do you make a chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion? This script and codes were developed by Utcwebdev on 26 November 2022, Saturday.

Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion Previews
IQ Test

Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion</title> <meta name='viewport' content='width=device-width'> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://www.utc.edu/strategic-plan/progress/bower_components/normalize-css/normalize.css'>
<link rel='stylesheet prefetch' href='http://www.utc.edu/strategic-plan/progress/bower_components/chartist/dist/chartist.min.css'>
<link rel='stylesheet prefetch' href='http://www.utc.edu/strategic-plan/progress/assets/css/utc-charts.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content" class="span12 content" role="main">
<h1>Chartist.js charts in hidden elements</h1>
<p>Tab 1, accordion 2 has a chart. Tab 2 accordion also has a chart. Default behavior: 2nd chart is drawn too small. </p> <ul> <li>Quirk: resizing the window or pane width causes that chart to redraw correctly. </li> <li>Problem: after draw, if tabs are switched, chart draw is again broken.</li> </ul>
<p>See JS panel to change behavior to draw on accordion trigger. Lines 5,26,27,48.</p> <ul> <li>Problem: accessibility tables are drawn multiple times. Toggling legend/series also toggles accessibility table rows, but because there are multiples, the display is layered and older tables are visible behind and/or underneath.</li> </ul>
<div class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#tab01" data-toggle="tab"><em class="icon icon-dashboard"> <!--icon--></em>&nbsp;Tab 1</a></li>
<li><a href="#tab02" data-toggle="tab"><em class="icon icon-dashboard"> <!--icon--></em>&nbsp;Tab 2</a></li>
</ul>
<div class="tab-content"><!--begin tab01-->
<div id="tab01" class="tab-pane fade in active">
<h3>Title Information - tab 1</h3>
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a id="trigger-2-1" class="accordion-toggle" href="#collapse-2-1" data-toggle="collapse" data-parent="#accordion2">No Charts here</a></div>
<div id="collapse-2-1" class="accordion-body collapse">
<div class="accordion-inner">
<p><strong>Lorem Ipsum</strong>&nbsp;thinks dinky weapons are ridiculous.&nbsp;<a href="#" target="_blank">This link</a>.</p>
<p>&nbsp;</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="http://placehold.it/800x300" alt="infographic: 1.28 minutes" /></p>
<p>&nbsp;</p>
<p>During the 2015-2016 year, lots of stuff happened.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a id="trigger-2-2" class="accordion-toggle" href="#collapse-2-2" data-toggle="collapse" data-parent="#accordion2">This accordion contains a Chartist.js chart - OK</a></div>
<div id="collapse-2-2" class="accordion-body collapse">
<div class="accordion-inner">
<p><strong>The Big Lebowski</strong>&nbsp;provides White Russians:</p>
<ul type="disc">
<li><strong>Bullet 1</strong></li>
<li><strong>Bullet 2</strong></li>
<li><strong>Bullet 3</strong></li>
</ul>
<h1 style="text-align: center;">Honors College Enrollment</h1>
<div id="chart-Honors" class="ct-chart ct-major-tenth">
<ul class="ct-legend">
<li class="ct-series-0" data-legend="0">Brock</li>
<li class="ct-series-1" data-legend="1">Innovations</li>
<li class="ct-series-2" data-legend="2">HAM LLC</li>
</ul>
<!-- Chartist.js chart --></div>
<p><br />Lots of stuff happening here:&nbsp;<a href="#" target="_blank">Honorable Link</a>.</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a id="trigger-2-3" class="accordion-toggle" href="#collapse-2-3" data-toggle="collapse" data-parent="#accordion2">No charts here.</a></div>
<div id="collapse-2-3" class="accordion-body collapse">
<div class="accordion-inner">
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="http://placehold.it/800x300" alt="infographic" width="800" height="300" /></p>
<p><strong>The other guy</strong> is comprised of less good stuff. Ants, mice and sundry variables.</p>
<p>&nbsp;</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="http://placehold.it/800x300" alt="infographic" width="800" height="300" /></p>
<p>&nbsp;</p>
<p>Over the last year, hamburgers are served within less than one and one-half minutes.</p>
</div>
</div>
</div>
</div>
</div>
<!--end tab01--> <!--begin tab02-->
<div id="tab02" class="tab-pane fade in ">
<h3>Title Information - tab 2</h3>
<div id="accordion3" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a id="trigger-3-1" class="accordion-toggle" href="#collapse-3-1" data-toggle="collapse" data-parent="#accordion3">This accordion contains a Chartist.js chart - NOT OK</a></div>
<div id="collapse-3-1" class="accordion-body collapse">
<div class="accordion-inner">
<p><strong>Lorem Ipsum</strong> dolor sit amet.</p>
<h1 style="text-align: center;">Continuing Education Participation</h1>
<div id="chart-ContinuingEd" class="ct-chart ct-major-tenth"></div>
Available programs and contact information can be found on their <a href="#">Continuing Education website.</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
</div>
</div>
</div>
<!--end tab02--></div>
</div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/bower_components/chartist/dist/chartist.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/bower_components/chartist-plugin-axistitle/dist/chartist-plugin-axistitle.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/bower_components/chartist-plugin-accessibility/dist/chartist-plugin-accessibility.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/bower_components/chartist-plugin-barlabels/dist/chartist-plugin-barlabels.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/bower_components/chartist-plugin-pointlabels/dist/chartist-plugin-pointlabels.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/git_components/chartist-plugin-legend/chartist-plugin-legend.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/assets/js/chart-continuing-ed.js'></script>
<script src='http://www.utc.edu/strategic-plan/progress/assets/js/chart-honors.js'></script> <script src="js/index.js"></script>
</body>
</html>

Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion - Script Codes CSS Codes

#content .nav a {text-decoration:none;border-bottom:none;}
.tabbable {margin-top: 12px;}
.accordion-heading .accordion-toggle > a {text-decoration: none !important;}
.nav-tabs > li > a {line-height: 1em; font-size: 1.4em;}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {color: #e0aa0f !important;}

Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion - Script Codes JS Codes

// must /re/trigger chart draw for every accordion show
// to prove this, uncomment next and other
// function/close lines, below to
// wrap draws in accordion & tab trigger events
//$('.accordion').on('show hide shown hidden', function(event) { event.stopPropagation(); // Create Chart 1 new Chartist.Bar('#chart-Honors', dataHonors, optionsHonors) .on('draw', function(data) { if(data.type === 'bar') { data.element.attr({ style: 'stroke-width: 40px' }); } }); // Create Chart 2 new Chartist.Bar('#chart-ContinuingEd', dataConEd, optionsConEd) .on('draw', function(data) { if(data.type === 'bar') { data.element.attr({ style: 'stroke-width: 40px' }); } });
//});
//$('a[data-toggle="tab"]').on('shown', function (event) { event.stopPropagation(); // Create Chart 1 new Chartist.Bar('#chart-Honors', dataHonors, optionsHonors) .on('draw', function(data) { if(data.type === 'bar') { data.element.attr({ style: 'stroke-width: 40px' }); } }); // Create Chart 2 new Chartist.Bar('#chart-ContinuingEd', dataConEd, optionsConEd) .on('draw', function(data) { if(data.type === 'bar') { data.element.attr({ style: 'stroke-width: 40px' }); } });
//})
Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion - Script Codes
Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion - Script Codes
Home Page Home
Developer Utcwebdev
Username utcwebdev
Uploaded November 26, 2022
Rating 3
Size 3,804 Kb
Views 60,720
Do you need developer help for Chartist.js problems drawing graphs when they begin in hidden elements - bootstrap accordion?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Utcwebdev (utcwebdev) Script Codes
Name
Responsive table using footables plugin
Tooltip only on specific selectors
Off-Canvas Side Nav With Bootstrap 2
Responsive Image Map
Footable policy and procedure index
Ultra wide responsive tables using footables plugin
Sorting and filtering a huge table using footable plugin
A Pen by utcwebdev
Javascript search within table
Blackboard login form
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!