Bootstrap 3 carousel demo -CanvasJs

Bootstrap 3 carousel demo -CanvasJs

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://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

/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

audio:not([controls]) {
  display: none;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

a:hover,
a:active {
  outline: 0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  width: auto\9;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#map_canvas img,
.google-maps img {
  max-width: none;
}

button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}

button,
input {
  *overflow: visible;
  line-height: normal;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance:...

JavaScript

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

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

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

chart = new CanvasJS.Chart("chartContainer1",
{
    title:{
        text: "A Column Chart"
    },
    width: width,
    height: height,
    data: [{        
        type: "column",
        dataPoints: [
            { x: 10, y: 171 },
            { x: 20, y: 155},
            { x: 30, y: 150 },
            { x: 40, y: 165 },
            { x: 50, y: 195 },
            { x: 60, y: 168 },
            { x: 70, y: 128 },
            { x: 80, y: 134 },
            { x: 90, y: 114}
        ]
    }
    ]
});
chart.render();
charts.push(chart);

chart = new CanvasJS.Chart("chartContainer2",
{
    title:{
        text: "A Line Chart"
    }, 
    width: width,
    height: height,
    data: [{               
    type: "line",
        dataPoints: [
            { x: 10, y: 71 },
            { x: 20, y: 55},
            { x: 30, y: 50 },
            { x: 40, y: 65 },
            { x: 50, y: 95 },
            { x: 60, y: 68 },
            { x: 70, y: 28 },
            { x: 80, y: 34 },
            { x: 90, y: 14}
        ]
    }
    ]
});
chart.render();
charts.push(chart);

chart = new CanvasJS.Chart("chartContainer3",
{
    title:{
        text: "A Area Chart"
    }, 
    width: width,
    height: height,
    data: [{               
        type: "area",
        dataPoints: [
            { x: 10, y: 71 },
            { x: 20, y: 55},
            { x: 30, y: 50 },
            { x: 40, y: 65 },
            { x: 50, y: 95 },
            { x: 60, y: 68 },
            { x: 70, y: 28 },
            { x: 80, y: 34 },
            { x: 90, y: 14}
        ]
    }
    ]
});
chart.render();
charts.push(chart);

$(window).resize(function() {
    for(var i = 0; i < charts.length; i++) {
        charts[i].options.width = $('.carousel').width();
        charts[i].options.height =...