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 10997

Example

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

Parameters:

axis․max(max)

Source:

• billboard.js, line 11038

Example

// Update axis' label
chart.axis.max({
   x: 100,
   y: 1000,
   y2: 10000
});

Parameters:

axis․min(min)

Source:

• billboard.js, line 11018

Example

// Update axis' min
chart.axis.min({
  x: -10,
  y: 1000,
  y2: 100
});

Parameters:

axis․range(range)

Source:

• billboard.js, line 11058

Example

// Update axis' label
chart.axis.range({
  min: {
    x: -10,
    y: -1000,
    y2: -10000
  },
  max: {
    x: 100,
    y: 1000,
    y2: 10000
  },
});

Parameters:

categories(categories)

Source:

• billboard.js, line 10831

Example

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

Parameters:

category(i, category)

Source:

• billboard.js, line 10812

Example

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

Parameters:

color(id)

Source:

• billboard.js, line 10867

Example

chart.color("data1");

Parameters:

data(targetIds)

Source:

• billboard.js, line 10659

Example

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

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

// Get all data
chart.data();

Parameters:

data․axes(axes)

Source:

• billboard.js, line 10773

Example

// Get current axes
chart.data.axes();

// Update axes
chart.data.axes({
 data1: "y",
 data2: "y2"
});

Parameters:

data․colors(colors)

Source:

• billboard.js, line 10753

Example

// Get current colors
chart.data.colors();

// Update colors
chart.data.colors({
 data1: "#FFFFFF",
 data2: "#000000"
});

Parameters:

data․names(names)

Source:

• billboard.js, line 10732

Example

// Get current names
chart.data.names();

// Update names
chart.data.names({
 data1: "New Name 1",
 data2: "New Name 2"
});

Parameters:

data․shown(targetIds)

Source:

• billboard.js, line 10688

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:

data․values(targetIds)

Source:

• billboard.js, line 10708

Example

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

Parameters:

defocus(Target)

Source:

• billboard.js, line 9542

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 11231

Example

chart.destroy();

export(mimeTypeopt, callbackopt) → {String}

Source:

• billboard.js, line 11424

Example

chart.export();
 // --> "data:image/svg+xml;base64,PHN..."

 // Initialize the download automatically
 chart.export("image/png", dataUrl => {
    const link = document.createElement("a");

    link.download = `${Date.now()}.png`;
    link.href = dataUrl;
    link.innerHTML = "Download chart as image";

    document.body.appendChild(link);
 });

Parameters:

Returns:

Type

String

flow(args)

Source:

• billboard.js, line 9969

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 11214

Example

chart.flush();

focus(targetIdsValue)

Source:

• billboard.js, line 9515

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 10368

Example

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

Parameters:

hide(targetIdsValue, options)

Source:

• billboard.js, line 9642

Parameters:

legend․hide(targetIds)

Source:

• billboard.js, line 11151

Example

// Hide legend for data1.
chart.legend.hide("data1");

// Hide legend for data1 and data2.
chart.legend.hide(["data1", "data2"]);

// Hide all legend.
chart.legend.hide();

Parameters:

legend․show(targetIds)

Source:

• billboard.js, line 11126

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 9863

Example

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

Parameters:

regions(regions) → {Array}

Source:

• billboard.js, line 10557

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 10580

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

regions․remove(regions) → {Array}

Source:

• billboard.js, line 10606

Example

// regions that have 'region-A' or 'region-B' will be removed.
chart.regions.remove({
  classes: [
    "region-A", "region-B"
  ]
});

// all of regions will be removed.
chart.regions.remove();

Parameters:

Returns:

Type

Array

resize(size)

Source:

• billboard.js, line 11194

Example

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

Parameters:

revert(Target)

Source:

• billboard.js, line 9569

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 10234

Example

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

Parameters:

selected(targetId) → {Array}

Source:

• billboard.js, line 10206

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 9616

Parameters:

toggle(targetIds, options)

Source:

• billboard.js, line 9668

Parameters:

tooltip․hide()

Source:

• billboard.js, line 11320

tooltip․show(args)

Source:

• billboard.js, line 11303

Parameters:

transform(type, targetIds)

Source:

• billboard.js, line 10309

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 9919

Example

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

Parameters:

unselect(ids, indices)

Source:

• billboard.js, line 10264

Example

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

Parameters:

unzoom()

Source:

• billboard.js, line 9827

Example

chart.unzoom();

x(x) → {Object}

Source:

• billboard.js, line 10899

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 10400

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 10424

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:

xgrids․remove(params)

Source:

• billboard.js, line 10447

Example

// x grid line on x = 2 will be removed
chart.xgrids.remove({value: 2});

// x grid lines that have 'grid-A' will be removed
chart.xgrids.remove({
  class: "grid-A"
});

// all of x grid lines will be removed
chart.xgrids.remove();

Parameters:

xs(xs) → {Object}

Source:

• billboard.js, line 10923

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 10472

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 10492

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:

ygrids․remove(params)

Source:

• billboard.js, line 10515

Example

// y grid line on y = 200 will be removed
chart.ygrids.remove({value: 200});

// y grid lines that have 'grid-A' will be removed
chart.ygrids.remove({
  class: "grid-A"
});

// all of y grid lines will be removed
chart.ygrids.remove();

Parameters:

zoom(domainValue)

Source:

• billboard.js, line 9700

Example

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

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

Parameters:

zoom․enable(enabled)

Source:

• billboard.js, line 9747

Example

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

Parameters:

zoom․max(max)

Source:

• billboard.js, line 9763

Parameters:

zoom․min(min)

Source:

• billboard.js, line 9780

Parameters:

zoom․range(range) → {Object}

Source:

• billboard.js, line 9797

Example

chart.zoom.range({
     min: 10,
     max: 100
 });

Parameters:

Returns:

Type

Object