githubmirror/echarts

test/data-transform.html
1 049 строк34 KB
pissang
test: optimize loader
07 май 2021, 08:02
07 май 2021, 08:02210f650
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->


<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <!-- <script src="ut/lib/canteen.js"></script> -->
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
        </style>



        <div id="main_simplest_pies"></div>
        <div id="main_pies_encode_price"></div>
        <div id="main_cartesian_parse_trim_time_reg"></div>
        <div id="main_cartesian_sort"></div>
        <div id="main_update_condition"></div>
        <div id="main_update_source_no_dim_inside_data"></div>
        <div id="main_no_dimension_defined"></div>
        <div id="main_fromTransformResult"></div>



        <script>
            var FOOD_SALES_PRICE_HEADER =
                ['Product', 'Sales', 'Price', 'Year'];
            var FOOD_SALES_PRICE_NO_HEADER = [
                ['Cake', 123, 32.12, 2011],
                ['Cereal', 231, 14.41, 2011],
                ['Tofu', 235, 5.14, 2011],
                ['Dumpling', 341, 25.53, 2011],
                ['Biscuit', 122, 29.36, 2011],
                ['Cake', 143, 30.21, 2012],
                ['Cereal', 201, 19.85, 2012],
                ['Tofu', 255, 7.61, 2012],
                ['Dumpling', 241, 27.89, 2012],
                ['Biscuit', 102, 34.53, 2012],
                ['Cake', 153, 28.82, 2013],
                ['Cereal', 181, 21.16, 2013],
                ['Tofu', 295, 4.24, 2013],
                ['Dumpling', 281, 31.66, 2013],
                ['Biscuit', 92, 39.82, 2013],
                ['Cake', 223, 29.22, 2014],
                ['Cereal', 211, 17.88, 2014],
                ['Tofu', 345, 3.09, 2014],
                ['Dumpling', 211, 35.05, 2014],
                ['Biscuit', 72, 24.19, 2014]
            ];
            var FOOD_SALES_PRICE_WITH_HEADER =
                [FOOD_SALES_PRICE_HEADER]
                .concat(FOOD_SALES_PRICE_NO_HEADER);

            var NAME_SCORE_DIM = {
                Name: 0,
                Age: 1,
                Profession: 2,
                Score: 3,
                Date: 4,
                DirtyNumber: 5,
                Numeric: 6,
                HasEmpty: 7,
                Percent: 8
            };
            var NAME_SCORE_DIRTY_DATA_HEADER =
                ['Name', 'Age', 'Profession', 'Score', 'Date', 'DirtyNumber', 'Numeric', 'HasEmpty', 'Percent'];
            var NAME_SCORE_DIRTY_DATA_NO_HEADER = [
                // This is for trim testing.
                [' Jobs Mat ', 41, 'Designer', 314, '2011-02-12', '13', ' 91000 ', 45, ' 12% ' ],
                // This is for edge testing (03-01, 20)
                ['Hottlyuipe Xu ', 20, 'Engineer', 351, '2011-03-01', 44, ' 83000 ', 13, '44%' ],
                [' Jone Mat ', 52, 'Designer', 287, '2011-02-14', null, ' 43000 ', null, '15%' ],
                ['Uty Xu', 19, 'Designer', 219, '2011-02-18', undefined, ' 63000 ', 81, '94%' ],
                ['Tatum von Godden', 25, null, 301, '2011-04-02', '-', ' 13000 ', undefined, '61%' ],
                ['Must Godden', 31, 'Engineer', 235, '2011-03-19', ' 454', '-', 32, '' ],
                ['Caoas Xu', 71, 'Designer', 318, '2011-02-24', NaN, ' 73000 ', '-', '76%' ],
                ['Malise Mat', 67, 'Engineer', 366, '2011-03-12', '232a', ' 23000 ', 19, '26%' ]
            ];
            var NAME_SCORE_DIRTY_DATA_WITH_HEADER =
                [NAME_SCORE_DIRTY_DATA_HEADER]
                .concat(NAME_SCORE_DIRTY_DATA_NO_HEADER);

        </script>




        <!-- ------------------------------- -->
        <!-- ------------------------------- -->
        <!-- ------------------------------- -->
        <!-- ------------------------------- -->




        <script>
        require(['echarts'], function (echarts) {
            var option = {
                dataset: [{
                    source: FOOD_SALES_PRICE_WITH_HEADER
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', value: 2011 }
                    }
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', value: 2012 }
                    }
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', value: 2013 }
                    }
                }],
                tooltip: {},
                series: [{
                    type: 'pie',
                    datasetIndex: 1,
                    radius: 50,
                    center: ['25%', '50%']
                }, {
                    type: 'pie',
                    datasetIndex: 2,
                    radius: 50,
                    center: ['50%', '50%']
                }, {
                    type: 'pie',
                    datasetIndex: 3,
                    radius: 50,
                    center: ['75%', '50%']
                }]
            };

            var chart = testHelper.create(echarts, 'main_simplest_pies', {
                title: [
                    '**3 pies** should shoud **Sales data** (interger about hundreds)',
                    'Pie by "Year", Sector by "Product"'
                ],
                height: 300,
                option: option
            });
        });
        </script>






        <script>
        require(['echarts'], function (echarts) {
            var option = {
                dataset: [{
                    source: FOOD_SALES_PRICE_WITH_HEADER
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Product', value: 'Tofu' }
                    }
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Product', value: 'Biscuit' }
                    }
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Product', value: 'Dumpling' }
                    }
                }],
                series: [{
                    type: 'pie',
                    datasetIndex: 1,
                    center: ['25%', '50%'],
                    radius: 50,
                    encode: { itemName: 'Year', value: 'Price' },
                }, {
                    type: 'pie',
                    datasetIndex: 2,
                    center: ['50%', '50%'],
                    radius: 50,
                    encode: { itemName: 'Year', value: 'Price' }
                }, {
                    type: 'pie',
                    datasetIndex: 3,
                    center: ['75%', '50%'],
                    radius: 50,
                    encode: { itemName: 'Year', value: 'Price' }
                }]
            };

            var chart = testHelper.create(echarts, 'main_pies_encode_price', {
                title: [
                    '**3 pies** should shoud **Prices data** (float like xx.xx)',
                    'Pie by "Product", Sector by "Year"'
                ],
                height: 300,
                option: option
            });
        });
        </script>






        <script>
        require(['echarts'], function (echarts) {
            var option = {
                dataset: [{ source: NAME_SCORE_DIRTY_DATA_WITH_HEADER }],
                tooltip: {},
                grid: [],
                xAxis: [],
                yAxis: [],
                series: []
            };

            var leftStart = 50;
            var leftBase = leftStart;
            var topBase = 30;
            var gridWidth = 100;
            var gridHeight = 100;
            var gapWidth = 70;
            var gapHeight = 80;
            var chartWidth = 800;

            function addCartesian(opt) {
                option.grid.push({
                    left: leftBase,
                    top: topBase,
                    width: gridWidth,
                    height: gridHeight
                });

                leftBase += gridWidth + gapWidth;
                if (leftBase + gridWidth > chartWidth) {
                    leftBase = leftStart;
                    topBase += gridHeight + gapHeight;
                }

                option.xAxis.push({
                    name: opt.xAxis.name,
                    type: 'category',
                    nameLocation: 'middle',
                    nameGap: 30,
                    gridIndex: option.grid.length - 1
                });
                option.yAxis.push({
                    gridIndex: option.grid.length - 1
                });

                var series = opt.series;

                series.type = 'scatter';
                series.xAxisIndex = option.xAxis.length - 1;
                series.yAxisIndex = option.yAxis.length - 1;
                series.label = { show: true, position: 'bottom' };
                series.encode = {
                    x: NAME_SCORE_DIM.Date,
                    y: NAME_SCORE_DIM.Score,
                    label: series.encode && series.encode.label || [NAME_SCORE_DIM.Name],
                    tooltip: [
                        NAME_SCORE_DIM.Name,
                        NAME_SCORE_DIM.Date,
                        NAME_SCORE_DIM.Score,
                        NAME_SCORE_DIM.Profession,
                        NAME_SCORE_DIM.Age,
                        NAME_SCORE_DIM.DirtyNumber
                    ]
                };
                option.series.push(series);
            }


            option.dataset.push({
                id: 'a',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: { dimension: NAME_SCORE_DIM.Name, eq: 'Jobs Mat', parser: 'trim' }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'a'
                },
                xAxis: { name: 'Only show "Jobs Mat"' }
            });

            option.dataset.push({
                id: 'b',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: { dimension: NAME_SCORE_DIM.Date, lt: '2011-03', gte: '2011-02', parser: 'time' }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'b'
                },
                xAxis: { name: 'Show four points\nDate in 2011-02' }
            });

            option.dataset.push({
                id: 'c',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: { dimension: NAME_SCORE_DIM.Date, lte: '2011-03', gte: '2011-02-29', parser: 'time' }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'c'
                },
                xAxis: { name: 'Show "Hottlyuipe Xu"' }
            });

            option.dataset.push({
                id: 'd',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: { dimension: NAME_SCORE_DIM.Name, reg: /\sXu$/, parser: 'trim' }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'd'
                },
                xAxis: { name: 'Show three points\nname reg /sXu$/' }
            });

            option.dataset.push({
                id: 'e',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: { dimension: NAME_SCORE_DIM.Profession, ne: 'Designer', parser: 'trim' }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'e',
                    encode: { label: [NAME_SCORE_DIM.Profession] }
                },
                xAxis: { name: 'Show four points\n!Designer' }
            });

            option.dataset.push({
                id: 'f',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: {
                        and: [
                            { dimension: NAME_SCORE_DIM.Profession, eq: 'Designer', parser: 'trim' },
                            { dimension: NAME_SCORE_DIM.Score, '>': 300 }
                        ]
                    }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'f',
                    encode: { label: [NAME_SCORE_DIM.Profession] }
                },
                xAxis: { name: 'Show two points\nDesigner > 300' }
            });


            option.dataset.push({
                id: 'g',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: {
                        and: [
                            { dimension: NAME_SCORE_DIM.Profession, eq: 'Engineer' },
                            {
                                or: [
                                    { dimension: NAME_SCORE_DIM.Age, '>=': 20, '<=': 30 },
                                    { dimension: NAME_SCORE_DIM.Age, '>=': 60 }
                                ]
                            }
                        ]
                    }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'g',
                    encode: { label: [NAME_SCORE_DIM.Profession] }
                },
                xAxis: { name: 'Show three points\nEngineer && (20-30 || 60)' }
            });

            option.dataset.push({
                id: 'h',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: {
                        not: {
                            and: [
                                { dimension: NAME_SCORE_DIM.Profession, eq: 'Engineer' },
                                {
                                    or: [
                                        { dimension: NAME_SCORE_DIM.Age, '>=': 20, '<=': 30 },
                                        { dimension: NAME_SCORE_DIM.Age, '>=': 60 }
                                    ]
                                }
                            ]
                        }
                    }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'h',
                    encode: { label: [NAME_SCORE_DIM.Profession] }
                },
                xAxis: { name: 'Show six points\n!(Engineer && (20-30 || 60))' }
            });


            option.dataset.push({
                id: 'i',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: true
                }
            });
            addCartesian({
                series: {
                    datasetId: 'i',
                    encode: { label: [NAME_SCORE_DIM.Profession] }
                },
                xAxis: { name: 'Show all eight points\nconfig: true' }
            });


            option.dataset.push({
                id: 'j',
                transform: {
                    type: 'filter',
                    // print: true,
                    config: {
                        or: [{
                            dimension: NAME_SCORE_DIM.DirtyNumber,
                            eq: 454
                        }, {
                            dimension: NAME_SCORE_DIM.DirtyNumber,
                            eq: 232
                        }]
                    }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'j',
                    encode: { label: [NAME_SCORE_DIM.DirtyNumber] }
                },
                xAxis: { name: 'Show only "Must Godden"' }
            });



            var chart = testHelper.create(echarts, 'main_cartesian_parse_trim_time_reg', {
                title: [
                    'Check each cartesians.',
                    'The expectationa are below each cartesian.'
                ],
                width: chartWidth,
                height: 600,
                option: option
            });
        });
        </script>










        <script>
        require(['echarts'], function (echarts) {
            var option = {
                dataset: [{ source: NAME_SCORE_DIRTY_DATA_WITH_HEADER }],
                tooltip: {},
                grid: [],
                xAxis: [],
                yAxis: [],
                series: []
            };

            var leftStart = 50;
            var leftBase = leftStart;
            var topBase = 30;
            var gridWidth = 200;
            var gridHeight = 100;
            var gapWidth = 70;
            var gapHeight = 80;
            var chartWidth = 800;

            function addCartesian(opt) {
                option.grid.push({
                    left: leftBase,
                    top: topBase,
                    width: gridWidth,
                    height: gridHeight
                });

                leftBase += gridWidth + gapWidth;
                if (leftBase + gridWidth > chartWidth) {
                    leftBase = leftStart;
                    topBase += gridHeight + gapHeight;
                }

                option.xAxis.push({
                    name: opt.xAxis.name,
                    type: 'category',
                    nameLocation: 'middle',
                    nameGap: 30,
                    gridIndex: option.grid.length - 1
                });
                option.yAxis.push({
                    gridIndex: option.grid.length - 1
                });

                var series = opt.series;

                series.type = 'bar';
                series.xAxisIndex = option.xAxis.length - 1;
                series.yAxisIndex = option.yAxis.length - 1;
                series.label = {
                    show: true,
                    position: 'insideBottom',
                    rotate: 90,
                    align: 'left',
                    verticalAlign: 'middle'
                };
                series.encode = {
                    x: NAME_SCORE_DIM.Date,
                    y: NAME_SCORE_DIM.Score,
                    label: series.encode && series.encode.label || [NAME_SCORE_DIM.Name],
                    tooltip: [
                        NAME_SCORE_DIM.Name,
                        NAME_SCORE_DIM.Date,
                        NAME_SCORE_DIM.Score,
                        NAME_SCORE_DIM.Profession,
                        NAME_SCORE_DIM.Age,
                        NAME_SCORE_DIM.DirtyNumber,
                        NAME_SCORE_DIM.Numeric,
                        NAME_SCORE_DIM.HasEmpty,
                        NAME_SCORE_DIM.Percent,
                    ]
                };
                option.series.push(series);
            }


            option.dataset.push({
                id: 'a',
                transform: {
                    type: 'sort',
                    // print: true,
                    config: { dimension: NAME_SCORE_DIM.Score, order: 'asc' }
                }
            });
            addCartesian({
                series: {
                    encode: { label: NAME_SCORE_DIM.Score },
                    datasetId: 'a'
                },
                xAxis: { name: 'Show all eight bars\norder by Score asc' }
            });

            option.dataset.push({
                id: 'b',
                transform: {
                    type: 'sort',
                    // print: true,
                    config: { dimension: NAME_SCORE_DIM.Age, order: 'desc' }
                }
            });
            addCartesian({
                series: {
                    datasetId: 'b',
                    encode: { label: NAME_SCORE_DIM.Age }
                },
                xAxis: { name: 'Show all eight bars\norder by Age desc' }
            });

            option.dataset.push({
                id: 'c',
                transform: {
                    type: 'sort',
                    // print: true,
                    config: [
                        { dimension: NAME_SCORE_DIM.Profession, order: 'asc' },
                        { dimension: NAME_SCORE_DIM.Score, order: 'desc' }
                    ]
                }
            });
            addCartesian({
                series: {
                    datasetId: 'c',
                    encode: { label: [NAME_SCORE_DIM.Profession, NAME_SCORE_DIM.Score] }
                },
                xAxis: {
                    name: [
                        'Show eight bars (empty Profession last)',
                        'Profession asc (all Engineer left)',
                        'Score desc in each Profession'
                    ].join('\n')
                }
            });

            option.dataset.push({
                id: 'd',
                transform: {
                    type: 'sort',
                    // print: true,
                    config: [
                        { dimension: NAME_SCORE_DIM.Date, order: 'asc', parser: 'time' }
                    ]
                }
            });
            addCartesian({
                series: {
                    encode: { label: NAME_SCORE_DIM.Date },
                    datasetId: 'd'
                },
                xAxis: { name: 'Show all eight bars\nDate asc' }
            });


            option.dataset.push({
                id: 'e',
                transform: [{
                    type: 'filter',
                    config: { dimension: NAME_SCORE_DIM.Age, lte: 40, gte: 20 }
                }, {
                    type: 'sort',
                    config: { dimension: NAME_SCORE_DIM.Score, order: 'asc' }
                }]
            });
            addCartesian({
                series: {
                    encode: { label: [NAME_SCORE_DIM.Age, NAME_SCORE_DIM.Score] },
                    datasetId: 'e'
                },
                xAxis: { name: 'Show three bars\nFilter by Age 20-40\nOrder by Score asc' }
            });


            option.dataset.push({
                id: 'f',
                transform: {
                    type: 'sort',
                    config: [
                        { dimension: NAME_SCORE_DIM.DirtyNumber, order: 'desc', parser: 'number' }
                    ]
                }
            });
            addCartesian({
                series: {
                    encode: { label: NAME_SCORE_DIM.DirtyNumber },
                    datasetId: 'f'
                },
                xAxis: { name: 'Show all eight bars\nOrder by DirtyNumber desc' }
            });


            option.dataset.push({
                id: 'g',
                transform: {
                    type: 'sort',
                    config: [
                        { dimension: NAME_SCORE_DIM.Numeric, order: 'asc' }
                    ]
                }
            });
            addCartesian({
                series: {
                    encode: { label: NAME_SCORE_DIM.Numeric },
                    datasetId: 'g'
                },
                xAxis: { name: 'Show all eight bars\nOrder by Numeric asc\nOnly one empty at right' }
            });


            option.dataset.push({
                id: 'h',
                transform: {
                    type: 'sort',
                    config: [
                        { dimension: NAME_SCORE_DIM.HasEmpty, order: 'desc' }
                    ]
                }
            });
            addCartesian({
                series: {
                    encode: { label: NAME_SCORE_DIM.HasEmpty },
                    datasetId: 'h'
                },
                xAxis: { name: 'Show all eight bars\nOrder by HasEmpty desc\nempty at right' }
            });


            option.dataset.push({
                id: 'i',
                transform: {
                    type: 'sort',
                    config: [
                        { dimension: NAME_SCORE_DIM.HasEmpty, order: 'desc', incomparable: 'max' }
                    ]
                }
            });
            addCartesian({
                series: {
                    encode: { label: NAME_SCORE_DIM.HasEmpty },
                    datasetId: 'i'
                },
                xAxis: { name: 'Show all eight bars\nOrder by HasEmpty desc\nempty at left' }
            });


            option.dataset.push({
                id: 'j',
                transform: {
                    type: 'sort',
                    config: [
                        { dimension: NAME_SCORE_DIM.Percent, order: 'desc', parse: 'number' }
                    ]
                }
            });
            addCartesian({
                series: {
                    encode: { label: NAME_SCORE_DIM.Percent },
                    datasetId: 'j'
                },
                xAxis: { name: 'Show all eight bars\nOrder by Percent desc\nempty at right' }
            });


            var chart = testHelper.create(echarts, 'main_cartesian_sort', {
                title: [
                    'Test sort transform. Check each cartesians.',
                    'The expectationa are below each cartesian.',
                    'Ordered dimension is on **bar label **'
                ],
                width: chartWidth,
                height: 800,
                option: option
            });
        });
        </script>







        <script>
        require(['echarts'], function (echarts) {
            var currentYear = 2011
            var option = {
                title: {
                    text: currentYear,
                    left: 'center'
                },
                dataset: [{
                    source: FOOD_SALES_PRICE_WITH_HEADER
                }, {
                    id: 'one_year',
                    transform: {
                        type: 'filter',
                        config: { dimension: 'Year', value: currentYear }
                    }
                }],
                tooltip: {},
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{
                    name: 'one year',
                    type: 'bar',
                    datasetIndex: 1,
                }]
            };

            var chart = testHelper.create(echarts, 'main_update_condition', {
                title: [
                    'click "next year", check the bar change.'
                ],
                height: 300,
                option: option,
                buttons: [{
                    text: 'next year',
                    onclick: function () {
                        currentYear++;
                        if (currentYear >= 2014) {
                            currentYear = 2011
                        }
                        chart.setOption({
                            title: {
                                text: currentYear
                            },
                            dataset: {
                                id: 'one_year',
                                transform: {
                                    type: 'filter',
                                    config: { dimension: 'Year', value: currentYear }
                                }
                            }
                        });
                    }
                }]
            });
        });
        </script>





        <script>
        require(['echarts'], function (echarts) {
            var currData = FOOD_SALES_PRICE_NO_HEADER;

            var option = {
                dataset: [{
                    id: 'all_data',
                    dimensions: FOOD_SALES_PRICE_HEADER,
                    source: currData
                }, {
                    transform: {
                        type: 'filter',
                        print: true,
                        config: { dimension: 'Price', '<': 40 }
                    }
                }],
                tooltip: {},
                legend: {},
                xAxis: { type: 'category' },
                yAxis: { scale: true },
                series: [{
                    name: 'all data',
                    type: 'scatter',
                    symbolSize: 15,
                    encode: {
                        itemId: 'Product',
                        y: 'Price',
                        label: [0, 1, 2, 3]
                    },
                    itemStyle: {
                        color: '#999'
                    }
                }, {
                    name: 'Price < 40',
                    type: 'scatter',
                    encode: {
                        itemId: 'Product',
                        x: 0,
                        y: 'Price',
                        label: [0, 1, 2, 3]
                    },
                    datasetIndex: 1
                }]
            };

            var chart = testHelper.create(echarts, 'main_update_source_no_dim_inside_data', {
                title: [
                    'Init: all items that Price < 40',
                    'click "add price 10", check the bar change.'
                ],
                height: 300,
                option: option,
                buttons: [{
                    text: 'add price 10',
                    onclick: function () {
                        currData = echarts.util.clone(currData);
                        echarts.util.each(currData, function (line) {
                            line[2] += 10;
                        });

                        chart.setOption({
                            dataset: {
                                id: 'all_data',
                                source: currData
                            }
                        });
                    }
                }]
            });
        });
        </script>








        <script>
        require(['echarts'], function (echarts) {
            var option = {
                dataset: [{
                    source: FOOD_SALES_PRICE_NO_HEADER
                }, {
                    transform: {
                        type: 'filter',
                        config: { dimension: 3, value: 2011 }
                    }
                }, {
                    transform: [{
                        type: 'filter',
                        config: { dimension: 3, value: 2012 }
                    }, {
                        type: 'sort',
                        config: { dimension: 2, order: 'asc' }
                    }]
                }],
                tooltip: {},
                series: [{
                    type: 'pie',
                    datasetIndex: 1,
                    radius: 50,
                    center: ['35%', '50%']
                }, {
                    type: 'pie',
                    datasetIndex: 2,
                    radius: 50,
                    center: ['65%', '50%']
                }]
            };

            var chart = testHelper.create(echarts, 'main_no_dimension_defined', {
                title: [
                    '**2 pies** should shoud **Sales data** (interger about hundreds)',
                ],
                height: 300,
                option: option
            });
        });
        </script>






        <script>
        require(['echarts', 'data/Michelson-Morley.json.js'], function (echarts, rawData) {
            var option = {
                dataset: [{
                    source: rawData
                }, {
                    transform: {
                        type: 'boxplot',
                        config: { itemNameFormatter: 'expr {value}' }
                    }
                }, {
                    fromDatasetIndex: 1,
                    fromTransformResult: 1
                }, {
                    fromDatasetIndex: 1,
                    fromTransformResult: 1,
                    transform: {
                        type: 'sort',
                        config: { dimension: 0, order: 'desc' }
                    }
                }],
                tooltip: {},
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                },
                series: [{
                    type: 'boxplot',
                    datasetIndex: 1
                }, {
                    type: 'scatter',
                    symbolSize: 30,
                    datasetIndex: 2
                }, {
                    type: 'line',
                    z: 100,
                    datasetIndex: 3
                }]
            };

            var chart = testHelper.create(echarts, 'main_fromTransformResult', {
                title: [
                    '**boxplot** and **outlier scatter (green)** and **line** (yellow) should be displayed.',
                ],
                height: 400,
                option: option
            });
        });
        </script>







    </body>
</html>