[GitHub] ahmadalibaloch commented on issue #9232: Use OffScreenCanvas API for big data live charts

[GitBox <gi...@apache.org>]

ahmadalibaloch commented on issue #9232: Use OffScreenCanvas API for big data live charts
URL: https://github.com/apache/incubator-echarts/issues/9232#issuecomment-430287014
 
 
   I customized [this large bar chart](https://ecomfe.github.io/echarts-examples/public/editor.html?c=bar-large) from echarts gallery and made it dynamic so you can have a look, copy and past following code into an echart example. While this chart is rendering in real time try to scroll the code area scrollbar and you will feel UI thread blocking at every interval.
   
   ```
   
   var dataCount = 5e5;
   var data = generateData(dataCount);
   
   var option = {
       title: {
           text: echarts.format.addCommas(dataCount) + ' Data',
           left: 10
       },
       toolbox: {
           feature: {
               dataZoom: {
                   yAxisIndex: false
               },
               saveAsImage: {
                   pixelRatio: 2
               }
           }
       },
       tooltip: {
           trigger: 'axis',
           axisPointer: {
               type: 'shadow'
           }
       },
       grid: {
           bottom: 90
       },
       dataZoom: [{
           type: 'inside'
       }, {
           type: 'slider'
       }],
       xAxis: {
           data: data.categoryData,
           silent: false,
           splitLine: {
               show: false
           },
           splitArea: {
               show: false
           }
       },
       yAxis: {
           splitArea: {
               show: false
           }
       },
       series: [{
           type: 'bar',
           data: data.valueData,
           // Set `large` for large data amount
           large: true
       }]
   };
   var baseValue = Math.random() * 1000;
   function next1(idx) {
           smallBaseValue = idx % 30 === 0
               ? Math.random() * 700
               : (smallBaseValue + Math.random() * 500 - 250);
           baseValue += Math.random() * 20 - 10;
           return Math.max(
               0,
               Math.round(baseValue + smallBaseValue) + 3000
           );
       }
   setInterval(()=>{
       option.series[0].data.push(next1(1));
           myChart.setOption(option);
   },1000);
   
   function generateData(count) {
       var baseValue = Math.random() * 1000;
       var time = +new Date(2011, 0, 1);
       var smallBaseValue;
   
       function next(idx) {
           smallBaseValue = idx % 30 === 0
               ? Math.random() * 700
               : (smallBaseValue + Math.random() * 500 - 250);
           baseValue += Math.random() * 20 - 10;
           return Math.max(
               0,
               Math.round(baseValue + smallBaseValue) + 3000
           );
       }
   
       var categoryData = [];
       var valueData = [];
   
       for (var i = 0; i < count; i++) {
           categoryData.push(echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', time));
           valueData.push(next(i).toFixed(2));
           time += 1000;
       }
   
       return {
           categoryData: categoryData,
           valueData: valueData
       };
   }
   ```
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org