How to Use the Select Option to Change Data in Chart JS

in this video we're going to focus on how we can create a select button here and when we click on one of these options it will change this here and you can imagine this could be like a sidebar design we have a menu and we have options to change whatever we do on our chart so let's start to look how we can do these kind of options here and make it dynamic so let's start to look how to use the select option to change the data in charge as so the first thing what we need is we need to get here a we need to go to chargestreet.com getting started this specific link here to get the boiler template you can find this link as well in the description box one shown here copy this entire chunk of code there we are and if you want to understand the code make sure you watch this video here so then what i'm going to do is i'm going to just put it in here and then i'll cut out the title put that title in here there i will save that but i want to also extend the size of the chart i'll say this will be 80 save that refresh and there we are so what i want to do next i want to put in here like a menu sidebar so basically a sidebar we have here the editor area or basically where the chart is being shown so it looks a bit like a dashboard so what i'm going to do is i'm going to put it here just quickly dot row so i'm going to make here row and this row will have display flex because we want to have a flexbox and what we want to do here is dot sidebar and then in here make sure we have here this display spelled correctly sidebar and i'm going to your flex will be equal to 25 and once we have more we will have here i guess a background and i'll make the background just a simple gray color hashtag triple six oh sorry uh triple c and then we have here maybe i guess padding we might need the padding here of 20 pixels so once we got that what i want to do here is dot column and the column will have a flex of 75 all right so once we have this what i want to do here is of course to put in this nicely in here let's say div and this div will be our class row and then within this class row we're going to see another div i'm going to say a class and this class will be the side bar we close that there we are and then we make another one which will be not the sidebar but it will be just the column itself in the column what i'm going to do is i will cut out all of this here or at least this chunk of code put it in there proper indentation save that refresh there we are all right interesting we have this here but this should not be that tiny so what i'm going to do here i'm going to look here flex 25 do we have this all right this uh the sidebar here class sidebar so that looks all nice so what i want to do then is uh let's see here maybe we can say here the height i'm going to force in here a height i guess that's fine the one i was missing we can say your height will be 100 of the viewport or vertical height here so we have this one here 75 and 25 all right i'm surprised that this doesn't want to respond all right so after some quick checking of course the reason why it doesn't work is because right now this has a certain width and what we have to do here is we have to remove this width here well let's put that like that save that refresh and there we are so now we have nice item what i want to do here just select option that will trigger the item here so to do this what i'm going to do in here is just going to create a quick select here in the sidebar i'm going to say here select and i'm going to say here option and then here we're going to put in the value in this case the value will be quite straightforward we're going to say here a structure where we have the cost and the profit so what's a cost this will be the cost i have another option here that will grab here the profits so it's a profits of profit put in here profit all right save that then what i want to do here is i want to trigger this so how do we trigger this well basically we need to put a function in here and then we trigger it on change and then i'm going to say here update chart of course this here is still not ready well we have this here this might be this but of course we don't have that data structure ready so what i'm going to do now is i'm going to grab the data structure or we're going to create a data structure based on the cost and profit so what i want to do here i'll just put it here above i'm going to your constant i'm going to say your values or financials let me say just values that's fine equal bracket and in here basically what i'm doing here is a data structure which are very powerful and what we want to do in here is first we're going to get the id or maybe we can say here instead of the id the year and the year will be let's say 2019 and there is a comma and then we have here the financials and the financial details that's curly braces and then within here we can say for example the cost will be equal to 1500 and we have profit of 2000 so once we have this maybe we could even do here another one is the sale of uh i guess three five in this case that makes sense so we're gonna do a comma here uh or no you no need for a comma here but we need to do a comma here we can duplicate this multiple times i'm gonna just duplicate it four times so we have here 2020 2021 and 2022 and to make it a little bit of difference we're going to make this one zero and this one is uh i guess here we can say maybe two thousand and this will be two five and i will do here i'll just increase here with a single value additional so this two five that will be seven and this year will be seven five uh am i correct that is three sorry i don't know how i get on seven here the profits oh of course this doesn't make any sense at all anyway uh that should be four four four of course this should be three and then we have here another one let's three five and finally here it is that's all right so if i save this now of course nothing happens refresh you can see here nothing happens we have the data structure ready you can just copy this i'm going to put it in here delete everything here and this one this label can be removed as well if i save this nothing happens the reason why nothing happens is we didn't indicate now the new structure here where we have the year and the financials and basically the year is just our x values at the bottom and then the financials is basically the y value so what we're going to say here is just very simple put a comma here and then what we're going to say here we'll be parsing and we're doing it in the data set itself but you can do it as well in the options it's one or the other when i say parsing and parsing me or basically to parse means to make something readable for so we make this readable for charges so we're going to make our data structure easy to read so we're going to say here the x axis key will be equal to what exactly well let's look up here and we're going to graph here the year so this is the x-axis because they will be focused on the x-scale now we have the y-axis key and this one depending on what could be cause sale profit however it is based on financials dot cost so i'm going to grab this put it in here and just say your cost for now if i save this refresh you can see here we're getting the cost and if when i'm saying one five what's the first one in here oh there we are one five one two and two five there we are so this looks very nice but what i want to do now is i want to switch to profit and then it should automatically switch as well to profit like a dashboard structure here and you could do so much stuff of course with that so i'm going to scroll down here and i'm going to create a new function and this function name is we already have some preparation on this if you look here you scroll up you to unchange update chart and then you can just say here this to whatever we have selected here so i'm going to scroll down here we say here update chart and then what i want to do in the update chart here i'm going to say here it will be the select or the option whatever we have selected and if we do a console log here you say option save refresh open developer tab you will see eventually something being displayed here all right you get here the item but what i want to do of course is the dot value i want to extract the specific value here so if i do this now i see profit and if i do this here cost it will jump here or this should jumps to cost but here should be eventually adjusting as well so what we're going to do here is basically going to say my chart dot update to update the value that's basically the last item and then what we want to do here is basically we're going to say my chart dot and let me just go back all the way to the data to data data sets and then go to parsing and then the x-axis or the y-axis we need in our case we need the y-axis key so what i'm going to say here data dot data sets index zero because we only have one data set and then we're going to say here if i normally say it's parsing dot let's double check data data set 0 scroll down here parsing and then the y axis key so here equal to and then you might say all right you just need to grab this one but this is not the case by the way so if i save this refresh you will see here it doesn't work it disappears the values disappear it doesn't give an error because it's not really a mistake or well from computer programming point of view it's not a mistake but what it is is basically we need to be specific the reference is incorrect because we need to go to financial dot cost or financial dot profits so what we need to do here i'm going to use a backtick we're going to use here basically uh template literal so we have backtick concatenation this is a variable so it was a dollar sign 30 braces put in there and then what i want to do is what is the official path which is financial dot as you see here same here but how you can see it here financial dot sale profit etc etc save that refresh now if i change this there we are you can see here it changes it nicely then go back here it jumps here again and of course we could even highlight it even more with another level and you can just copy this you could say here for example sale or sales i guess in this case we just have sale so let's say seal save refresh profit all right and i have to sell there we are and that's basically how to do this so if you enjoyed this video and maybe besides this you want to understand what we did here with the data structures even more well in that case i'm going to recommend you this video here on how to use data structures for multiple data sets in chart js

Channel: Chart JS

Views: 5,927

Keywords: how to use the select option to change data in chart js, use the select option to change data in chart js, select option to change data in chart js, data structures, chart.js, chart js, chartjs, chart js tutorial, chartjs 3, chart js 3, chart.js 3, chartjs 3.8.0, chart js 3.8.0, chart.js 3.8.0

Id: cPsyh_KuYNA

Length: 12min 28sec (748 seconds)

Published: Tue Jun 28 2022