Display JSON data in Chart.js with JavaScript | Change dynamically the chart types in Chart.js

hi guys in today's tutorial we're going to see how to create charts from Json files using the chart.js library and JavaScript also we're going to see how to change the type of a chart with a simple click of a button so let's see how we do this and I have to say it's easier than you think so let's jump to my editor and see the files that we need the file that we see is the index. HTML file it has a link to my stylesheet and a script tag that points to my Javascript file which Javascript file is empty I have a Styles set CSS file which is structuring our layout and we have a data that Json file that contains the data will be displaying in our charts let me explain what we see here in our Json file we have an array of objects every object has a month property and an income property we're going to fetch the values of those properties to create our chart in the Javascript file that's all the files that we need so let's jump to the index file and start coding okay now every time we deal with third party apis we start from their documentation so let's go to the chart.js website and click on the get started button we are going to use the latest version which is 4.4.1 I'm going to click again on the get started link and nice here here we have an example of the basic HTML and JavaScript code needed to render a chart I will copy first the script tag and the canvas element and I will paste them in my index file nice the script T will give us access to the chart.js library and the canvas element is necessary for chart.js to render the charts the canvas element has an idea of my chart we are going to Target the canvas ID from the JavaScript file to gain access to the canvas element now let's give a class of chart to the div element that holds the canvas so it will match the CSS class that I have in the CSS file okay now I will go back to chart.js documentation and I will copy the JavaScript code and I will place it in the Javascript file nice okay now let's check if this basic example works I'm going to to refresh the index file which I have already open in a new tab and nice here is our chart now we have the foundation to build upon but before we proceed let me arrange the elements in the screen and explain a few key points in the JavaScript code in the first line we see that we are targeting the canvas element and storing it in a variable named CTX next we create a new chart object the chart object takes in two parameters the first parameter is the variable that holds the canvas and the second parameter is an object this object has a property name type the type property specifies what type of chart will be displayed if I change the bar value to line and refresh the browser we will see a line chart if I say donut it will change to a pie chart let's change the value back to bar next we have a data property which also holds an object here are the important stuff the labels property holds an array of the values we see on the x axis and the data property holds also an array of each data point value we see those values when we hover over a data point and last in the y axis there's a range of numbers starting at zero and ends a little bit higher than the biggest data point value the next thing has to do with the layout we see that the chart is responsive but I don't want it to shrink I want the chart maintain its height so in the options object I will set a property named maintain aspect ratio to false now the chart will maintain its height when displayed in mobile screens I like it better this way okay now it's time to focus on our task and that is fetching the data from the Json file and display the in our chart I will create a function named create chart and I will place the chart object inside the function the function will have two parameters I will make I will name the first parameter data which will hold which will hold the data from the Json file and the second parameter to type the second parameter will specify the charts type so I will change the string bar to the type variable next I'm going to use the fetch method to get the data from the Json file as an argument I will pass in the method the path to the Json file next I will use a then method to catch the server's response the then method takes as an argument a function which function takes also an argument that I will name response for clarity inside the function I will check if the server's response is is successful by checking the response. okay property and if it is equal to true we use the response. Json method because we are expecting Json data but we cannot use the data yet we have to write another that then method to pass the data from the response now we have access to the Json data so I will call the create chart function and I will pass in the Json data and I will initiate our chart type two bar if if we refresh the browser window nothing is going to change because we need also to replace the labels array and the data array with a data from the Json file the thing that I want is to display the months as labels and the income as data points to do this I need to know the structure of the data that the server returns so I will log to the console the data variable to see what it holds let's do a reload on our page and we see that the data variable holds an array of objects now I know what I have to do okay let's do the labels first I will remove the hardcoded array I will use the data variable and I will say that map the map method will return an array that holds each month now I will do the same thing with the income okay let's refresh the browser window to see if our code works and yes it works fine we see the months as labels and the income values when we hover over the data points nice we fetch the data from the Json file and display them in our chart now let's see how to change the charts type dynamically like we saw in the demo so let's go to the index file and add some buttons above the canvas now all the buttons will be placed inside a div element with a class of chart types the first button will display the bar chart I will assign an onclick event listener to the button and every time we click on it the set chart type function will run the function takes us an argument the type of the chart that we want to display next I will create the button that will change the chart type to line next is the donut button the polar area and the Rader button now let's see our buttons on the page nice now we jump in the Javascript file and make those buttons active let's write our function above the create chart function now in order to change the type of a chart we have to destroy the current chart object and create a new one with a new type and we have to do this inside the function but the problem is that I don't have access to the Chart object because it is created inside another function but don't worry the solution is simple I will create a global variable named my chart then I will go inside the create chart function and I will make the chart object equal to the my chart variable now I can go inside the set chart type function and say my chart. destroy because now I have access to the Chart object nice okay the next step is to create a new object with a new chart type assigned but I have here the same problem I don't have access to the data from the Json file so let's fix this one too I'm going to create a variable named Json data inside the last then method and I will set it equal to the data from the Json file next I will make the Json data variable Global and now I can pass in the create chart function on the Json data and the new chart type and that's it let's see if it works and it works nice and that is all for today guys thanks for watching hope you like the video subscribe if you like see you in the next one

Channel: Digital Fox

Views: 1,015

Keywords:

Id: XPOSEf40SkQ

Length: 9min 49sec (589 seconds)

Published: Thu Dec 14 2023