Introduction to Vizzu

Welcome to the world of Vizzu, a versatile and modern data visualization library that helps you create interactive and animated charts with ease. Whether you are a developer or a data scientist, Vizzu offers a wide range of APIs to cater to your varying needs. This blog post will introduce you to several useful Vizzu APIs with practical code examples. At the end of the article, you will also find a complete application example that leverages these APIs.

Initialization and Basic Setup

To get started with Vizzu, include the library in your project and initialize a chart instance.

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';

const chart = new Vizzu('myVizzu');

Data Loading

Load your data into the chart using the data.load() method.

chart.data.load({
    series: [
        { name: 'Category', values: ['A', 'B', 'C', 'D'] },
        { name: 'Value', values: [50, 70, 30, 90] }
    ]
});

Basic Configuration

You can configure the appearance of your chart using the config() method.

chart.config({
    x: 'Category',
    y: 'Value',
    type: 'bar'
});

Animation Control

Vizzu provides APIs to control chart animations. Use the animate() method to create smooth transitions.

chart.animate({
    x: 'Value',
    y: 'Category',
    type: 'column'
});

Event Handling

Handle events on the chart, such as clicks, using event listener methods.

chart.on('click', (event) => {
    console.log('Chart clicked:', event.data);
});

Advanced Configurations

Explore advanced features like stacking, grouping, and customizing axes.

chart.config({
    x: 'Value',
    y: 'Category',
    type: 'bar',
    stacking: 'normal'
});

Interactive Example Application

Below is a comprehensive example that demonstrates the use of multiple Vizzu APIs to build an interactive charting application.

import Vizzu from 'https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js';

const chart = new Vizzu('myVizzu');

chart.data.load({
    series: [
        { name: 'Category', values: ['A', 'B', 'C', 'D'] },
        { name: 'Value', values: [50, 70, 30, 90] },
        { name: 'Growth', values: [5, 10, -2, 15] }
    ]
});

chart.config({
    x: 'Category',
    y: ['Value', 'Growth'],
    type: 'bar',
    stacking: 'percent'
});

chart.animate({
    config: {
        x: 'Value',
        y: 'Category',
        type: 'column'
    }
});

chart.on('click', (event) => {
    alert(`You clicked on category ${event.data.Category}`);
});

With this interactive charting application, you can visualize data in various formats and experience dynamic animations and event handling. Enjoy creating rich and engaging data visualizations with Vizzu.

Hash: d9ce11aff55cc8c7f064ae22698e16d601b59d78df5f5245d1ccc9041807f9b5