Published (unlisted)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Changed in fork
-
html`<div id='container' style="height:400px;position:relative;"></div>`
+
container = html`<div style="height:400px;position:relative;"></div>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Changed in fork
picasso.chart({
-
element: document.querySelector('#container'),
+
element: container,
data, settings: { collections: [ { key: 'stacked', data: { extract: { field: 'Date', props: { line: { field: 'Band' }, end: { field: 'Percent' } } }, stack: { stackKey: d => d.value, value: d => d.end.value } } } ], scales: { y: { data: { collection: { key: 'stacked' } }, invert: true, expand: 0.2, min: 0, max: 100 }, t: { data: { extract: { field: 'Date' } } }, color: { data: { extract: { field: 'Band' } }, type: 'categorical-color', range: ['#E74C3C', '#F5B041', '#ABEBC6', '#2ECC71'] } }, components: [ { type: 'axis', dock: 'left', scale: 'y' }, { type: 'axis', dock: 'bottom', scale: 't' }, { key: 'lines', type: 'line', data: { collection: 'stacked' }, settings: { coordinates: { major: { scale: 't' }, minor0: { scale: 'y', ref: 'start' }, minor: { scale: 'y', ref: 'end' }, layerId: { ref: 'line' } }, layers: { curve: 'monotone', line: { show: false }, area: { fill: { scale: 'color', ref: 'line' } } } } }, { type: 'grid-line', x: { scale: 'x' }, y: { scale: 'y' }, ticks: { show: true, stroke: 'grey', strokeWidth: 0.2, strokeDasharray: '3, 3' }, minorTicks: { show: false, stroke: 'grey', strokeWidth: 0.2 } } ] } })
Insert cell
Removed in fork
data = generate_data();
Insert cell
Changed in fork
-
generate_data = function() { let arr = [['Date', 'Band', 'WIP', 'Percent']];
+
data = { const arr = [['Date', 'Band', 'WIP', 'Percent']];
-
d3.csv("https://gist.githubusercontent.com/gabovailati/c0adc579b96354caba4c3ee3e705a410/raw/83a605b2c170eaa2bdf056079688722624958944/agingwork.csv",
+
await d3.csv( "https://gist.githubusercontent.com/gabovailati/c0adc579b96354caba4c3ee3e705a410/raw/83a605b2c170eaa2bdf056079688722624958944/agingwork.csv",
function(d) { arr.push([
-
new Date(d.date).toLocaleString("en-GB", {
+
d3.timeParse(d.date).toLocaleString("en-GB", {
day: "2-digit", month: "short", timeZone: "Australia/Sydney" }), d.band, +d.wip, +d.percent ]); return {}; } ); return [ { type: 'matrix', data: arr } ]; }
Insert cell
Insert cell
Insert cell
Insert cell