3 argument. Noll beroenden.

Flerserie-temperatur

30 dagars data med tidsväljare (24h/7d/30d + eget intervall). Synkad crosshair-grupp. Null-lucka i utomhusdata, streckad linje, referenslinje vid 21°C.

ced.chart('#chart-line', data, {
  keys: ['indoor', 'outdoor'],
  unit: '°C',
  dash: ['outdoor'],
  mark: 21,
  connectNulls: false,
  range: true,
  group: 'dashboard'
})

Effektförbrukning

Ytfyllning med gradient. Synkad till samma crosshair-grupp som temperaturdiagrammet ovan.

ced.chart('#chart-area', data, {
  keys: ['power'],
  type: 'area',
  unit: 'kW',
  range: true,
  group: 'dashboard'
})

Månadsförbrukning

Kategorisk X-axel (månadsnamn), referenslinje vid mål 90 MWh.

ced.chart('#chart-bar', monthlyData, {
  keys: ['energy'],
  type: 'bar',
  unit: 'MWh',
  xKey: 'month',
  mark: 90
})

Energisignatur

Dygnsmedelvärden — effekt mot utomhustemperatur. 30 dagar, klassisk HVAC-energisignatur.

ced.chart('#scatter', dailyAvg, {
  keys: ['power'],
  type: 'scatter',
  unit: 'kW',
  xKey: 'outdoor'
})

Energiuppdelning

Staplade staplar — värme, kyla och belysning per månad. stacked: true.

ced.chart('#stacked-bar', data, {
  keys: ['heating', 'cooling', 'lighting'],
  type: 'bar',
  unit: 'MWh',
  xKey: 'month',
  stacked: true
})

Effektfördelning

Staplade ytor — samma data som ovan, men som area-diagram med gradient.

ced.chart('#stacked-area', data, {
  keys: ['indoor', 'outdoor', 'power'],
  type: 'area',
  unit: '°C',
  stacked: true,
  range: true
})

Stora värden

Auto-SI: 45000 → 45K. Fungerar i axlar och tooltips. Anpassad fmt-funktion stöds också.

ced.chart('#si', data, {
  keys: ['kwh'],
  type: 'bar',
  unit: 'kWh',
  xKey: 'month'
  // Auto SI: 45000 → 45K
  // Or custom: fmt: v => (v/1000).toFixed(0) + 'K'
})

Temperatur + Effekt

Vänster axel: °C (inne + ute). Höger axel: kW (effekt). Ytfyllning på inne, streckad ute.

ced.chart('#chart-dual', data, {
  keys: ['indoor', 'outdoor', 'power'],
  unit: '°C',
  right: ['power'],
  rightUnit: 'kW',
  dash: ['outdoor'],
  fill: ['indoor'],
  range: true,
  marks: [
    { y: 21, label: 'Börvärde', color: 'ok' },
    { y1: 20, y2: 22, color: 'ok' }
  ]
})

Komfortzon + Larm

Grönt komfortband (20–22°C), röd larmlinje vid 25°C. Mjuk interpolation.

ced.chart('#marks', data, {
  keys: ['indoor'],
  unit: '°C',
  smooth: true,
  marks: [
    { y1: 20, y2: 22, color: 'ok' },
    { y: 25, label: 'Larm', color: 'er' }
  ]
})

Dashboard — temperatur + effekt

Två diagram, samma data, synkad crosshair och tidsväljare. Hovra över ett diagram — det andra följer. ECharts saknar denna funktion.

// Samma data, samma group — crosshair + range synkas automatiskt
const data = await fetch('/api/readings').then(r => r.json());
ced.chart('#temp', data, {
  keys: ['indoor','outdoor'], unit: '°C',
  dash: ['outdoor'], mark: 21,
  range: true, group: 'sync-demo'
});
ced.chart('#power', data, {
  keys: ['power'], type: 'area', unit: 'kW',
  range: true, group: 'sync-demo'
});

API

/* Minimalt — 15 tokens */
ced.chart('#el', data, ['indoor', 'outdoor'])

/* Med alternativ — fortfarande ~25 tokens */
ced.chart('#el', data, {
  keys: ['indoor', 'outdoor'],
  unit: '°C',
  mark: 21,
  range: true        // tidsväljare: 24h/7d/30d + eget
})

/* Returvärde */
const c = ced.chart('#el', data, ['indoor'])
c.update(newData)   // byt data
c.resize()          // tvinga omlayout
c.destroy()         // städa upp