Providing data for a chart

You can add data to a chart in many different ways. You could provide data like this:

• An array of numbers

data: [1, 2, 3];

• An array of x/y pairs

data: [
  {
    x: 1990,
    y: 248709873,
  },
  {
    x: 2000,
    y: 281421906,
  },
  {
    x: 2010,
    y: 308745538,
  },
];

• Dictionary of arrays of x/y pairs

data: {
    Australia: [
        {
            x: 2010,
            y: 22019168
        },
        {
            x: 2011,
            y: 22357034
        },
        {
            x: 2012,
            y: 22729269
        },
    ],
    Canada: [
        {
            x: 2010,
            y: 33963412
        },
        {
            x: 2011,
            y: 34323531
        },
        {
            x: 2012,
            y: 34691878
        },
    ]
}

You can make a Chart by providing data like this:

c2mChart({
  type: "line",
  element: myElement,
  data: [1, 2, 3],
});

Additionally, you can provide the following metadata to any data point:

• label, which will be provided to the user as they navigate individual data points.
• custom, which is a payload that will never be surfaced to the user, but will be made available programmatically through functionality like onFocusCallback or getCurrent.
• children, which is used for hierarchical charts, such as treemaps.

For example:

data: [
  {
    label: "California",
    x: 250,
    y: 760,
    custom: {
      idRef: "b7b8ddca-6777-44a9-9bd3-b0ef89982708"
    }
  }

Plots with multiple categories

You can make grouped bar charts, multi-line line charts, etc, simply by providing multiple arrays of data.

In this example, the line chart will have 2 lines (Australia and Canada), each with 3 data points (for 2010, 2011, and 2012):

c2mChart({
  type: "line",
  element: myElement,
  data: {
    Australia: [
      {
        x: 2010,
        y: 22019168,
      },
      {
        x: 2011,
        y: 22357034,
      },
      {
        x: 2012,
        y: 22729269,
      },
    ],
    Canada: [
      {
        x: 2010,
        y: 33963412,
      },
      {
        x: 2011,
        y: 34323531,
      },
      {
        x: 2012,
        y: 34691878,
      },
    ],
  },
});

More complex chart types

You don't need to just provide y; You can also provide high or low. Here's a band plot example:

c2mChart({
  type: "band",
  element: myElement,
  data: [
    {
      x: 1,
      high: 100,
      low: 80,
    },
    {
      x: 2,
      high: 101,
      low: 79,
    },
    {
      x: 1,
      high: 99,
      low: 75,
    },
  ],
});

You can also include open or close. Here's a candlestick example:

c2mChart({
  type: "candlestick",
  element: myElement,
  data: [
    {
      x: 1,
      open: 90,
      high: 100,
      low: 80,
      close: 85,
    },
    {
      x: 2,
      open: 80,
      high: 101,
      low: 79,
      close: 90
    },
    {
      x: 1,
      open: 93,
      high: 99,
      low: 75,
      close: 80
    },
  ],
});

We also support boxplots. However, instead of the typical min and max, we use low and high instead:

c2mChart({
  type: "box",
  element: myElement,
  data: [
    {
      x: 1,
      high: 100,
      q3: 95,
      median: 90,
      q1: 85,
      low: 80,
      outlier: [140]
    },
    {
      x: 2,
      high: 101,
      q3: 90,
      median: 88,
      q1: 85,
      low: 79,
    },
    {
      x: 1,
      high: 99,
      q3: 96,
      median: 84,
      q1: 80,
      low: 75,
      outlier: [50, 58, 20]
    },
  ],
});

Multiple plot types

If you want to show multiple types of plots on the same chart, you can provide those types as an array.

Here's an example of a band plot AND a line plot.

c2mChart({
  type: ["band", "line"],
  element: myElement,
  data: {
    "Moving average": [
      {
        x: 1,
        high: 100,
        low: 80,
      },
      {
        x: 2,
        high: 101,
        low: 79,
      },
      {
        x: 3,
        high: 99,
        low: 75,
      },
    ],
    Close: [
      {
        x: 1,
        y: 88,
      },
      {
        x: 2,
        y: 90,
      },
      {
        x: 3,
        y: 93,
      },
    ],
  },
});

Alternative axes

This example shows a bar-line chart, where the bar and line charts are plotted against 2 different axes.

c2mChart({
  type: ["bar", "line"],
  element: myElement,
  data: {
    Volume: [
      {
        x: 1,
        y: 100000,
      },
      {
        x: 2,
        y: 110000,
      },
      {
        x: 3,
        y: 108000,
      },
    ],
    ClosingPrice: [
      {
        x: 1,
        y2: 115.29,
      },
      {
        x: 2,
        y2: 130.06,
      },
      {
        x: 3,
        y2: 110.18,
      },
    ],
  },
});