# Etherscan Transactions and Apache ECharts
## Etherscan Transactions
#### We can pull Transactions form Etherscan. For Example, I would like to make a chart for showing summary of Gas Fee by month

#### Let's assume that we have pulled transaction data and made arrays for these Function Names for six months

'getReward',0,40484,45504,136512,242904,45504
'stake',0,114152,342456,114152,131252,131252
'approve',0,155049,310098,465147,155049,465147
'withdraw',0,157224,157224,78612,78612,78612
'contribute',0,2000000,2000000,0,0,0
'addLiquidity',0,132840,265680,265680,531360,132840
'removeLiquidity',0,204026,102007,306021,102019,102007

## Apache ECharts
#### The [Apache ECharts](https://echarts.apache.org/en/index.html) has examples with JS or TS code, and we can test and adjust the chart on the website

#### We update the above arrays, according to the source of structure of JS example code. The first array is the x-axis figures

['product', '202212', '202301', '202302', '202303', '202304', '202305'],
['getReward',0,40484,45504,136512,242904,45504],
['stake',0,114152,342456,114152,131252,131252],
['approve',0,155049,310098,465147,155049,465147],
['withdraw',0,157224,157224,78612,78612,78612],
['contribute',0,2000000,2000000,0,0,0],
['addLiquidity',0,132840,265680,265680,531360,132840],
['removeLiquidity',0,204026,102007,306021,102019,102007]

#### We can see the outcome when replace the source

#### Next there are four lines in series then we add 3 more and update formatter in label, value and tooltip in encode

   series: [
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },{
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },{
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'line',
        smooth: true,
        seriesLayoutBy: 'row',
        emphasis: { focus: 'series' }
      },
      {
        type: 'pie',
        id: 'pie',
        radius: '30%',
        center: ['50%', '25%'],
        emphasis: {
          focus: 'self'
        },
        label: {
          formatter: '{b}: {@202212} ({d}%)'
        },
        encode: {
          itemName: 'product',
          value: '202212',
          tooltip: '202212'
        }
      }
    ]

#### Now the lines and pie is ready

#### Click on the month 202302 and see the change

## *Remember to read the License of ECharts if you would like to put it in your product