[GitHub] [echarts] andrearoota commented on issue #16505: Normalize dat on dataZoom not show correct chart

[GitBox]

andrearoota commented on issue #16505:
URL: https://github.com/apache/echarts/issues/16505#issuecomment-1116869501

   Hi @edika99,
   this is **not** a bug of Echarts: there are some bug in your function 
_fillData()_
   
   ```
   const compData = JSON.parse(data);
         var chartSeries = [];
         var chartDates = [];
         var legend = [];
   
         const minDate = getMaxDate();
   
         function fillData(startDate) {
           startDate = (startDate ?? getMaxDate());
   
           legend = [];
           chartSeries = [];
   
           compData.details.forEach(e => {
             legend.push(e.name);
   
             let prices = [];
   
             const startDateFormatted = startDate.format('YYYY-MM-DD');
             const zeroPrice = e.prices.find(o => 
moment(o.priceDate).format('YYYY-MM-DD') === startDateFormatted).priceValue;
             let ratio = 10000 / zeroPrice;
   
             e.prices.forEach(p => {
               if (minDate.isBefore(moment(p.priceDate)) || 
minDate.isSame(moment(p.priceDate))) {
                 prices.push(Math.round(p.priceValue * ratio) / 100);
                 if (chartSeries.length === 0 && minDate.isSame(startDate)) 
chartDates.push(moment(p.priceDate).format('YYYY-MM-DD'));
               }
             });
   
             chartSeries.push({ name: e.name, showSymbol: false, smooth: true, 
type: 'line', data: prices, colorBy: 'series' });
           });
         }
   
         function getMaxDate() {
           compData.details.forEach((e, index) => {
             let curdata = moment(e.startdate);
             if (index === 0 || curdata.isAfter(mindata))
               mindata = curdata;
           });
           return mindata;
         }
   
         function initChart() {
           fillData();
   
           var options = {
             legend: {
               type: 'scroll',
               data: legend,
             },
             tooltip: {
               trigger: 'axis',
             },
             axisPointer: {
               link: {
                 xAxisIndex: 'all'
               },
               label: {
                 backgroundColor: '#777'
               }
             },
             xAxis: {
               type: 'category',
               boundaryGap: false,
               data: chartDates,
               splitLine: {
                 lineStyle: {
                   type: 'dashed'
                 }
               },
               axisLabel: {
                 formatter: function (value) {
                   let date = new Date(value);
                   return [date.getFullYear(), (date.getMonth() + 1), 
date.getDate()].join('-');
                 }
               }
             },
             yAxis: {
               type: 'value',
               min: 'dataMin',
               max: 'dataMax',
               splitLine: {
                 lineStyle: {
                   type: 'dashed'
                 }
               }
             },
             dataZoom: [
               {
                 type: 'slider',
                 show: true,
                 xAxisIndex: [0],
                 filterMode: 'filter',
                 top: '90%',
                 labelformatter: function (value) {
                   var date = new Date(value);
                   return [date.getFullYear(), (date.getMonth() + 1), 
date.getDate()].join('-');
                 }
               },
               {
                 type: 'inside',
                 xAxisIndex: [0],
               }
             ],
             series: chartSeries
           };
   
           hchart.setOption(options);
   
           hchart.on('dataZoom',
             function () {
               let opt = hchart.getOption();
               const startdate = 
moment.utc(chartDates[opt.dataZoom[0].startValue]);
               fillData(startdate);
               opt.series = chartSeries;
               hchart.setOption(opt, true);
             });
         }
   
         initChart();
   
   ```


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org

For queries about this service, please contact Infrastructure at:
us...@infra.apache.org


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org