Charts and graphs make it a lot easier to visualize data than simply dumping a bunch of numbers on a page. Thus, they are an integral part of the modern web. I mean, you can see them everywhere. They're in finance applications, providing a way to see income over time or broken down by specific categories.
They also exist in analytics applications. things like monitoring site visitors for a website, or performance for an app. They're also really common in admin dashboards to show all kinds of different analytics about a wide variety of different types of applications. So how do we support charts in our Vue applications?
js comes in. js library, that makes working with charts especially enjoyable for Vue. js? Well, on their documentation page, they have this great examples page that shows us multiple different types of charts we can create with the program.
I've gone and manipulated some of these examples just a little bit, and let's see what all is possible. So first we have bar charts. Bar charts are great for comparing data across different categories, such as showing sales performance of different products, or showing trends over time, like a business's revenue over the course of a year. View charts also support bubble charts out of the box.
These are useful for visualizing three-dimensional data where the size, position, and colors of the bubbles represent different variables. This could be useful for many different industries or use cases. like in business, investing, science, and a whole lot more. js also provides support for donut charts.
These are useful for visualizing the composition or distribution of a whole, such as showing how a personal budget breaks down into spend by category, or how the front-end framework landscape breaks down by weekly MPM downloads. To date, React does have the lion's share. And view comes in second place, followed closely by AngularJS. Hopefully, with all the amazing things you all are building, we can make this green section a whole lot bigger over time, which, of course, we can make a chart for as well.
We can also use this amazing library for creating line graphs, which are useful for visualizing the relationship and trends between two continuous variables over a specific time period or sequence. For instance, you could show stock market trends, temperature variations throughout the year, or website traffic over time. Other more obscure or niche chart types are also available that you might not use quite as often, but can definitely prove useful for the right situation. Things like polar area charts, radar charts, and scatter charts.
js, This data is 100% reactive, and any time the data changes, the chart will re-render automatically. In this example provided from the docs, you can see they're resetting their data for the chart every three seconds. And sure enough, on the right-hand side, you do see the chart updating as the data does. All right.
Are you ready to start creating amazing charts for your review applications? Well, you've come to the right place. During the remainder of this course, we'll get hands on implementing a number of the different chart types provided by this amazing library. We'll also take a look at working with local data as well as getting data from an asynchronous source as that's going to be a very common real world use case.
By the end of the course, I guarantee you'll have the confidence to add charts to your own view apps plus have the ability to configure them perfectly for your needs.