plugin-stanford

// Plugin must be loaded before the use.
<script src="$YOUR_PATH/plugin/billboardjs-plugin-stanford.js"></script>

 var chart = bb.generate({
    data: {
       columns: [ ... ],
       type: "scatter"
    }
    ...
    plugins: [
       new bb.plugin.stanford({
          colors: d3.interpolateHslLong(
             d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)
          ),
          epochs: [ 1, 1, 2, 2, ... ],
          lines: [
                 { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" },
                 { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" }
          ],
          scale: {
          	max: 10000,
            	min: 1,
          	width: 500,
            	format: 'pow10',
          },
          padding: {
          	top: 15,
          	right: 0,
          	bottom: 0,
          	left: 0
          },
          regions: [
          	{
              	points: [ // add points counter-clockwise
              	    { x: 0, y: 0 },
              	    { x: 40, y: 40 },
              	    { x: 0, y: 40 }
              	],
              	text: function (value, percentage) {
              	    return `Normal Operations: ${value} (${percentage}%)`;
              	},
              	opacity: 0.2, // 0 to 1
              	class: "test-polygon1"
             },
            	...
          ]
       }
    ]
 });

import {bb} from "billboard.js";
import Stanford from "billboard.js/dist/billboardjs-plugin-stanford";

bb.generate({
    plugins: [
       new Stanford({ ... })
    ]
})

Extends

• Plugin

Requires

• module:d3-selection
• module:d3-interpolate
• module:d3-color
• module:d3-scale
• module:d3-brush
• module:d3-axis
• module:d3-format

Members

(static) colors :function

Description:

• Set the color of the color scale. This function receives a value between 0 and 1, and should return a color.

Source:

• Plugin/stanford/Options.ts, line 17

Default Value:

• undefined

Type:

• function

Example

colors: d3.interpolateHslLong(
     d3.hsl(250, 1, 0.5), d3.hsl(0, 1, 0.5)
  )

(static) epochs :Array

Description:

• Specify the key of epochs values in the data.

Source:

• Plugin/stanford/Options.ts, line 29

Default Value:

• []

Type:

• Array

Example

epochs: [ 1, 1, 2, 2, ... ]

(static) lines :Array

Description:

• Show additional lines anywhere on the chart.

  • Each line object should consist with following options:

  Key	Type	Description
  x1	Number	Starting position on the x axis
  y1	Number	Starting position on the y axis
  x2	Number	Ending position on the x axis
  y2	Number	Ending position on the y axis
  class	String	Optional value. Set a custom css class to this line.

Source:

• Plugin/stanford/Options.ts, line 59

Default Value:

• []

Type:

• Array

Example

lines: [
      { x1: 0, y1: 0, x2: 65, y2: 65, class: "line1" },
      { x1: 0, x2: 65, y1: 40, y2: 40, class: "line2" }
  ]

(static) padding :object

Description:

• The padding for color scale element

Source:

• Plugin/stanford/Options.ts, line 89

Properties:

Type:

• object

Example

padding: {
    top: 15,
    right: 0,
    bottom: 0,
    left: 0
 },

(static) regions :Array

Description:

• Show additional regions anywhere on the chart.

  • Each region object should consist with following options:

    Key	Type	Default	Attributes	Description
    points	Array			Accepts a group of objects that has x and y. These points should be added in a counter-clockwise fashion to make a closed polygon.
    opacity	Number	0.2	<optional>	Sets the opacity of the region as value between 0 and 1
    text	Function		<optional>	This function receives a value and percentage of the number of epochs in this region. Return a string to place text in the middle of the region.
    class	String		<optional>	Se a custom css class to this region, use the fill property in css to set a background color.

Source:

• Plugin/stanford/Options.ts, line 111

Default Value:

• []

Type:

• Array

Example

regions: [
      {
          points: [ // add points counter-clockwise
              { x: 0, y: 0 },
              { x: 40, y: 40 },
              { x: 0, y: 40 },
          ],
          text: function (value, percentage) {
              return `Normal Operations: ${value} (${percentage}%)`;
          },
          opacity: 0.2, // 0 to 1
          class: "test-polygon1"
      },
      ...
  ]

(static) scale :object

Description:

• Set scale values

Source:

• Plugin/stanford/Options.ts, line 60

Properties:

Type:

• object

Example

scale: {
   max: 10000,
   min: 1,
   width: 500,

   // specify 'pow10' to format as powers of 10
   format: "pow10",

   // or specify a format function
   format: function(x) {
   	return x +"%";
   }
 },