Title is self explanatory. I have no experience in JavaScript but I need to use it for this project...I am utilizing eCharts to display the data in a graph.
CSV Data (About 2000 more lines like this):
Collection Name,Rank,Volume,Change in the last 24h,Change in the last 7 days,Floor
Price,Owners,Amount of items
The Degenaissance,50,77.96,+414.26%,+202.70%,1.44,2.3K,2.5K
I can also take out the name of the categories if necessary (like I said, I have no idea how this works).
JS-Code that I could come up with until now (pretty much just copy-pasted from echarts):
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [600, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
The data from the .csv should end up in series[]. Is there like a function that I can use to directly pull the data from line... and input it to the variable... ect.? Or what would be a good approach to this? Thank you so much in advance!
Related
I have an echarts page with 6 grids and would like to customize tooltip in one of them to show custom HTML. However when I use the formatter option inside a grid object as in this simplified example below, my function never gets called and the tooltip is rendered as usual. The example below is slightly modified from echarts homepage.
Moving the callback function up into the top level tooltip: {} section does fix this bug, but my in case I don't want to override tooltips for all of my charts, just one of them for that specific grid.
option = {
title: {
text: 'Stacked Area Chart'
},
tooltip: {},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
formatter: (params) => {
console.log("In callback")
return 'TEST';
}
}
},
xAxis: [
{
type: 'category',
gridIndex: 0,
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
gridIndex: 0,
type: 'value'
}
],
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
Fully renderable example.
I use Echart v5.4, and want to emphasize tooltip marker with border like https://tensorboard.dev/experiment/QFRIzZJpTZCNRzi8N7zomA/#scalars
When line chart is hovered, I want to have border around the marker.
I edited the formatter in tooltip option, but it didnt work well.
Is there any good way to make it work?
option = {
tooltip: {
trigger: 'axis',
formatter: (params) => {
let tooltip = `<p>${params[0].marker} ${params[0].seriesName}</p>`
tooltip += `<p>${params[1].marker} ${params[1].seriesName}</p>`
return tooltip
}
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
I see this example in Apache ECharts
https://echarts.apache.org/examples/en/editor.html?c=line-stack
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '折线图堆叠'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
option && myChart.setOption(option);
Now that ECharts v5.x has support to specify encode , is it possible to create the above chart using encode instead of specifying data array for each series?
What i am looking for is something on these lines
option = {
title: {
text: 'Some Title'
},
tooltip: {
trigger: 'axis'
},
dataset:{
source:[
['XAxis_Column_Name','Series_Column_Name','YAxis_Column_Name'],
['x1','s1',10],
['x2','s2',20],
['x3','s1',40],
['x4','s1',70],
['x5','s2',90],
['x5','s1',100],
['x6','s3',120],
]
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
encode:{
x: "XAxis_Column_Name"
}
},
yAxis: {
type: 'value',
encode:{
y: "YAxis_Column_Name"
}
},
series: [
{type: 'line'},
{type: 'line'},
{type: 'line'}
]
};
The end result should be a line chart with 3 lines (one each for s1, s2 and s3). Any help here is much appreciated. I don't want to deal with data extraction and segregating them into arrays for each series
i want ro remove that custom color and add that color as loop like first color red then green .odd even odd even.
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
itemStyle: { color: 'green'},
},
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210],
itemStyle: { color: 'red'},
}
]
};
Your plan is perfect, what's stopping you do it? What the problem blocks the next steps?
Update: please don't separate question to title and body, I hardly understood what you mean. Title should contain only short summary of question.
Answering your question: the easiest option for control colors is generation series with precomputed color.
Something like this:
var myChart = echarts.init(document.getElementById('main'));
var data = [
[120, 132, 101, 134, 90, 230, 210],
[340, 280, 310, 360, 280, 310, 410],
[520, 532, 490, 480, 520, 550, 570],
[760, 732, 790, 780, 820, 750, 770],
[820, 932, 901, 934, 1290, 1330, 1320],
];
var series = data.map((sData, idx) => (
{
name: 'series' + idx,
type: 'line',
data: sData,
color: idx % 2 === 0 ? 'red' : 'green',
}
))
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: series,
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.7.0/dist/echarts.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I am using highcharts and looking for sultion something like
this graph
I have treid below code
var options = {
chart: {
type: 'line'
},
yAxis: [{}],
xAxis: [{
categories: ['20 Apr', '21 Apr', '22 Apr', '23 Apr', '24 Apr', '25 Apr',
'26 Apr'],
crosshair: true
}],
series: [{
name: 'sms sent',
yAxis: 0,
data: [200, 150, 170, 180, 190, 120, 254 ]
}, {
name: 'sms delivered',
yAxis: 0,
data: [210, 240, 270, 280, 240, 210, 190]
}, {
name: 'click through',
yAxis: 0,
data: [190, 210, 230, 240, 220, 254, 223]
}, {
name: 'leads',
yAxis: 0,
data: [240, 274, 250, 220, 254, 263, 270]
}, {
name: 'orders',
yAxis: 0,
data: [ 123, 174, 120, 110, 100, 154,145]
}, {
name: 'revenue generated',
yAxis: 0,
data: [200, 100, 400, 300,363, 254,245]
}]
}
var chart = Highcharts.chart('graph',options);
but it is showing only one series.
But I need as shown in image above.
So how can I do that?