echartsconfidence-interval
How to create a dynamic confidence band in ECharts with varying transparency based on proximity to lower and upper bounds?
I'm working on a data visualization project using ECharts, and I need to create a confidence band that adjusts its transparency based on the proximity to the lower and upper bounds. Specifically, I want the transparency to be higher (less opaque) when the data points are near the lower or upper bounds, and lower (more opaque) when the data points are farther away from the bounds.
The below is a perfect example solution, but it lacks the dynamic transparency:
https://echarts.apache.org/examples/en/editor.html?c=confidence-band
ideally it should be as in below:
I think the line gradient can be used to do this as in below code:
option = {
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},
{
color: 'rgba(255, 70, 131, 0)',
data: [300, 500],
type: 'line',
stack: 'area-1'
},
{
color: 'rgba(255, 70, 131, 0)',
stack: 'area-1',
data: [900, 1200],
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0.8667,
color: 'rgba(255, 70, 131, 0.8667)'
},
{
offset: 0.1333,
color: 'rgba(255, 70, 131, 0.1333)'
}
])
}
}
]
};
but the problem is that how to properly put the right offset, as you can see in the below image it's not right as in the bottom it's dark, which is wrong, it has to be dark when near the blue line
Solution
This is the best i could do. Its not exactly what you wanted because the gradient is taken between the minimal and maximal y value over all x values and not per point.
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
myChart.hideLoading();
var base = -data.reduce(function (min, val) {
return Math.floor(Math.min(min, val.l));
}, Infinity);
myChart.setOption(
(option = {
title: {
text: 'Confidence Band',
subtext: 'Example in MetricsGraphics.js',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
color: '#222'
}
},
formatter: function (params) {
return (
params[2].name +
'<br />' +
((params[2].value - base) * 100).toFixed(1) +
'%'
);
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: data.map(function (item) {
return item.date;
}),
axisLabel: {
formatter: function (value, idx) {
var date = new Date(value);
return idx === 0
? value
: [date.getMonth() + 1, date.getDate()].join('-');
}
},
boundaryGap: false
},
yAxis: {
axisLabel: {
formatter: function (val) {
return (val - base) * 100 + '%';
}
},
axisPointer: {
label: {
formatter: function (params) {
return ((params.value - base) * 100).toFixed(1) + '%';
}
}
},
splitNumber: 3
},
series: [
{
name: 'L',
type: 'line',
data: data.map(function (item) {
return item.l + base;
}),
lineStyle: {opacity: 0},
symbol: 'none',
stack: 'bandLowerPart',
},
{
type: 'line',
data: data.map(function (item) {
return item.value - item.l;
}),
lineStyle: {opacity: 0},
showSymbol: false,
stack: 'bandLowerPart',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0.35, 0, 0, [
{
offset: 0.5,
color: 'rgba(112,128,144, 0.3)'
},
{
offset: 1,
color: 'rgba(112,128,144, 1)'
}
])
},
},
{
type: 'line',
data: data.map(function (item) {
return item.value + base;
}),
itemStyle: {color: '#333'},
showSymbol: false,
stack: 'bandUpperPart',
},
{
name: 'U',
type: 'line',
data: data.map(function (item) {
return item.u - item.value;
}),
lineStyle: {opacity: 0},
symbol: 'none',
stack: 'bandUpperPart',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.65, [
{
offset: 0.5,
color: 'rgba(112,128,144, 0.3)'
},
{
offset: 1,
color: 'rgba(112,128,144, 1)'
}
])
},
},
]
})
);
});
I just built up on your example and put two gradients (one from upper line and one from lower line) instead of one from upper to lower.
I managed to build a really hacky solution by slicing the data into small pieces and plotting a gradient for each piece. Code is also pretty messy. Do with it what you want:
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data) {
myChart.hideLoading();
var base = -data.reduce(function (min, val) {
return Math.floor(Math.min(min, val.l));
}, Infinity);
data.map((item) => {item.lb = item.l + base});
data.map((item) => {item.mlb = item.value - item.l});
data.map((item) => {item.mub = item.value + base});
data.map((item) => {item.ub = item.u - item.value});
let seriesList = [];
const filteredDatasets = [];
function createSeries(nrSlices) {
const sliceSize = Math.ceil(data.length / nrSlices);
for (let index = 0; index < nrSlices; index++) {
let lowIndex = index*sliceSize-1;
let highIndex = lowIndex + sliceSize+1;
if (highIndex >= data.length) {
highIndex = data.length - 1;
}
const datasetId = 'dataset_' + index;
const datasetSliced = data.slice(lowIndex, highIndex);
filteredDatasets.push({
id: datasetId,
source: datasetSliced,
});
const slice = [
{
type: 'line',
datasetId: datasetId,
encode: {x: 'date', y: 'lb'},
lineStyle: { opacity: 0 },
symbol: 'none',
stack: 'bandLowerPart' + index
},
{
type: 'line',
datasetId: datasetId,
encode: {x: 'date', y: 'mlb'},
lineStyle: { opacity: 0 },
showSymbol: false,
stack: 'bandLowerPart' + index,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
{
offset: 1,
color: 'rgba(112,128,144, 1)'
},
{
offset: 0.3,
color: 'rgba(112,128,144, 0.3)'
}
])
}
},
{
type: 'line',
datasetId: datasetId,
encode: {x: 'date', y: 'mub'},
itemStyle: { color: '#333' },
showSymbol: false,
stack: 'bandUpperPart' + index
},
{
type: 'line',
datasetId: datasetId,
encode: {x: 'date', y: 'ub'},
lineStyle: { opacity: 0 },
symbol: 'none',
stack: 'bandUpperPart' + index,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 0.6, [
{
offset: 0.3,
color: 'rgba(112,128,144, 0.3)'
},
{
offset: 1,
color: 'rgba(112,128,144, 1)'
}
])
}
}
];
seriesList = seriesList.concat(slice);
}
}
createSeries(100);
myChart.setOption(
(option = {
title: {
text: 'Confidence Band',
subtext: 'Example in MetricsGraphics.js',
left: 'center'
},
dataset: filteredDatasets,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
animation: false,
label: {
backgroundColor: '#ccc',
borderColor: '#aaa',
borderWidth: 1,
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
color: '#222'
}
},
formatter: function (params) {
return (
params[2].name +
'<br />' +
((params[2].value - base) * 100).toFixed(1) +
'%'
);
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: data.map(function (item) {
return item.date;
}),
axisLabel: {
formatter: function (value, idx) {
var date = new Date(value);
return idx === 0
? value
: [date.getMonth() + 1, date.getDate()].join('-');
}
},
boundaryGap: false
},
yAxis: {
axisLabel: {
formatter: function (val) {
return (val - base) * 100 + '%';
}
},
axisPointer: {
label: {
formatter: function (params) {
return ((params.value - base) * 100).toFixed(1) + '%';
}
}
},
splitNumber: 3
},
series: seriesList,
})
);
});
- Constrain a Specman list so it doesn't have identical values in consecutive elements
- How to type cast a list of uint to a list of vr_ahb_data in Specman?
- Static fields/methods in e
- What is the difference between deep_copy and gen keeping in Specman?
- Specman UVM: What is the difference between write_reg { .field == 2;}; and write_reg_fields?
- Does Specman support optional parameters to a method?
- Specman e: When colon equal sign ":=" should be used?
- Specman e: Is there a way to know how many values there is in an enumerated type?
- Specman e error: No match for file when using "for each line in file"
- How to run e file one by one? Not in parallel test
- Specman/e constraint (for each in) iteration
- Specman e: How driver's items queue can be locked from a sequence?
- Specman e: How to print variable's address?
- Specman e: "keep type .. is a" fails to refine the type of a field
- Specman soft select on variable, decimal vs. hexadecimal values
- Specman e: How to print a pointer to a struct?
- Specman e: Is there a way to print unit instance name?
- Specman e: simultaneous events error
- Specman e coverage: ignored values appear in the coverage statistics
- Specman e: How a sequence should be started when gen_and_start_main constrained to FALSE?
- Specman/e list of lists (multidimensional array)
- Does Specman e have struct constructor?
- Specman e: How the predefined sequence.item should be used?
- Specman e: define-as-computed macro error
- Specman e UVM: Why to inherit from uvm_* units?
- Specman e: A sequence drives its BFM also its MAIN was not defined in a test
- e HVL (IEEE 1647): expect expression fails unexpectedly
- Specman e subtyping: How to refer to FALSE value of conditional field in when/extend subtyping?
- e HVL (IEEE 1647): How to set 'X' value?
- Difference between declaring an event that is sensitive to a simple_port value and event_port