Updating your existing chart

How muze supports dynamic updates?

Muze has a reactive state store which listens to any change in the properties like rows and columns of the chart. Whenever rows, columns, color or any other properties changes it efficiently updates the chart and rerenders only the parts of visualization which is required. In these examples, we have created a html button element and on the button click, we will update the chart.

You can update the chart in various ways using Muze API.

Changing the data

button.addEventListener('click', () => {
  const filteredDm = muze.canvas.data().select({
   field: 'Origin',
   value: 'USA'
   operator: DataModel.ComparisonOperators.EQUAL
  });
  muze.canvas().data(filteredDm);
});

Example

<div>
  <div id='btn'>Update chart</div>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(["Acceleration"])
  .columns(["Year"])
  .color("Origin")
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.data(
      rootData.select({
        field: "Origin",
        value: "USA",
        operator: DataModel.ComparisonOperators.EQUAL,
      }),
    );
  });
});

Adding rows or columns

button.addEventListener("click", () => {
  muze.canvas().rows(["Horsepower"]);
});

<div>
  <div id='btn'>Update chart</div>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(["Acceleration"])
  .columns(["Year"])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    canvas.rows(["Acceleration", "Horsepower"]);
  });
});

Changing the chart type

button.addEventListener("click", () => {
  muze.canvas().layers([
    {
      mark: "bar",
    },
  ]);
});

<div>
  <div id='btn'>Update chart</div>
  <div id="chart"></div>
</div>

const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(["Acceleration"])
  .columns(["Year"])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.layers([
      {
        mark: "bar",
      },
    ]);
  });
});

Convert a single line chart to multi line chart

Muze automatically converts line chart to multi line when you add a color dimension field.

Here is how you can convert a line chart to multi line by just adding a color field.

button.addEventListener("click", () => {
  muze.canvas().color("Origin");
});

Update chart

```javascript
const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(["Acceleration"])
  .columns(["Year"])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.color("Origin");
  });
});

Converting a simple chart to faceted chart

Here is how you can convert a simple chart to faceted chart using rows api.

button.addEventListener("click", () => {
  muze.canvas().rows(["Origin", "Acceleration"]);
});

Update chart

```javascript
const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(["Acceleration"])
  .columns(["Year"])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.rows(["Origin", "Acceleration"]);
  });
});

Converting a scatter plot to bubble plot

Here is how you can convert a simple chart to faceted chart using size and color api.

button.addEventListener("click", () => {
  muze.canvas().size("Miles_per_Gallon").color("Origin");
});

Update chart

```javascript
const { muze, getDataFromSearchQuery, env } = viz;
const data = getDataFromSearchQuery();

const muzeCanvas = muze
  .canvas()
  .data(data)
  .rows(["Acceleration"])
  .columns(["Horsepower"])
  .detail(["Name"])
  .mount("#chart");

muzeCanvas.once("afterRendered", () => {
  document.getElementById("btn").addEventListener("click", () => {
    muzeCanvas.size("Miles_per_Gallon").color("Origin");
  });
});