30 minutes with Servoy part 4: ChartJS for Servoy

Hi everybody, welcome to webinar number four in the very popular series 30 minutes with Sirboy. I’m Jan Ailman and the founder of Sirboy. Today’s presenter is John Devlin, Senior Engineer at Sirboy. John helps IOS to get up to speed with Sirboy’s great technology and today he’s going to share something new with us. That we’ll talk about in a second. In this short but in Devlin webinars we show new features, components and solutions. So please keep sending in your suggestions on forum.Sirboy.com. You’ll find a main thread where you can post your suggestions or if you don’t go to the forum, just Twitter them at Sirboy and somebody will pick it up. Today’s chat will be presenting a new web component which I’m actually quite excited about. I like to use these kind of components. In fact it’s an early release but we’re putting it out to get your feedback on it. We put a lot of work in these sessions, not just slides and demosers we’re doing but actual components and solutions are being released after every session. All free. So in return I’m going to ask you a favor. If you haven’t done so yet go to GitHub and create an account then post issues on the projects you’ve started or are going to start using. Like the one we’re going to release today which will be available right after this webinar or if I’m not mistaken. So please go ahead and do that. If you have any questions during the webinar feel free to post them in the questions channel where I will be keeping an eye out on. We’ll make sure to address all of those questions whether during or after the session depending on the time that we have been trying to keep the session within about 30 minutes. If you like what you’re seeing feel free to post a tweet at Sirboy in it so that we can see it as well. All right having said that let’s get started. Sean are you ready? I’m ready. How’s my audio? Sounds very good. Okay. Am I screen visible? Yes we can see. Okay. Excellent. Yes but this is the last in this tech series for the year. We’re going to continue next year and we’ve been sort of alternating so far between web component updates which favor the the new HTML5 client and then other topics as well including best practices, new modules, samples, tips, etc. But this one is focused on a new web component that we’re excited about. We decided in our sort of roadmap for what components to build it’s driven a lot by what our customers need and what feedback we receive and one of the items that we’re seeing that we need a solid charting component that’s sort of versatile and all purpose and can be used in easily and serve voice solutions. So of course we don’t build this from scratch. We look at what open source libraries are out there and we identified charge AS as the best candidate to use in serve way. Of course you could you could use other chart libraries as well. It doesn’t mean that you’re going to be limited to this only but this is the one we decided to start with. Mostly because the API is very clear and straightforward. It has a wide range of features and it has the right license as well which is important. As we’ve wrapped this component made it available as a serve-away web component so you can drag and drop onto your form and then you can also bind it to a found set so that you can supply the data directly from a form found set or a related related found set or a global relation. We also have started with the event binding and so you can handle events that happen down in the browser on the corner itself and we also leave open the sort of raw chart options and data sets that can be passed in so that your data might come from elsewhere other than a found set it might be something programmatic or something hard coded. So if you want to go directly to the component you can use the full options that are available. We’ll take a look at what those look like. So enough talking about it let’s do a demo and then we can revisit sort of how it works. I have here sort of a simple sales order screen and you can see in the middle I have a chart. This chart has been configured to show the relative cost in the order of each item that’s on the order. I can change the type of chart that is used and I have a few of the options available. There are others as well in this library. You can see pie charts, fancy things like polar area. There’s also radar charts, bubble charts, etc. But this one’s focused just on a few. So you’ll notice also that as I change the chart type it’s updating immediately but also as I kind of click through my different orders you can see that because the data is the chart is bound directly to the order to order the order items found set, a related found set. You can see that the chart redraws itself. There’s no code involved in that. It’s just the found set buying just quite nice. You’ll also notice that if I were to change the quantity of one of these products the currently selected product here is a Chang at 20 and make it something like 200 that the chart redraws and you can see the relative value $3000 on the order and it takes up a larger area on the donut chart. You’ll also notice that there’s event binding to the chart. So if I’m clicking around on the chart what I’ve done is just trap that event and have it select the right record down here. It’s kind of arbitrary but it demonstrates that as I click around in the different values on the chart and it doesn’t matter what chart type it is. You’ll see that it’s updating this found set selected index down here. So this is an example of the found set binding chart. Let’s go into the IDE and take a look at how this is hooked up and then we’ll come back and look at other examples. So I switch over to Servoy developer. I have open here the order details form and you can see that the web package for the chart.js is available here in the palette and you simply drag and drop that onto the form and then you can see in the properties you can set up the binding. So first of all I can change what the default type is to one of the I can also set up the found set binding. In this case I’ve selected orders to order details. You can use this forms found set. You use a separate name found set or a global relation. Once you’ve selected your your found set then you can bind the different configurations of the data providers in this found set. In this case I’ve only hooked it up to what supplies the label and what supplies the value. But the colors are sort of hard-coded into the chart component. It’s like default colors but of course I could make a calculation on the table to return the background color and change the color on hover etc. The border width. Currently those are all coming from default values but they can be dynamic from the data source. So it’s really that easy. You just go and you pick the data providers that you want any data providers where columns calculations aggregates global variables etc. form variables. And then you’re ready to go. It’ll render the data. Also you’ll notice that when I was clicking in the chart I was able to trap the click which is sent back to the server and I can handle that and do something with it in that case I just synchronize it to the the form’s found set. So you can you can trap the event in hand-hold let’s server side and one of your functions. Let me go in and show that to you. In this case it just passes the index in the series that was clicked and then the label and the value that’s a zero-based index so I increment it by one as you know the found set indexing starts at one and so then I sync it up here by selecting in the order details grid there the selected index. You’ll also will have noticed that on the order details form I put a little combo box there so that I could change the chart type. That is simply bound to a form variable. So I created a form variable chart type here and then I handled the data change event and I pass in to the element the chart type. So you could see that there’s also if I link with the editor here there’s a runtime API for the chart to dynamically set the type and to it could dynamically set the found set if it’s not another that makes sense. There’s also this other method where you can pass in the full chart data. So if you don’t want to buy into a found set it’s okay there’s just sort of the baseline support for all of the chart options and you can pass that in as an all and I have some examples of what that looks like. So let’s switch back to our example here and you can see that I have a bar chart in this case there’s there’s more one dataset. So when it’s bound to a found set there’s only one one dataset but here I’m able to supply you know a comparison chart with two datasets. I could combine two different charts in one here’s a bar line combo donuts we saw again two different datasets as lines also currently the line chart with a found set buying doesn’t make too much sense because there’s only one value data provider. We can support a line chart bound to a found set by providing an X data provider and a Y data provider. So we plan to do that but in the example I do it doesn’t really make much sense. It makes more sense if you have two data points for every every point on the graph. We saw pie charts, polar area we saw, great R we did not see here’s radar with two different two different datasets again also the ability to do is to act bar with two different datasets. So let’s take a look back in a Servoy developer at some of those examples. Let’s take a look at the bar chart example. You can see in the on show event it’s drawing the chart and I can maximize this and the different than the found set bound option this is just passing in the raw chart configurations and this doesn’t really deviate from the underlying chart AS library if you were to use this outside of Servoy this is the same way that you would populate that it just sends it down and redraws the chart. So you can see that there’s really three components to this there’s the the chart type which we’ve set as bar there’s the data options which includes this array of datasets and so in this case there’s two datasets as opposed to the found set bound which only has one and then there’s the chart options and this is where you can pass in some information in this case about the x and y axis. Finally there’s the the draw graph where you pass in this object and away you go. Pretty much any one of those examples that I showed you which don’t use the found they mostly look the same just with different configurations. So here’s the long one you can see the type is line a bit different configurations here there’s some some hover background color changing etc. So it’s really up to you and again more chart options it’s really up to you if you want to go the easy route and just do the found set bound directly to data if you really want to get customized or you’re dazed not really coming from a found set then you can you can do sort of the raw root node and pass it in to the chart. So that’s pretty much it it’s a short demo today we welcome some questions and feedback. Y’all, is there any any questions coming in? Yes there are, Rachael. Great demo by the way even I understand it. All right so let’s see there’s a question from Yos is a scatter chart also possible. Scatters also possible. I just didn’t have a sample of that. That’s great for you. All right so let’s pretend shown that I don’t have this component installed like you do then how I start using it in a certain solution. Okay so this is available on I was prepared for this question. This is available on GitHub and the homepage for that is the SFI chart.js project. So you can you can get the raw source code you could also download any unreleased versions there but of course we want to make it easier so if you are in the IDE and you have your new solution you want to add it to simply go to the web packages manager and open this up. We’ve made it public there. You can see that we’re on version 1.0.0 beta1 so this is a beta version and all you have to do is this you can see it’s added already but you would click this plus button and it will automatically install it and make it available to your solution and then it would show up here in in the palette where I was able to drag it on and start using it. So there’s really not much work to install it. Also the example solution that I just showed you is available on that same if you go to the release page on GitHub I see that here’s the release where we have any release notes and the binaries you can download the example solution which is a dot surf way export file and you can import and begin using it. If you import the sample solution you do also have to install the components separately a solution import never installs components they’re separate dependencies that you have to install on your own. I should also point out that just repeat what you all said at the beginning of the webinar we really encourage you to to create a GitHub account and get accustomed to that if you you haven’t already if you you can add yourself to watch repositories so you can be notified by email if there’s a change you can file issues on the issues page we already know of a few issues with this component that we’re working on and you’ll get emails when you watch repository about new releases so it’s really a good place to start. Also I want to point you to the rjs documentation this is especially useful useful for the the second option I showed where you’re not bound to a found set but you want to pass in the raw information you can see that the different the different charts that are supported and there’s examples someone asked about scatter charts so here’s an example of how you would do a scatter chart it’s really this object that you pass in with the chart type the data and the chart options to do that and it’s there’s some clear documentation here and examples there’s also lots of questions and answers on stack overflow it’s it’s a pretty widely used library so there’s a good support for it it’s one of the reasons why we chose it. Cool so all right let’s see how there’s a few more questions coming in while a couple more questions pop in so feel free to post them still in a few minutes to go I have a quick note you may have seen this already on Twitter or in your email box but we just announced Servoy world if you are interested in learning more about Servoy world then on our home base Servoy.com just click on the banner for Servoy world and you’ll see all the details it is going to be enhanced them on May 17 it’s deep place to not only learn a lot about Servoy but also to meet the engineers we are a deep team to the other people at Servoy and obviously other developers and share a lot of interesting things with them and also obviously have a beer or whenever your favorite drink is and during the second time in Casa 400 a very nice hotel actually one of the few conference hotels that has a very good internet connectivity which we all love I guess and make sure to sign up early if you want to say some money I believe we have an early bird going on if you sign up soon I think in the next month where shows only 385 euros we really try to keep this conference priced as low as possible so that you can come with all of your of your colleagues to it if you’re not in a based in the Netherlands obviously the source used to come it’s very cheap to fly to have some from any place in Europe and that’s all next use and even from the US the moment if you go to flights.google.com you can find flights as low as $400 coming from the US to to have sedems red bombers to visit Amsterdam also made it whether it’s usually pretty pretty good all right having said that a couple of questions coming in for you Sean this question from Imra does it already fit and skill within responsive form design and need recommendations on that topic. Currently it’s that we we have a small issue with the sizing of the because it’s based on a HTML canvas that we’re working on so the the charge a as library does work in responsive and absolute position and so currently the responsive does not work in this beta release but I see no reason why we can’t get it to work there’s there’s a small issue that’s blocking us to get there and so if you keep an eye on this repository we’ll we’ll make releases with release notes when that’s resolved. All right excellent and this a question from us is there a specific reason for choosing chart js over for example google jars yeah we looked at google charts charge a s as a really straight for api it’s really well documented we also found that the contributors is a pretty high a number that’s important I think when you have an open source project so google charts was on the list but I might turn that question around to you and ask for your feedback why would you want something like google charts over something like charge a s is there a specific feature or use case that you’re interested in send us your feedback on the forum that yon mentioned or directly in the issues section of the github project. All right if there’s no more questions yon I think I want to take a look forward real quick and just look at this continuing the series we’ve had a lot of positive feedback so we want to keep it going next year it’s going to resume on Wednesday January 11 and continue to run for two weeks right now topics are to be determined so it’s important that you get your back in because it can really drive not only what the topics are but also what what kinds of open source modules components and example solutions we’re able to work on. Excellent yes it is sending in feedback is it’s great to keep this series going because you can task what what you need us to deliver in terms of components features and capabilities

Close