Introduction to Vizzu
Vizzu is a versatile and high-performance open-source library for data visualization. It enables developers to create smooth, animated charts from static data, emphasizing storytelling and engaging presentations. In this article, we will provide an introduction to Vizzu, along with dozens of useful API explanations and code snippets. By the end, you’ll also have an app example implementing the introduced APIs.
Getting Started with Vizzu
To get started with Vizzu, you’ll first need to include the Vizzu library in your project. You can do this using a CDN link:
<script type="module" src="https://cdn.jsdelivr.net/npm/@vizzu/0.5.0">
Basic Chart Example
<div id="vizzu">
<script type="module">
import Vizzu from 'https://cdn.jsdelivr.net/npm/@vizzu/0.5.0';
let data = {
series: [
{name: "Products", values: ["A", "B", "C"]},
{name: "Revenue", values: [120, 150, 100]}
]
};
let chart = new Vizzu("vizzu");
chart.animate({
data: data,
config: {
channels: {
x: "Products",
y: "Revenue"
},
color: "Products",
geometry: "column"
}
});
</script>
Adding Animation
chart.animate({
data: data,
config: {
channels: {
x: "Products",
y: "Revenue"
},
color: "Products",
geometry: "column"
},
style: {
plot: {
marker: {
label: { fontSize: 12 }
}
}
}
});
Using Different Chart Types
chart.animate({
config: {
geometry: "line"
}
});
chart.animate({
config: {
geometry: "area"
}
});
Filtering Data
chart.animate({
data: {
filter: record => record.Products !== 'B'
}
});
Interactivity with Events
chart.on('pointermove', (event) => {
console.log(event.data);
});
Full App Example
<div id="vizzuApp">
<script type="module">
import Vizzu from 'https://cdn.jsdelivr.net/npm/@vizzu/0.5.0';
let appData = {
series: [
{name: "Category", values: ["A", "B", "C", "D"]},
{name: "Sales", values: [30, 200, 100, 150]},
{name: "Profit", values: [20, 140, 90, 120]}
]
};
let appChart = new Vizzu("vizzuApp");
appChart.animate({
data: appData,
config: {
channels: {
x: "Category",
y: "Sales",
color: "Category"
},
geometry: "column"
}
});
document.getElementById('vizzuApp').addEventListener('click', () => {
appChart.animate({
config: {
geometry: "line"
}
});
});
</script>
Vizzu is an extraordinary tool for creating dynamic and impressive data visualizations. Its wide range of features and capabilities make it an excellent choice for developers looking to engage their audience with interactive and appealing charts. Start exploring Vizzu today to unlock new possibilities for your data presentations.
Hash: d9ce11aff55cc8c7f064ae22698e16d601b59d78df5f5245d1ccc9041807f9b5
