Mekko Charts with Weweb in Under 30 minutes
Ray Deck shows how to build a Mekko chart in WeWeb using AnyChart and the StateChange Embed Converter. He creates a JavaScript workflow that loads the chart library, renders data from a JSON field, and handles updates by clearing and redrawing the chart when data changes.
Chapters
Okay, so I'm going to take on the challenge of trying to implement a Meko chart, which I don't even really know what that is, in, in WeWeb. Here it is, a challenge from, uh, Casey Hemingway saying he wants to use this Meko chart, which I can find out more about by clicking over here. And there's the AnyChart documentation, which talks about what Meko charts are and what components we would need in order to get going. So we're going to need to have a couple of components installed. In our WeWeb. So the first thing I'm going to do is go into WeWeb, and I'm going to say, uh, so sign up with Google, fine, sign in, don't care. And then we will have our WeWeb, and we're just going to create a new— create project, blank project, and name is going to be Echo Test All right. And I'll say create. Great. So we got a Meco test and we're just right now gonna have pretty much nothing in it. We're going to just sort of see what we can do. The first thing I noticed that the Meco chart's going to require a couple of script tags. And so I'm gonna copy those two script tags over to the StateChange WeWeb Embed Converter. And the way we use that is we can just paste in these two tags and we convert them into a WeWeb JavaScript action. Which I will copy and then go over to my test and on the page home load event. So we go to workflows, add a workflow. So on page load, in fact, for early add, we're going to say, let's pick a custom JavaScript and we're going to edit the code. And we're just going to paste in what we got from the WeWeb embed converter. This will bring all of that AnyChart stuff about the mecho charts into the current context. Fantastic. So now we have ourselves this. Let's, let's go take a look again. Let's close up the workflow. And now we have ourselves the field again, right? And go back, learn about more how to use the mecho chart. And the mecho chart is going to have— wants us to create a mecho chart. And that is fine. We're just going to need to have a certain amount of data to it, which means we're going to have to do some JavaScript in here, which is going to use anychart.mecho. Anychart should exist at that point. But the trick is we need to know how to attach it to something that is on the DOM. We'll get more into some, what the data can be and et cetera. So let's go over to the quick start and we will learn more about the quick start for AnyChart where we can have a container. That's fine. And then, okay. It says AnyChart can do an on document load event. We're not gonna worry about that part yet cuz we can control our own workflows from WeWeb. But we can create a chart and we can set data and then we can draw it. And we'll be able to set what the container is. The container is set via ID. Okay. That's cool. So what we can do now is go back over to WeWeb and say that there's going to be a div that's going to need to hold all this. That's going to be a— we're just going to need to add an element to it. So let's say we're going to do a plus here and we want to get a div. Oop, there's div. And here we should have our div. Our div can have— we're not going to change anything about it except to go set its ID. And we're going to set it to mecco-container because we're going to use that in code. And so now what we want to do is probably add another, I think, Yeah, I'm going to add a button to do this because I think it'll just make it a little bit easier to understand because buttons can be— we'll have it do create the button label, the text, text in the button, and then we'll say this is a setup chart, make chart. Okay, and then we'll be able to attach to the workflow, add workflow. And we will say add an action. And again, we'll just do a custom JavaScript action because why not? Now, because we previously loaded in the Meko stuff, what should happen here is we should be able to go to the, uh, go back over to here and have something that looks like this stuff. And we'll say copy, and we will go back over to Meko test. And we'll say, all right, let's try, let's try pasting that stuff. And it's going to go to the Meko container because that's the idea of the container that we set up. And we're just gonna go tell it to draw a pie chart with the silly stuff in it and not worry too much more. Just base case. Let's close it up and we'll say close. And cool. Let's put this in preview mode and see what happens. So we go to make chart and nothing happens. So we go over to our dev tools and we find out what happened here. Anything interesting? Any chart is not defined, it says. Okay. All right. So let's refresh the page. Sometimes we need to refresh pages in order for things to work properly for us. And all right, and we will go over here and we'll say make_chart. And it says pie chart's not supported in this module. That's a much better error message for us to see because it implies we just didn't load the pie chart, we had only loaded the mecho chart, which is probably correct. That's all we told it to do because when we went to the mecho chart documentation, the first thing it told us was download core and download mecho. Probably didn't download any of the pie stuff. Okay. So let's have it use this Meko chart, my Meko, and we will go back over to here and click on the button. We'll go back to the editor again and we will click on the button and we will go here and we will say workflow, custom JavaScript, the code. And you say, we're instead of saying chart is going to be equal to anychart.py, we're just going to say it's equal to anychart.meko. And I'm just going to comment that part out for a second. And say this is not anything that's all that interesting. Duh duh duh duh. So now we're just gonna add a Mecho chart, give it a title. I don't know if that'll actually work. Set it to the Mecho container and draw it. Let's see if that works. And we will close that up and preview and make chart. And it says chart is not defined. Why is chart not defined? And we will go back over to the pencil and we will click on this and we will click on the Workflow, and here, and the chart. Ah, I need to actually say var chart because that's a JavaScript thing. Whenever you reference a variable for the first time, you need to put the word var or let or something in front of it. And that's the reason it was complaining here. So let's close this up again and close this up again and put this into preview and click on, uh, make chart. Oh, hey, look, starting to get a chart. There's something here. We're not done yet, but there's something here now. So the next thing we're going to do is go over to the Mecho chart and learn more about it. So all I did was say create a Mecho chart, and then we want to create an example. So let's try putting in some data. There's also a mosaic version of this in here that we could use, but whatever. And hey, look at this, we have this data that we could use in here. I don't see where seriesData1 is coming from. We can create a dataset, seriesData1, data map as— okay, seems like there's some stuff in here. So let's just grab this stuff for a second and we'll copy that. In fact, what we'll do is say we're gonna probably just copy over all this stuff because this all looks really interesting. We'll make chart out of all this. So let's go over to our Meko test and we will go to our pencil and we will click on the button again and go to the lightning bolt and go to the workflow and go into the custom JavaScript and go to the JavaScript. And we still like the title of the container and the draw. So let's paste this stuff into here. We'll say this is the raw data we're working with and series data 1, 2. Like we talked about before, there would need to be a bar in front of the word chart, and they didn't like to do that in their examples. I'm not sure why. And, and otherwise this stuff down here is the same as what we had before, so it seems fine. So close this up and we'll close this up and we will press play and we'll run make_chart. Oh, hey, look, that looks much more promising. It also doesn't look quite right. It looks like there are a couple of different— it looks like we copied it twice into here. So let's just refresh this page for a second and see if it works better. And we'll do make chart in here and click on the eyeball so we can preview. And we're going to make chart, and it says the feature of MecoChart is not available from this module. Cannot read of defined reading Meco. So I'm just going to do a refresh of the page, and we're going to go to the eyeball and pre-chart. Oh, hey, look, gave us everything we wanted. And we have the tops and bottoms and two different views and all the preview stuff that it gives us. And then a reasonable question is, okay, what's then the simple fashion? So like we have this just in a div. So can we control the size of the div if we're sitting inside WeWeb? And I think the answer is yes. So we go back over to here and we say, okay, here's my div, which is the whole thing. And right now it's set to flex, but what if we said that the sizing is going to be centered, and we're going to set its width not to 100%, but to, I don't know, let's set it to 400 pixels. And then what I did up here was establish it'd be centered versus left-aligned versus aligned. So you can put the chart really wherever you want, uh, because now it's just being wrapped inside this div and can be laid out around everything else. Yeah, so far so good. The, so we can do other layout things with that. The other big consideration though is gonna be where's the data supposed to come from? And so we can click into the button here and change up its workflow and okay, it's gonna run custom JavaScript. We need custom JavaScript to get this work done, but probably the bigger deal here is we're gonna need this data. And it would probably stand to reason we could get data from like a variable if we wanted to, or from, or from a collection, right? This looks like a good candidate for getting from a collection of data, but let's just say we're going to get this, all this data here. Is going to exist in a— I'm just going to copy that for a second. And I'm going to say this, this is going to exist in a variable. So let's go create a variable that's going to store the stuff. And that way we can start to talk about how we map this into the way that they can compose into the rest of WeWeb without having to go build a whole lot of external components. And we will go to the— up here where it says data and variables. We're going to add a page-level variable and it's going to be— let's call it data. And the, and the value is going to be. This stuff here and the type of it is going to be an— this so far, it looks like it's just an array. Let's have it be an array. Great. And the value is going to be all this stuff. It's an array of arrays. So far so good. It doesn't really like the fact that all this data is in here. If I made it into an object, would that work? It also says invalid. It's an array. An array of what? I don't know. And this is something that's more complicated like this. It does not appear to really want to handle query. No. Ray. And we will say that is all— well, you know what, we'll say it doesn't have a default value at all. Okay, that's right. Do, do, do, and variables, and create. Fine. So now we have something called data. So what we're going to do now is say we're going to create a new, I don't know, text field. And we'll create the text field. Do, do, do, do, do, a form, a— a long answer text field here, and we're going to call it— let's see, instead of calling it— in fact, you know what, let's be better about this. Let's add from input and controls a long answer, a more sophisticated thing. That way we can have not just a description. We're going to say this is just going to contain the JSON because why not. JSON for the chart. And this is going to be— or we can just enter a description. And the description is going to start with data in here. The text is going to be not sanitized. No typography, nothing. What's the value in here? And over here, the input type, the initial value is going to be this stuff. It's going to be the actual JSON for it.. And I think that should do okay. And then, so now what, what this sets us up to do is say this text here, we're going to turn into, uh, JSON that we're going to use in the chart. So I'm just gonna grab this button up here. And also say this guy over here that he really has permission from where I sit from a layout point of view to live here in the middle. If he wants to. Maybe he doesn't, that's fine. And then this guy here is going to be the chart button is going to set up the data for that chart. Not based on this, but based on long answer value. Except we're going to need to actually cast that into JSON in order for that to work, because it needs to be turned into a data structure. Obviously you'd probably get this from like backend data or something instead of using this technique, but it allows us to illustrate how we can modify this. And then it's going to set up with the Meko, and clear, and draw. And I'm just gonna quickly ask about the draw function here. And draw. Function basics. No, I don't really know what that is. Okay, if I say an overview, I'm not really sure what that's going to do either. And if I just go back to a quick start, the quick start just says it would create it in the container and chart.draw. And I'm not sure what else I would do here. Container, container, draw, draw. This doesn't seem to have anything about how to clear them. Oh, there's a JavaScript API reference down there. And I'm going to say, what's my chart? Basic API, Mecho, create a Mecho, and, and it creates a chart, and that will contain the chart data, which is fine. And then I'll just draw— what about just say up here, draw? Is there a draw method in here? Fascinating that there's just not, which is very weird. And no charts. We're sort of looking around, seeing if there's anything else that's like related to a base case of how this thing works. The functions overview, these are all the functions we can do off of any chart. Any chart will allow us to create a MECO. The MECO will actually return a chart class. So it returns a ChartChartsMeco, which is fine, and it extends the chart class. Okay, and then the methods are going to include controls and data and the export stuff, interactivity, and how you're going to associate it. All sorts of neat things on here. And I'm going to just— here is Draw. Great. And if I say I want to draw, basically it was draw. Would I want to do it asynchronously? That— not sure how much that matters. And then is there a clear? Remove. Remove all series. Okay, there's potential that we won't be able to clean up after ourselves, but let's just try out here going back over to the, the AHRQ custom plugin. We will try— we're here in my WeWeb, and I've just got my data. I'm just gonna see if I can get this thing to run with that particular data. All right, let's just try refreshing the page. And I'm just gonna save my chart. Oh, right, I gotta click in preview mode. I go to my chart. And it doesn't like that. It does not like that at all. It says dot dot dot 3000. Okay, that's clear. I did something wrong. Let's find out what that was. So I go back into here. All of this stuff seems fine. So I go to the lightning bolt, go to workflow, go into here, click on the JavaScript, and say, what does it not like about my data? And in dataset variables, right, this guy. And sure looks like it's going to have all of this data inside it. So let's just do a console.log of— well, actually, it seems like this is crashing out here. So it's not able to actually do that. So let's find out what's going on by introducing a console.log of this particular variable. And the easiest way to do that actually is to copy the variable here. It's like copy, and we're going to go over here to the dev tools over here, which I usually— you can get to by doing right-click and click inspect. That's how I got here before. And I can do paste wlib.variables. Well, we're not going to worry too much more about that. So let's just say if we just get variables here, we're going to say do this the hard way and click on on that, copy, and then, and we're going to say paste, and we're going to say console.log and close. And we'll just give this a go. Let's find out what it has to say. So let's close this, and we will do eyeball and click make chart, and then it'll tell us this stuff all looks like— ding, everything looks Fine. So it says unexpected token. So it doesn't like this formatted as it is as JSON. Open, close, fine. Open, close, fine. Open, close, fine. Open, close, fine. Has a comma at the end. I wonder if the comma at the end is the crux What's the problem here? Let's try it again. Oh, there it was. So sometimes it's just about identifying weird things, and this is why you want to let more of the no-code tools handle this for you. But what if we want this to be something other than 16,500? What if we want this to be 12,000? How about 120,000? Let's make it big. Uh-huh. And then this becomes 120,000, and you can see it's also adding it on, and clearly the draw into the same div is not existing. Exactly what we wanted it to do. So we're going to need to introduce some more functionality in order to be able to make that work a little more properly. So let's click into here again. We're going to go into here again. We're going to say, let's just clear the div. And the way we would clear the div is we can go into— oh, sorry, we'd probably do this at the button. And we would, you know, go back into here and edit this. And at this point, no, we don't need to console.log this out anymore. That's fine. We're getting the data now dynamically from there, and that, that works correctly. However, the question is whether or not the chart, right, already exists. So what I'm going to propose we do is we're going to say window.chart equals chart. See, in JavaScript, in a browser-based application, your window, the whole thing that surrounds, is considered global. Everybody has access to it, all those little code bits. And so you can use just a a little bit of code to say, let's remember this chart by putting it into the top level. We can also put into a WeWeb variable or something, but the, that one of the things about WeWeb is that it makes sure you're never actually leaving the page. That's why some of the page transitions can be so good. So we can say also if chart, if window.chart is not, it basically, if it exists, right? Then basically let's go clean it up and we'll say window.chart.remove all series. And because that's something we just learned about over here where we have remove all series, and so we'll say we'll move all the series before we do that, and then we'll just say let's go to town. And then that way we keep on, and then we'll say window.chart equals undefined. And then basically what we forget about the old chart, we get the new chart, we get to keep on, you know, turning this particular wheel. So that's what we're doing with that. And we will say close, and we will say Eyeball that, and let's make the chart. And okay, so it's clearing the previous chart, but it's not actually removing the previous chart from the container. So I'm just going to ask if there's a clear button or something I can do to remove. Do cancel. Is there anything like a clear? Remove all series. Okay, so what it looks to me like is that probably there are two different concerns we need to do. Like, one is going to be adding the chart, and the other is going to be replacing the series that are sitting on the chart in order for it to work properly. So let's consider those step by step. The— when we're in here, we could say, let's, uh, I've got my button, right? My button's going to initialize my chart. I'm gonna go into the custom JavaScript, fine. And let's separate the concerns. All right. So one concern here is I'm creating a chart out of stuff, right? Or creating data, right? This is what this top part here is. And then I'm clearing this, which is probably not the most important part. But then there's the, I'm creating a chart using Mako. I'm going to set stuff. Set certain information about it, and then I want it to draw. So what I think I probably want to try doing instead, we're going to say if, uh, bang, if window, uh, if, if a bang means not, so if it doesn't exist, window.chart, and we will say here, okay, then we're going to create new chart and we're going to just say, I'm going to space these in because it makes it a little easier to read, and then underneath that we'll say After that, we're gonna bar chart equals window.chart. That way we're making sure we're always referencing that global chart. So we're saying if there's not already a global chart, we add it, otherwise we don't, and we're going to set up our, our data, and that's all going to look fantastic. And then we're going to say chart.remove_all_series so we can clear it out each time. That way we're staying up to date. Maybe we'll do fancier things for animations, but right now, this, this stays relatively simple. So we'll say close it up and we'll say close that up. And we will say, let's, let's refresh the page. Just reboot all of these drawn things that are in here and say, what happens if we start from a clear environment? And I'll say, make the chart. And I have to go into the preview mode in order to try it. And it says it is not valid JSON. Oh, that's because I didn't appropriately remove this thing second time through, so I can click that. All right, now— oh, look at that, it updates the chart! 2,000. Oh, look how tiny it is. And now I can add something else, which is going to be 16,000. It, it is properly updating things as I update the JSON for the chart. So you can be getting things from the, from the database and just using this sort of update. And the, and rather than setting up this action to be associated with the button, you could have it come through like a collection that you set up and have that, you know, collection keep on feeding through. And then as you update the collection, that's what the actual chart gets bound to. Now you can also create more code to use, to create like a Vue.js component that will then allow you to manage more of the attributes. In here using the no-code control plane, right? Like getting more of this stuff as opposed to just being able to relate to the outside container. But what this can do is we'll demonstrate in 28 minutes is you can use a few tools and a little bit of JavaScript to get WeWeb to work with something as arbitrary as a chart that you've never seen before. The Meko chart from, from AnyCharts. By using WeWeb, by using a little bit of our embed converter from StateChange, and, and then getting this stuff going. And making more of this stuff going relatively fast is exactly the kind of thing we do when we focus on the hardest 5% of problems over at StateChange. And we have a suite of tools, of community, as well as daily office hours where we really just focus on hard problems like this and trying to help people ship meaningful projects faster. And I hope that this video has helped you maybe get a little closer to being able to ship your WeWeb and visual chart-based project a little quicker as well. See ya.
