FP API

Chart Tutorials  

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 more series

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

🔗Add more points to first series.

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

🔗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.

Returns point collection.

chart.series().points();

🔗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.tokenValue("%yValue") > 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());