{ let tooltipDisplay = "" let chartDom = document.getElementById('echart'); let chart = echarts.init(chartDom, null, { locale: 'ES' }) // TODO operationalize interpolating missing AVISITN // Figure out the best interval to do so, here it's 2 // Then we use that 2 as the xAxisInterval // and then you can fill in "" at the positions that dont exist in AVIST let allvisitsn = [ 0, 2, 4, 6, 8, 10, //interpolated 12, 14, //interpolated 16, 18, //interpolated 20, 22, //interpolated 24, 26 ] let allvisits = [ "Baseline", "Week 2", "Week 4", "Week 6", "Week 8", "", //interpolated "Week 12", "", //interpolated "Week 16", "", //interpolated "Week 20", "", //interpolated "Week 24", "Week 26" ] let emphasisStyle = { focus: 'series', itemStyle: { color: 'black' } }; let subjects = unique(data, 'USUBJID') let seriesDataLine = subjects.map((subj) => { return ({ name: data.filter((d) => d.USUBJID === subj)[0].TRTA, type: 'line', data: data.filter(d => d.USUBJID === subj).map(d => ([d.AVISITN, d.AVAL, d.USUBJID])), //triggerLineEvent: true, //symbol: 'circle', //symbolSize: 6, seriesLayoutBy: 'row', emphasis: {focus: 'series'}, //itemStyle: { // color: color_switch(data.filter((d) => d.USUBJID === subj)[0].TRTA) //}, //value: subj, }) }) let options = { legend: { show: true }, xAxis: { type: "value", data: allvisits, min: Math.min(...allvisitsn), max: Math.max(...allvisitsn), interval: 2, axisLabel: { rotate: 30, formatter: function(value, index) { return `${allvisits[allvisitsn.indexOf(value)]}` } }, axisTick: { show: false, }, axisLine: { show: false }, splitLine: { show: false } }, yAxis: { min: Math.min(...data.map((d) => d.AVAL)), max: Math.max(...data.map((d) => d.AVAL)), type: 'value' }, series: seriesDataLine, tooltip: { //trigger: "axis", //axisPointer: { type: "none" }, formatter: (params) => { return tooltipDisplay; } }, brush: { toolbox: ["rect"] }, grid: { containLabel: true }, toolbox: { right: 10, feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } } } chart.setOption(options) /* chart.on("mouseover", function (params) { console.log(params) // I dont think we can increase the radius of the symbol // because this is a line subtype, not circle // we could potentially overlay a scatter if this was important if (params.componentSubType == "symbol") { console.log("symbol") } if (params.componentSubType == "line") { tooltipDisplay = ` Subject: ${params.value[2]}
Treatment: ${params.seriesName}
AVAL: ${params.value[1]}
VISIT: ${allvisits[allvisitsn.indexOf(params.value[0])]}
`; } }); chart.on("mouseout", function (params) { tooltipDisplay = ""; }); // TODO chart.on("click", function(params) { console.log({ USUBJID: params.value[2], TRTA: params.seriesName, AVAL: params.value[1], AVISIT: allvisits[allvisitsn.indexOf(params.value[0])], AVISITN: params.value[0] }) }) // took this from a tutorial but clearly needs to be adapted chart.on('brushSelected', function (params) { var brushed = []; var brushComponent = params.batch[0]; for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) { var rawIndices = brushComponent.selected[sIdx].dataIndex; brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', ')); } chart.setOption({ title: { backgroundColor: '#333', text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'), bottom: 0, right: '10%', width: 100, textStyle: { fontSize: 12, color: '#fff' } } }); }); */ }

Purpose-built for displays of data