How do you make a combination chart with JSON data?

[brianjenkins94]

How would you configure data.keys.value and data.types to make a combination chart using JSON data as input?

Use case: Overlaying a trend line over area data supplied as JSON.

Best Guess:

const chart = bb.generate({
	bindto: "#JSONData",
	data: {
		json: {
			data1: [
				{ date: "2021-01-01", data: 1 },
				{ date: "2021-01-02", data: 2 },
				{ date: "2021-01-03", data: 3 }
			],
			data2: [
				{ date: "2021-01-01", data: 10 },
				{ date: "2021-01-02", data: 20 },
				{ date: "2021-01-03", data: 30 }
			],
			data3: [
				{ date: "2021-01-01", data: 100 },
				{ date: "2021-01-02", data: 200 },
				{ date: "2021-01-03", data: 300 }
			],
		},
		keys: {
			x: "date",
			value: ["data"]
		},
		type: "area",
		types: {
			data3: "line"
		}
	},
	axis: {
		x: {
			type: "timeseries"
		}
	}
});

References:

• https://naver.github.io/billboard.js/demo/#Chart.CombinationChart
• https://naver.github.io/billboard.js/demo/#Data.JSONData
• https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data%25E2%2580%25A4json
• https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data%25E2%2580%25A4types

[brianjenkins94]

Got it. Although it requires some data wrangling.

const chart = bb.generate({
	bindto: "#JSONData",
	data: {
		json: [
			{ date: "2021-01-01", data1: 1, data2: 10, data3: 100 },
			{ date: "2021-01-02", data1: 2, data2: 20, data3: 200 },
			{ date: "2021-01-03", data1: 3, data2: 30, data3: 300 }
		],
		keys: {
			x: "date",
			value: ["data1", "data2", "data3"]
		},
		type: "area",
		types: {
			data3: "line"
		}
	},
	axis: {
		x: {
			type: "timeseries"
		}
	}
});

Is there any other way to achieve this? I have to pass over my data multiple times to get it like this.

[netil]

The current supported JSON data formats are:

    json: {
        key: [value, ...], // (1)
        { key: value, ... }. // (2)
}

and JSON format data are handled by:

• https://github.com/naver/billboard.js/blob/master/src/ChartInternal/data/convert.ts#L136

If need to handle non supported format, it might needed implement your own data converter(or formatter).

[brianjenkins94]

So conceivably, something like this could add multi-series support:

if (Object.keys(json).every(element => !Array.isArray(element) && typeof element === "object" && element !== null)) {
	// handle multi-series
	Object.keys(json).forEach(convertJsonToData);
} else {
	// handle single-series
	Object.keys(json).forEach(key => {
		const tmp = json[key].concat();

		tmp.unshift(key);
		newRows.push(tmp);
	});

	data = this.convertColumnsToData(newRows);
}

[netil]

@brianjenkins94, would you like implement(contribute) this enhancement?

[brianjenkins94]

I'd consider it, but I don't understand well enough how data is represented in Billboard.js internally.