Agricultural economics · Thünen Institute of Farm Economics / University Bonn
Published
Edited
Dec 21, 2020
1 fork
1 star
{
let c = DOM.canvas(width, width / 2.4);
new Chart(c.getContext("2d"), {
type: 'bar',
data: {
labels: ["Seattle", "San-Diego", "New-York", "Chicago", "Los-Angeles"],
datasets: [
{
label: "Supply capacity of plants (cases)",
backgroundColor: "#3e95cd",
data: [mutable supply.Seattle, mutable supply['San-Diego']]
},
{
label: "Demand of markets (cases)",
backgroundColor: "#cd3e5c",
data: [
0,
0,
mutable demand['New-York'],
mutable demand.Chicago,
mutable demand['Los-Angeles']
]
}
]
},
options: {
dragData: true,
dragDataRound: -1,
dragOptions: {
showTooltip: true
},
onDragEnd: (e, datasetIndex, index, value) => {
e.target.style.cursor = 'default';
if (datasetIndex === 0) {
// the supply data was changed!
if (index === 0) {
mutable supply = { ...mutable supply, Seattle: value };
} else {
mutable supply = { ...mutable supply, 'San-Diego': value };
}
} else {
// the demand data was changed!
if (index === 2) {
mutable demand = { ...mutable demand, 'New-York': value };
} else if (index === 3) {
mutable demand = { ...mutable demand, Chicago: value };
} else {
mutable demand = { ...mutable demand, 'Los-Angeles': value };
}
}
},
hover: {
onHover: function(e) {
const point = this.getElementAtEvent(e);
if (point.length) e.target.style.cursor = 'grab';
else e.target.style.cursor = 'default';
}
},
scales: {
xAxes: [
{
stacked: true,
barPercentage: 1,
categoryPercentage: 0.8,
barThickness: 'flex'
}
],
yAxes: [
{
stacked: true,
ticks: {
max: 800,
min: 0
}
}
]
}
}
});
return c;
}
Chart = {
const Chart = (window.Chart = await require('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js'));
await require('https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@latest/dist/chartjs-plugin-dragdata.min.js').catch(
() => {}
);
return Chart;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
