How to configure something on init

You can tweak and tune all sorts of things when you embed vizabi in your webpage.
For example, this would start Vizabi chart with linear scale on X axis:

var config = { state: {marker: {axis_x: {scaleType: "linear"}}} }
var chart = Vizabi("BubbleChart", document.getElementById("placeholder"), config);

What options and their values are available? The example below shows the complete config. Change things in the interactive version to the right to see how the config changes on the left (you don’t need all of it, but you can use it as a lookup):

How to configure something during runtime

Above you can click on some things in config explorer to the right in order to change the picture on the left. This is how you do it programmatically:

var changes = {state: {time: {playing: true}};
chart.setModel(changes); //chart was defined in the snippet above

How to read the configuration

Below is the example of retreiving values from vizabi model.

This returns the complete model (default + user-configured + autofilled):

chart.getModel();

This returns the model you should care about if you want to keep a copy of the state somewhere. It ommits volatile changes, for example, current “state.time.value” while time slider is playing.

chart.getPersistentModel()

This returns the user-configured model:

chart.getPersistentMinimalModel()

How to listen to config changes

In these examples config is defined above during chart init Listening vizabi events:

config.bind = {
  //fires up when model is ready (data is loaded etc):
  'ready': function(evt, vals) {
    console.log("model is ready!");
  },
  //captures persistent (non-volatile) changes:
  'persistentChange': function(evt) {
    console.log(evt);
  }
};

Listening to any state change:

config.bind['change:state'] = function(evt, path) {
  console.log(path, evt.source);
};

Listening to changes specifically in time.value:

config.bind['change:state.time.value'] = function(evt, path) {
  console.log(path, evt.source);
};