Bootstrap 3 carousel demo -CanvasJs

Bootstrap 3 carousel demo -CanvasJs

by vforvector

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"> </script>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
 
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="active item">  
      <div id="chartContainer1" class="chart" style="width:100%; height:300px;"></div>
    </div>
    <div class="item">
      <div id="chartContainer2" class="chart" style="width:100%; height:300px;"></div>
    </div>
    <div class="item">
     <div id="chartContainer3" class="chart" style="width:100%; height:300px;"></div>
    </div>
  </div>
 
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> <!-- Carousel -->
</body>

CSS

@font-face {
  font-family: 'neosansregular';
  src: url("../fonts/neosans-webfont.eot");
  src: url("../fonts/neosans-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/neosans-webfont.woff") format("woff"), url("../fonts/neosans-webfont.ttf") format("truetype"), url("../fonts/neosans-webfont.svg#neosansregular") format("svg");
  font-weight: normal;
  font-style: normal; }

html {
  background: #f6f6f6; }

header {
  display: block;
  width: 100%;
  position: relative; }
  header .header_bg {
    width: 100%; }
  header nav {
    position: absolute;
    bottom: 3%;
    left: 14%;
    width: 80%; }
    header nav ul {
      float: left;
      width: 85%;
      padding: 0; }
      header nav ul li {
        display: inline-block;
        margin-right: 3%;
        list-style: none;
        position: relative; }
        header nav ul li a {
          display: inline-block; }
          header nav ul li a img {
            display: inline-block;
            vertical-align: middle; }
          header nav ul li a span {
            color: #fff;
            display: inline-block;
            vertical-align: middle;
            padding: 0 4px;
            font: 1em 'neosansregular';/* for safari*/
            font: 1vw 'neosansregular';
             }
        header nav ul li a:hover {
          text-decoration: none; }
          .datefiltercoloumn{
            float: right;
            text-align:center;
            

color: #FFF;
          }
          .datefiltercoloumn a{
            text-decoration: none;
            color: #FFF;
          }

  header .user_box {
    position: absolute;
    right: 22%;
    top:25px;top: 2vw;  }
    header .user_box p {
      display: inline-block;
      color: #fff;
       font: 1.2em 'neosansregular';/* for safari*/
      font: 1.2vw 'neosansregular';
     
      vertical-align: middle;
      margin-top: 4%; }
    header .user_box a {
      display: inline-block;
      vertical-align: middle;
      width: 20px;width:...

JavaScript

var chart;
var charts = [];
var width;
var height;

width = $('#carousel-example-generic').width();
height = $('#carousel-example-generic').height();

$('.carousel').carousel({
    interval: 200000000
});

chart = new CanvasJS.Chart("chartContainer1",
{
animationEnabled:true,
title:{
},
legend:{
verticalAlign: "center",
horizontalAlign: "right"
},
data: [
{
indexLabelFontColor: "transparent",
indexLabelPlacement: "insdie",
type: "doughnut",
dataPoints: [
{y: 33, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Intel &nbsp;</td></tr><tr><td class=rightCol style=color:#cc3939>(775 Mentions)</td></tr><tr><td> 33% </td></tr></table>", color:"#cc3939" },
{y: 17, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Samsung &nbsp;</td></tr><tr><td class=rightCol style=color:#FCAA47>(396 Mentions)</td></tr><tr><td> 17% </td></tr></table>", color:"#FCAA47" },
{y: 10, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>VIA &nbsp;</td></tr><tr><td class=rightCol style=color:#0087c4>(246 Mentions)</td></tr><tr><td> 10% </td></tr></table>", color:"#0087c4" },
{y: 8, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Apple &nbsp;</td></tr><tr><td class=rightCol style=color:#878787>(192 Mentions)</td></tr><tr><td> 8% </td></tr></table>", color:"#878787" },
{y: 7, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Qualcomm &nbsp;</td></tr><tr><td class=rightCol style=color:#c152b8>(177 Mentions)</td></tr><tr><td> 7% </td></tr></table>", color:"#c152b8" },
{y: 25, toolTipContent: "<table class=toolTipContentTable style='font-style:normal;text-align:center'><tr><td class=leftCol>Others &nbsp;</td></tr><tr><td class=rightCol style=color:#00c9a7>(589...