text: jQuery(document).ready(function($) {
  
      "use strict";
  
      var data = [],
          totalPoints = 300;
  
      /*Getting Random Data*/
      function getRandomData() {
  
          if (data.length > 0)
              data = data.slice(1);
  
          // Do a random walk
  
          while (data.length < totalPoints) {
  
              var prev = data.length > 0 ? data[data.length - 1] : 50,
                  y = prev + Math.random() * 10 - 5;
  
              if (y < 0) {
                  y = 0;
              } else if (y > 100) {
                  y = 100;
              }
  
              data.push(y);
          }
  
          // Zip the generated y values with the x values
  
          var res = [];
          for (var i = 0; i < data.length; ++i) {
              res.push([i, data[i]])
          }
  
          return res;
      }
  
  
  
      /***Real time Chart***/
      if ($('#real_time_chart').length > 0) {
          /*Defining Option*/
          var realtime_chartop = {
              series: {
                  shadowSize: 0,
                  lines: {
                      fill: false
                  },
              },
              grid: {
                  color: "#eee",
                  hoverable: true,
                  borderWidth: 0,
                  backgroundColor: '#FFF'
              },
              colors: ["#3f51b5"],
              tooltip: true,
              tooltipOpts: {
                  content: "Y: %y",
                  defaultTheme: false
              },
              yaxis: {
                  min: 0,
                  max: 100,
                  font: {
                      color: '#2f2c2c'
                  }
              },
              xaxis: {
                  show: false,
                  font: {
                      color: '#2f2c2c'
                  }
              }
  
          };
  
          /*Defining Data*/
          var realtime_chartop_data = {
              data: getRandomData(),
          }
  
          /*Chart Plot*/
          $.plot($("#real_time_chart"), [realtime_chartop_data], realtime_chartop);
  
          /* Realtime Data*/
          setInterval(function updateRandom() {
              realtime_chartop_data = getRandomData();
              $.plot($("#real_time_chart"), [realtime_chartop_data], realtime_chartop)
          }, 60);
      }
  
      /***Line Chart***/
  
      if ($('#flot_line_chart').length > 0) {
          /*Defining Option*/
          var line_chartop = {
              series: {
                  shadowSize: 0,
                  lines: {
                      show: true
                  },
                  points: {
                      show: true
                  }
              },
  
              grid: {
                  hoverable: true //IMPORTANT! this is needed for tooltip to work
              },
              yaxis: {
                  min: -1.2,
                  max: 1.2,
                  font: {
                      color: '#2f2c2c'
                  }
              },
              xaxis: {
                  show: false,
              },
              colors: ["#4caf50", "#3f51b5"],
              grid: {
                  color: "#eee",
                  hoverable: true,
                  borderWidth: 0,
                  backgroundColor: '#FFF'
              },
              tooltip: true,
              tooltipOpts: {
                  content: "'%s' of %x.1 is %y.4",
                  shifts: {
                      x: -60,
                      y: 25
                  }
              }
          };
  
          function plot() {
              var sin = [],
                  cos = [];
              var offset = 0;
              for (var i = 0; i < 12; i += 0.2) {
                  sin.push([i, Math.sin(i + offset)]);
                  cos.push([i, Math.cos(i + offset)]);
              }
              /*Defining Data*/
              var line_chart_data = [{
                  label: "sin(x)",
                  data: sin,
              }, {
                  label: "cos(x)",
                  data: cos,
              }];
  
              /*Plot*/
              $.plot($("#flot_line_chart"), line_chart_data, line_chartop);
          };
  
          plot();
      }
  
  
      /***Pie Chart***/
      if ($('#flot_pie_chart').length > 0) {
          var pie_data = [{
              label: "Series 0",
              data: 10,
              color: "#3f51b5",
  
          }, {
              label: "Series 1",
              data: 1,
              color: "#3cb878",
          }, {
              label: "Series 2",
              data: 3,
              color: "#e91e63",
          }, {
              label: "Series 3",
              data: 1,
              color: "#f15b26",
          }];
  
          var pie_op = {
              series: {
                  pie: {
                      innerRadius: 0.5,
                      show: true
                  }
              },
              grid: {
                  hoverable: true
              },
              color: null,
              tooltip: true,
              tooltipOpts: {
                  content: "%p.0%, %s", // show percentages, rounding to 2 decimal places
                  shifts: {
                      x: 20,
                      y: 0
                  },
                  defaultTheme: false
              }
          };
          $.plot($("#flot_pie_chart"), pie_data, pie_op);
      }
  
      /***Filled Line Chart***/
      if ($('#flot_line_chart_moving').length > 0) {
          /*Defining Option*/
          var fill_line_chartop = {
              series: {
                  shadowSize: 0,
                  lines: {
                      fill: true
                  },
              },
              grid: {
                  color: "#eee",
                  hoverable: true,
                  borderWidth: 0,
                  backgroundColor: '#FFF'
              },
              colors: ["#e91e63"],
              tooltip: true,
              tooltipOpts: {
                  content: "Y: %y",
                  defaultTheme: false
              },
              yaxis: {
                  min: 0,
                  max: 100,
                  font: {
                      color: '#2f2c2c'
                  }
              },
              xaxis: {
                  show: false
              }
          };
  
          /*Defining Data*/
          var fill_line_chart_data = {
              data: getRandomData(),
          }
  
          /*Chart Plot*/
          $.plot($("#flot_line_chart_moving"), [fill_line_chart_data], fill_line_chartop);
  
          /*Realtime Data*/
          setInterval(function updateRandom() {
              fill_line_chart_data = getRandomData();
              $.plot($("#flot_line_chart_moving"), [fill_line_chart_data], fill_line_chartop)
          }, 60);
      }
  
      /***Bar Chart***/
      if ($('#flot_bar_chart').length > 0) {
          /*Defining Option*/
          var barOptions = {
              series: {
                  bars: {
                      show: true,
                      barWidth: 43200000
                  }
              },
              yaxis: {
                  font: {
                      color: '#2f2c2c'
                  }
              },
              xaxis: {
                  mode: "time",
                  timeformat: "%m/%d",
                  minTickSize: [2, "day"],
                  font: {
                      color: '#2f2c2c'
                  }
              },
  
              legend: {
                  show: false
              },
              grid: {
                  color: "#eee",
                  hoverable: true,
                  borderWidth: 0,
                  backgroundColor: '#FFF'
              },
              tooltip: true,
              tooltipOpts: {
                  content: "x: %x, y: %y"
              }
          };
  
          /*Defining Data*/
          var barData = {
              label: "bar",
              color: "#4caf50",
              data: [
                  [1354521600000, 1000],
                  [1355040000000, 2000],
                  [1355223600000, 3000],
                  [1355306400000, 4000],
                  [1355487300000, 5000],
                  [1355571900000, 6000]
              ]
          };
  
          /*Plot*/
          $.plot($("#flot_bar_chart"), [barData], barOptions);
      }
  
      /***Sales Chart***/
      if ($('#sales_bars_chart').length > 0) {
          /*Defining Data*/
          var d1 = [];
          for (var i = 0; i <= 10; i += 1)
              d1.push([i, parseInt(Math.random() * 60)]);
  
          var d2 = [];
          for (var i = 0; i <= 10; i += 1)
              d2.push([i, parseInt(Math.random() * 40)]);
  
          var d3 = [];
          for (var i = 0; i <= 10; i += 1)
              d3.push([i, parseInt(Math.random() * 25)]);
  
          var ds = [{
              label: "Data One",
              data: d1,
              bars: {
                  order: 1
              }
          }, {
              label: "Data Two",
              data: d2,
              bars: {
                  order: 2
              }
          }, {
              label: "Data Three",
              data: d3,
              bars: {
                  order: 3
              }
          }];
  
          var stack = 0,
              bars = true,
              lines = true,
              steps = true;
  
          /*Defining Option*/
          var sales_op = {
              bars: {
                  show: true,
                  barWidth: 0.2,
                  fill: 1
              },
              grid: {
                  show: true,
                  aboveData: false,
                  labelMargin: 5,
                  axisMargin: 0,
                  borderWidth: 0,
                  minBorderMargin: 5,
                  clickable: true,
                  hoverable: true,
                  autoHighlight: false,
                  mouseActiveRadius: 20,
                  borderColor: '#eee',
                  color: '#eee'
              },
              series: {
                  stack: stack
              },
              legend: {
                  position: "ne",
                  margin: [10, 0],
                  noColumns: 0,
                  labelBoxBorderColor: null,
                  labelFormatter: function(label, series) {
                      // just add some space to labes
                      return '' + label + '&nbsp;&nbsp;';
                  },
                  width: 30,
                  height: 5
              },
              yaxis: {
                  font: {
                      color: '#2f2c2c'
                  }
              },
              xaxis: {
                  font: {
                      color: '#2f2c2c'
                  }
              },
              colors: ["#f15b26", "#3f51b5", "#4caf50"],
              tooltip: true, //activate tooltip
              tooltipOpts: {
                  content: "%s : %y.0",
                  shifts: {
                      x: -30,
                      y: -50
                  }
              }
          };
  
          $.plot($("#sales_bars_chart"), ds, sales_op);
      }
  });
  