billboard.js
billboard.js copied to clipboard
Multiple years (time-series) in one overview? `xs`?
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?
Hi @davidhund, can you share the options used to generate the chart as seen in the screenshot?
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)
@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`,
}
}
![](https://user-images.githubusercontent.com/2178435/112807531-fbeb1c80-90b2-11eb-8b3a-5a3502a9c89a.png)
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",
![](https://user-images.githubusercontent.com/2178435/112807575-09080b80-90b3-11eb-9c25-561f0a61fef4.png)
@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?
@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/
![](https://user-images.githubusercontent.com/2178435/112992230-f240e200-91a2-11eb-8e6c-ba539062bb9a.png)
@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?
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.
![](https://user-images.githubusercontent.com/2178435/113084426-ebed4d00-9218-11eb-806c-872edbe2525e.png)
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]
],
},
});
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)