Chart

var chart = bb.generate({
 data: {
   columns: [
	    ["x", "2015-11-02", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01"],
	    ["count1", 11, 8, 7, 6, 5 ],
	    ["count2", 9, 3, 6, 2, 8 ]
  ]}
}

Methods

axis:labels(labels)

Source:

• billboard.js, line 10271

Example

// Update axis' label
chart.axis.labels({
  x: "New X Axis Label",
  y: "New Y Axis Label"
});

Parameters:

categories(categories)

Source:

• billboard.js, line 10088

Example

chart.categories([
     "Category 1", "Category 2", ...
]);

Parameters:

category(i, category)

Source:

• billboard.js, line 10069

Example

chart.category(2, "Category 3");

Parameters:

color(id)

Source:

• billboard.js, line 10124

Example

chart.color("data1");

Parameters:

data(targetIds)

Source:

• billboard.js, line 9984

Example

// Get only data1 data
chart.data("data1");

// Get data1 and data2 data
chart.data(["data1", "data2"]);

// Get all data
chart.data();

Parameters:

data:shown(targetIds)

Source:

• billboard.js, line 10012

Example

// Get shown data by filtering to include only data1 data
chart.data.shown("data1");

// Get shown data by filtering to include data1 and data2 data
chart.data.shown(["data1", "data2"]);

// Get all shown data
chart.data.shown();

Parameters:

defocus(Target)

Source:

• billboard.js, line 8990

Example

// data1 will be faded out and the others will be reverted.
chart.defocus("data1");

// data1 and data2 will be faded out and the others will be reverted.
chart.defocus(["data1", "data2"]);

// all targets will be faded out.
chart.defocus();

Parameters:

destroy()

Source:

• billboard.js, line 10406

Example

chart.destroy();

flow(args)

Source:

• billboard.js, line 9370

Example

// 2 data points will be apprended to the tail and popped from the head.
// After that, 4 data points will be appended and no data points will be poppoed.
chart.flow({
 columns: [
   ["x", "2013-01-11", "2013-01-21"],
   ["data1", 500, 200],
   ["data2", 100, 300],
   ["data3", 200, 120]
 ],
 done: function () {
   chart.flow({
     columns: [
       ["x", "2013-02-11", "2013-02-12", "2013-02-13", "2013-02-14"],
       ["data1", 200, 300, 100, 250],
       ["data2", 100, 90, 40, 120],
       ["data3", 100, 100, 300, 500]
     ],
     length: 0
   });
 }
});

Parameters:

flush()

Source:

• billboard.js, line 10389

Example

chart.flush();

focus(targetIdsValue)

Source:

• billboard.js, line 8963

Example

// data1 will be highlighted and the others will be faded out
 chart.focus("data1");

// data1 and data2 will be highlighted and the others will be faded out
chart.focus(["data1", "data2"]);

// all targets will be highlighted
chart.focus();

Parameters:

groups(groups)

Source:

• billboard.js, line 9760

Example

// data1 and data2 will be a new group.
 chart.groups([
    ["data1", "data2"]
 ]);

Parameters:

hide(targetIdsValue, options)

Source:

• billboard.js, line 9090

Parameters:

legend:show(targetIds)

Source:

• billboard.js, line 10325

Example

// Show legend for data1.
chart.legend.show("data1");

// Show legend for data1 and data2.
chart.legend.show(["data1", "data2"]);

// Show all legend.
chart.legend.show();

Parameters:

load(args)

Source:

• billboard.js, line 9270

Example

// Load data1 and unload data2 and data3
 chart.load({
    columns: [
       ["data1", 100, 200, 150, ...],
       ...
   ],
   unload: ["data2", "data3"]
 });

Parameters:

regions(regions) → {Array}

Source:

• billboard.js, line 9903

Example

// Show 2 regions
chart.regions([
   {axis: "x", start: 5, class: "regionX"},
   {axis: "y", end: 50, class: "regionY"}
]);

Parameters:

Returns:

Type

Array

regions:add(regions) → {Array}

Source:

• billboard.js, line 9923

Example

// Add a new region
chart.regions.add(
   {axis: "x", start: 5, class: "regionX"}
);

// Add new regions
chart.regions.add([
   {axis: "x", start: 5, class: "regionX"},
   {axis: "y", end: 50, class: "regionY"}
]);

Parameters:

Returns:

Type

Array

resize(size)

Source:

• billboard.js, line 10369

Example

// Resize to 640x480
chart.resize({
   width: 640,
   height: 480
});

Parameters:

revert(Target)

Source:

• billboard.js, line 9017

Example

// data1 will be reverted.
chart.revert("data1");

// data1 and data2 will be reverted.
chart.revert(["data1", "data2"]);

// all targets will be reverted.
chart.revert();

Parameters:

select(ids, indices, resetOther)

Source:

• billboard.js, line 9626

Example

// select from 'data1', indices 2 and unselect others selected
 chart.select("data1", 2, true);

Parameters:

selected(targetId) → {Array}

Source:

• billboard.js, line 9598

Example

// all selected data points will be returned.
 chart.selected();

 // all selected data points of data1 will be returned.
 chart.selected("data1");

Parameters:

Returns:

Type

Array

show(targetIdsValue, options)

Source:

• billboard.js, line 9064

Parameters:

toggle(targetIds, options)

Source:

• billboard.js, line 9116

Parameters:

tooltip:show(args)

Source:

• billboard.js, line 10467

Parameters:

transform(type, targetIds)

Source:

• billboard.js, line 9701

Example

// all targets will be bar chart.
 chart.transform("bar");

 // only data1 will be bar chart.
 chart.transform("bar", "data1");

 // only data1 and data2 will be bar chart.
 chart.transform("bar", ["data1", "data2"]);

Parameters:

unload(args)

Source:

• billboard.js, line 9320

Example

// Unload data2 and data3
 chart.unload({
   ids: ["data2", "data3"]
 });

Parameters:

unselect(ids, indices)

Source:

• billboard.js, line 9656

Example

// unselect from 'data1', indices 2
 chart.unselect("data1", 2);

Parameters:

unzoom()

Source:

• billboard.js, line 9234

Example

chart.unzoom();

x(x) → {Object}

Source:

• billboard.js, line 10158

Example

// Get current x values
 chart.x();

 // Update x values for all targets
 chart.x([100, 200, 300, 400, ...]);

Parameters:

Returns:

Type

Object

xgrids(grids)

Source:

• billboard.js, line 9792

Example

// Show 2 x grid lines
chart.xgrids([
   {value: 1, text: "Label 1"},
   {value: 4, text: "Label 4"}
]);

Parameters:

xgrids:add(grids)

Source:

• billboard.js, line 9815

Example

// Add a new x grid line
chart.xgrids.add(
  {value: 4, text: "Label 4"}
);

// Add new x grid lines
chart.xgrids.add([
  {value: 2, text: "Label 2"},
  {value: 4, text: "Label 4"}
]);

Parameters:

xs(xs) → {Object}

Source:

• billboard.js, line 10182

Example

// Get current x values
 chart.xs();

 // Update x values for all targets
 chart.xs({
   data1: [10, 20, 30, 40, ...],
   data2: [100, 200, 300, 400, ...]
 });

Parameters:

Returns:

Type

Object

ygrids(grids)

Source:

• billboard.js, line 9841

Example

// Show 2 y grid lines
chart.ygrids([
   {value: 100, text: "Label 1"},
   {value: 400, text: "Label 4"}
]);

Parameters:

ygrids:add(grids)

Source:

• billboard.js, line 9860

Example

// Add a new x grid line
chart.ygrids.add(
  {value: 400, text: "Label 4"}
);

// Add new x grid lines
chart.ygrids.add([
  {value: 200, text: "Label 2"},
  {value: 400, text: "Label 4"}
]);

Parameters:

zoom(domainValue)

Source:

• billboard.js, line 9148

Example

// Zoom to specified domain
 chart.zoom([10, 20]);

 // Get the current zoomed domain
 chart.zoom();

Parameters:

zoom:enable(enabled)

Source:

• billboard.js, line 9191

Example

// Enable zooming
 chart.zoom.enable(true);

Parameters: