apache echart with one month each year - echarts

Hello,
I am trying to make a line type chart.
With in axis a date in the format of one month over several years.
Ex July 2000, July 2001, July 2002 etc.
I have a data array with a [date, value] couple.
So with the example it gives
{
series: [{
type: 'line',
smooth: true,
data: [
[ {value: ['2000-07-01', 5884] } ],
[ {value: ['2001-07-01', 568] } ],
[ {value: ['2002-07-01', 5845884] } ]
]
}, {
type: 'line',
smooth: true,
data: [
[ {value: ['2000-07-01', 458] } ],
[ {value: ['2001-07-01', 5468] } ],
[ {value: ['2002-07-01', 588484] } ]
]
}]
}
and I defined in the x axis
{
xAxis: {
type: 'time',
axisLabel: {
formatter: (function(value){
return moment(value).format('MMM YYYY');
})
},
},
}
But on the x axis I get [August 2000, September 2001, October 2002]
How can I obtain the requested result?
Do I have to reformat my series and put my dates in the x axis label?
thx for help.

The required result can be obtained using category axis, if you can provide the data for all months without gap.
xAxis.axisLabel.interval property allows you to control the interval between the labels displayed.
Refer the chart configuration below,
option = {
xAxis: {
type: 'category',
axisLabel: {
formatter: (function(value){
//return mement(value).format('MMM YYYY');
return echarts.format.formatTime("MM-yyyy", value);
}),
interval: 0
},
},
yAxis: {
type: 'value',
},
series: [{
type: 'line',
smooth: true,
data: [
['2000-07-01', 5884],
['2001-07-01', 568],
['2002-07-01', 5845884]
]
}, {
type: 'line',
smooth: true,
data: [
['2000-07-01', 458],
['2001-07-01', 5468],
['2002-07-01', 588484]
]
}]
};

Related

echarts stacked bar chart with time xaxis

Can someone check my chart options and suggest a way to make the time xaxis behave correctly? I've tried with timestamps, dates, timestamps / 1000 and nothing looks right
let sales = [
0,84,5,3,2,1,0,0,3,6
]
let listings = [
1,297,23,5,8,6,9,3,6,19
]
let ps = [
1663084060653,
1663089644329,
1663095228005,
1663100811680,
1663106395356,
1663111979032,
1663117562708,
1663123146384,
1663128730059,
1663134313735
]
let color = "red"
option = {
textStyle: {
color
},
legend: {
textStyle: {
color
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'time',
data: ps,
// axisLabel: {
// formatter: ts => new Date(ts).toTimeString().replace(/ .*/, '')
// }
}
],
yAxis: [
{
// type: 'value'
}
],
series: [
{
name: 'Sales',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: sales
},
{
name: "Listings",
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series'
},
data: listings
}
]
}
Your series (listings & sales here) have to have a [date, value] format. Also, you'll have to remove data from xAxis as it will automatically follow the dates that are given in the series.
So, in your example :
//convert listings & sales to a list of [date, value]
listings = listings.map((value, index) => {
return [ps[index], value]
})
sales = sales.map((value, index) => {
return [ps[index], value]
})
xAxis: [
{
type: 'time',
//data: ps, <--- remove this line
}
],

Question about colorBy after data sorting

In this example with universalTransition turned on, after the pie chart of colorBy:'data' is sorted, it is inconsistent with the corresponding relationship between labels and colors in the bar chart, how to make their colors consistent.
Makepie will be out of service on February 15, you can run follow code on ECharts examples editor.
const dataset = {
dimensions: ['name', 'score'],
source: [
['Hannah Krause', 314],
['Zhao Qian', 351],
]
};
const pieOption = {
// dataset: [dataset],
// 顺序排序数据
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),
series: [
{
type: 'pie',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
radius: [0, '50%'],
universalTransition: true,
animationDurationUpdate: 1000,
// 取排序后的数据
datasetIndex: 1,
}
]
};
const barOption = {
dataset: [dataset],
xAxis: {
type: 'category'
},
yAxis: {},
series: [
{
type: 'bar',
// 通过 id 关联需要过渡动画的系列
id: 'Score',
// 每个数据都是用不同的颜色
colorBy: 'data',
encode: { x: 'name', y: 'score' },
universalTransition: true,
animationDurationUpdate: 1000
}
]
};
option = barOption;
setInterval(() => {
option = option === pieOption ? barOption : pieOption;
// 使用 notMerge 的形式可以移除坐标轴
myChart.setOption(option, true);
}, 2000);
Your dataset order by 'desc' on pie chart.
but it's not used on bar chart.
Maybe your two charts should be sorted in the same order
dataset: [dataset].concat({
transform: {
type: 'sort',
config: { dimension: 'score', order: 'desc' },
},
}),

How to display multiple lines in eCharts using encode?

In eCharts, how do I modify the following option to show multiple lines in the chart? What I want is one line for product "Matcha Latte" and one line for "Cheese Cocao"? I would like to keep the dataset unchanged if possible.
option = {
legend: {},
tooltip: {},
dataset: {
dimensions: [{name:'product', type:'ordinal'}, {name:'date'},
{name:'value'}],
source: [
{product: 'Matcha Latte', 'date': 2016, 'value': 85.8},
{product: 'Matcha Latte', 'date': 2017, 'value': 73.4},
{product: 'Cheese Cocoa', 'date': 2016, 'value': 65.2},
{product: 'Cheese Cocoa', 'date': 2017, 'value': 53.9}
]
},
xAxis: {type: 'category', name: 'date'},
yAxis: {type: 'value', name: 'value'},
series: [
{type: 'line', encode: {x: 'date', y:'value'}},
]
};
you can you transform the dataset by using a filter:
option = {
legend: {},
tooltip: {},
dataset: [
{
dimensions: [
{ name: 'product', type: 'ordinal' },
{ name: 'date' },
{ name: 'value' }
],
source: [
{ product: 'Matcha Latte', date: 2016, value: 85.8 },
{ product: 'Matcha Latte', date: 2017, value: 73.4 },
{ product: 'Cheese Cocoa', date: 2016, value: 65.2 },
{ product: 'Cheese Cocoa', date: 2017, value: 53.9 }
]
},
{
fromDatasetIndex: 0,
transform: [
{
type: 'filter',
config: {
dimension: 'product',
value: 'Matcha Latte'
}
}
]
},
{
fromDatasetIndex: 0,
transform: [
{
type: 'filter',
config: {
dimension: 'product',
value: 'Cheese Cocoa'
}
}
]
}
],
xAxis: { type: 'category', name: 'date' },
yAxis: { type: 'value', name: 'value' },
series: [
{ datasetIndex: 1, type: 'line', encode: { x: 'date', y: 'value' } },
{ datasetIndex: 2, type: 'line', encode: { x: 'date', y: 'value' } }
]
};

eCharts: dataZoom only shows information for the first category

Noticed that dataZoom in echarts only display series for the first category rather than a total across all categories.
For example, consider a cluster bar chart that contains 3 categories (2015,2016,2017). DataZoom displays trend for the 2015 by default rather than total across 2015,2016 and 2017. Any recommendations on how to improve the display as it might be misleading to the end user?
option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 185.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
dataZoom: [
{
show: true,
type: 'slider',
start: 0,
end: 100,
filterMode: 'filter'
},
{
type: 'inside',
start: 0,
end: 100
},
{
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
Thanks,
Dee
Could you explain «DataZoom displays trend for the 2015 by default»? I tried to find the troubles and just pasted you code to editor. It's look as was expected — DataZoom show all clusters, what's wrong?
var myChart = echarts.init(document.getElementById('main'));
var option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 185.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
xAxis: {type: 'category'},
yAxis: {},
// Declare several bar series, each will be mapped
// to a column of dataset.source by default.
dataZoom: [
{
show: true,
type: 'slider',
start: 0,
end: 100,
filterMode: 'filter'
},
{
type: 'inside',
start: 0,
end: 100
},
{
show: false,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

highcharts histrogram with dates

I have a multidimensional array structured like this: [[year,month,day,value],[year2,month2,day2,value2],[year3,month3,day3,value3]...]. Each value is an integer number. I would like to build an Highcharts Histogram chart: in the xAxis there are the YEARS, in the yAxis the MONTHS. Now, in the columns i would like to have the sum of the VALUES for that year (example: column 2009 with the sum of all values that have 2009 as year). In the markers, i would like to have them
distributed according to the month of that year (example: in column 2009, markers with month 1 at the left, and with month 12 at the right of that column, and also for other columns).
Is it possible to do with this type of chart? Thanks a lot.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var data = [[2014,1,10,3],[2014,2,3,9],[2013,12,4,7],[2012,3,6,7],[2009,8,5,9],[2010,11,31,5],[2016,1,1,3],[2011,12,13,9],[2016,2,14,7],[2017,5,29,6],[2008,8,15,4],[2013,11,31,5]];
Highcharts.setOptions({
colors: ['green', 'blue', 'yellow', 'orange', 'red', 'violet', 'pink', 'brown', 'black']
});
$(function () {
Highcharts.chart('prova',{
title: {
text: 'Distribuzione articoli'
},
xAxis: [{
title: { text: 'Anno' },
min: 2009,
max: 2017,
type: 'category'
}, {
title: { text: 'Mese' },
opposite: true,
}],
yAxis: [{
title: { text: 'Giorno' },
min: 0,
max: 12,
labels: {
step: 1,
}
}, {
title: { text: 'Sequenza temporale' },
opposite: true,
}],
series: [{
name: 'Sequenza temporale',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Articoli',
type: 'scatter',
data: data,
id: 's1',
marker: {
radius: 1.5
}
}]
})
})
})
</script>
<div id="prova" height="400px" width="800px"></div>