Explore the API
  • Change X position
  • Change Y position
  • Change width
  • Change height
  • Change margins
-1-0.500.51Temperature [C]020406080Elapsed time [h]

description

The Widget component is the basis of all widgets (charts, etc). This example shows the available methods for this base component.

code

generate data

function getData () {
  return [{
    name: 'trend',
    values: Array.from({ length: 1000 }, (d, i) => ({
      x: i / 10,
      y: Math.sin(i / 100)
    }))
  }]
}

create chart

const chart = dalian.LineChart('myChart', '#widget')
  .data(getData())
  .width(0.8 * WIDTH)
  .height(0.7 * HEIGHT)
  .margins(40)
  .font.size(14)
  .bottomAxis.label('Elapsed time [h]')
  .leftAxis.label('Temperature [C]')
  .render(1000)

api methods

let changeX = () => {
  this.x = !(this.x || 0)
  chart.x(this.x ? 20 : undefined).render(1000)
}
let changeY = () => {
  this.y = !(this.y || 0)
  chart.y(this.y ? 20 : undefined).render(1000)
}
let changeWidth = () => {
  this.w = !(this.w || 0)
  chart.width(this.w ? 0.9 * WIDTH : 0.8 * WIDTH).render(1000)
}
let changeHeight = () => {
  this.h = !(this.h || 0)
  chart.height(this.h ? 0.8 * HEIGHT : 0.7 * HEIGHT).render(1000)
}
let changeMargins = () => {
  this.m = !(this.m || 0)
  chart.margins(this.m ? 50 : 40).render(1000)
}