1051 lines
34 KiB
HTML
Generated
1051 lines
34 KiB
HTML
Generated
<!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>
|
|
|