Introduction to Vizzu

Vizzu is a powerful and flexible data visualization library designed to help developers create beautiful, interactive charts and graphs. Its user-friendly API lets you easily transform your data into dynamic visualizations that can be integrated into web applications, dashboards, and reports. In this guide, we’ll cover the essentials of Vizzu, showcasing its features and functionalities with comprehensive code examples.

Basic Chart Example

Let’s create a simple bar chart using Vizzu:

  <script src="https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js"></script>
  <div id="vizzuChart"></div>
  <script>
    const data = {
      series: [
        { name: 'Categories', values: ['A', 'B', 'C'] },
        { name: 'Values', values: [10, 20, 30] }
      ]
    };

    const chart = new Vizzu('vizzuChart');
    chart.animate({
      data: data,
      config: {
        x: 'Categories',
        y: 'Values',
        type: 'bar'
      }
    });

  </script>

Dynamic Line Chart

Now, let’s create a dynamic line chart that updates its data periodically:

  <script src="https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js"></script>
  <div id="vizzuLineChart"></div>
  <script>
    const lineData = {
      series: [
        { name: 'Time', values: [1, 2, 3] },
        { name: 'Values', values: [15, 25, 35] }
      ]
    };

    const lineChart = new Vizzu('vizzuLineChart');
    lineChart.animate({
      data: lineData,
      config: {
        x: 'Time',
        y: 'Values',
        type: 'line'
      }
    });

    setInterval(() => {
      lineData.series[1].values.push(Math.random() * 50);
      lineData.series[0].values.push(lineData.series[0].values.length + 1);
      lineChart.animate({
        data: lineData,
        config: {
          x: 'Time',
          y: 'Values',
          type: 'line'
        }
      });
    }, 2000);

  </script>

Scatter Plot

Create a scatter plot to visualize relationships between two datasets:

  <script src="https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js"></script>
  <div id="vizzuScatterPlot"></div>
  <script>
    const scatterData = {
      series: [
        { name: 'X', values: [5, 10, 15, 20] },
        { name: 'Y', values: [50, 60, 70, 80] }
      ]
    };

    const scatterPlot = new Vizzu('vizzuScatterPlot');
    scatterPlot.animate({
      data: scatterData,
      config: {
        x: 'X',
        y: 'Y',
        type: 'scatter'
      }
    });

  </script>

Pie Chart

Here is an example of creating a pie chart:

  <script src="https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js"></script>
  <div id="vizzuPieChart"></div>
  <script>
    const pieData = {
      series: [
        { name: 'Category', values: ['A', 'B', 'C'] },
        { name: 'Value', values: [12, 34, 56] }
      ]
    };

    const pieChart = new Vizzu('vizzuPieChart');
    pieChart.animate({
      data: pieData,
      config: {
        x: 'Value',
        type: 'pie'
      }
    });

  </script>

Interactive Dashboard Example

Combining multiple charts into an interactive dashboard using Vizzu:

  <script src="https://cdn.jsdelivr.net/npm/vizzu@0.3.0/dist/vizzu.min.js"></script>
  <div id="vizzuDashboard">
    <div id="barChart"></div>
    <div id="lineChart"></div>
  </div>
  <script>
    const barData = {
      series: [
        { name: 'Categories', values: ['A', 'B', 'C'] },
        { name: 'Values', values: [20, 40, 60] }
      ]
    };

    const barChart = new Vizzu('barChart');
    barChart.animate({
      data: barData,
      config: {
        x: 'Categories',
        y: 'Values',
        type: 'bar'
      }
    });

    const lineData = {
      series: [
        { name: 'Time', values: [1, 2, 3, 4] },
        { name: 'Values', values: [50, 60, 70, 80] }
      ]
    };

    const lineChart = new Vizzu('lineChart');
    lineChart.animate({
      data: lineData,
      config: {
        x: 'Time',
        y: 'Values',
        type: 'line'
      }
    });

  </script>

In this example, we have created a simple dashboard with a bar chart and a line chart. You can easily add more charts and interactivity to this dashboard as required.

With Vizzu, you can create versatile visualizations that can be adapted to a wide range of use cases. Whether you need simple charts or complex interactive dashboards, Vizzu provides the tools and flexibility to help you achieve your goals.

Hash: d9ce11aff55cc8c7f064ae22698e16d601b59d78df5f5245d1ccc9041807f9b5