Taiftech-LLC
/
admin.dukany.io


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Dynamic Loaded Column Chart</title>

    <link href="../../assets/styles.css" rel="stylesheet" />

    <style>
      
        body {
      background: #fff;
    }
    
    #wrap {
      margin: 45px auto;
      max-width: 800px;
      position: relative;
    }
    
    .chart-box {
      padding-left: 0;
    }
    
    #chart-year,
    #chart-quarter {
      width: 96%;
      max-width: 48%;
      box-shadow: none;
      padding-left: 0;
      padding-top: 20px;
      background: #fff;
      border: 1px solid #ddd;
    }
    
    #chart-year {
      float: left;
      position: relative;
      transition: 1s ease transform;
      z-index: 3;
    }
    
    #chart-year.chart-quarter-activated {
      transform: translateX(0);
      transition: 1s ease transform;
    }
    
    #chart-quarter {
      float: left;
      position: relative;
      z-index: -2;
      transition: 1s ease transform;
    }
    
    #chart-quarter.active {
      transition: 1.1s ease-in-out transform;
      transform: translateX(0);
      z-index: 1;
    }
    
    @media screen and (min-width: 480px) {
      #chart-year {
        transform: translateX(50%);
      }
      #chart-quarter {
        transform: translateX(-50%);
      }
    }
    
    select#model {
      display: none;
      position: absolute;
      top: -40px;
      left: 0;
      z-index: 2;
      cursor: pointer;
      transform: scale(0.8);
    }
      
    </style>

    <script>
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
        )
      window.Promise ||
        document.write(
          '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
        )
    </script>

    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
    

    <script>
  Apex = {
    chart: {
      toolbar: {
        show: false
      }
    },
    tooltip: {
      shared: false
    },
    legend: {
      show: false
    }
  }
  
  var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#00D9E9', '#FF66C3'];
  
  /**
   * Randomize array element order in-place.
   * Using Durstenfeld shuffle algorithm.
   */
  function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
      var j = Math.floor(Math.random() * (i + 1));
      var temp = array[i];
      array[i] = array[j];
      array[j] = temp;
    }
    return array;
  }
  
  var arrayData = [{
    y: 400,
    quarters: [{
      x: 'Q1',
      y: 120
    }, {
      x: 'Q2',
      y: 90
    }, {
      x: 'Q3',
      y: 100
    }, {
      x: 'Q4',
      y: 90
    }]
  }, {
    y: 430,
    quarters: [{
      x: 'Q1',
      y: 120
    }, {
      x: 'Q2',
      y: 110
    }, {
      x: 'Q3',
      y: 90
    }, {
      x: 'Q4',
      y: 110
    }]
  }, {
    y: 448,
    quarters: [{
      x: 'Q1',
      y: 70
    }, {
      x: 'Q2',
      y: 100
    }, {
      x: 'Q3',
      y: 140
    }, {
      x: 'Q4',
      y: 138
    }]
  }, {
    y: 470,
    quarters: [{
      x: 'Q1',
      y: 150
    }, {
      x: 'Q2',
      y: 60
    }, {
      x: 'Q3',
      y: 190
    }, {
      x: 'Q4',
      y: 70
    }]
  }, {
    y: 540,
    quarters: [{
      x: 'Q1',
      y: 120
    }, {
      x: 'Q2',
      y: 120
    }, {
      x: 'Q3',
      y: 130
    }, {
      x: 'Q4',
      y: 170
    }]
  }, {
    y: 580,
    quarters: [{
      x: 'Q1',
      y: 170
    }, {
      x: 'Q2',
      y: 130
    }, {
      x: 'Q3',
      y: 120
    }, {
      x: 'Q4',
      y: 160
    }]
  }];
  
  function makeData() {
    var dataSet = shuffleArray(arrayData)
  
    var dataYearSeries = [{
      x: "2011",
      y: dataSet[0].y,
      color: colors[0],
      quarters: dataSet[0].quarters
    }, {
      x: "2012",
      y: dataSet[1].y,
      color: colors[1],
      quarters: dataSet[1].quarters
    }, {
      x: "2013",
      y: dataSet[2].y,
      color: colors[2],
      quarters: dataSet[2].quarters
    }, {
      x: "2014",
      y: dataSet[3].y,
      color: colors[3],
      quarters: dataSet[3].quarters
    }, {
      x: "2015",
      y: dataSet[4].y,
      color: colors[4],
      quarters: dataSet[4].quarters
    }, {
      x: "2016",
      y: dataSet[5].y,
      color: colors[5],
      quarters: dataSet[5].quarters
    }];
  
    return dataYearSeries
  }
  
  function updateQuarterChart(sourceChart, destChartIDToUpdate) {
    var series = [];
    var seriesIndex = 0;
    var colors = []
  
    if (sourceChart.w.globals.selectedDataPoints[0]) {
      var selectedPoints = sourceChart.w.globals.selectedDataPoints;
      for (var i = 0; i < selectedPoints[seriesIndex].length; i++) {
        var selectedIndex = selectedPoints[seriesIndex][i];
        var yearSeries = sourceChart.w.config.series[seriesIndex];
        series.push({
          name: yearSeries.data[selectedIndex].x,
          data: yearSeries.data[selectedIndex].quarters
        })
        colors.push(yearSeries.data[selectedIndex].color)
      }
  
      if (series.length === 0) series = [{
        data: []
      }]
  
      return ApexCharts.exec(destChartIDToUpdate, 'updateOptions', {
        series: series,
        colors: colors,
        fill: {
          colors: colors
        }
      })
    }
  }
  </script>
  </head>

  <body>
    
    <div id="app">
      <div id="wrap">
      <select id="model" class="flat-select"
          
          @change="changeData">
        <option value="iphone5">iPhone 5</option>
        <option value="iphone6">iPhone 6</option>
        <option value="iphone7">iPhone 7</option>
      </select>
      <div id="chart-year">
      <apexchart type="bar" height="400" ref="chart" :options="chartOptions" :series="series"></apexchart>
    </div>
      <div id="chart-quarter">
      <apexchart type="bar" height="400" ref="chartQuarter" :options="chartOptionsQuarter" :series="seriesQuarter"></apexchart>
    </div>
    </div>
    </div>

    <!-- Below element is just for displaying source code. it is not required. DO NOT USE -->
    <div id="html">
      &lt;div id=&quot;wrap&quot;&gt;
        &lt;select id=&quot;model&quot; class=&quot;flat-select&quot;
            
            @change=&quot;changeData&quot;&gt;
          &lt;option value=&quot;iphone5&quot;&gt;iPhone 5&lt;/option&gt;
          &lt;option value=&quot;iphone6&quot;&gt;iPhone 6&lt;/option&gt;
          &lt;option value=&quot;iphone7&quot;&gt;iPhone 7&lt;/option&gt;
        &lt;/select&gt;
        &lt;div id=&quot;chart-year&quot;&gt;
        &lt;apexchart type=&quot;bar&quot; height=&quot;400&quot; ref=&quot;chart&quot; :options=&quot;chartOptions&quot; :series=&quot;series&quot;&gt;&lt;/apexchart&gt;
      &lt;/div&gt;
        &lt;div id=&quot;chart-quarter&quot;&gt;
        &lt;apexchart type=&quot;bar&quot; height=&quot;400&quot; ref=&quot;chartQuarter&quot; :options=&quot;chartOptionsQuarter&quot; :series=&quot;seriesQuarter&quot;&gt;&lt;/apexchart&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    </div>

    <script>
      new Vue({
        el: '#app',
        components: {
          apexchart: VueApexCharts,
        },
        data: {
          
          series: [{
            data: makeData()
          }],
          chartOptions: {
            chart: {
              id: 'barYear',
              height: 400,
              width: '100%',
              type: 'bar',
              events: {
                dataPointSelection: function (e, chart, opts) {
                  var quarterChartEl = document.querySelector("#chart-quarter");
                  var yearChartEl = document.querySelector("#chart-year");
            
                  if (opts.selectedDataPoints[0].length === 1) {
                    if (quarterChartEl.classList.contains("active")) {
                      updateQuarterChart(chart, 'barQuarter')
                    } else {
                      yearChartEl.classList.add("chart-quarter-activated")
                      quarterChartEl.classList.add("active");
                      updateQuarterChart(chart, 'barQuarter')
                    }
                  } else {
                    updateQuarterChart(chart, 'barQuarter')
                  }
            
                  if (opts.selectedDataPoints[0].length === 0) {
                    yearChartEl.classList.remove("chart-quarter-activated")
                    quarterChartEl.classList.remove("active");
                  }
            
                },
                updated:  function (chart) {
                  updateQuarterChart(chart, 'barQuarter')
                }
              }
            },
            plotOptions: {
              bar: {
                distributed: true,
                horizontal: true,
                barHeight: '75%',
                dataLabels: {
                  position: 'bottom'
                }
              }
            },
            dataLabels: {
              enabled: true,
              textAnchor: 'start',
              style: {
                colors: ['#fff']
              },
              formatter: function (val, opt) {
                return opt.w.globals.labels[opt.dataPointIndex]
              },
              offsetX: 0,
              dropShadow: {
                enabled: true
              }
            },
            
            colors: colors,
            
            states: {
              normal: {
                filter: {
                  type: 'desaturate'
                }
              },
              active: {
                allowMultipleDataPointsSelection: true,
                filter: {
                  type: 'darken',
                  value: 1
                }
              }
            },
            tooltip: {
              x: {
                show: false
              },
              y: {
                title: {
                  formatter: function (val, opts) {
                    return opts.w.globals.labels[opts.dataPointIndex]
                  }
                }
              }
            },
            title: {
              text: 'Yearly Results',
              offsetX: 15
            },
            subtitle: {
              text: '(Click on bar to see details)',
              offsetX: 15
            },
            yaxis: {
              labels: {
                show: false
              }
            }
          },
          
          seriesQuarter: [{
            data: []
          }],
          chartOptionsQuarter: {
            chart: {
              id: 'barQuarter',
              height: 400,
              width: '100%',
              type: 'bar',
              stacked: true
            },
            plotOptions: {
              bar: {
                columnWidth: '50%',
                horizontal: false
              }
            },
            legend: {
              show: false
            },
            grid: {
              yaxis: {
                lines: {
                  show: false,
                }
              },
              xaxis: {
                lines: {
                  show: true,
                }
              }
            },
            yaxis: {
              labels: {
                show: false
              }
            },
            title: {
              text: 'Quarterly Results',
              offsetX: 10
            },
            tooltip: {
              x: {
                formatter: function (val, opts) {
                  return opts.w.globals.seriesNames[opts.seriesIndex]
                }
              },
              y: {
                title: {
                  formatter: function (val, opts) {
                    return opts.w.globals.labels[opts.dataPointIndex]
                  }
                }
              }
            }
          },
          
          
        },
        methods: {
          changeData: function() {
            this.$refs.chart.updateSeries([{
              data: makeData()
            }])
          }
        }
      })
    </script>
    
  </body>
</html>