Drawing Charts

In the previous chapter, we created a chart object through the chart class. For readability, we will use chart to represent this object. The chart object can be used for drawing and interaction. Next, we will explain the commonly used APIs on the object.

Essential APIs

The two most basic APIs required to draw a chart are plugins$ and data$:

• plugins$: In OrbCharts, a "Plugin" refers to an object used to draw SVG graphic elements. A chart is composed of one or more Plugins. The Plugins that can be used by the six types of chart objects must use the same data format. For example, Pie and PieLabels belong to Series, so they cannot be used in a chart object created by the GridChart class, but only in a chart object created by the SeriesChart class.

• data$: In OrbCharts, "Data" refers to the data to be presented by the chart. The six types of chart objects each have corresponding "Data" formats.

Simple example:

<div id="#chart"></div>

import { SeriesChart, Pie, PRESET_PIE_BASIC } from 'orbcharts'

const element = document.querySelector('#chart')

// Chart object created through the chart class
const chart = new SeriesChart(element, {
  preset: PRESET_PIE_BASIC
})

// plugins$
chart.plugins$.next([new Pie()])

// data$
chart.data$.next([
  [80,120,45],
  [50,30,15,28],
  [55,13,38,10,5]
])

TIP

You can easily select the corresponding Plugin according to the chart class through the Playground page.

Features and Considerations

All APIs that generate data in OrbCharts have the following features:

(1) All newly created data by the APIs will be merged and calculated, and the drawing function will be triggered.

(2) All parameters passed to the APIs are "optional". If no data or fields are created, default values will be used.

Feature 1 - All newly created data by the APIs will be merged and calculated, and the drawing function will be triggered

OrbCharts has many different APIs. After inputting data or parameters, the drawing function will be triggered:

chart.chartParams$.next(
  // ...
)
plugin.params$.next(
  // ...
)
chart.plugins$.next([plugin])
chart.data$.next(
  // ...
)
chart.dataFormatter(
  // ...
)

These data are transmitted in the form of RxJS data streams. They are first collected and merged within OrbCharts before being passed to the drawing function. Therefore, OrbCharts will try to avoid repeated calculations and will only perform one rendering of the SVG elements.

To perform a second rendering, the condition is that the event of passing in data itself is an asynchronous behavior:

chart.chartParams$.next(
  // ...
)
plugin.params$.next(
  // ...
)
chart.plugins$.next([plugin])
chart.data$.next(
  // ...
)
// Asynchronous
setTimeout(() => {
  chart.dataFormatter(
    // ...
  )
}, 1000)

In this example, setTimeout is an asynchronous event, so the chart will be rendered once at the 0th second and a second time at the 1st second.

Feature 2 - All parameters passed to the APIs are "optional". If no data or fields are created, default values will be used.

All data input APIs are optional. In the case of multiple object fields, each field is also optional.

For example, suppose the default value of the chartParams API is (not real data, simplified for explanation):

{
  padding: {
    top: 60,
    right: 60,
    bottom: 60,
    left: 60
  },
  fontSize: '0.875rem'
}

When I perform this data input operation:

chart.chartParams$.next({
  padding: {
    bottom: 100
  }
})

The final merged data will fill in the missing fields with default values:

{
  padding: {
    top: 60,
    right: 60,
    bottom: 100,
    left: 60
  },
  fontSize: '0.875rem'
}

All data input APIs are handled according to this rule.