Skip to main content

Series Point Configuration

Demonstrates how to populate the chart with data including CSV format.

Populating Data

Points can be represented as simple arrays to reduce the amount of text necessary to add points, or as expanded objects with access to all properties.

Simple Arrays

When specifying a point as an array the following types are supported:

[x,y]
[name,y]

Examples:
A numeric x axis:
{
  series: [
    {
      name: "series 1",
      points: [[1, 10], [2, 16], [3, 8], [4, 12], [5, 18]]
    }
  ]
}
A category x axis
{
  series: [
    {
      name: "series 1",
      points: [["one", 10], ["two", 16], ["three", 8], ["four", 12], ["five", 18]]
    }
  ]
}
A date x axis
{
  series: [
    {
      name: "series 1",
      points: [
        [new Date(2012, 0, 1), 10],
        [new Date(2012, 0, 2), 16],
        [new Date(2012, 0, 3), 8],
        [new Date(2012, 0, 4), 12],
        [new Date(2012, 0, 5), 18]
      ]
    }
  ]
}
A category x axis:
{
  series: [
    {
      name: "series 1",
      points: [["1/1/2012", 10], ["1/2/2012", 16], ["1/3/2012", 8], ["1/4/2012", 12], ["1/5/2012", 18]]
    }
  ]
}
A date x axis using string x values.
{
  xAxis_scale_type: "time",
  series: [
    {
      name: "series 1",
      points: [["1/1/2012", 10], ["1/2/2012", 16], ["1/3/2012", 8], ["1/4/2012", 12], ["1/5/2012", 18]]
    }
  ]
}
Note: Note that the previous example uses a time scale because a time scale is specified for the x axis which causes the chart to attempt to evaluate x values as such.

Specifying additional point settings

Additional point settings that are shared across all points in a chart can be set through the defaultPoint property. For example:
defaultPoint: {
  opacity: 0.5;
}
Additional point settings shared by all points in a series can be set through the series.defaultPoint property. For example:
series: [
  {
    defaultPoint: { opacity: 0.5 },
    points: [
      /*...*/
    ]
  }
];

Expanded points

The advantage of using expanded point data is that point specific data can be set that differs from one point to the next.

points: [{ x: 5, y: 5, tooltip: "%xValue - %yValue" } /*...*/];
Reference:
Point Labels Sample Specifies point specific label settings

Efficient Series Data Arrays

Point data can also be populated by using an object that defines points data in a more efficient format designed for database usage as follows:

Consider the following series data:

{
  series: [
    {
      name: "Series 0",
      points: [
        { name: "Mason", y: 29, z: 177, attributes: { distance: 1 } },
        { name: "Andrew", y: 45, z: 66, attributes: { distance: 0 } },
        { name: "Levi", y: 65, z: 99, attributes: { distance: 2 } },
        { name: "Samuel", y: 83, z: 148, attributes: { distance: 1 } },
        { name: "Jordan", y: 66, z: 120, attributes: { distance: 0 } }
      ]
    }
  ]
}

This can be rewritten in the following shorter format using an object for points property.

{
  series: [
    {
      name: "Series 0",
      points: {
        mapTo: "name,y,z,attributes.distance",
        data: [
          ["Mason", 29, 177, 1],
          ["Andrew", 45, 66, 0],
          ["Levi", 65, 99, 2],
          ["Samuel", 83, 148, 1],
          ["Jordan", 66, 120, 0]
        ]
      }
    }
  ]
}

The difference in size is considerable even with 5 data points.

PageDescription
Custom AttributesUsing custom point attributes.
Statistics And CalculationsDescribes how to perform calculations on data in the chart.