Hi am trying achieve below screenshot chart functionality with dataset but unable to draw it with date on x axis and trial id on Y axis as below chart example.
sample code
var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
var option = {
dataset: {
source: [
['score', 'amount', 'product','date'],
[89.3, 58212, 'NCT1928282','10-01-2021'],
[57.1, 78254, 'NCT1928283','11-10-2022'],
[74.4, 41032, 'NCT1928284','12-10-2000'],
[50.1, 12755, 'NCT1928284','12-10-2002'],
[89.7, 20145, 'NCT1928284','12-10-2003'],
[68.1, 79146, 'NCT1928284','12-10-2024'],
[19.6, 91852, 'NCT1928290','12-10-2015'],
[10.6, 101852, 'NCT1928251','12-10-2011'],
[32.7, 20112, 'NCT192820','01-10-2010']
]
},
xAxis: {
type:'category',
// formatter:'{c}'
},
tooltip:{},
yAxis: { type: 'category'},
series: [
{
type: 'bar',
encode: {
// Map "amount" column to x-axis.
x: 'date',
// Map "product" row to y-axis.
y: 'product'
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);* {
margin: 0;
padding: 0;
}
#chart-container {
position: relative;
height: 100vh;
overflow: hidden;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>World Population - Apache ECharts Demo</title>
</head>
<body>
<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
</body>
</html>sample screenshot which actually i want to draw
