Introduction to vizzu
Vizzu is an open-source library designed to create animated data visualizations directly within your web environment. It’s built with the goal of making your data much more interactive and insightful. With its rich collection of easy-to-use APIs, vizzu stands out as a robust solution for all your data visualization needs. Below, we will dive deep into several useful API functions with practical code snippets to help you get the most out of vizzu.
Setting Up the Environment
<!DOCTYPE html>
<html>
<head>
<title>Vizzu Example</title>
<script src="https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js"></script>
</head>
<body>
<div id="vizzuChart" style="width:800px; height:600px;"></div>
<script>
const chart = new Vizzu('vizzuChart');
</script>
</body>
</html>
Introducing the Data
chart.initializing.then(() => {
chart.addData({
series: [
{ name: 'Year', type: 'dimension' },
{ name: 'Value', type: 'measure' }
],
records: [
{ 'Year': '2020', 'Value': 100 },
{ 'Year': '2021', 'Value': 200 }
]
});
chart.draw();
});
Configuring the Chart
chart.initializing.then(() => {
chart.addData({
series: [
{ name: 'Year', type: 'dimension' },
{ name: 'Value', type: 'measure' }
],
records: [
{ 'Year': '2020', 'Value': 100 },
{ 'Year': '2021', 'Value': 200 }
]
});
chart.setConfig({
x: 'Year',
y: 'Value',
title: 'Annual Data'
});
chart.draw();
});
Adding Axis Labels
chart.setConfig({
x: 'Year',
y: 'Value',
title: 'Annual Data',
xAxis: { title: 'Years' },
yAxis: { title: 'Value' }
});
Animating the Data
chart.animate(
{ data: { records: [
{ 'Year': '2022', 'Value': 300 }
]}},
{ duration: 0.5 } // duration in seconds
);
Creating an Interactive Application
<!DOCTYPE html>
<html>
<head>
<title>Vizzu Interactive Example</title>
<script src="https://cdn.jsdelivr.net/npm/vizzu@latest/dist/vizzu.min.js"></script>
</head>
<body>
<div id="vizzuChart" style="width:800px; height:600px;"></div>
<button onclick="updateData()">Add Data</button>
<script>
const chart = new Vizzu('vizzuChart');
chart.initializing.then(() => {
chart.addData({
series: [
{ name: 'Year', type: 'dimension' },
{ name: 'Value', type: 'measure' }
],
records: [
{ 'Year': '2020', 'Value': 100 },
{ 'Year': '2021', 'Value': 200 }
]
});
chart.setConfig({
x: 'Year',
y: 'Value',
title: 'Annual Data'
});
chart.draw();
});
function updateData() {
chart.animate(
{ data: {
series: [
{ name: 'Year', type: 'dimension' },
{ name: 'Value', type: 'measure' }
],
records: [
{ 'Year': '2022', 'Value': 300 }
]}},
{ duration: 0.5 }
);
}
</script>
</body>
</html>
With these code snippets and the Vizzu library, you are well on your way to creating dynamic and interactive data-driven visualizations. By leveraging these APIs, your charts can come to life with engaging animations and user interactions.
Hash: d9ce11aff55cc8c7f064ae22698e16d601b59d78df5f5245d1ccc9041807f9b5
