How to code Vico charts with Kotlin and Jetpack Compose. The best chart library so far!

[Music] hello hello this is Johan water from hron today we're going to take a look and code a simple application with vco charge VI charts this is hands down the best chart and Trend open- Source library for codling and compose and by the way it does also support traditional views if you still use system I've been using it for now on my application and testing it and it is worth every second of your time especially if you have to deal with data set visualizations it is feature Rich and it is complex and uh we're going to start by looking at the uh the GitHub library and their documentation and it is top class and never let's say it is very rare that the uh open source Library such as this have this top quality documentation with it they even have their own bigi setup guideline pages but uh okay let's dive in to the documentation and then we can code the simple app in here you can see the github.com Patrick cpatrick and vco these are the formats that the jart library support you can get different kind of a pillars and basier curve Trends or columns and uh of course it's going to be you can display multicharge at the same time and it's all animated it's beautiful and uh feature Rich so in here you can get the uh the implementation from this page and uh while you're learning the features of this application you might want to take a look at the Viki page because they have really cool documentation on on the uh coding features elements Etc that you can use in here or if you want to customize how it's showing for instance markers and labels and the Y AIS uh uh numbers and change those into your own values you can do it and uh play it of course it's API library is going to take uh quite a while to learn how you are supposed to use this but it is possible so with me we're going to code this basic Library I say most useful and uh make it just work without exception let's set up the dependencies so while you're in this uh GitHub Library you can come to a setup guide and in here you have a list of dependencies that you need and in fact the latest version is 1.11.1 it's available in the kidub page so I have already copied these ones and we have them implemented in our project in the Cradle with the latest Vico charge version that I know it is this so I'll be using jetpack compose so therefore I don't implement the views okay let's set up Basics so that we can have a layout to show the chart and uh a button so we can regenerate a new set of uh data set so we'll see how it handles those cases okay so I think we're going to make a just a column in here yeah let's make it fill fill the size of the whole screen inside here we will input a card which will hold the vehicle chart and for this card let me see we will need to give a Max maximum height of some sort we want to just say that it's going to be maybe 300 DP like like so yes that's going to hold our chart and uh maybe at the um bottom in the column we can have a button which can say text and uh refresh like so we don't have our own click yet in here but we're going to add it like so and on click to do refresh like so okay as this is demo I'm just going to pile up all Rec composable items on on top and use them as is so it's going to stay simple so no view models no nothing like that this time we will have our state of zero so we're going to use this as a trigger to uh re rebuild a new data set and by the way these uh latest composes they tend to have uh uh type specific M mutable States these days and uh so we'll be using mutable in state so pretty much when we click this we're just going to say refresh data set in value like so and um when this is going to trigger we're going to use launched effect and there's going to be our value of int value so this is going to force new data set for the trending chart like so okay I think we can start building the data set and all all of the uh voco chart elements that it requires to run so for the elements composable elements first we need to make model producer So-Cal model producer it's going to be the the remember and there's going to be Deco element chart and through chart entry model producer so we'll be using chart entry model producer okay and we need to instantiate that one next we need to have data set for model it's going to be a list of float entries so remember there's going to be mutable State mutable State list mle State list off and it's going to be about float entry this is also voco element let's import that element there it is the uh the list is empty for now and let's see next we will need line specification line chart doline spec let's call this one data data set line spec again again needs to be remember and it's going to be an arrow Arrow list of line line chart let's see which one is it actually maybe this one line line spec yes okay so now we have mple stage refresh model producer this is just a remember and then we have data set so we'll be rebuilding this this is going to be mle State list of Flo entries and we have a element of data set line spec okay what else do we need scroll state is remember scroll chart scroll chart scroll State here so this is also fully on a custom State for the Veo charts next let's set up the data sets so whenever we request a full rebuild during this launched effect we need to clear the old data and uh we're going to pass in the new data so pretty much we going be saying data set for model clear that one and uh all the line specifications whether we would want to have colors or widths and whatever specification for the drawing itself we're going to say line specifications do clear also in here and um to build the lines we're just going to have X position zero because while we are building the data set this is defining the EXP position for the next then we are just going to create a list of float entries soal data points is an error list of float entry that's going to hold the data that we're going to uh add into our data model okay so first let's if I understand the data set line specification actually in here you can specify the colors whatever customizations you want to include for each data set so we're going to use data set line spec dot add this is going to be our line spe spec element from the remember and in here we will say line chart dot line spec it needs to be line spec element this is going to be simple or just going to have one data set line chart and we need to have a color and uh I don't know let's make it do we have a green yes we can give a green color in here if you use composed colors this one needs to be uh um to a orgb so it's going it's not going to accept accept an INT color type so I'm taking composable color element and just transform that one and we have line background Shader so this is we're going to I want to have a Shader kind of a gradient Shader lay like so and it's going to be dyamic say d dot from brush and it's going to have the brush dot vertical gr end and there's going to be a list of colors like so and we say I'm just going to use the same color of green in here do copy and default alha this is vco chart element also and line background start and then we can use the similar voco element also in here we use the same color to shade it just say and in here okay now we have our data set specification how it should look maybe green isn't the best but hey I'll be using that one for now now we want to add our float ENT data points H so we don't have any data at this point yet so we need to make a random data set in here maybe for for e in one to 100 so let's make it Loop 100 data set just randomly like so I don't know what this is going to feed us can we tell it a range let's say 1 to th000 so we don't need to make a least we should be able to get the random value from anywhere from 1 to th000 random and we need a float values in here so this is going to express our random y float value okay it's going to repeat a, times sorry we want to have 100 a data set of 100 anywhere between between 1 to th000 okay that's should make a stunning visualization data set okay so what else now we need to add on the exposition at every cycle and add it into our data point so we say the add element we need float entry X is going to be xos and Y is going to be our random like so and we say RX position plus one as float okay so now we have create that anytime we request refresh we're just going to fully rebuild new data set like so with new line specifications so maybe you don't need to do it like this but in my applications I might want to change the uh the appearance of the the chart libraries for instance colors width size whatever uh uh feature want to change so then you need to manipulate the line specifications also in here so this is going to be first guard to avoid any runtime exceptions because there's going to be at least a a z zero division exception cause if we're not careful so we need to say in here mhm okay no guard at that point and we say if data points DOT is not empty then we will add that into our data set for model and add data points let's see what do we have in here do we have an error in type data set for model mutable State list of list of yeah that's our mistake sorry so we need to already list of float entry up here so data set for model mutable State list we're going to pass in list of Lo entry okay like so maybe we don't need to guard anything in here we can just say add new data points because it's going to be a similar than already having that list over there okay and finally we just tell the model producer set entries and we pass in the data set for model okay now we have pretty much prepared and totally rebuilt our data set for the vco chart now we can code our chart composable so here is going to be the guard to avoid any exceptions for instance they're making complex calculations for the size scaling and there's going to be a uh division by null value it's going to cause an exception if we're not careful so if data set for model is not empty so at least we need to guard safegard this one in here and uh let's pass that into our inside our card we just don't show this data set value if there's no data because I don't know maybe they take care of this in in some uh later versions but uh at least I take care of it now so we're going to provide a chart Style that I mean build our chart composable inside vco chart Style chart Style you can pass in customizable chart Style into this and make it change the theming ETC so inside here we need the chart composable so this needs to be composable from Vio and there's going to be a bunch of uh parameters we need to fill to make this element happy so let's start with the chart in here we will say line chart and at least we need to pass in this line spec specifications data set line spec like so lines so it's going to use those I believe to draw the col colorings Etc wids of the line charts next we're going to continue we need to pass in the model producer chart model producer is model producer okay we're not going to for now we're not going to pass in anything for the uh start axis and bottom axis we can fizzle around with those one in a little bit scroll State that's something we do want to pass in scroll State and uh is zoomable is zoom enabled let's say true I believe that is true as a default and do we have anything else that we should pass in no not at this point hm why this is not happy interface do we for any reason have now an interface let's see can we get this happy with these ones let's see scroll state chart SC scroll State I believe I might have had the wrong composable element as a chart there's many many elements in here in this library and uh I Stumble to use a wrong one at least this should now draw as a line chart and then we can customize it just a little bit to get better understanding how to use the API okay let's try so I was able to run this chart library and it works as we expected you can see the beautiful animations they have anything all all these features set up so we can just keep on producing our data sets and uh it's scrollable and we do have uh this I can't zoom it but it is definitely zooming so this emulator simulator doesn't allow me to crasp inside of that composable but I know it is suable 100% so now to customers just a little bit we want to add y value uh y values to show a scale from minimum to maximum and also the steps on the axis to uh make it more understandable so let's do that now so we didn't add them in here but now we can add them so we need to start using socalled start axis uh let's put them in for instance in here maybe start axis is remember start axis okay inside of this start axis we can now tell a title let's just say uh count of values for the title tick length we're going to use z. DP and there's going to be value formatter this is kind of a Lambda function that's going to give you the value and something else and we can use these to uh tell what it should show on the uh start axis so in here we're just going to say value value to in we're going to add one so that it doesn't start from zero and we're going to say to string because this is a text to be shown so to string like so because it's running indexes so to make it more readable we're going to want it want want it to start from one just to offset it by one then we will add we now we bottom axis okay so bottom axis is again sorry this went wrong bottom axis is remember bottom axis okay like so uh now I misplaced everything so everything I built in here I wanted to put it on the um bottom axis like so and now we're going to modify this so bottom axis is actually the x axis in here and start axis is going to be displayed on the Y in in vertical height so top values let's say I don't know top values and uh in here we pretty much don't want to add anything we just want to say to Str to into string pass us the value scaled values from minimum to maximum okay I believe we might want to uh manipulate the item Placer in here so this way we can affect how how what is going to be the stepping how often we show the value so it might get crowded if if we show all so let's limit that one we have axis item Placer we have a vertical and default and now we can say maximum item Max itm count let's say six okay let's restart this application now and we should see yes okay now we have 1 2 3 4 five and six of course and we are offsetting the X values to start from one nice this is really beautiful I believe there's also a way to uh manipulate to not show these Dash lines vertically can we find yes guidelines null so for the bottom axis we do want to say guidelines null so it's going to this is a matter of opinion how you like it but if you have a crowded data set it's easier to understand with less lines definitely if we're going to have multiple charge on top of each other so it's going to get too crowded so guys that's how it works and it has bunch of uh customizations to be used maybe we should add the marker to end this video we're going to add the onclick marker so you can see the values okay for the marker composable this is going to get going to be a complex class so we'll take a shortcut and we go into the GitHub page and in their sample application and in here we have utils no showcase yes socalled marker. KT so just to make our life easier let's copy paste everything we have set up in here and we do want to now create similar class in here so new cot link class let's call it marker and actually it was file. KT and we can now pretty much pass in our code from Vico uh charge sample app and now we can fet our remember marker from this and um this is complex it holds a lot of uh theming and visualization related parameters so you can modify this to fit more of the stylings of your app also this is a a freely free code to be change but uh this is how it works so now in our main activity I tried to uh start coding this from scratch and quickly noted that hey why not use the uh the full example from there and so in here let me see now we do want to create our we are now in our main main activity okay and uh in here we do want to say marker remember marker so we're going to get our marker with all the buildin Styles and pass in that in here and uh fingers crossed maybe just maybe we now once we long click we should see yes the values in here so now it's it's going to take now all the default themes the same colors of the trend we have a green Trend and uh there's going to be themes coming from the weco chart but uh you can definitely modify and change all of those so super cool and uh I've already managed to customize this so that we can make this uh marker persistent so once you click click it it's just going to stay there and uh it's easier to ey on those values for not long holding it but uh beautiful just make it yours style it as you see and uh in go and give them a star this this library is super I mean it is superb and uh go get them a star and they have active Community taking care of it and I already already noted that they can they actively uh uh address bugs for instance so address a bug in here and they're going to ask you actively more information how to uh find it narrow it down and they're going to fix it and there's also comments being handled if you want to uh explain well explain and bring forth about future uh ideas maybe they don't take all of those because they let's say they have a solid idea where they want to be with this one and they are following it and they are addressing correct correct issues with a a priorities but uh I love it this is business level solution and uh try out implemented give them Stars okay we'll be back

Channel: HoldToRun

Views: 6,142

Keywords: HoldToRun, Vico charts, How to code line charts, How to code charts, Kotlin, Jetpack Compose

Id: MY290aW8hMQ

Length: 36min 25sec (2185 seconds)

Published: Sun Aug 27 2023