jQuery toggleClass example

Toggle class name on click in jQuery

by Ondřej Vasko

HTML

<script src="http://ondrej-vasko.cz/js/chart/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
  <div class="listbox-chart-01">
      <select name="chartType" id="chartType" onchange="updateChartType()">
        <option value="0">Prvni prubeh</option>
        <option value="1">Druhy prubeh</option>
        <option value="2">Treti prubeh</option>
      </select>
  </div>
  
  <div style="width: 1200px; height: 400px; margin: 0 auto;">
    <canvas width="1200" height="600" id="examChart"></canvas>
  </div>

CSS

body {
    background: #cdcdce;
    color: #333;
    font-size: 16px;
    font-family: 'roboto', sans-serif;
}


.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.w-100 {
    width: 100%;
}

.container {
    width: 940px;
    margin: 0 auto;
}


.listbox-chart-01 {
    margin: 20px 0;
}

.listbox-chart-01  select {
    font-size: 20px;
    padding: 10px 5px;
}

JavaScript

/* Setting script for graph */

//var ctx = document.getElementById('gt01');
Chart.defaults.global.defaultFontColor = '#111ccc';
Chart.defaults.global.defaultFontSize = 18;

Chart.defaults.global.elements.line.backgroundColor = 'rgba(122, 160, 0, .2)'

var color = Chart.helpers.color;
var ctx = document.getElementById("examChart").getContext("2d");

options2 = ({
    type: "line",
    labels: ["a", "b", "c", "d"],
    data: {
        datasets: [
            {
                label: 'Hodnoty #1',
                
                data: [
                    { t: "2017-05-14 06:00:00", y: 919 }, 
                    { t: "2017-05-14 12:00:00", y: 324 },
                    { t: "2017-05-14 18:00:00", y: 154 },
                    { t: "2017-05-15 00:00:00", y: 600 }, 
                    { t: "2017-05-15 06:00:00", y: 124 },
                    { t: "2017-05-15 12:00:00", y: 1024 },
                    { t: "2017-05-15 18:00:00", y: 788 },
                    { t: "2017-05-16 00:00:00", y: 154},
                    { t: "2017-05-16 06:00:00", y: 955},
                    { t: "2017-05-16 12:00:00", y: 11},
                    { t: "2017-05-16 18:00:00", y: 1919},
                    { t: "2017-05-17 00:00:00", y: 324 },
                    { t: "2017-05-17 06:00:00", y: 10 },
                    { t: "2017-05-17 12:00:00", y: 104 }, 
                    { t: "2017-05-17 18:00:00", y: 1224 },
                    { t: "2017-05-18 00:00:00", y: 266}, 
                    { t: "2017-05-18 06:00:00", y: 598}
                ],
                "fill": false,
                "borderColor": [
                    'rgb(75, 192, 192)',
                    'rgba(155, 206, 86, 1)'
                ],
                lineTension: 0
            }, 
            {
                label: 'Hodnoty #2',
                data: [
                        { t: "2017-05-14 06:00:00", y: 119}, 
                        { t: "2017-05-14 12:00:00", y: 1415},
                        { t:...