<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.0/echarts.min.js"
    integrity="sha512-ZRdjJAYP8Kij8Lkln9uiGj0jIrMDLAALm1ZB2b3VfV9XJ0nR4zbJmHKB42/A4tgMlZS4DTPnSAmcYRoS0dginA=="
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.0/echarts.min.js"
    integrity="sha512-ZRdjJAYP8Kij8Lkln9uiGj0jIrMDLAALm1ZB2b3VfV9XJ0nR4zbJmHKB42/A4tgMlZS4DTPnSAmcYRoS0dginA=="
    crossorigin="anonymous"></script>-->

<div id="parent">
    <div id="main" style="width: 100%;height:100vh"></div>
</div>
<!--<div><button class="btn btn-success" onclick="addData()">wala wala</button></div>-->
<div style="text-align: center;">
    <button class="btn btn-success" onclick="addData_1()">Add 1</button>
    <button class="btn btn-success" onclick="DeleteData_1()">Delete 1</button>
    <button class="btn btn-warning" onclick="addData_2()">Add 2</button>
    <button class="btn btn-warning" onclick="DeleteData_2()">Delete 2</button>
    <button class="btn btn-primary" onclick="addData_3()">Add 3</button>
    <button class="btn btn-primary" onclick="DeleteData_3()">Delete 3</button>
    <button class="btn btn-danger" onclick="addData_4()">Add 4</button>
    <button class="btn btn-danger" onclick="DeleteData_4()">Delete 4</button>
</div>
<script type="text/javascript">
    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });
    
    $(window).on('resize', function () {
        if (myChart != null && myChart != undefined) {
            myChart.resize();
        }
    });
    // specify chart configuration item and data
    var symbolSize = 1;
    var data = [];
    var points = [];

    option = {
        title: {
            text: 'Click to Add Points'
        },
        tooltip: {
            formatter: function (params) {
                var data = params.data || [0, 0];
                return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            min: 0,
            max: 500,
            type: 'value',
            axisLine: { onZero: false },
            show: false
        },
        yAxis: {
            min: 0,
            max: 400,
            type: 'value',
            axisLine: { onZero: false },
            show: false
        },
        animation: true,

        animationThreshold: 2000,
        animationDuration: 1000,
        animationDurationUpdate: 1000,
        animationEasing: 'quadraticIn',

        animationDelayUpdate: 100,
        series: [
            {
                id: 'a',
                type: 'line',
                smooth: true,
                symbolSize: symbolSize,
                data: data,
                animation: true,

                animationThreshold: 2000,
                animationDuration: 1000,
                animationDurationUpdate: 1000,
                animationDelayUpdate: 1000,
                animationEasing: 'quadraticIn',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(187,212,246)'
                    }, {
                        offset: 1,
                        color: 'rgb(248,251,254)'
                    }])
                }


            }
        ]

    };

    


    
    function addData_1() {
        if (data.length == 0) {
            data.push([0, 10]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
            data.push([100, 20]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
    }
    function DeleteData_1() {
        data = [];

        myChart.setOption({
            series: [{
                id: 'a',
                data: data
            }]
        });

    }
    function addData_2() {
        if (data.length == 0) {
            data = [[0, 10], [100, 20], [200, 40]];

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
        if (data.length == 2) {
            data.push([200, 40]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
    }
    function DeleteData_2() {

        if (data.length >= 3) {
            data = [[0, 10], [100, 20]];
            

            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function addData_3() {
        if (data.length == 0 || data.length == 2) {
            data = [[0, 10], [100, 20], [200, 40], [300, 70]];

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }

        if (data.length == 3) {
            data.push([300, 70]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function DeleteData_3() {
        
        if (data.length >= 4) {
            data = [[0, 10], [100, 20], [200, 40]];
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function addData_4() {
        if (data.length == 0 || data.length == 2 || data.length == 3) {
            data = [[0, 10], [100, 20], [200, 40], [300, 70], [400, 110]];

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
        if (data.length == 4) {
            data.push([400, 110]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function DeleteData_4() {
        
        if (data.length >= 5) {
            data = [[0, 10], [100, 20], [200, 40], [300, 70]];
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }

    }
    
    // use configuration item and data specified to show chart
    myChart.setOption(option);
   // console.log(myChart._model.option);
</script>

var data0 = [[22.21, 20.37, 40.41, 29.59, 40.76, 37.76]]

var data1 = [[60.21, 58.37, 40.41, 39.59, 40.76, 47.76]]


option = {
    title: {
        text: 'Multiple Categories',
        left: 'center'
    },
    dataset: [{
        source: data0
    }, {
        source: data1
    },  {
        fromDatasetIndex: 0,
        transform: { type: 'boxplot' }
    }, {
        fromDatasetIndex: 1,
        transform: { type: 'boxplot' }
    }],
    legend: {
        top: '10%'
    },

   
    tooltip: {
                formatter: function(param) {
                    
                    return [
                         param.marker+ param.seriesName,
                        "Max: " + param.data[5],
                        "Q3: " + param.data[4],
                        "median: " + param.data[3],
                        "Q1: " + param.data[2],
                        "Min: " + param.data[1]
                    ].join("<br/>");
                }
            },
    grid: {
        left: '10%',
        top: '20%',
        right: '10%',
        bottom: '15%'
    },
    xAxis: {
        type: 'category',
         axisLabel: {
      show: false
    },

        boundaryGap: true,
        nameGap: 30,
        splitArea: {
            show: false
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        name: 'Value',
        splitArea: {
            show: false
        }
    },
  
    series: [{
        name: 'PM1',
        type: 'boxplot',
        datasetIndex: 2
    }, {
        name: 'PM2.5',
        type: 'boxplot',
        datasetIndex: 3
    }]
};