Multiple years (time-series) in one overview? `xs`?

[davidhund]

I am trying to display a line chart (timeseries) of multiple years but plotted in one year overview. However, not all years have data for the same days.

So I need a view somewhat like: https://naver.github.io/billboard.js/demo/#Chart.TimeseriesChart But dealing with multiple years on the x-axis.

So, I have the following: data for years 2019-2021 My problem is: at the x axis (datum) does not overlap.

I'd like to see just 12 months on the x axis and all data for 2019, 2020 and 2021 'overlapping' in the same 'view'..

I believe this should be possible/done with xs but I could you help me get started?

[netil]

Hi @davidhund, can you share the options used to generate the chart as seen in the screenshot?

[davidhund]

Sure @netil — it's something like...

let chart = bb.generate({
    bindto: `#chart`,

    data: {
        xs: xsArr,
        xFormat: `%Y-%m-%d`,
        columns: columnsArr,
    },

    axis: {
        x: {
            type: `timeseries`,
            tick: {
                outer: false,
                fit: false,
                format: `%d-%m`,
            },
        },
        y: {
            min: 0,
            padding: { bottom: 0 },
            tick: {
                outer: false,
            },
        },
    },

    line: {
        connectNull: true,
    },

    point: {
        r: 2,
    },

    grid: {
        y: { show: true },
    },

    padding: {
        top: 24,
        right: 24,
        bottom: 24,
    },

    zoom: {
        enabled: {
            type: `drag`,
        },
    },

    transition: { duration: 300 },
});

PS: I do config some little things later (such as axis.y.tick.format for currency)

[netil]

@davidhund, if you apply different time period using xs can't achieve to being overlapped each year's dataset.

Because, the timeseries x Axis type will scale based on the whole time period indicated. Below example will scale in a period of 2019-01-01 ~ 2021-06-01.

    data: {
        xs: {
	  2019: "x1",
	  2020: "x2",
	  2021: "x3"
	},
        xFormat: `%Y-%m-%d`,
        columns: [
		["x1", "2019-01-01", "2019-02-01", "2019-03-01", "2019-04-01", "2019-05-01", "2019-06-01"],
		["x2", "2020-01-01", "2020-02-01", "2020-03-01", "2020-04-01", "2020-05-01", "2020-06-01"],
		["x3", "2021-01-01", "2021-02-01", "2021-03-01", "2021-04-01", "2021-05-01", "2021-06-01"],
		["2019", 50, 120, 80, 90, 100, 111],
		["2020", 150, 50, 95, 70, 150, 131],
		["2021", 25, 70, 110, 90, 59, 75],
	],
    },
    axis: {
        x: {
            type: `timeseries`,
        }
}

So, if you want each year's dataset to be represented as same level, you need to use indexed or category axis type.

    data: {
        x: "x",
        columns: [
		["x", "01-01", "02-01", "03-01", "04-01", "05-01", "06-01"],
		["2019", 50, 120, 80, 90, 100, 111],
		["2020", 150, 50, 95, 70, 150, 131],
		["2021", 25, 70, 110, 90, 59, 75],
	],
    },

    axis: {
        x: {
		type: "category",

[davidhund]

@netil Thank you for your reply!

Using category I can overlap the lines but I am not sure what the difference is between timeseries and category when using the same data...

But I must use a different value for xs, right? Because the date (x axis) does not correctly show the proper date and the tooltip also shows a wrong date.

Must I display the date as a simple String (e.g. "01-01") instead of a Date object?

[netil]

@davidhund, checkout the differences of each x Axis' type. By modifying x Axis' value you can understand how it scales.

• https://jsfiddle.net/netil/6ctejnq9/

[davidhund]

@netil thanks so much for your responses and your time 🙏

I think I understand the differences between axis type. I believe I need category for my use-case

However: My data has different 'categories' and values. But it seems only the first x is used?

If you check my example:

https://jsfiddle.net/5w7kcqxn/6/

.. you can see the x1 Axis is used ("abc1" - "abc-4") but e.g. data3 is shown with a value of 60 at "abc1", but this x3 value is "abc3".

In my chart the xs "Abcx" should be a 'date' (e.g. "30-03") and the values can, of course, not fall in the same date... I am not sure I explain this clearly, but I hope you can see my point. Why are only categories from x1 shown?

[netil]

categroy type isn't only option to overlap data series.

If each year's data values are shown in different days, but when x Axis values range flows within same level, they will be displayed as olverlapped.

Assume that representing one month data. The days will be in a range of 1 ~ 31. Indicating corresponding xs value for each data series, they will be shown based on the xs value indicated.

bb.generate({
	bindto: "#chart",
	data: {
		xs: {
			2019: "x1",
			2020: "x2",
			2021: "x3"
		},
		columns: [
			["x1", 1, 10, 20, 30],
			["x2", 5, 8, 15, 30],
			["x3", 10, 20, 22, 30],

			["2019", 10, 20, 30, 40],
			["2020", 10, 20, 30, 40],
			["2021", 10, 20, 30, 40]
		],
	},
});

[JankoKrsmanovic]

Can i fix this values down here (1 5 8 10 15 20 22 30) i want for example (5 10 15 20 25 30)