How to Webflow (Live): Using ChartJS with the Webflow CMS

[Music] [Music] [Music] [Music] [Music] [Music] [Applause] [Music] [Applause] [Music] hey everyone welcome to another livestream how to web flow live I'm Nelson if you haven't been here before thank you so much for taking the time out of your weekend to spend it with me and the rest of the pixel geek community in the live chat room right now um yeah what a week what a week um hold on where's the live chat oops oh okay there you go I see the live chat yeah hi everyone um let's see here who's in the live chat first so AG web design Scott and Peter and Colleen thank you so much for being here uh thank you for coming back it's great to have this community this wonderful community in the live chat room right now if you see the link below please consider donating to the EGF eji eji to directly or at pixel geek dot co / donate let me show you what that looks like real quick yeah so when you go to that link when you go to that link you'll see this page but however much you want to donate and then donation message if you want but don't use any of these gift gifts because then it'll ask then stream Labs will ask for an even more money like five dollars but just put some sort of amount of money that you can and then click donate and even if you can't that's fine too but just get the word out about this pixel geek co / donate Pablo's back elbow chin even travel adventures back Sam tickle Dickey yeah what's up whatsapp no I don't don't use whatsapp but what is up thank you so much for being here oh man how many motions and before we get into our main topic which is how to use chart j/s inside of web flow it's been I asked what topic what do you want me to stream this weekend and someone in my youtube channel said something with pie charts so I looked it up and he tried it and I was like okay I think we can do but that was everyone how's everyone doing mentally how are you doing be safe healthy and where are you from but yeah yeah every heavy week and let me get something queued up real quick here it's a SpaceX video so SpaceX landing while I'm waiting to find out where everyone is from this one oh yeah okay oh let me go here yeah oh yeah where y'all from I know Colleen's in Florida eat her I think you're in Europe yeah well while I'm waiting I'll just go ahead and I wrote something this morning about how I feel you know and then yeah right sad and hopefully in time qetsiyah welcome elgin in Czechia yeah so many emotions but I wrote something down it [Music] where it'd be more ready than I'm so sorry Bulgaria Hollyn Philippines yes yes my my motherland Maya where ancestry is from where my parents are from 20 G is back from India nice global community in this chatroom so alright speaking of global community let me just get this out there and yeah you knew I was gonna play a SpaceX thing anyways um let me talk about this first so anyone who's been watching my streams uh has who has been following me on Twitter or knows me personally knows that I love all things space exploration technology and science but my favorite part about those three things is the human aspect behind all of it think about it when there's a question out there in the universe out there in the cosmos that we humans have never ever answered before we are required to come together and find a way to answer it and it just can't be one person so it just can't be one person it takes a group of diverse humans from all walks of life to come together and when it comes to web design I feel the same way it is not possible for one person or one human to create a great website or a great web app it takes a team of content strategists copywriters UX researchers graphic designers visual developers web developers information architects security researchers project managers social media managers community managers and so so much more people so many different types of people to make it happen and when a diverse group of people are allowed to challenge each other with the mindset of making something positive great things are made and change begins and the reason why I'm showing this SpaceX video is because when this first came out well when the first you know actually when this recap came out I got chills I got teary-eyed not because we're finally landing Rockets autonomously on land at that moment but it's this part right here let me rewind it this part that part so many people across so many different departments who have all different walks of life different views different religions different hobbies different everything but they come together for this one moment because they've put so much time and effort to answer a question which is can a rocket autonomously land itself and in the future be reused multiple times in hopes that we can push forward in doing more exploration faster and opening space to more people it kind of sounds like web flow right where it's like how can we democratize the web to make it more accessible to to everyone you know doesn't matter who you are if you want to build you should be able to build in you know you see all these people and like wow they've put so much time and effort into this and then this part right here like this part right here like different types of people different genders different age groups I'm like we all feel the same we just want we're just curious and we make something great happen ah that's my thoughts yeah I love you all I mean thank you so much for being in the live chat room right now and I always ask where are you from and it just shows like so many different people are in this chat room right now just geeking out about all things no code and I appreciate it and I love this no code community because it is diverse and we should continually challenge each other to become better and that's what we're doing Oh that being said that link right there again pixel geek dot Co flash donate you can donate now to EJ EJ eye or you can donate directly but if you donate through my link it'll show up on the on the stream I figured out how to do that and thank you to Colleen for helping me test that um here chatroom I love that community yes NYC yes it's amazing how you know things are changing things are changing okay all right cool alright next thing I want to talk about who's this yeah close it all right so again if you donate put your username so people can see who donated how much you want to donate and skip the gift gifts and just click donate okie dokie oh and yeah next so there's some people who have been helping me test this out so if you want to help test this community site I'm building for us the pixel geek community go to P G - community webflow calm and I will send you an invite when I start inviting more people and all it is so far right now is the support board and whenever I have time I'll add to this but I wanted it to make it more easier for people to explain what issue they're running into is and easy for people to find the answer so for example these are just some tests that Colleen has been doing but if you have a question you're able to submit it through here and I'm requiring people to create a loom video so that way so that way the question is not only written but it's also you know easier to understand since we're all visual people like I don't understand the question if it's just in text form can you show me a screenshot you know it's easier than a screenshot a video so after you put in a video um it'll show up like this and yes for example eileen what she did was with a loom video and then if you have an answer it's kind of like sack overflow where you can upvote answers that are the best um and yeah so you can submit the answer and also a loom video to support your answer and plus I want people to be able to donate to each other so if you have a buy me a coffee page you can click on that because it's like oh wow this solution really helped just like how you all were donating to me to my coffee page I want people to donate to you and you're giving a really solid answer so that way they can click on this go to your coffee page and they can donate to you so yeah if you want access to this PG - community web flow dot IO sign up alright and I have a lot of other things I want to do you'll be able to see it in the roadmap but it'll take some time so join the community there's also a slack channel that we're gonna hit start hanging out at so join it alright here we go chart dot J s can this work inside of web flow so what is chart dot J is a simple yet flexible JavaScript charting for designers and developers so if you take a look at what it can do a lot look at this list um right well alright so look at this list you can do bar charts bar charts line charts even with um hovers and it's responsive to um weird pie graph weird pie chart I graph you can do pie charts and like they we have animations on load animations like ooh there you can do a lot with this and so I challenged myself yesterday can this work not only inside of web flow but inside of the web flow CMS can you make collections that throw data inside of tart j/s and creates this something like this and the answer is yes but the secret is in setting up the collections I'm gonna break it down for you on what I've learned and then after we build this together we're going to explore it together because I didn't go any further than this I didn't try a pie graph bar bar chart I didn't try any anything else besides this first example alright so we can go ahead and explore how to do those other things using the web flow CMS okey dokey let's go this website so let me just trace back on what I did okay so I'm gonna show you how I learned this and the steps and the thoughts that I had in my head okay so let me just double check delete any custom code okay cool so I went here and I'm like okay well get started cool now if you're not familiar with code I'm gonna do my best to break it down as with every stream break it down so that you can understand it in a more human way okay cuz code isn't is is crazy yeah code is crazy here we go so what I did was I just said okay creating a chart okay so let me just copy all of this wait no I didn't copy this one which one did I do oh I went to I went to installation okay so this is the first thing huh hey but I read through this I was like okay so I want to use a Java Script so let's see here and great where did I start where did I start oh I started somewhere else oh man I'm so sorry was it line wait maybe I started at the examples sample good line where did I get him from oh my god I love streams where did I get the code from like there was this like basic a line no no no I'm so sorry everyone hold on where did I start and start here okay well you're the source so I got this script yeah okay just copy this I found this script somewhere on that site okay and I'll show you what it did so I found this the the most basic script okay and I said okay if I'm going to put in JavaScript I have to put in an embed so I get the embed element and I pasted it in all of this is coming from that one example that I found okay well say and close and then I went publish that does it work and I just drop in the code and of course you'll be able to duplicate this whole site when I'm done and so when I drop in the code I said okay it worse Oh Johnny what's up link at the top in github thank you link at the top github link at the top what are you talking about this goes here everyone else in' is not doing a good job look at the top Oh I'm ruined this dream I'm so sorry let's start again okay let's I listen I okay so here we go we're gonna start again so I found this code somewhere inside of chart JSON org and so all I did was copy and paste it into an embed code editor inside of web flow okay so here's what you have you have a canvas the canvas me zooming the canvas is where your chart will show up okay and this canvas has an ID of my chart and so how this JavaScript package how it knows where to put your chart is this right here this part so this line is saying hey find an element called my chart and put the chart in there and so that's what this does okay this line this downloads all of the magic of chart jeaious and puts it into your website it loads the magic so that's what this line does and now we get into the craziness of this okay now the type of chart we want to create well they have many ones they have line pie in an area whatever so type is line okay and now we have a data set so what are the labels right so the labels are the x-axis okay so that's labels data sets okay now you have data sets and now the first thing is your label what do you want to label your chart my first data set and where this text goes is right here at the top okay and then you can make the and now you can make the background color and the border color of your chart and you just put the values in there you can use RGB or you can use hex up to you and then you have your data points okay so zero goes to January 10 goes to February and so forth okay and then options well we're not gonna really get into that one we're just gonna go super basic I haven't even gone into options yet but I just left it super basic and because that works inside a web flow as just basic code that works okay man FC and so because this works I was like okay so now how do I make this more dynamic so here are the things that need to be dynamic when I was thinking about this okay so this this needs to be dynamic the type of chart because what if I have multiple charts but I want to display them in display this chart has aligned this one as a bar this one as a pie so this one has to be dynamic but this could go into the web flow CMS as a plain text okay labels January February March April May June July so all of those labels the x-axis that is just plain text so I'm going to need to make I'll be able to add these into the collection my first database the the label that can be added to a collection as a plain text or just a name in a CMS item background color and bolder color there is color fields inside of a web flow collection so yes you can do this that's what I was thinking in my head before I even tried it then data this can be either number or plain text so I'm like okay I'll just use plain text for each of these then he got weird in my head cuz I'm like wait you can't put a collection list inside of custom code because you you want to show each CMS item for labels you want to show each CMS item for data so how are you going to put a collection list inside of custom code that is not possible but if you add extra code it is possible so here we go the code in this okay I think Nasir found it but yeah so the next thing I did was I went to I started to create collections okay so let me see can I let me start a new canoe website real quick so that way so that way you can follow along with me and I'll just use my finished project as a reference so let me start that real quick yeah man come on well you can do it I have too many projects in my dashboard that's why it's running super slow bird jeaious stream hmm all right so brand new blank site let's create a new collection so my first thought was okay with this code let's start out with the data with the data set okay so I'm gonna create something called data set and inside of the data set I have I have colors background color and border color so let's add those colors color alone that way yeah so color so this one's background BG color and this one right here would be border oh oh and I'm done with that so I have the name which is gonna be my dataset label I'm gonna great collection and so there we go alright I'll have those now I need the other data so I need oh I also need the type I need to add that so what type is this data set so I'm gonna add field and go to call it plain text type of chart go safe collection cool well let's add this new data set and we'll call it extreme example chart background color purple and we'll just use the same color I'm done and we'll use line since that's only when I've you so far cool so we have some of that data in there but now we need to get those what we call arrays okay an array is a group of data a group of data so we have our labels and so I'm going to create a new collection and call it labels and we're gonna just give it a name but also we're going to give it a reference so a single reference to the actual data set so which data set is this label for set data sets and then save collect chin and we're done right so let's go ahead and start I'm adding them in so this one is and let's just do Jan dream example and so this one refers to stream example chart this one is Feb and this one goes to stream example we'll just do three months march in exam three cool so now that we're done with that we have our labels last one we need to add is our actual data and we'll call this data points okay oh here we go when create a new collection I like data points and we'll just have name and also another single reference field back to the data set and this connects two data sets save great collection and we're good let's create three of them we'll say zero create this one would be I'm guessing it's ten yeah ten five will say ten and 45 and and 45 and if you have any questions feel free to feel free to interrupt and let me know all right so we have our data set which has the name of our chart the colors and the type of chart and we have our labels the x-axis and they all connect to the data set collection and we have our data points that all connect to back to this data set collection right so that's how it works and let me go whimsical because I want to make sure you all understand whimsical there we go let's sign in okay what no personal little chart Larry no I don't want to how do I uh flow chart I have to pay no okay let me just use this okay we have this guy uh where do I put the text oh my god this is for you guys get it though you have these three collections these 2.2 this one hopefully you understand Luke thank you for joining us no worries just watch the recording thank you for being here alright so now let's add this data into the JavaScript okay so I'm gonna go to the data sets template and I'm gonna drag in a container push that away from the top and I'm going to drag an embed I'm just gonna copy this code and copy this code and paste it into the new site alright so everything is still static save and close everything is still static it's not coming from the web flow collection but I just wanted to double check to see if it still works if I put it in a collection page and sure enough it does okay so now I'm going to go back to the site and I'm gonna start editing stuff for example this line the type of line I'm going to delete it and choose type of chart for this label I'm gonna pull that data from the name then this background color I'm gonna add a background color I'm going to add it from BG color and this border color I'm going to pull the data from border color so now these purple things these are being pulled from the web flow CMS from the web flow collections save and close publish and let's see what happens gonna refresh okay things have changed this means that the data from the web flow collection actually works and once I got to this part I was like oh okay we're getting somewhere we're halfway there but again how do you put a collection list you can't put a collection list inside of code you can't what's the trick and so I was like how am I gonna do this how am I gonna do this now I'm gonna show you cuz I figured out first thing you need to do is take all of this okay take all of this right here and command X or control X to cut a even close then go to the page panel and scroll down to the end body tag okay the reason why is because you're gonna want to use jQuery or if you're good with Java scripting use that but you're gonna want to use jQuery and so what actually happens at this end body tag why do I put it there at the bottom it's because when what when web flow actually creates your page it's also adding right here it's also adding this okay nope where is it oh right here jQuery okay so it's adding this okay it's adding this line so what web flow does it's like hey I'm going to also add in the jQuery package but this is at the end of the page okay you don't see it in web flow but web flow is doing it so because web flow is adding jQuery I can add jQuery code to my to my website but what I want to do is pull collect different collection list items into this code but how do we do this click Save get out of there let's drag those collection lists so I'm gonna drag in a collection list and I'm gonna pull from labels okay so you see my labels here but I want to make sure that it's coming from the right data set so I want to make sure that this data set equals current data set Dave okay and let's make sure the sort order is created on oldest to newest so that way it's in order January February March and each of these I'm going to drag in a link block and pull the pull the text from the name the name of the label so now we have January February March and they're in plain text I'm going to give these text blocks a name I'm going to call it a label item label - item okay now all three of these have this class name now I'm gonna go to data sets open the page settings and this is where it gets interesting the power of jQuery and webflow beautiful beautiful we're gonna do is say hey jQuery find anything that has a class name of label - item that's the selector of a class name that we just gave that next find anything with that whenever you find one for each of those do something okay buying each label item and do something what do we want it to do well let's go ahead and create a let's create a variable called label item all one word no - and what we'll go in this temporary memory called label item well uh jQuery I want you to take this this is referring to this okay I want you to take this element find whatever text is inside of it and add it into that temporary memory called label item okay now once you find that do something with it but we want to do something we want to push it to the array okay so I'm going to delete all of these things these are these are stuff I don't want anymore okay and I'm gonna call this label array okay so I want to put this inside of this okay well now how do we do this we have to create another memory okay so let's call let's call this one we're gonna call this variable this new variable it's called label array and when we first load the page it has nothing okay so this is what it means when you put two square brackets next to each other you're telling the computer okay I have a group of things okay I have this box of things Hey and I want to Nate I'm gonna Lee want to name this box label array okay so this is what this line means a computer I have a box and I'm gonna take a sharpie and I'm gonna name it label array now we want to push stuff into the box so in here I'm going to say or label array push the label item inside of it come on okay so with this again this means for each label item find the text and save it in here after you're done with that let's push this text into this box and then this box will be put here and given to the the beautiful magic charting chart jjs JavaScript so save and let me double check on my finished version that I did everything right push yeah well let's publish boom it's happening it's happening what Conda says uh why couldn't you do that in jQuery and the embedded div why do you have to put it in the in the page settings yes good question so like I was explaining um I love using jQuery for simple things like this that makes more sense to me so that's why I did it here that's why I did it here because jQuery isn't called until the end of the page until the end of the page code and so I just did it here if you know JavaScript but you don't have to do it here you can do it in a regular embed you can do in the embed elements but this is how I do things cuz it feels much more easier for me um but yeah John what's up better late than never yes I'm glad you're here [Music] here yeah so this is working okay and so now that we know this is working yes the labels are still being shown here so now that we know it's working we can just take this collection let's wrapper and hide it alright so again what it's what the code is doing it's it's taking it's taking the text out of that collection list wrapper and placing it in a box or an array and then throwing it into the chart j/s code all right so now we can do it again for the data points again drag in a collection list pull from data points make sure that it's being make sure that it's the data set equals the current data set put in a text block into one of the collection items and pull the name of the CMS item oh and make sure that the sort order is graded on oldest to newest we'll give each of these a name data point - item that's the class name and we go to our code right so we're going to replace this code with the collection list so let's delete that okay and yeah we'll delete that and what agree to color box let's call it data point array okay so that's the name of our box now we got a scroll up and we'll go ahead and wait another name we're gonna create a new box I'm gonna put a press comma and say data point array equals an empty box there we go so now we have two boxes now let me just paste the class name of that real quick and all we got to do is just copy and paste that first code because we're doing the same exact thing right so jQuery when you find a class name of data point - item do something with each of them and so we're going to find this we're gonna find the text within each of them and we're gonna call it a two point item and this data point item will be pushed into the box called data point array okay so this one puts all of our items into that box this one put all puts all of our labels into the label array box this one puts all of our data points into the data array box and once we're done with that it should work I'm gonna press save publish refresh boom and the hovers are done by chart chart J s so there you go right well let's review real quick what did I do and let's go ahead and hide this one as well so flexion lists wrapper boom that's so it looks like nothing's here but a lot of things are happening but first we have our chart this is our chart code where our chart is going to be okay second we put the rest of the code the chart J s code you put it in n body tag and for this script we've added the chart J s code in there however we've replaced the the basic stuff like the type the name background color border color replaced that with the add field feature right here okay but since we have data coming from other collections that are related to this one data sets collection we needed a jQuery way to pull that data into this code as well and that's what we did here if it's confusing you'll be able to duplicate this project at the end of the stream and reuse it for whatever you want but that's how you do it any questions any questions before we move on and explore together how to do other types of charts and I'm gonna look questions [Music] okay so Johnny so those colors would be able to replace by a short color code of the color field from the CMS yes like I showed you Johnny if it's RGB a or X you know you can add it into web flow and it still comes out as plain text inside of code why can't you do the okay so I answered oh no other questions else Oh oops except no need oops yeah again don't forget the donate e ji and i'll show up like this [Music] all right well moving on let's go ahead and explore together all right so now that we have the basics done let's take this even further let's create a new data point all right no sorry a new data set will call this pi so that's what was initially requested on my YouTube page and you make a pie chart and web flow and yeah so let's try pie chart we could color any color let's go acorrea oh yeah well we'll do that so the type of chart let's see here doughnut and pie okay so I'm using this well the type is pie hey that's simple so let's use type of chart hi well we did that let's go ahead and add some labels let me just use this those example oh now it has options blue okay oh there's donut and there's pie mm-hmm okay we'll try pie first I'm getting hungry where are those options and fig option hmm we'll get to that later okay so we'll do pie and let's put in some data let's just do something simple we'll just do we'll do three so let's say I like things I charge right now let's call it then things I like and then things I don't like duplicate things I don't like and then also it will get mad just yeah we have those three things I don't know how this is going to turn out but let's try 33 and just duplicate that three times 33 and 33 what will this do let's go to the pie chart feel like something's gonna break and let's go yay something broke again if you're not breaking stuff you're not learning but what did I break I don't know what oh I messed up the code when I was make explaining stuff okay that babe right again huh okay okay okay we're doing something okay I got a question from Jason or actually knows how to do a calculated field means totals I don't know I'm exploring this at the same time you're watching so I mean does the collection list need to be on the same page as you are putting the custom code yes it does Jason have you got any workarounds for adding more than 10,000 characters in the embed editor some of the charts I want to create our complex um I think this is the best way using chart j/s because it doesn't use much code yeah and if you have more than 10,000 characters if you're able to cut the code up for example each embed component you use as a limit of 10,000 so if you use multiple embed components then you have ten top ten thousand code 10,000 characters per embed so ten thousand times however many embed elements you're using but as you can see here making this a pie chart hardly any code and it animates all right now I'm thinking how do I make well that's cool how do I make this different colors hmm no we cut out percentage animate how do i oh labels wait how do I order color hover how did you set the color for each of these where'd you put the script all right oh god if I'm gonna go to examples samples PI pie chart there we go let's view this oh my god okay I think it's something here because the reason why I'm looking at here is because these look like color values this is me learning on the spot right now I don't know the things how does each get their color dialing this doesn't say how each of them get their color like this one says config options default this one looks just like what we've put in man well Conda if the chart is in the middle of the page can you make the animation start when the chart gets into view I'm not sure how to do that that's a big question um yeah I if sure the animate is too sure the chart will animate in with a rotation animation it has to be somewhere here something no no good question it's Nate it's value-based color on the percentage I be greater than 50 d'etre Oh need to find the I need to find the JavaScript there's JavaScript okay on the labels ADA said oh wait a minute there's three background colors on this one look at this I'm gonna copy this code and let's put it into the page need color all right so this looks familiar but this is the part that got me like oh okay I get it right here right here background color there's three of them so in our data set we only put one hmm so what if in the data points collection I can also add color ooh now it gets tricky because I have to do if if statements oh man okay challenge challenge accepted so this background color it's an array it's in a box you can see that because it has the square brackets one right here and one right here hey well let's make this happen let's make this happen a background color let me go to my collection I'm going to add a color it add a color to my data points well color is data point color say field save collection for these 33s I'm gonna do this for things I like we'll go ahead and make it little for things like don't like gonna make it red and for things that are met I'm gonna use green okay so those three colors are in the collection now I need to pull that out and put it into that one code so let me display these okay um and I put it into the oh no no no I should put it into these not just the numbers cuz it doesn't make sense alright let me undo all that delete okay I'm gonna set it to the labels the label is gonna get the color a bold color save and let's do it again there's things I like things like don't like and things that are math done okay let's go ahead and can I pull the color values oh this is tough I don't think I can uh I can't put a color I can't pull the color value I can't pull the color value it would have to be something like um asking oh this is the only way to pull a color value when it's right here all right challenge accepted I'm gonna keep going so what does webflow do what does webflow do with the color what is the code that web flow produces and I get this okay in my head I'm thinking how with jQuery can I pull this I don't know unless oh man oh this might take take longer than I think cuz I have to figure out so in my head I'm thinking it's easy to get the attribute it's easy to get the style it's easy to just copy this into jQuery okay I can tell jQuery hey for each list item actually for every label item find the style and copy it but now I'm like now that you've copied it how do I just copy this part I don't just copy this part right here man because it'll be lame to put this code as plain text inside of web flow collections because that defeats the whole purpose of making things visual because plain text doesn't have a color picker how do I do this okay well this is what I usually do whenever I'm like how do I do this I say how to get background color how to get background color from file attribute using jQuery but with get the background color of an element is the okay wait is this it okay yeah that's exactly uh-huh oh wait I saw it JavaScript code this sees this is it how do you see what oh I clicked on an ad no there we go oh it's that easy okay let's try this oh I'm just gonna copy this and see where life takes me Edie I'll rest what's the prob grab it with GIS that's what I'm trying to do I'm trying to grab it with Jas so let's try this or each label item each label item each label item I want to get the color but bgcolor and is it background color did I background color for for this no that one what webflow say yeah it's background-color okay okay so this get the background color and we're gonna save it into a thing called background color and now we need to push this into a box we'll call this box it up point color colors or not we've been calling everything array you know point color array equals a box empty box and so we're gonna going to we're going to push this into the data point color array box and what are we doing we're going to push BG color inside of it this may work let me do a little point color array uh and scroll up I'll so zoomed in huh sorry for getting dizzy hey yay hmm here's the thing it's the type of chart if the type of chart is line then it just needs one background color in one border color if the type is PI that we need to do something else but now we need to do if statement can I do if statements okay so the let me try it something oof no because I want to do an if statement inside of okay and if you're like a swell season software engineer developer whatever please bear with me I'm more of a visual developer alright so I'm gonna say I'm gonna create a new memory called type of chart and the type of chart is the type of this chart is whatever the name is oh wait no not name type of chart there we go alright so a mid-morning yeah I'm background Cup oh wait hmm let me just keep going with this I may be taking the long way around but we'll see type of chart and then we'll just go down here and say if if type of chart is equal to equal to line then do this and do all of this this is the line version okay so this whole thing is well let me take my and we're off Oh much better so if if typeof chart is equal to line then we do all this stuff I don't think it's scalable right now this code but we're just gonna keep going with it if the type of chart so I made a copy and paste and I say if the type of chart is PI then we're not gonna do background color or border code we're not gonna do background color that's coming from the data set we're gonna bring this in from the data point color color color color array and that should work should they've publish yeah I broke it missing are you okay that's a simple one I'm missing a parenthesis oh I think that's another thing to learn from Oh ting is not being scared of the errors and just letting the computer tell you what you're missing oh I'm missing a parenthesis somewhere great where is it though oh it's probably this thing down here okay well I started uh-oh okay so this one I started that and ended it here and then I started this and I don't end it at all oh I have to put this right up here as well as this is confusing to a lot of people I know I'm so sorry I wish I can explain more but now I'm just exploring I'm trying to figure this out live hey resh why did these strikeout what uh so there's no errors things didn't work out right the way I wanted them to artha says copy paste into vs code Visual Studio code and it shows where that's that is what I do yeah I don't even use Visual Studio uh isn't there a way to see what oh man data point color overlay goes into that push yeah yeah okay here this is let me try to tell the computer to tell me what's going into these boxes so right here once I get into here I'm just gonna tell the computer hey show me what's in here I don't know why the number why why it's not working oh man fix oh yeah why is there six inside of that box you do something wrong probably there's six items in that box oh I put what there we go okay I've been naming it wrong it should be label color array able array duh I think I got it okay I just named things wrong I got it I got it I got it sweet okay how to make a pie chart in 30 easy steps but it works okay oh so what I learned is I was naming the the boxes wrong okay so instead of data point color array it's supposed to be labeled color array because remember I'm adding these colors I'm adding these colors to the label not the data points that's where I messed up okay and now I'm naming this label array so put the background color into the box called label color array and the other part that I got messed up is I was also adding these data point items into the into the color array as well well that's where I messed up I figured out I I fixed it and what's all good yay thank you for the collapse in chat again if you have time if you have the means donate right there okay whoa all right I have like seven more minutes for example type stream if you have any questions go ahead and start queuing them up it doesn't have to be about this topic anything about web flow web design how my day's been how your days been or if you just want to chat it's all up to you Oh get those queued up mmm donut and you donut what's the jobless if if operators yeah what what's or or is the two pipes got it so I can do something like you said if it's pie if it's pie or two pipes or type of chart is equal to alright then you can do those same thing they've changed the data set you not publish this should come out as a donut instead easy wanna welcome them to the stream yeah I already answered that question Colleen if the chart is in the middle of the page can you make the animation start with the pink or it gets into view of yeah well I've answered that but let's see can you go animations all back on each what number of steps how can i progress how can i function that renders art this seems like it's calling to me when you render something that's when you make things show up so hmm let's see here let me look at the code but how do you yeah I don't know that would be something Wakanda that's something that I have to figure out because the web flow interactions it's super super easy to do something like scroll into view but how do you do that with code I I don't know hmm something to look into no worries Colleen from earlier TDL rest if you are when designing for web flow what size of board you use um I usually do like usually do we bringing a div block I set that to a max width of 1140 and center that and I call that my main container so yeah 1140 is my max width or containers wonho's saying I'm working on a dashboard in trying to use charged a s alright hope this stream helps you if you got in late hopefully the recording will help you um yeah I would love to see what you create um yeah send me a link on my Twitter whenever you yeah send me a link to your project yeah off on the animation I would understand like want the animation to happen later but how do you connect i'm guessing how do you connect the render function how do you connect the render function with web flows scroll into view interaction hmm I kind of want to know if it's possible I can figure it out stream is over soon yeah yeah if you do figure it out please teach me I would love to learn but using the embed yeah alright so we went from this to this and I was pretty fun let me go ahead and ID so it's a little bit more pro oh let's go ahead and refresh Oh I'm guessing the options there's configuration for layout okay there's a dings and whatnot legend is the legend shown where do you want to put the legend center all right Center end okay any little tip elements yeah there's a lot you can do with this bubble next line set with a bar okay now we're getting crazy wolf polar area oh that's cool that's kind of like if you're playing RPG or something or like Dungeons & Dragons or whatever and you want to do something that's cool that's neat so what do they use simple oh yeah it's simple yeah it's just the the labels right here and then you have the data points and then you have the background colors yeah cool is it possible to put the data in another position what do you mean by another position like push it lower on the page yes you can just using web flow you want to move the you want to move the legend somewhere else like what what what do you want to do because I think that's within the options right here the configuration so for example the alignment of the of the legend so let me go here and I think this is where options come in they sing a line a line is let's say end will this work and I broke it expected token oh geez it's telling me I forgot oh I don't need semicolon there delete that then oh I need to put this on both charts the line in line and they publish okay that didn't work nice why didn't it work I don't know Oh a line enter yeah just a line end right oh no don't have to figure it out um huh yeah that's what I I think that's where I marry now options figuration and this is where I'm at oh no position of legend op okay well let me do position eight or more yeah top left bottom right so I want to put on the right so let me go here and we'll make this an array we'll make this a box a box of options close up the box you go so we have a line position right and that's how the options should show up right no I don't know the things publish maybe Oh No there's all my code leave you sent to Twitter oh okay let me check it out oh yeah and if you want me to look over your site and just give you a quick feedback on it let me know send me a tweet where's my Twitter's right let's see here no oh look at what you got CRM portal alright did you publish this yet okay so you are you whoa alright you're doing things okay okay nice so how can you get all of this in from from your collection so you're making okay you haven't made a collection yet but it's okay well let me see what the final result is okay oh you can do half that's cool okay that's a good start so you're utilizing grid flexbox what do we what are you doing here okay we're using grid and chart j/s yeah nice nice job all right there anymore or okay it's just this page it's start oh how how do we do the things am i will have error I have no errors so when things don't work and you don't have errors that's the frustrating part like I want this to break if it's breaking tell me why it's breaking but it's not I have this I have line ok so this one is going to pie or a donut and I'm saying I want do I have to write legend or something no legend figure is nested below the legend confusion using labels key wait what does that mean using one give me an example oh I said to me an example all I had to do is just scroll down even more oh uh okay so I have to say legend and then I have to do things okay so legend I don't need those I just need to say let me just take options this one starts here then it here let me just copy that oh the legend a line is end and the position is a position a position is the right don't want that's the rid of it and this one talks to this one hiding it this one inside that one there the options the legend left to specifically call it out okay that makes more sense okay I think this work now yay I did it yeah one up that Twitter handle fan wait you got me give credit to um on oh no or you're looking for my Twitter account my Twitter account is the pixel geek very difficult to maintain responsive properties oh yeah well there we go how do you make this responsive yeah one thing I don't really like about grid is Manuel Manuel makes me so frustrated I like to have things flow Auto this Manuel I have to move everything based on break point yeah I would do I would do Auto and everything Oh everything here so I would do auto everything does it makes it makes things much much easier I'm gonna set this top I'm guessing that supposed to be on the top and it should span three this one will probably well this one will probably be the third thing there we go cool so see I have everything yeah that's much more cleaner because when I go here I can just edit this grid and say I only want two columns this time and so everything that's spanning three columns I'll just say - and then this one can span to pick up its own row no I don't want Manuel Oh everything's Manuel again no auto all the things that's my style auto all the things all right so this one will take up to this one will take up to this one will take up one row two columns and then everything else is two columns one row two columns one row and so see how easy that was much easier to do and responsive because everything's Auto like even this why is it why is it manual you know who your body is a grid that's interest I never do that I never mess around with body much I would keep that as display block and drag in and overall grid inside of it and then do your things I'm guessing your navbar gonna go to the first thing in a call span to okay it has that your sidebar is going into the grid all span one row span to okay and then this you go and make sure it's not auto and what happened in the sidebar Oh your sidebars fixed too okay that gets crazy yeah um need to be fake and this grid can be oh eight hundred percent each by bar 315 and so what you can do with this grid is just say the first column is 315 pixels boom and then this sidebar right here yeah there you go and probably no probably no gap there you go it's much much more much much more cleaner okay and so if I want to go responsiveness I can say hey actually you know this side bar instead of 315 leave it as Auto so it's it's growing as as wide as its parent and its parent is that one grid column which we set as 315 right here and so if we want to do responsiveness we can go here and control the width with this one we want to make the width smaller and there we go something like that if you want but yeah and then it'll get crazy we can get here so how are you gonna solve this in my opinion if this is some sort of nav bar this would have to be pushed to the bottom somehow using like fix and then pushing it to the bottom and there we go making sure that your Z index is like super high and then this grid right here I know I'm going really fast but um this grid right here we don't need that first column just delete it and because of Auto flow you delete one column everything just flows nicely you don't don't worry about it yep like this I'll spend two because this data wrapper is just doing its own thing that's yeah and then when you get here oh yeah you already set oh yeah I'll make a clip for you of what I just did um so you can review it is I just fixed it for you but um hopefully that helped yeah grid manual do not like this that's not my style grid Auto flow makes things more fluid and much more easier to control because when your manual you have to tell each element hey you go here you go here you go here with flow it's like hey if you're taking up the whole row the next person will just lo on down to the next one and the next one will flow on down for next one that's much more clean that's my style yeah Nate maybe have a virtual dice you can have a ton of sides not it's not confined by physics Oh that'd be cool a chart based on RP yeah yeah I'll be interesting like a character maker there's probably tons of character makers out there but yeah I'm making your own with a little bit of code and web flow that'd be cool be cool uh yeah did I miss any other questions you I've answered all the questions yeah pretty chill stream a lot of very technical stream you know I was doing my best trying to help explain and explore at the same time yeah any other questions so yeah the donation link will be up for a month and it goes to that stream labs donation page it's legit go ahead and donate you there pixel geek CEO / donate thanks again to Colleen for donating twelve dollars to the the donation fund thank you so much and to anyone who's watching this recording and is donating thank you in advance these streams happen every Saturday from 10 a.m. to 12 p.m. Pacific time yeah if there's no further questions we'll just end it here thank you so much for being on the stream take care of yourselves be healthy be safe you're out there protesting thank you so much you're doing a lot here you're doing wonderful things and I always felt like as these past years went by you know things got crazier and crazier it made me realize it takes a lot of bad to invite a lot of good and vice versa it takes a lot of good to invite a lot of bad and we're seeing this right now so many groups that you would never think that are coming together are coming together we're great positive reasons and it you know it makes me sad Oh full makes me all the feelings but the one feeling that is that is constant is love and you know science you the cosmos it doesn't really care doesn't really care who you are and that's okay you know and if we can just come together to answer those questions in in small ways in all these small ways it helps and you know I've been sad this whole week but being with a very positive team I'm very lucky to be part of a positive team the webflow team super diverse and is trying the team is trying our best to democratize the web but you know stay true to our brand which is help everyone it shouldn't matter shouldn't matter who you are this helped me a nice person you know I know none says you're good human being mate well done thank you you are to love you all thank you so so much for being here and as always make the web beautiful together yeah you [Music] [Music] [Music] [Laughter] [Music] you

Channel: pixelgeek

Views: 2,571

Keywords: content management system, design, graphic design, jquery, responsive web design, tutorial, web design, web design tutorial, web development, webflow, webflow tutorial, pixel geek, pixelgeek

Id: _jWZmar8NFk

Length: 111min 41sec (6701 seconds)

Published: Sat Jun 06 2020