text: const width_threshold = 480;
  
  function drawLineChart(returnData) {
    if ($("#lineChart").length) {
      ctxLine = document.getElementById("lineChart").getContext("2d");
      optionsLine = {
        scales: {
          yAxes: [
            {
              scaleLabel: {
                display: true,
                labelString: "Hits"
              }
            }
          ]
        }
      };
  
      // Set aspect ratio based on window width
      optionsLine.maintainAspectRatio =
        $(window).width() < width_threshold ? false : true;
  
      var keys =Object.keys(returnData.CPU);
      var values = Object.values(returnData.CPU);
      console.log(keys);
      console.log(values);
      configLine = {
        type: "line",
        data: {
          labels: keys,
          datasets: [
            {
              label: "Latest Hits",
              data: values,
              fill: false,
              borderColor: "rgb(75, 192, 192)",
              lineTension: 0.1
            }
          ]
        },
        options: optionsLine
      };
  
      lineChart = new Chart(ctxLine, configLine);
      console.log(Object.values(returnData.CPU));
  
    }
  }
  
  function drawBarChart() {
    if ($("#barChart").length) {
      ctxBar = document.getElementById("barChart").getContext("2d");
  
      optionsBar = {
        responsive: true,
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              },
              scaleLabel: {
                display: true,
                labelString: "Hits"
              }
            }
          ]
        }
      };
  
      optionsBar.maintainAspectRatio =
        $(window).width() < width_threshold ? false : true;
  
      configBar = {
        type: "bar",
        data: {
          labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
          datasets: [
            {
              label: "# of Hits",
              data: [12, 19, 3, 5, 2, 3],
              backgroundColor: [
                "rgba(255, 99, 132, 0.2)",
                "rgba(54, 162, 235, 0.2)",
                "rgba(255, 206, 86, 0.2)",
                "rgba(75, 192, 192, 0.2)",
                "rgba(153, 102, 255, 0.2)",
                "rgba(255, 159, 64, 0.2)"
              ],
              borderColor: [
                "rgba(255,99,132,1)",
                "rgba(54, 162, 235, 1)",
                "rgba(255, 206, 86, 1)",
                "rgba(75, 192, 192, 1)",
                "rgba(153, 102, 255, 1)",
                "rgba(255, 159, 64, 1)"
              ],
              borderWidth: 1
            }
          ]
        },
        options: optionsBar
      };
  
      barChart = new Chart(ctxBar, configBar);
    }
  }
  function changeStatus(data){
      var value = data["Health"];
      if (value == "Healthy"){
          console.log('Healthy');
          document.getElementById("p1").innerHTML = value;
          document.getElementById("p1").style.color = "green";
  
      }
      else{
          document.getElementById("p1").innerHTML = value;
          document.getElementById("p1").style.color = "red";
  
  
          console.log('Not');
      }
  
  
  }
  function drawPieChart(data) {
      var keys =Object.keys(data.CPUcurrent);
      var values = Object.values(data.CPUcurrent);
    if ($("#pieChart").length) {
      ctxPie = document.getElementById("pieChart").getContext("2d");
      optionsPie = {
        responsive: true,
        maintainAspectRatio: false
      };
  
      configPie = {
        type: "pie",
        data: {
          datasets: [
            {
              data: values,
              backgroundColor: [
                window.chartColors.purple,
                window.chartColors.green
              ],
              label: "Storage"
            }
          ],
          labels: keys
        },
        options: optionsPie
      };
  
      pieChart = new Chart(ctxPie, configPie);
    }
  }
  
  function updateChartOptions() {
    if ($(window).width() < width_threshold) {
      if (optionsLine) {
        optionsLine.maintainAspectRatio = false;
      }
      if (optionsBar) {
        optionsBar.maintainAspectRatio = false;
      }
    } else {
      if (optionsLine) {
        optionsLine.maintainAspectRatio = true;
      }
      if (optionsBar) {
        optionsBar.maintainAspectRatio = true;
      }
    }
  }
  
  function updateLineChart() {
    if (lineChart) {
      lineChart.options = optionsLine;
      lineChart.update();
    }
  }
  
  function updateBarChart() {
    if (barChart) {
      barChart.options = optionsBar;
      barChart.update();
    }
  }
  
  function reloadPage() {
    setTimeout(function() {
      window.location.reload();
    }); // Reload the page so that charts will display correctly
  }
  
  function drawCalendar() {
    if ($("#calendar").length) {
      $("#calendar").fullCalendar({
        height: 400,
        events: [
          {
            title: "Meeting",
            start: "2018-09-1",
            end: "2018-09-2"
          },
          {
            title: "Marketing trip",
            start: "2018-09-6",
            end: "2018-09-8"
          },
          {
            title: "Follow up",
            start: "2018-10-12"
          },
          {
            title: "Team",
            start: "2018-10-17"
          },
          {
            title: "Company Trip",
            start: "2018-10-25",
  		  end: "2018-10-27"
          },
          {
            title: "Review",
            start: "2018-11-12"
          },
          {
            title: "Plan",
            start: "2018-11-18"
          }
        ],
        eventColor: "rgba(54, 162, 235, 0.4)"
      });
    }
  }
  