golden hour

/var/www/html/Digital_Design/assets/js/dashboard

File/Folder	Size	Actions
backup	13.46 KB
dash_1.js	16.12 KB
dash_2.js	10.94 KB

Edit: dash_1.js

try {

/*
      ==============================
      |    @Options Charts Script   |
      ==============================
  */
  
  /*
      =============================
          Daily Sales | Options
      =============================
  */
  var d_2options1 = {
    chart: {
          height: 160,
          type: 'bar',
          stacked: true,
          stackType: '100%',
          toolbar: {
            show: false,
          }
      },
      dataLabels: {
          enabled: false,
      },
      stroke: {
          show: true,
          width: 1,
      },
      colors: ['#e2a03f', '#e0e6ed'],
      responsive: [{
          breakpoint: 480,
          options: {
              legend: {
                  position: 'bottom',
                  offsetX: -10,
                  offsetY: 0
              }
          }
      }],
      series: [{
          name: 'Sales',
          data: [44, 55, 41, 67, 22, 43, 21]
      },{
          name: 'Last Week',
          data: [13, 23, 20, 8, 13, 27, 33]
      }],
      xaxis: {
          labels: {
              show: false,
          },
          categories: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat'],
      },
      yaxis: {
          show: false
      },
      fill: {
          opacity: 1
      },
      plotOptions: {
          bar: {
              horizontal: false,
              endingShape: 'rounded',
              columnWidth: '25%',
          }
      },
      legend: {
          show: false,
      },
      grid: {
          show: false,
          xaxis: {
              lines: {
                  show: false
              }
          },
          padding: {
            top: 10,
            right: 0,
            bottom: -40,
            left: 0
          }, 
      },
  }
  
  /*
      =============================
          Total Orders | Options
      =============================
  */
  var d_2options2 = {
    chart: {
      id: 'sparkline1',
      group: 'sparklines',
      type: 'area',
      height: 280,
      sparkline: {
        enabled: true
      },
    },
    stroke: {
        curve: 'smooth',
        width: 2
    },
    fill: {
      opacity: 1,
    },
    series: [{
      name: 'Sales',
      data: [28, 40, 36, 52, 38, 60, 38, 52, 36, 40]
    }],
    labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
    yaxis: {
      min: 0
    },
    grid: {
      padding: {
        top: 125,
        right: 0,
        bottom: 36,
        left: 0
      }, 
    },
    fill: {
        type:"gradient",
        gradient: {
            type: "vertical",
            shadeIntensity: 1,
            inverseColors: !1,
            opacityFrom: .40,
            opacityTo: .05,
            stops: [45, 100]
        }
    },
    tooltip: {
      x: {
        show: false,
      },
      theme: 'dark'
    },
    colors: ['#fff']
  }
    /*
      =============================
          Mid Sem Trends | Options
      =============================
  */
 var kaddu = {
  chart: {
    id: 'sparkline1',
    group: 'sparklines',
    type: 'area',
    height: 280,
    sparkline: {
      enabled: true
    },
  },
  stroke: {
      curve: 'smooth',
      width: 2
  },
  fill: {
    opacity: 1,
  },
  series: [{
    name: 'No of Students',
    data: [8, 8, 14, 18, 21, 18, 32, 26, 32, 52, 41, 50, 63, 62, 52, 36, 26, 29, 4]
  }],
  labels: ['55', '58', '60', '62', '63', '64', '66', '67', '69', '70', '72', '74', '76', '79', '80', '81', '82', '84'],
  yaxis: {
    min: 0
  },
  grid: {
    padding: {
      top: 125,
      right: 0,
      bottom: 36,
      left: 0
    }, 
  },
  fill: {
      type:"gradient",
      gradient: {
          type: "vertical",
          shadeIntensity: 1,
          inverseColors: !1,
          opacityFrom: .40,
          opacityTo: .05,
          stops: [45, 100]
      }
  },
  tooltip: {
    x: {
      show: false,
    },
    theme: 'dark'
  },
  colors: ['#fff']
}

/*
      =================================
          T1 T2 OLD | Options
      =================================
  */
  var options1 = {
    chart: {
      fontFamily: 'Nunito, sans-serif',
      height: 365,
      type: 'area',
      zoom: {
          enabled: false
      },
      dropShadow: {
        enabled: true,
        opacity: 0.3,
        blur: 5,
        left: -7,
        top: 22
      },
      toolbar: {
        show: false
      },
      events: {
        mounted: function(ctx, config) {
          const highest1 = ctx.getHighestValueInSeries(0);
          const highest2 = ctx.getHighestValueInSeries(1);
  
          ctx.addPointAnnotation({
            x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest1)]).getTime(),
            y: highest1,
            label: {
              style: {
                cssClass: 'd-none'
              }
            },
            customSVG: {
                SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#1b55e2" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                cssClass: undefined,
                offsetX: -8,
                offsetY: 5
            }
          })
  
          ctx.addPointAnnotation({
            x: new Date(ctx.w.globals.seriesX[1][ctx.w.globals.series[1].indexOf(highest2)]).getTime(),
            y: highest2,
            label: {
              style: {
                cssClass: 'd-none'
              }
            },
            customSVG: {
                SVG: '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="#e7515a" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>',
                cssClass: undefined,
                offsetX: -8,
                offsetY: 5
            }
          })
        },
      }
    },
    colors: ['#1b55e2', '#e7515a'],
    dataLabels: {
        enabled: false
    },
    markers: {
      discrete: [{
      seriesIndex: 0,
      dataPointIndex: 7,
      fillColor: '#000',
      strokeColor: '#000',
      size: 5
    }, {
      seriesIndex: 2,
      dataPointIndex: 11,
      fillColor: '#000',
      strokeColor: '#000',
      size: 4
    }]
    },
    subtitle: {
      text: 'Total Profit',
      align: 'left',
      margin: 0,
      offsetX: -10,
      offsetY: 35,
      floating: false,
      style: {
        fontSize: '14px',
        color:  '#888ea8'
      }
    },
    title: {
      text: '$10,840',
      align: 'left',
      margin: 0,
      offsetX: -10,
      offsetY: 0,
      floating: false,
      style: {
        fontSize: '25px',
        color:  '#0e1726'
      },
    },
    stroke: {
        show: true,
        curve: 'smooth',
        width: 2,
        lineCap: 'square'
    },
    series: [{
        name: 'T1',
        data: [0, 0, 0, 0, 0, 0, 2, 1, 1, 5, 8, 15, 24, 22, 45, 70, 80, 119, 143, 118]
    }, {
        name: 'T2',
        data: [0, 2, 2, 6, 5, 5, 16, 19, 25, 34, 39, 50, 62, 61, 52, 103, 49, 45, 64, 19]
    }],
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    xaxis: {
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      },
      crosshairs: {
        show: true
      },
      labels: {
        formatter: function(value, index) {
          return (value * 1.5)
        },
        offsetX: 0,
        offsetY: 5,
        style: {
            fontSize: '12px',
            fontFamily: 'Nunito, sans-serif',
            cssClass: 'apexcharts-xaxis-title',
        },
      }
    },
    yaxis: {
      labels: {
        formatter: function(value, index) {
          return (value / 1)
        },
        offsetX: -22,
        offsetY: 0,
        style: {
            fontSize: '12px',
            fontFamily: 'Nunito, sans-serif',
            cssClass: 'apexcharts-yaxis-title',
        },
      }
    },
    grid: {
      borderColor: '#e0e6ed',
      strokeDashArray: 5,
      xaxis: {
          lines: {
              show: true
          }
      },   
      yaxis: {
          lines: {
              show: false,
          }
      },
      padding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: -10
      }, 
    }, 
    legend: {
      position: 'top',
      horizontalAlign: 'right',
      offsetY: -50,
      fontSize: '16px',
      fontFamily: 'Nunito, sans-serif',
      markers: {
        width: 10,
        height: 10,
        strokeWidth: 0,
        strokeColor: '#fff',
        fillColors: undefined,
        radius: 12,
        onClick: undefined,
        offsetX: 0,
        offsetY: 0
      },    
      itemMargin: {
        horizontal: 0,
        vertical: 20
      }
    },
    tooltip: {
      theme: 'dark',
      marker: {
        show: true,
      },
      x: {
        show: false,
      }
    },
    fill: {
        type:"gradient",
        gradient: {
            type: "vertical",
            shadeIntensity: 1,
            inverseColors: !1,
            opacityFrom: .28,
            opacityTo: .05,
            stops: [45, 100]
        }
    },
    responsive: [{
      breakpoint: 575,
      options: {
        legend: {
            offsetY: -30,
        },
      },
    }]
  }
  
      /*
          ===================================
              T1 T2 | Options
          ===================================
      */
  
      var t1vst2 = {
        chart: {
            height: 350,
            type: 'bar',
            toolbar: {
              show: false,
            },
            dropShadow: {
                enabled: true,
                top: 1,
                left: 1,
                blur: 2,
                color: '#acb0c3',
                opacity: 0.7,
            }
        },
        colors: ['#1b55e2', '#e33541', '#19b33f'],
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '70%',
                endingShape: 'rounded'  
            },
        },
        dataLabels: {
            enabled: false
        },
        legend: {
              position: 'bottom',
              horizontalAlign: 'center',
              fontSize: '14px',
              markers: {
                width: 10,
                height: 10,
              },
              itemMargin: {
                horizontal: 0,
                vertical: 8
              }
        },
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        series: [{
            name: 'T1 Marks',
            data: [0, 0, 0, 0, 0, 0, 2, 1, 1, 5, 8, 15, 24, 22, 45, 70, 80, 119, 143, 118]
        }, {
            name: 'T2 Marks',
            data: [1, 1, 1, 6, 5, 5, 16, 13, 25, 31, 36, 48, 57, 69, 55, 97, 49, 59, 60, 25]
        }, {
            name: 'T3 Marks',
            data: [2, 1, 5, 4, 4, 9, 8, 19, 16, 40, 53, 33, 64, 59, 62, 41, 52, 52, 24, 30]
        }],
        xaxis: {
            categories: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
            labels: {
              formatter: function(value, index) {
                return (value * 1.5)
              },
            },
        },
        fill: {
          type: 'gradient',
          gradient: {
            shade: 'light',
            type: 'vertical',
            shadeIntensity: 0.3,
            inverseColors: false,
            opacityFrom: 1,
            opacityTo: 1,
            stops: [0, 100]
          }
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + ' Students'
                }
            }
        }
      }
  
  
  /*
      ==================================
          Sales By Category | Options
      ==================================
  */
  var deptoptions = {
      chart: {
          type: 'donut',
          width: 380
      },
      colors: ['#5c1ac3', '#e2a03f', '#e7515a', '#669900'],
      dataLabels: {
        enabled: false
      },
      legend: {
          position: 'bottom',
          horizontalAlign: 'center',
          fontSize: '14px',
          markers: {
            width: 10,
            height: 10,
          },
          itemMargin: {
            horizontal: 0,
            vertical: 8
          }
      },
      plotOptions: {
        pie: {
          donut: {
            size: '65%',
            background: 'transparent',
            labels: {
              show: true,
              name: {
                show: true,
                fontSize: '29px',
                fontFamily: 'Nunito, sans-serif',
                color: undefined,
                offsetY: -10
              },
              value: {
                show: true,
                fontSize: '26px',
                fontFamily: 'Nunito, sans-serif',
                color: '20',
                offsetY: 16,
                formatter: function (val) {
                  return val
                }
              },
              total: {
                show: true,
                showAlways: true,
                label: 'Total',
                color: '#888ea8',
                formatter: function (w) {
                  return w.globals.seriesTotals.reduce( function(a, b) {
                    return a + b
                  }, 0)
                }
              }
            }
          }
        }
      },
      stroke: {
        show: true,
        width: 25,
      },
      series: [165, 144, 97, 253],
      labels: ['ECE', 'EEE', 'INSTR', 'CS'],
      responsive: [{
          breakpoint: 1599,
          options: {
              chart: {
                  width: '350px',
                  height: '400px'
              },
              legend: {
                  position: 'bottom'
              }
          },
  
          breakpoint: 1439,
          options: {
              chart: {
                  width: '250px',
                  height: '390px'
              },
              legend: {
                  position: 'bottom'
              },
              plotOptions: {
                pie: {
                  donut: {
                    size: '65%',
                  }
                }
              }
          },
      }]
  }
  
  
  /*
      ==============================
      |    @Render Charts Script    |
      ==============================
  */
  
  
  /*
      ============================
          Daily Sales | Render
      ============================
  */
  var d_2C_1 = new ApexCharts(document.querySelector("#daily-sales"), d_2options1);
  d_2C_1.render();
  
  /*
      ============================
          Total Orders | Render
      ============================
  */
  var d_2C_2 = new ApexCharts(document.querySelector("#total-orders"), d_2options2);
  d_2C_2.render();

/*
      ============================
          Mid Sem | Render
      ============================
  */
  var MidSem = new ApexCharts(document.querySelector("#mid-sem-trend"), kaddu);
  MidSem.render();
  
  /*
      ================================
          T1 Vs t2 | Render
      ================================
  */
  var chart1 = new ApexCharts(
      document.querySelector("#t1vst2"),
      t1vst2
  );
  
  chart1.render();
  
  /*
      =================================
          Dept dist | Render
      =================================
  */
  var chart = new ApexCharts(
      document.querySelector("#dept-dist"),
      deptoptions
  );
  
  chart.render();
  
  /*
      =============================================
          Perfect Scrollbar | Recent Activities
      =============================================
  */
  const ps = new PerfectScrollbar(document.querySelector('.mt-container'));
  
  
  } catch(e) {
      console.log(e);
  }