I have a website with 3 iFrames in a Owl Carousel slider. It needs a lot of performance because it loads 3D-CGI content I need to show. A single iFrame is loaded in some seconds which is okay, but it loads all 3 iFrames at the same time and this will cause very long loading time and some older smartphones cant handle it.
How do I make it to stop load all 3 iFrames togheter and load every single when its viewed instead?
JsFiddle
$('.carousel2').owlCarousel({
loop:true,
autoplay:false,
dotsEach: false,
responsiveClass:true,
mouseDraggable: false,
navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
responsive:{
0:{
items:1,
margin: 10,
dots:true,
nav:true,
loop:true
},
600:{
items:1,
nav:true,
dots:true,
margin: 100,
loop:true
},
1000:{
items:1,
margin: 100,
dots:true,
nav:true,
loop:true
}
}
})
// On Scroll:
// Change Header from Transparent to white and back and from absolute to fixed
window.onscroll = function() {
// Change iframe data-src to src to render it when its in view
// && window.matchMedia("(min-width: 680px)").matches
if ( window.pageYOffset > 150 ) {
var iframe1=$('.myIframe1');
var iframe2=$('.myIframe2');
var iframe3=$('.myIframe3');
if (iframe1.data('src')){
iframe1.prop('src', iframe1.data('src')).data('src', false);
}
if (iframe2.data('src')){
iframe2.prop('src', iframe2.data('src')).data('src', false);
}
if (iframe3.data('src')){
iframe3.prop('src', iframe3.data('src')).data('src', false);
}
}
}
.space {
height: 200px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" integrity="sha512-UTNP5BXLIptsaj5WdKFrkFov94lDx+eBvbKyoe1YAfjeRPC+gT5kyZ10kOHCfNZqEui1sxmqvodNUx3KbuYI/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="space"></div>
<div class="interactive_desktop">
<div class="carousel2 owl-carousel owl-theme">
<div class="item products_3_img">
<iframe class="myIframe1" style="width: 800px; height: 800px;" src="about:blank" data-src="https://de.wikipedia.org/wiki/Wikipedia:Hauptseite" ></iframe>
</div>
<div class="item products_3_img">
<iframe class="myIframe2" style="width: 800px; height: 800px;" src="about:blank" data-src="https://de.wikipedia.org/wiki/Portal:Wikipedia_nach_Themen"></iframe>
</div>
<div class="item products_3_img">
<iframe class="myIframe3" style="width: 800px; height: 800px;" src="about:blank" data-src="https://de.wikipedia.org/w/index.php?title=Portal:Wikipedia_nach_Themen&oldid=212000847"></iframe>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js" integrity="sha512-gY25nC63ddE0LcLPhxUJGFxa2GoIyA5FLym4UJqHDEMHjp8RET6Zn/SHo1sltt3WuVtqfyxECP38/daUc/WVEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Theres an option for owl carousel to activate lazyload.
$('.owl-carousel').owlCarousel({
items:4,
lazyLoad:true,
loop:true,
margin:10
});
So I am currently designing and creating a one-paged bootstrap website. I am trying to add an event calendar to the website. However, whenever I insert it to the HTML code (see the code below), it does not load at all. Here is a link to the calendar widget code: https://codepen.io/seebrosky/pen/zmejgg. How do I integrate it into the website properly?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Group</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<style type="text/css">
body,td,th {
font-family: muli;
font-style: normal;
color: #000000;
}
body {
min-height: 100%;
width: 100%;
argin-left: 0px;
background-image: url();
background-color: #FFFFFF;
}
</style>
<!-- Calendar-->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>
</head>
<body marginwidth="200px" id="page-top">
<!-- Navigation -->
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h6 style="font-size:25px; letter-spacing:2px; color: white">Club</h6>
<h1 style="font-size:85px; color:white">Industry</h1>
<pre> </pre>
<a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
</div>
<div class="overlay"></div>
</header>
<!-- Calendar -->
<!--
<div class="container text-center">
<h2 class="mx-auto mb-5">Calendar</h2>
<a class="btn btn-primary btn-xl" href="https://startbootstrap.com/template-overviews/stylish-portfolio/">Download Now!</a>
</div>-->
<section class="content-section" style="background: #9045CB; color: white" id="get-involved">
<h2 class="mx-auto mb-5">Calendar</h2>
<div class="container text-center">
<head>
<script>
$(document).ready(function() {
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
/* className colors
className: default(transparent), important(red), chill(pink), success(green), info(blue)
*/
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events div.external-event').each(function() {
// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
// it doesn't need to have a start or end
var eventObject = {
title: $.trim($(this).text()) // use the element's text as the event title
};
// store the Event Object in the DOM element so we can get to it later
$(this).data('eventObject', eventObject);
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var calendar = $('#calendar').fullCalendar({
header: {
left: 'title',
center: 'agendaDay,agendaWeek,month',
right: 'prev,next today'
},
editable: true,
firstDay: 0, // 1(Monday) this can be changed to 0(Sunday) for the USA system
selectable: true,
defaultView: 'month',
axisFormat: 'h:mm',
columnFormat: {
month: 'ddd', // Mon
week: 'ddd d', // Mon 7
day: 'dddd M/d', // Monday 9/7
agendaDay: 'dddd d'
},
titleFormat: {
month: 'MMMM yyyy', // September 2009
week: "MMMM yyyy", // September 2009
day: 'MMMM yyyy' // Tuesday, Sep 8, 2009
},
allDaySlot: false,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt('Event Title:');
if (title) {
calendar.fullCalendar('renderEvent', {
title: title,
start: start,
end: end,
allDay: allDay
},
true // make the event "stick"
);
}
calendar.fullCalendar('unselect');
},
droppable: true, // this allows things to be dropped onto the calendar !!!
drop: function(date, allDay) { // this function is called when something is dropped
// retrieve the dropped element's stored Event Object
var originalEventObject = $(this).data('eventObject');
// we need to copy it, so that multiple events don't have a reference to the same object
var copiedEventObject = $.extend({}, originalEventObject);
// assign it the date that was reported
copiedEventObject.start = date;
copiedEventObject.allDay = allDay;
// render the event on the calendar
// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
events: [{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d - 3, 16, 0),
allDay: false,
className: 'info'
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d + 4, 16, 0),
allDay: false,
className: 'info'
},
{
title: 'Meeting',
start: new Date(y, m, d, 10, 30),
allDay: false,
className: 'important'
},
{
title: 'Lunch',
start: new Date(y, m, d, 12, 0),
end: new Date(y, m, d, 14, 0),
allDay: false,
className: 'important'
},
{
title: 'Birthday Party',
start: new Date(y, m, d + 1, 19, 0),
end: new Date(y, m, d + 1, 22, 30),
allDay: false,
},
{
title: 'Click for Google',
start: new Date(y, m, 28),
end: new Date(y, m, 29),
url: 'https://ccp.cloudaccess.net/aff.php?aff=5188',
className: 'success'
}
],
});
});
</script>
<style>
body {
margin-bottom: 40px;
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Open Sans", sans-serif;
background: url(http://www.digiphotohub.com/wp-content/uploads/2015/09/bigstock-Abstract-Blurred-Background-Of-92820527.jpg);
}
#wrap {
width: 1100px;
margin: 0 auto;
}
#external-events {
float: left;
width: 150px;
padding: 0 10px;
text-align: left;
}
#external-events h4 {
font-size: 16px;
margin-top: 0;
padding-top: 1em;
}
.external-event {
/* try to mimick the look of a real event */
margin: 10px 0;
padding: 2px 4px;
background: #3366CC;
color: #fff;
font-size: .85em;
cursor: pointer;
}
#external-events p {
margin: 1.5em 0;
font-size: 11px;
color: #666;
}
#external-events p input {
margin: 0;
vertical-align: middle;
}
#calendar {
/* float: right; */
margin: 0 auto;
width: 900px;
background-color: #FFFFFF;
border-radius: 6px;
box-shadow: 0 1px 2px #C3C3C3;
-webkit-box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.18);
box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.18);
}
</style>
</head>
<body>
<div id="wrap">
<div id="calendar"></div>
<div style="clear:both"></div>
</div>
</body>
</div>
</section>
<!-- Callout -->
<section class="callout">
<div class="container text-center">
<h2 class="mx-auto mb-5">Welcome to
<em>your</em>
next website!</h2>
<a class="btn btn-primary btn-xl" href="https://startbootstrap.com/template-overviews/stylish-portfolio/">Download Now!</a>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="mailto: bio#gmail.com">
<i class="icon-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright ©Group 2020</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>
I want to break the line after Other online payment. but when I added <br> tag this starts making problems in the card content alignment. I'm using bootstrap. any idea why? thank you :)
.user-ads {
font-size: 14px;
text-align: left;
margin-left: -55px;
}
.user-ads li {
position: relative;
padding-bottom: 17px;
padding-left: 25px;
}
.user-ads li span {
float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="card" style="width: 32rem;">
<div class="card-body">
<ul class="user-ads">
<li><strong>Seller </strong><span>tempestblaze</span></li>
<li><strong>Payment method </strong><span>Other online payment: Koho App</span></li>
<li><strong>Price/BTC </strong><span>1,233,775.89 PKR</span></li>
<li><strong>Limits </strong><span>10,000 - 62,538 PKR</span></li>
<li><span><a class="btn btn-primary" href="">Buy</a></span></li>
</ul>
</div>
</div>
Try this. I added a second break to prevent errors with overflow messing up your margins. I tested this on my on server and it looks good. Kudos!
<div class="card" style="width: 32rem;">
<div class="card-body">
<ul class="user-ads">
<li><strong>Seller </strong><span>tempestblaze</span></li>
<li><strong>Payment method </strong><span>Other online payment:<br> Koho App</span></li>
<br>
<li><strong>Price/BTC </strong><span>1,233,775.89 PKR</span></li>
<li><strong>Limits </strong><span>10,000 - 62,538 PKR</span></li>
<li><span><a class="btn btn-primary" href="">Buy</a></span></li>
</ul>
</div>
</div>
I found the following pagination implemented with vue. I would like to centre the pagination bar horizontally. I have tried different approaches (adding class="text-center" and style="text-align: center !important;" to both the nav and v-pagination tags) but none of them worked. Any ideas how I could fix that?
The code from the codepen:
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination#0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>
Using flexbox, add this style to your '.pagination' class:
.pagination {
display: flex;
justify-content: center;
}
<!doctype html>
<html lang="en">
<head>
<title>vue-plain-pagination</title>
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">
</head>
<body>
<div id="app" class="container my-4">
<div class="row text-center">
<div class="col">
<h1 class="mb-4">vue-plain-pagination</h1>
<p class="text-success">Current page: <strong>{{ currentPage }}</strong></p>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="customLabels"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
></v-pagination>
</nav>
<nav class="mb-4 d-flex justify-content-center">
<v-pagination
v-model="currentPage"
:page-count="totalPageCount"
:classes="bootstrapPaginationClasses"
:labels="{first: false, prev: false, next: false, last: false}"
></v-pagination>
</nav>
</div>
</div>
</div>
<script src='https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js'></script>
<script src='https://unpkg.com/vue-plain-pagination#0.2.1/dist/vue-plain-pagination.umd.min.js'></script>
<script>
new Vue({
components: {
vPagination: window['vue-plain-pagination']
},
data: {
currentPage: 5,
totalPageCount: 9,
bootstrapPaginationClasses: { // http://getbootstrap.com/docs/4.1/components/pagination/
ul: 'pagination',
li: 'page-item',
liActive: 'active',
liDisable: 'disabled',
button: 'page-link'
},
customLabels: {
first: false,
prev: 'Previous',
next: 'Next',
last: false
}
}
}).$mount('#app')
</script>
</body>
</html>
Wrap your main div within .container > .row > .col
Containers provide a means to center and horizontally pad your site’s
contents. Use .container for a responsive pixel width or
.container-fluid for width: 100% across all viewport and device
sizes.
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
Bootstrap has also some builtin classes to make the div centered horizontally and vertically. I have used .d-flex .justify-content-center to the div that I wanted to be centered aligned. Also, I have used .text-center on row to center the texts.
hope it'll help
-Flex https://getbootstrap.com/docs/4.3/utilities/flex/
I'm trying to create edit the font and the size of my pie-chart so I can put it on a TV.
I tried to increase my chart's width and Height, but it doesn't affect the labels or values or the legend. I googled bootstrap documentation but I can't find anything about labels font-size.
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- d3 and c3 charts -->
<script src="js/plugins/d3/d3.min.js"></script>
<script src="js/plugins/c3/c3.min.js"></script>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Radar Chart Example</h5>
</div>
<div class="ibox-content">
<div>
<div id="pie" style="Height:2000px;"></div>
</div>
</div>
</div>
</div>
c3.generate({
bindto: '#pie',
data: {
columns: [
['data1', 30],
['data2', 120]
],
colors: {
data1: '#1ab394',
data2: '#BABABA'
},
type: 'pie'
}
});
I would like to see the numbers 30 and 120 and the labels data1 & data2 when I'm unzooming my browser to 40% (approximately the expected size to be visible on the TV)
You can inspect elements using your preferred browsers debug tools to find out how to directly target an element. This is useful for 3rd party libraries, but that's beyond this question.
c3 uses <svg> tags to generate their charts apparently. Therefore, most of the information on the chart is captured inside a <text> element, as far as I have noticed. You were simply changing the height of the div itself, not the content within.
The quick answer is to target all of those <text> selectors and change the font-size like the following:
c3.generate({
bindto: '#pie',
data: {
columns: [
['data1', 30],
['data2', 120]
],
colors: {
data1: '#1ab394',
data2: '#BABABA'
},
type: 'pie'
}
});
#pie {
height: 300px;
}
#pie text
{
font-size: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- d3 and c3 charts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js"></script>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Radar Chart Example</h5>
</div>
<div class="ibox-content">
<div>
<div id="pie"></div>
</div>
</div>
</div>
</div>