Series Data - Steema/TeeChartJS GitHub Wiki

Adding data to series

Data is added to a chart using Series objects.

Multiple series can exist in the same chart. Each series can be of a different type ( Line, Area, Bar, Pie, etc) so you can mix several styles altogether.

Direct data

The simplest way to add data to a chart is by passing an array of values at chart construction time:

var Chart1=new Tee.Chart("canvas1", [ 5,6,2,9,1] );

This creates a new series object of type Tee.Bar by default, and assigns the array to series.data.values property.

Multiple series are created when passing a multi-dimensional array:

var Chart1=new Tee.Chart("canvas1", [ [ 5,6,2,9,1], [ 8,4,3,7,5] ] );

The default series style Tee.Bar can be changed passing a type parameter:

var Chart1=new Tee.Chart("canvas1", [ [ 5,6,2,9,1], [ 8,4,3,7,5] ] , Tee.Area);

Creating series

Series are manually added into a chart using the addSeries method:

var bar=Chart1.addSeries(new Tee.Bar());

By default series are empty, they contain no data.

Populating series

For testing purposes its handy to add random values, for example:

Chart1.addSeries(new Tee.Line()).addRandom(1000);   // Thousand random points

Data can be specified inline when creating the series:

Chart1.addSeries(new Tee.Pie( [ 10, 20, 30, 40 ] ));

All data is stored under the series data property arrays.

You can access and modify data directly:

var a = new Tee.Area();
Chart1.addSeries(a);
a.data.values =  [ 10, 20, 30, 40 ];

Adding data from other sources

Several helper functions are provided in a separate script (teechart-table.js) to import data from different sources (see the online demos for details), for example:

  • From a textarea html element:
Chart1.addSeries(new Tee.Bar(document.getElementById("data")) );
<textarea id="data" rows="20" cols="20" wrap="off">
 7,Apples
 4
 3,Oranges
 9
 1,Banana
 6,Kiwis
 2
</textarea>
  • From a table html element:
Chart1.fromTable('table1', Tee.Bar, true, 0,0);
<table id=”table1”>...</table>
  • From a text file URL:
// Warning: data file url should be at “same domain origin”
Chart1.addSeries(new Tee.Bar(“http://myweb.com/mydata.txt”));

Note the data file url should be at “same domain origin”

  • From another series in same or different chart. Simply assign the “data” property from one series to another:
Chart1.series.items[0].data = Chart2.series.items[3].data;
  • From xml formatted text:
var b=Chart1.addSeries(new Tee.Bar());
b.loadXML(document.getElementById("xml"));
<textarea id="xml" rows="10" cols="60" "wrap="off">
  <series name="Friends" color="Blue" metric="Quantity">
    <point name="Facebook" value="123"/>
    <point name="Twitter" value="456"/>
    <point name="Google+" value="789"/>
  </series>
</textarea>
  • From JSON formatted text:
var b=Chart1.addSeries(new Tee.Bar());
b.loadJSON(document.getElementById("json"));

Series Title

Series have a default title string property that is used at chart legend

When series are added to a chart, title is assigned to “Series” plus the series index in the Chart1.series.items array (“Series1”, “Series2” and so on).

You can override the default title:

bar.title = “My Data”;

Series Labels

Each series point has an associated text label. By default labels are empty, you can modify them using the data.labels property:

a.data.labels =  [ “a”, “b”, “c”, “d” ];

Some series allow specifying point positions or other point parameters.

For example, Line and PointXY series can optionally display each line segment or point at a specific “X” axis coordinate:

var p = new Tee.PointXY();
p.data.values = [5, 7, 9];
p.data.x = [0.23, 14, 16];
Chart1.addSeries(p);

Other series like Bubble have a data.radius array, and Candle series have data.open, data.close, data.high and data.low arrays.

⚠️ **GitHub.com Fallback** ⚠️