Mini Shell

  "use strict";
  $(document).ready(function() {
      window.addEventListener('load', resizeGraph, false);
      window.addEventListener('resize', resizeGraph, false);

      function resizeGraph() {
          /*Area chart*/
          $("#areachart").html('');
          var widchart = $("#areachart").width();
          var graph = new Rickshaw.Graph({
              element: document.querySelector("#areachart"),
              width: widchart,
              height: 200,
              series: [{
                  color: 'rgba(159, 241, 244, 0.84)',
                  data: [
                      { x: 0, y: 40 },
                      { x: 1, y: 49 },
                      { x: 2, y: 38 },
                      { x: 3, y: 30 },
                      { x: 4, y: 32 }
                  ]
              }]
          });
          graph.render();

          /*multiple area chart*/
          $("#multipleAreachart").html('');
          var widMultiChart = $("#multipleAreachart").width();
          var graph1 = new Rickshaw.Graph({
              element: document.querySelector("#multipleAreachart"),
              width: widMultiChart,
              height: 200,
              renderer: 'area',
              stroke: true,
              series: [{
                  data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 30 }],
                  color: 'rgba(100, 221, 187, 0.72)',
                  stroke: 'rgba(0, 230, 190, 0.92)'
              }, {
                  data: [{ x: 0, y: 10 }, { x: 1, y: 25 }, { x: 2, y: 45 }],
                  color: 'rgba(205, 251, 243, 0.92)',
                  stroke: 'rgba(0, 230, 190, 0.45)'
              }]
          });

          graph1.render();

          /*Multiple Bars*/
          $("#barchart").html('');
          var graph2 = new Rickshaw.Graph({
              element: document.querySelector("#barchart"),
              renderer: 'bar',
              stack: false,
              series: [{
                  data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 30 }],
                  color: '#4C5667'
              }, {
                  data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 20 }],
                  color: '#FB9678'
              }]
          });

          graph2.render();

          /*Stacked Bars*/
          $("#stackedchart").html('');
          var graph3 = new Rickshaw.Graph({
              element: document.querySelector("#stackedchart"),
              renderer: 'bar',
              series: [{
                  data: [{ x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 60 }, { x: 3, y: 20 }, { x: 4, y: 80 }],
                  color: '#469FB4'
              }, {
                  data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 50 }, { x: 3, y: 10 }, { x: 4, y: 60 }],
                  color: '#99D683'
              }]
          });
          graph3.render();


          $("#interactivehover").html('');
          var widchart = $("#power-card-chart2").width();
          var graph4 = new Rickshaw.Graph({
              element: document.getElementById("interactivehover"),
              width: widchart,
              height: 200,
              renderer: 'line',
              series: [{
                  color: "#c05020",
                  data: [{ x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 50 }, { x: 3, y: 10 }, { x: 4, y: 60 }],
                  name: 'New York'
              }
              ]
          });

          graph4.render();
      }


      resizeGraph();
  });