Series Point Configuration

Chart Tutorials  

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 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" } /*...*/];

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.