Visualize

The visualize module contains functions for drawing various charts, such as columns, bars, and pies, as well as tables using the Google Charts library.

Exercise 1

Let’s create a simple example for rendering a bar and line graph using the following commands:

const hydrolang = new Hydrolang();
hydrolang.visualize.draw({
  params: { type: "chart" },
  data: [1, 2, 3, 4, 5],
});

The default drawing type from the library is set to be a line chart. We can change this by passing an additional argument, as follows:

hydrolang.visualize.draw({
  params: { type: "chart" },
  args: { charttype: "column" },
  data: [1, 2, 3, 4, 5],
});

const hydrolang = new Hydrolang();
const main = async () => {
  //Paste the chart code here
};
main();

Note

The visualize module can handle n-dimensional arrays to be passed as data, and it considers the first position to be date formats as strings, if available. The parameters used for rendering are dealt by HydroLang, but can be modified by the user if required.

Let's see how we can use these tools in the next modules.

Tip

More info about the data module in the documentation page