I am fixing a chart used in a product. The issue is when the legend is selected the x-axis should change the dates according. Currently, the code of my graph is:
// initializing graph
var months_graph_by_visitors = ec.init(document.getElementById("analytify_months_graph_by_visitors"));
// graph functionality
var months_graph_by_visitors_option = {
tooltip: {
position: function (p) {
if (
$("#analytify_months_graph_by_visitors").width() - p[0] <=
200
) {
return [p[0] - 170, p[1]];
}
},
formatter: function (params, ticket, callback) {
var month_name = "";
if (params.seriesIndex == "0" && data.stats_data.this_month_users_data.length != 1 ) {
var s_date = moment(params.name, "D-MMM", true).format(
"MMM DD"
),
month_name = moment(s_date, "MMM DD", true)
.add(-1, "months")
.format("D-MMM");
} else {
month_name = params.name;
}
return (
params.seriesName +
"<br />" +
month_name +
" : " +
params.value
);
},
show: true,
},
color: [
data.stats_data.graph_colors.visitors_last_month,
data.stats_data.graph_colors.visitors_this_month,
],
legend: {
data: [
data.stats_data.visitors_last_month_legend,
data.stats_data.visitors_this_month_legend,
],
orient: "horizontal",
},
toolbox: {
show: true,
color: ["#444444", "#444444", "#444444", "#444444"],
feature: {
magicType: {
show: true,
type: comp_graph_type === 'bar' ? ["bar", "line"] : ["line", "bar"],
title: {
line: "line",
bar: "bar",
},
},
restore: { show: true, title: "Restore" },
saveAsImage: { show: true, title: "Save As Image" },
},
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: data.stats_data.date_data,
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: data.stats_data.visitors_last_month_legend,
type: comp_graph_type,
smooth: true,
itemStyle: {
normal: {
areaStyle: {
type: "default",
},
},
},
data: data.stats_data.previous_month_users_data,
},
{
name: data.stats_data.visitors_this_month_legend,
type: comp_graph_type,
smooth: true,
itemStyle: {
normal: {
areaStyle: {
type: "default",
},
},
},
data: data.stats_data.this_month_users_data,
},
],
};
// Load data into the ECharts instance.
months_graph_by_visitors.setOption(months_graph_by_visitors_option);
I want to change the values of x-axis when the legend is selected. The legend has two options:
- visitor this month
- visitor last month
Now if I click on visitor this month the xaxis should have this month’s date and vice-versa.
In current code only data.stats.date_data show current month date. But I have fixed this by sending data to two variables data.stats.this_month_date_data and data.stats.previous_month_date_data. But I cannot be able to show this in the graph. I read the documentation of echarts and over there the following way was mentioned:
myChart.on('legendselectchanged', function(params) {
// State if legend is selected.
var isSelected = params.selected[params.name];
// print in the console.
console.log(
(isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name
);
// print for all legends.
console.log(params.selected);
});
I tested this but no data was logged. Can anyone guide me in this issue so that I can fix the issue.
Your echarts instance is calles
months_graph_by_visitors
notmyChart
.I know. That is a typo. But by using months_graph_by_visitors still the legend events do not worked.
I would need to know what is stored in your variables, for example
data.stats_data.visitors_last_month_legend
. Pls make a minimal reproducable example, preferibly in the echarts editor.