Search code examples
node.jsechartsjsdom

Is there a way in Echarts to show a series chart for a full day then plot the values onto it?

I'm building a pet project to help manage my diabetes. I'm totally new to echarts so if I could get some pointers I would much appreciate it.

What I'm asking is, is there a way to show a chart (per day) and show the empty space if a value has not been entered for that time. I'm using JSDOM to export images for each day and attached them to a pdf later.

What is currently happening is, the chart starts at the first entered value and ends with the last, which you should be able to see in the attached image.

example

I'd like the chart to start at 00:00 and end at 23:59 what ever makes sense there. Then add my readings to the daily chart. Is this possible with echarts?

I've attached my option object:

const option = {
    title: {
        textStyle: {
            color: '#000000'
        }
    },
    dataset: {
        source: eval(chartData),
        dimensions: [{name: 'timestamp', type: 'time'}, {name: 'reading', type: 'float'}]
    },
    xAxis: {
        type: 'time',
        name: 'Time',
    },
    yAxis: {
        type: 'value',
        name: 'mmol/L',
        nameLocation: 'middle',
        nameTextStyle: {
            color: '#000000',
            fontSize: 15,
            padding: 15,
            fontStyle: 'italic',
            fontWeight: 'normal'
        }
    },
    tooltip: {
        trigger: 'axis'
    },
    series: [{
        name: 'reading',
        type: 'scatter',
        color: '#000000',
        encode: {
            x: 'timestamp',
            y: 'reading'
        },
        radius: '100%',
        smooth: true,
        markArea: {
            itemStyle: {
                color: 'rgba(210,210,210,0.4)'
            },
            data: [ [{
                yAxis: '4'
            }, {
                yAxis: '10'
            }]]
        },
        padding: '0',
        margin: '0',
        showSymbol: true
    }]
};

Thanks for any help :)

Solution

  • If I understood correctly, do you need a continuous line from 00:00 to 23:59? Echarts doesn't know which value is the starting and ending point, so it takes the first and the last.

    To get what you want, you need to fill in the blanks with zeros. Also try instead zeros use null.