FP API

Functional programming API features and usage.

Introduction

Charts are relatively simple libraries. But initializing charts and updating them often uses different API that is limiting and more complicated.

With JSC, initializing charts is as simple as updating them in real-time. A common functional programming API makes selecting and modifying a set of chart items as simple as using jquery to work with HTML.

Examples

Setting chart data

chart.options({
  series: [
    {
      name: "Purchases",
      points: [
        {
          x: "Jan",
          y: 10
        }
      ]
    }
  ]
});

Add a series to the chart

chart.series.add({
  name: "Purchases",
  points: [
    {
      x: "Jan",
      y: 10
    }
  ]
});

Add points to the first series

chart.series(0).points.add({ x: "Feb", y: 12 });

Add multiple points to the first series

You can add multiple points to the chart more efficiently by passing an array of point options.

chart.series(0).points.add([{ x: "Feb", y: 12 }, { x: "Mar", y: 15 }]);

Get series/points

By index

When passing numeric argument to this collection function, it returns the actual series object.

chart.series(0)

By id or name

When passing a string argument to this collection function, it also returns the actual series object.

chart.series(IdOrName)

All points on a chart

Selects all series, then all points of those series. Returns a point collection.

chart.series().points()

Calendar point by date

Use this with calendar charts. A numeric date value will also work.

chart.series().points("1/5/2023");

Highlight today on a calendar chart.

chart
  .series()
  .points(Date.now())
  .options({ selected: true });

Select points along a hierarchical path

All points from 'id1' up the hierarchy.

chart.series().points(["id1", "up"])

See the Organizational and Gantt Hierarchy Styling Tutorial for more on working with tree data.

All series with point y value sum > 500

Returns a collection of series for which the function returns true.

chart.series(series => series.tokenValue("%sum") > 500)

Make all points > 100 red

chart
  .series()
  .points(point => point.options("y") > 100)
  .options({ color: "red" })

Make series with highest y value sum red

The '%maxSeriesName' token returns the series name, and when a name is passed to the series collection, it finds the series with that name.

chart.series(chart.tokenValue("%maxSeriesName")).options({ color: "red" })

Get X Axis

chart.axes({ prefix: "x" }); // returns a collection
chart.axes("x"); // returns the (or the first) X axis.

Add AxisMarker to the X axis

chart.axes("x").markers.add({ value: 5, color: "blue" })

Remove all axis markers from all axes

chart
  .axes()
  .markers()
  .each(m => m.dispose());