var lineOptions = {
    chart: {
      type: "line",
    },
    series: [
      {
        name: "sales",
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125],
      },
    ],
    xaxis: {
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999],
    },
  };
  var candleOptions = {
  series: [
      {
      name: "candle",
      data: [
          {
          x: new Date(1538778600000),
          y: [6629.81, 6650.5, 6623.04, 6633.33],
          },
          {
          x: new Date(1538780400000),
          y: [6632.01, 6643.59, 6620, 6630.11],
          },
          {
          x: new Date(1538782200000),
          y: [6630.71, 6648.95, 6623.34, 6635.65],
          },
          {
          x: new Date(1538784000000),
          y: [6635.65, 6651, 6629.67, 6638.24],
          },
          {
          x: new Date(1538785800000),
          y: [6638.24, 6640, 6620, 6624.47],
          },
          {
          x: new Date(1538787600000),
          y: [6624.53, 6636.03, 6621.68, 6624.31],
          },
          {
          x: new Date(1538789400000),
          y: [6624.61, 6632.2, 6617, 6626.02],
          },
          {
          x: new Date(1538791200000),
          y: [6627, 6627.62, 6584.22, 6603.02],
          },
          {
          x: new Date(1538793000000),
          y: [6605, 6608.03, 6598.95, 6604.01],
          },
          {
          x: new Date(1538794800000),
          y: [6604.5, 6614.4, 6602.26, 6608.02],
          },
          {
          x: new Date(1538796600000),
          y: [6608.02, 6610.68, 6601.99, 6608.91],
          },
          {
          x: new Date(1538798400000),
          y: [6608.91, 6618.99, 6608.01, 6612],
          },
          {
          x: new Date(1538800200000),
          y: [6612, 6615.13, 6605.09, 6612],
          },
          {
          x: new Date(1538802000000),
          y: [6612, 6624.12, 6608.43, 6622.95],
          },
          {
          x: new Date(1538803800000),
          y: [6623.91, 6623.91, 6615, 6615.67],
          },
          {
          x: new Date(1538805600000),
          y: [6618.69, 6618.74, 6610, 6610.4],
          },
          {
          x: new Date(1538807400000),
          y: [6611, 6622.78, 6610.4, 6614.9],
          },
          {
          x: new Date(1538809200000),
          y: [6614.9, 6626.2, 6613.33, 6623.45],
          },
          {
          x: new Date(1538811000000),
          y: [6623.48, 6627, 6618.38, 6620.35],
          },
          {
          x: new Date(1538812800000),
          y: [6619.43, 6620.35, 6610.05, 6615.53],
          },
          {
          x: new Date(1538814600000),
          y: [6615.53, 6617.93, 6610, 6615.19],
          },
          {
          x: new Date(1538816400000),
          y: [6615.19, 6621.6, 6608.2, 6620],
          },
          {
          x: new Date(1538818200000),
          y: [6619.54, 6625.17, 6614.15, 6620],
          },
          {
          x: new Date(1538820000000),
          y: [6620.33, 6634.15, 6617.24, 6624.61],
          },
          {
          x: new Date(1538821800000),
          y: [6625.95, 6626, 6611.66, 6617.58],
          },
          {
          x: new Date(1538823600000),
          y: [6619, 6625.97, 6595.27, 6598.86],
          },
          {
          x: new Date(1538825400000),
          y: [6598.86, 6598.88, 6570, 6587.16],
          },
          {
          x: new Date(1538827200000),
          y: [6588.86, 6600, 6580, 6593.4],
          },
          {
          x: new Date(1538829000000),
          y: [6593.99, 6598.89, 6585, 6587.81],
          },
          {
          x: new Date(1538830800000),
          y: [6587.81, 6592.73, 6567.14, 6578],
          },
          {
          x: new Date(1538832600000),
          y: [6578.35, 6581.72, 6567.39, 6579],
          },
          {
          x: new Date(1538834400000),
          y: [6579.38, 6580.92, 6566.77, 6575.96],
          },
          {
          x: new Date(1538836200000),
          y: [6575.96, 6589, 6571.77, 6588.92],
          },
          {
          x: new Date(1538838000000),
          y: [6588.92, 6594, 6577.55, 6589.22],
          },
          {
          x: new Date(1538839800000),
          y: [6589.3, 6598.89, 6589.1, 6596.08],
          },
          {
          x: new Date(1538841600000),
          y: [6597.5, 6600, 6588.39, 6596.25],
          },
          {
          x: new Date(1538843400000),
          y: [6598.03, 6600, 6588.73, 6595.97],
          },
          {
          x: new Date(1538845200000),
          y: [6595.97, 6602.01, 6588.17, 6602],
          },
          {
          x: new Date(1538847000000),
          y: [6602, 6607, 6596.51, 6599.95],
          },
          {
          x: new Date(1538848800000),
          y: [6600.63, 6601.21, 6590.39, 6591.02],
          },
          {
          x: new Date(1538850600000),
          y: [6591.02, 6603.08, 6591, 6591],
          },
          {
          x: new Date(1538852400000),
          y: [6591, 6601.32, 6585, 6592],
          },
          {
          x: new Date(1538854200000),
          y: [6593.13, 6596.01, 6590, 6593.34],
          },
          {
          x: new Date(1538856000000),
          y: [6593.34, 6604.76, 6582.63, 6593.86],
          },
          {
          x: new Date(1538857800000),
          y: [6593.86, 6604.28, 6586.57, 6600.01],
          },
          {
          x: new Date(1538859600000),
          y: [6601.81, 6603.21, 6592.78, 6596.25],
          },
          {
          x: new Date(1538861400000),
          y: [6596.25, 6604.2, 6590, 6602.99],
          },
          {
          x: new Date(1538863200000),
          y: [6602.99, 6606, 6584.99, 6587.81],
          },
          {
          x: new Date(1538865000000),
          y: [6587.81, 6595, 6583.27, 6591.96],
          },
          {
          x: new Date(1538866800000),
          y: [6591.97, 6596.07, 6585, 6588.39],
          },
          {
          x: new Date(1538868600000),
          y: [6587.6, 6598.21, 6587.6, 6594.27],
          },
          {
          x: new Date(1538870400000),
          y: [6596.44, 6601, 6590, 6596.55],
          },
          {
          x: new Date(1538872200000),
          y: [6598.91, 6605, 6596.61, 6600.02],
          },
          {
          x: new Date(1538874000000),
          y: [6600.55, 6605, 6589.14, 6593.01],
          },
          {
          x: new Date(1538875800000),
          y: [6593.15, 6605, 6592, 6603.06],
          },
          {
          x: new Date(1538877600000),
          y: [6603.07, 6604.5, 6599.09, 6603.89],
          },
          {
          x: new Date(1538879400000),
          y: [6604.44, 6604.44, 6600, 6603.5],
          },
          {
          x: new Date(1538881200000),
          y: [6603.5, 6603.99, 6597.5, 6603.86],
          },
          {
          x: new Date(1538883000000),
          y: [6603.85, 6605, 6600, 6604.07],
          },
          {
          x: new Date(1538884800000),
          y: [6604.98, 6606, 6604.07, 6606],
          },
      ],
      },
  ],
  chart: {
      height: 350,
      type: "candlestick",
  },
  title: {
      text: "CandleStick Chart - Category X-axis",
      align: "left",
  },
  annotations: {
      xaxis: [
      {
          x: "Oct 06 14:00",
          borderColor: "#00E396",
          label: {
          borderColor: "#00E396",
          style: {
              fontSize: "12px",
              color: "#fff",
              background: "#00E396",
          },
          orientation: "horizontal",
          offsetY: 7,
          text: "Annotation Test",
          },
      },
      ],
  },
  tooltip: {
      enabled: true,
  },
  xaxis: {
      type: "category",
      labels: {
      formatter: function(val) {
          return dayjs(val).format("MMM DD HH:mm");
      },
      },
  },
  yaxis: {
      tooltip: {
      enabled: true,
      },
  },
  };
  
  var barOptions = {
    series: [
      {
        name: "Net Profit",
        data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
      },
      {
        name: "Revenue",
        data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
      },
      {
        name: "Free Cash Flow",
        data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
      },
    ],
    chart: {
      type: "bar",
      height: 350,
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
        endingShape: "rounded",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ["transparent"],
    },
    xaxis: {
      categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
    },
    yaxis: {
      title: {
        text: "$ (thousands)",
      },
    },
    fill: {
      opacity: 1,
    },
    tooltip: {
      y: {
        formatter: function(val) {
          return "$ " + val + " thousands";
        },
      },
    },
  };
  
  
  var radialGradientOptions = {
    series: [75],
    chart: {
      height: 350,
      type: "radialBar",
      toolbar: {
        show: true,
      },
    },
    plotOptions: {
      radialBar: {
        startAngle: -135,
        endAngle: 225,
        hollow: {
          margin: 0,
          size: "70%",
          background: "#fff",
          image: undefined,
          imageOffsetX: 0,
          imageOffsetY: 0,
          position: "front",
          dropShadow: {
            enabled: true,
            top: 3,
            left: 0,
            blur: 4,
            opacity: 0.24,
          },
        },
        track: {
          background: "#fff",
          strokeWidth: "67%",
          margin: 0, // margin is in pixels
          dropShadow: {
            enabled: true,
            top: -3,
            left: 0,
            blur: 4,
            opacity: 0.35,
          },
        },
  
        dataLabels: {
          show: true,
          name: {
            offsetY: -10,
            show: true,
            color: "#888",
            fontSize: "17px",
          },
          value: {
            formatter: function(val) {
              return parseInt(val);
            },
            color: "#111",
            fontSize: "36px",
            show: true,
          },
        },
      },
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "dark",
        type: "horizontal",
        shadeIntensity: 0.5,
        gradientToColors: ["#ABE5A1"],
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100],
      },
    },
    stroke: {
      lineCap: "round",
    },
    labels: ["Percent"],
  };
   var areaOptions = {
     series: [
       {
         name: "series1",
         data: [31, 40, 28, 51, 42, 109, 100],
       },
       {
         name: "series2",
         data: [11, 32, 45, 32, 34, 52, 41],
       },
     ],
     chart: {
       height: 350,
       type: "area",
     },
     dataLabels: {
       enabled: false,
     },
     stroke: {
       curve: "smooth",
     },
     xaxis: {
       type: "datetime",
       categories: [
         "2018-09-19T00:00:00.000Z",
         "2018-09-19T01:30:00.000Z",
         "2018-09-19T02:30:00.000Z",
         "2018-09-19T03:30:00.000Z",
         "2018-09-19T04:30:00.000Z",
         "2018-09-19T05:30:00.000Z",
         "2018-09-19T06:30:00.000Z",
       ],
     },
     tooltip: {
       x: {
         format: "dd/MM/yy HH:mm",
       },
     },
   };
  var radialBarOptions = {
    series: [44, 55, 67, 83],
    chart: {
      height: 350,
      type: "radialBar",
    },
    plotOptions: {
      radialBar: {
        dataLabels: {
          name: {
            fontSize: "22px",
          },
          value: {
            fontSize: "16px",
          },
          total: {
            show: true,
            label: "Total",
            formatter: function(w) {
              // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
              return 249;
            },
          },
        },
      },
    },
    labels: ["Apples", "Oranges", "Bananas", "Berries"],
  };
  var bar = new ApexCharts(document.querySelector("#bar"), barOptions);
  var line = new ApexCharts(document.querySelector("#line"), lineOptions);
  var candle = new ApexCharts(document.querySelector("#candle"), candleOptions);
  var radialGradient = new ApexCharts(document.querySelector("#radialGradient"), radialGradientOptions);
  var area = new ApexCharts(document.querySelector("#area"), areaOptions);
  
  area.render();
  radialGradient.render();
  candle.render();
  bar.render();
  line.render();
  

  window.Apex = {
    chart: {
      foreColor: '#081A51',
      toolbar: {
        show: false
      },
    },
    colors: ['#FCCF31', '#17ead9', '#f02fc2'],
    stroke: {
      width: 3
    },
    dataLabels: {
      enabled: false
    },
    grid: {
      borderColor: "#40475D",
    },
    xaxis: {
      axisTicks: {
        color: '#333'
      },
      axisBorder: {
        color: "#333"
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        gradientToColors: ['#F55555', '#6078ea', '#6094ea']
      },
    },
    tooltip: {
      theme: 'dark',
      x: {
        formatter: function (val) {
          return moment(new Date(val)).format("HH:mm:ss")
        }
      }
    },
    yaxis: {
      decimalsInFloat: 2,
      opposite: true,
      labels: {
        offsetX: -10
      }
    }
  };
  
  var trigoStrength = 3
  var iteration = 11
  
  function getRandom() {
    var i = iteration;
    return (Math.sin(i / trigoStrength) * (i / trigoStrength) + i / trigoStrength + 1) * (trigoStrength * 2)
  }
  
  function getRangeRandom(yrange) {
    return Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  }
  
  function generateMinuteWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var x = baseval;
      var y = ((Math.sin(i / trigoStrength) * (i / trigoStrength) + i / trigoStrength + 1) * (trigoStrength * 2))
  
      series.push([x, y]);
      baseval += 300000;
      i++;
    }
    return series;
  }
  
  
  
  function getNewData(baseval, yrange) {
    var newTime = baseval + 300000;
    return {
      x: newTime,
      y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
    }
  }
  
  var optionsColumn = {
    chart: {
      height: 350,
      type: 'bar',
      animations: {
        enabled: false
      },
      events: {
        animationEnd: function (chartCtx, opts) {
          const newData = chartCtx.w.config.series[0].data.slice()
          newData.shift()
          window.setTimeout(function () {
            chartCtx.updateOptions({
              series: [{
                data: newData
              }],
              xaxis: {
                min: chartCtx.minX,
                max: chartCtx.maxX
              },
              subtitle: {
                text: parseInt(getRangeRandom({min: 1, max: 20})).toString() + '%',
              }
            }, false, false)
          }, 300)
        }
      },
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      width: 0,
    },
    series: [{
      name: 'Load Average',
      data: generateMinuteWiseTimeSeries(new Date("12/12/2016 00:20:00").getTime(), 12, {
        min: 10,
        max: 110
      })
    }],
    title: {
      text: 'Load Average',
      align: 'left',
      style: {
        fontSize: '12px'
      }
    },
    subtitle: {
      text: '20%',
      floating: true,
      align: 'right',
      offsetY: 0,
      style: {
        fontSize: '22px'
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'vertical',
        shadeIntensity: 0.5,
        inverseColors: false,
        opacityFrom: 1,
        opacityTo: 0.8,
        stops: [0, 100]
      }
    },
    xaxis: {
      type: 'datetime',
      range: 2700000
    },
    legend: {
      show: true
    },
  }
  
  
  
  var chartColumn = new ApexCharts(
    document.querySelector("#columnchart"),
    optionsColumn
  );
  chartColumn.render()
  
  var optionsLine = {
    chart: {
      height: 350,
      type: 'line',
      stacked: true,
      animations: {
        enabled: true,
        easing: 'linear',
        dynamicAnimation: {
          speed: 1000
        }
      },
      dropShadow: {
        enabled: true,
        opacity: 0.3,
        blur: 5,
        left: -7,
        top: 22
      },
      events: {
        animationEnd: function (chartCtx, opts) {
          const newData1 = chartCtx.w.config.series[0].data.slice()
          newData1.shift()
          const newData2 = chartCtx.w.config.series[1].data.slice()
          newData2.shift()
  
          // check animation end event for just 1 series to avoid multiple updates
          if (opts.el.node.getAttribute('index') === '0') {
            window.setTimeout(function () {
              chartCtx.updateOptions({
                series: [{
                  data: newData1
                }, {
                  data: newData2
                }],
                subtitle: {
                  text: parseInt(getRandom() * Math.random()).toString(),
                }
              }, false, false)
            }, 300)
          }
  
        }
      },
      toolbar: {
        show: false
      },
      zoom: {
        enabled: false
      }
    },
    dataLabels: {
      enabled: false
    },
    stroke: {
      curve: 'straight',
      width: 5,
    },
    grid: {
      padding: {
        left: 0,
        right: 0
      }
    },
    markers: {
      size: 0,
      hover: {
        size: 0
      }
    },
    series: [{
      name: 'Running',
      data: generateMinuteWiseTimeSeries(new Date("12/12/2016 00:20:00").getTime(), 12, {
        min: 30,
        max: 110
      })
    }, {
      name: 'Waiting',
      data: generateMinuteWiseTimeSeries(new Date("12/12/2016 00:20:00").getTime(), 12, {
        min: 30,
        max: 110
      })
    }],
    xaxis: {
      type: 'datetime',
      range: 2700000
    },
    title: {
      text: 'Processes',
      align: 'left',
      style: {
        fontSize: '12px'
      }
    },
    subtitle: {
      text: '20',
      floating: true,
      align: 'right',
      offsetY: 0,
      style: {
        fontSize: '22px'
      }
    },
    legend: {
      show: true,
      floating: true,
      horizontalAlign: 'left',
      onItemClick: {
        toggleDataSeries: false
      },
      position: 'top',
      offsetY: -28,
      offsetX: 60
    },
  }
  
  var chartLine = new ApexCharts(
    document.querySelector("#linechart"),
    optionsLine
  );
  chartLine.render()
  
  var optionsCircle = {
    chart: {
      type: 'radialBar',
      height: 320,
      offsetY: -30,
      offsetX: 20
    },
    plotOptions: {
      radialBar: {
        size: undefined,
        inverseOrder: false,
        hollow: {
          margin: 5,
          size: '48%',
          background: 'transparent',
        },
        track: {
          show: true,
          background: '#40475D',
          strokeWidth: '10%',
          opacity: 1,
          margin: 3, // margin is in pixels
        },
  
  
      },
    },
    series: [71, 63],
    labels: ['Device 1', 'Device 2'],
    legend: {
      show: true,
      position: 'left',
      offsetX: -30,
      offsetY: 10,
      formatter: function (val, opts) {
        return val + " - " + opts.w.globals.series[opts.seriesIndex] + '%'
      }
    },
    fill: {
      type: 'gradient',
      gradient: {
        shade: 'dark',
        type: 'horizontal',
        shadeIntensity: 0.5,
        inverseColors: true,
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100]
      }
    }
  }
  
  var chartCircle = new ApexCharts(document.querySelector('#circlechart'), optionsCircle);
  chartCircle.render();
  
  var optionsProgress1 = {
    chart: {
      height: 70,
      type: 'bar',
      stacked: true,
      sparkline: {
        enabled: true
      }
    },
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '20%',
        colors: {
          backgroundBarColors: ['#40475D']
        }
      },
    },
    stroke: {
      width: 0,
    },
    series: [{
      name: 'Process 1',
      data: [44]
    }],
    title: {
      floating: true,
      offsetX: -10,
      offsetY: 5,
      text: 'Process 1'
    },
    subtitle: {
      floating: true,
      align: 'right',
      offsetY: 0,
      text: '44%',
      style: {
        fontSize: '20px'
      }
    },
    tooltip: {
      enabled: false
    },
    xaxis: {
      categories: ['Process 1'],
    },
    yaxis: {
      max: 100
    },
    fill: {
      opacity: 1
    }
  }
  
  var chartProgress1 = new ApexCharts(document.querySelector('#progress1'), optionsProgress1);
  chartProgress1.render();
  
  
  var optionsProgress2 = {
    chart: {
      height: 70,
      type: 'bar',
      stacked: true,
      sparkline: {
        enabled: true
      }
    },
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '20%',
        colors: {
          backgroundBarColors: ['#40475D']
        }
      },
    },
    colors: ['#17ead9'],
    stroke: {
      width: 0,
    },
    series: [{
      name: 'Process 2',
      data: [80]
    }],
    title: {
      floating: true,
      offsetX: -10,
      offsetY: 5,
      text: 'Process 2'
    },
    subtitle: {
      floating: true,
      align: 'right',
      offsetY: 0,
      text: '80%',
      style: {
        fontSize: '20px'
      }
    },
    tooltip: {
      enabled: false
    },
    xaxis: {
      categories: ['Process 2'],
    },
    yaxis: {
      max: 100
    },
    fill: {
      type: 'gradient',
      gradient: {
        inverseColors: false,
        gradientToColors: ['#6078ea']
      }
    },
  }
  
  var chartProgress2 = new ApexCharts(document.querySelector('#progress2'), optionsProgress2);
  chartProgress2.render();
  
  
  var optionsProgress3 = {
    chart: {
      height: 70,
      type: 'bar',
      stacked: true,
      sparkline: {
        enabled: true
      }
    },
    plotOptions: {
      bar: {
        horizontal: true,
        barHeight: '20%',
        colors: {
          backgroundBarColors: ['#40475D']
        }
      },
    },
    colors: ['#f02fc2'],
    stroke: {
      width: 0,
    },
    series: [{
      name: 'Process 3',
      data: [74]
    }],
    fill: {
      type: 'gradient',
      gradient: {
        gradientToColors: ['#6094ea']
      }
    },
    title: {
      floating: true,
      offsetX: -10,
      offsetY: 5,
      text: 'Process 3'
    },
    subtitle: {
      floating: true,
      align: 'right',
      offsetY: 0,
      text: '74%',
      style: {
        fontSize: '20px'
      }
    },
    tooltip: {
      enabled: false
    },
    xaxis: {
      categories: ['Process 3'],
    },
    yaxis: {
      max: 100
    },
  }
  
  var chartProgress3 = new ApexCharts(document.querySelector('#progress3'), optionsProgress3);
  chartProgress3.render();
  
  window.setInterval(function () {
  
    iteration++;
  
    chartColumn.updateSeries([{
      data: [...chartColumn.w.config.series[0].data,
        [
          chartColumn.w.globals.maxX + 300000,
          getRandom()
        ]
      ]
    }])
  
    chartLine.updateSeries([{
      data: [...chartLine.w.config.series[0].data,
        [
          chartLine.w.globals.maxX + 300000,
          getRandom()
        ]
      ]
    }, {
      data: [...chartLine.w.config.series[1].data,
        [
          chartLine.w.globals.maxX + 300000,
          getRandom()
        ]
      ]
    }])
  
    chartCircle.updateSeries([getRangeRandom({ min: 10, max: 100 }), getRangeRandom({ min: 10, max: 100 })])
  
    var p1Data = getRangeRandom({ min: 10, max: 100 });
    chartProgress1.updateOptions({
      series: [{
        data: [p1Data]
      }],
      subtitle: {
        text: p1Data + "%"
      }
    })
  
    var p2Data = getRangeRandom({ min: 10, max: 100 });
    chartProgress2.updateOptions({
      series: [{
        data: [p2Data]
      }],
      subtitle: {
        text: p2Data + "%"
      }
    })
  
    var p3Data = getRangeRandom({ min: 10, max: 100 });
    chartProgress3.updateOptions({
      series: [{
        data: [p3Data]
      }],
      subtitle: {
        text: p3Data + "%"
      }
    })
  
  
  
  }, 3000);