ChartJS - Style Switch

Example of Chart.js in action, plus the select box allows the user to switch between three(3) different visuals to display the data.

by Erin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<select id="chartStyles"> 
    <option value="">- select a chart style -</option>
    <option value="line">Line Chart</option>
    <option value="bar">Bar Chart</option>
    <option value="radar">Radar Chart</option>
</select>
<div class="wrapper">
    <canvas id="chart" height="250" width="250"></canvas>
    <div id="legendDiv" class="bar-legend"></div>
</div>

CSS

.wrapper {
    position: relative;
    width: 24em;
}
#chart {
    position: absolute;
    top: 0;
    right: 0;
}
#legendDiv {
    position: absolute;
    top: 0;
    left: 0;
}
.bar-legend {
  list-style: none;
  position: absolute;
  right: 8px;
  top: 0;
}
.bar-legend li {
  display: block;
  padding-left: 30px;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: 14px;
  cursor: default;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}
.bar-legend li:hover {
  background-color: #fafafa;
}
.bar-legend li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  border-radius: 5px;
}

JavaScript

// global variable 
 var ctx = document.getElementById("chart").getContext("2d");
 var json1 = [
    { company_name: "Sysco Corp", stock_price: "115"},
    { company_name: "Sysco Corp", stock_price: "145"},
    { company_name: "Sysco Corp", stock_price: "130"},
    { company_name: "Sysco Corp", stock_price: "165"}
 ];
 var jsonData1 = [];
 for (var i = 0;i < json1.length;i++) {
    jsonData1.push(json1[i].stock_price);  
 }
 var json2 = [
    { company_name: "Advance Auto Parts Inc", stock_price: "215"},
    { company_name: "Advance Auto Parts Inc", stock_price: "205"},
    { company_name: "Advance Auto Parts Inc", stock_price: "200"},
    { company_name: "Advance Auto Parts Inc", stock_price: "225"}
 ];
 var jsonData2 = [];
 for (var i = 0;i < json2.length;i++) {
    jsonData2.push(json2[i].stock_price);  
 }
 // sample data using converted json
 var data = {
    labels: ["1st Quarter","2nd Quarter","3rd Quarter","4th Quarter"],
    datasets: [
        {
            label: "Purple Dataset",
            fillColor: "rgba(130,33,122,0.5)", 
            strokeColor: "#82217A", 
            pointColor: "#82217A",
            pointStrokeColor: "#82217A",
            pointHighlightFill: "#000",
            pointHighlightStroke: "#000",
            data: jsonData1 
        },
        {
            label: "Red Dataset",
            fillColor: "rgba(255,29,103,0.5)",
            strokeColor: "#FF1D67",
            pointColor: "#FF1D67",
            pointStrokeColor: "#FF1D67",
            pointHighlightFill: "#000",
            pointHighlightStroke: "#000",
            data: jsonData2 
        }
    ]
 };
 // chart options
 var options = {
    maintainAspectRatio: true,
    responsive: false,
    scaleShowHorizontalLines: true,
    scaleShowVerticalLines: false,
    bezierCurve : false,
    pointDot : true,
    datasetStrokeWidth: 2,
    scaleGridLineColor : "#CFE7E9"
 };
 // create initial chart
 function createInitialChart () {
    window.myLine = new...