Bar charts

charts

by Zsanett Tamás

HTML

<head>
  <title>Charts</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" type="text/javascript"></script>
</head>

<body>
  <div class="main-content container">
    <!-- CHARTS  projects -->
    <div class="widget widget-fullwidth projectCharts">
      <div class="accordion" id="projectChartAccordion">
        <div class="col-xl-12">
          <div class="card pt-1">
            <div class="card-header card-header-divider text-success">
              <div class="list-inline col">
                <div class="list-inline-item float-right">
                  <span class="indicator indicator-equal">
                                            <i...

CSS

/*** CHARTS ***/

JavaScript

$(document).ready(function() {
  $('.page-head-title').appendTo('.page-title');

});


// *********************************** BAR CHART ********************************* //
$(function() {
  //get the bar chart canvas
  var mybarChart = $("#bar-chart");
  //create Chart class object
  new Chart(mybarChart, {
    type: "bar",
    data: {
      labels: ["36.hét", "37.hét", "38,.hét", "39.hét", "40.hét", "41.hét", "42.hét", "43.hét"],
      datasets: [{
          label: "Termelt érték átlagos költsége",
          data: [80, 95, 70, 30, 50, 70, 80, 110],
          backgroundColor: [
            "#34a853",
            "#34a853",
            "#34a853",
            "#34a853",
            "#34a853",
            "#34a853",
            "#34a853",
            "#34a853"
          ],
          borderColor: [
            "rgba(152,251,152 ,1)",
            "rgba(152,251,152 ,1)",
            "rgba(152,251,152 ,1)",
            "rgba(152,251,152 ,1)",
            "rgba(152,251,152 ,1)",
            "rgba(152,251,152 ,1)",
            "rgba(152,251,152 ,1)",
            "rgba(152,251,152 ,1)"
          ],
          borderWidth: 1
        },
        {
          label: "Termelt érték valós költsége",
          data: [100, 60, 95, 30, 60, 45, 60, 100],
          backgroundColor: [
            "rgba(0,128,0 ,0.3 )",
            "rgba(0,128,0 ,0.3 )",
            "rgba(0,128,0 ,0.3 )",
            "rgba(0,128,0 ,0.3 )",
            "rgba(0,128,0 ,0.3 )",
            "rgba(0,128,0 ,0.3 )",
            "rgba(0,128,0 ,0.3 )",
            "rgba(0,128,0 ,0.3 )"
          ],
          borderColor: [
            "rgba(60,179,113 ,1)",
            "rgba(60,179,113 ,1)",
            "rgba(60,179,113 ,1)",
            "rgba(60,179,113 ,1)",
            "rgba(60,179,113 ,1)",
            "rgba(60,179,113 ,1)",
            "rgba(60,179,113 ,1)",
            "rgba(60,179,113 ,1)"
          ],
          borderWidth: 1
        }
      ]
    },
    options: {
      responsive: true,
      title: {
  ...