 So, hello everyone. My name is Lakshman Prasad. I, first of all, I'm sorry for the code I have today. I want more than the novel dosage or code this morning. So in case I act something weird, you know why that is. So, so I earlier cook out of the country products, doing web development and something using Python and Django, kind of like that. And in my current role, I work at McKinsey as software architect. I work in a team and work with consultants in order to deliver technology solutions that he drives. I have never really worked in the front-end part. The most front-end that I've played until recently was working with Django admin. Who knows Django admin? Django admin, basically the front-end is you don't write the front-end. It provides the front-end for you. So, you say what the forms, you know, what fields on the database do you want and then it provides the UI for you with auditors. So, I got started with AngularJS just a few months ago. In fact, I worked on it. I wanted to work on it, get the application out. I was not able to, so for an entire day, I know how some of you might be feeling if you're still doing AngularJS. The initial steep learning curve is very hard to come by. I got frustrated the entire day without being able to do anything. And then I started reading the book by Shyam and Briar and then, in fact, in a cafe not too far away from here. I've been taking the Angular coolie ever since and then I hope to be able to share some of that with you today. So, today we're going to be able to, today we're going to discuss an approach for rendering charts with AngularJS and high charts library. Think about it again. I think maybe the top title may be slightly misleading because although we go through the directives of the high charts themselves, we want to go through about it in a perspective and objective of being able to develop Angular directives in a good way, not necessarily to create good charting libraries, which you can of course do. So, the way we learn Angular directives is by using some of these high chart directives by building it, by discussing a lot. Where do you want to put different components? I would like it to be an interactive session. I want a lot of feedback from you. So, I recently developed an application with hundreds of charts and this is the approach that I've used. In fact, I'm planning to put it all together in the form of various different directives and open sources. But even if I take some time in order to do that, and if you are doing it meanwhile, by following the approach that I'm going to discuss today or we're going to come up with today, you can use it in your applications today as well. So, I don't know, in case, so I want to leave you with something interesting in case you don't find this talk interesting. So, I've built an application along with all of those directives, which is to visualize such as the Nusker's carrier stats. You can check it out on jump such in ST, you will be able to see the application. If you find that interesting, by all means go ahead. So, in case, even if this talk is pretty interesting, it's being recorded. So, server-side charts, we all know, right? I mean, chatting is a pretty common thing. It's not something new. Of course, we have some fancy ones today. But chatting has been a possibility since a long time. I did a talk at Fifth Electricity where I showed off creating, you know, analyzing the data from users. I did this in order to find out how many, you know, what is the most popular headphone used by someone? What is the most popular keyboard? What is the most popular hardware, software, etc. And when we analyzed those data from users, I generated that grasp pretty quickly. It's not really hard at all. That's pretty much all it took in order to create a chat in order to find out what is the most popular headphone or most popular software in this case, the keyboard for that matter. So, you basically, you have a matrix and then you plot with a kind equal to whether you want a bar, pie, or anything, and then you get the charts already, right? So, server-side charts are a possibility and they are pretty easy, low-bit dealer bar. That's pretty good enough for publishing. I published findings from that one using exactly those graphs on Medium. It got front-paged on Hackenuse and then there was tens of thousands of people giving it. There was pretty good feedback. There was charts and then I was able to publish it. If you are a magazine company, then these static charts are good enough, right? So, the only one downside about these server-side charts normally that comes is that they look Excel Cercar 2007 rather than JavaScript Cercar 2013, which is I think a valid objective. But in order to counter this one, there are very good things. This person, Cam Davidson-Pylon, has a very good course in which he creates his own, the courses of probability and statistics in order to display excellent graphs. He has his own themes for my plot lines and then you can see these graphs definitely do not look like Excel Cercar 2007, which is a company. So, you can generate pretty good graphs even using the server-side by using the necessary themes. So, that's not really a downside of a server-side chart itself. But, I mean, you would all like to think like that, right? Have you seen any of the D3 visualizations particularly by Mike Post-Ox and New York Times? They really might blow in. The charting is into the next level. You don't see a chart with the bars twice anymore. You want to pull, drag based on the size of this one and then move this one around into whether this goes to, this state goes to Republic or Democratic and then there are two PNGs of Obama and Romney. And depending upon how much you put there, this starts minding a little more. This is the graphic of 2013. Check out all the Mike Post-Ox D3 charts. They're really mind-blowing. I find it to be extremely interesting. So, anybody with any charting library with server-side or the front-end obviously will have to stop for a second and have a look at it thoroughly because this is how the charting is going to be. So, similarly, what is it about those D3 charts that really make us feel really good about it that it stands out with other charting libraries? Basically, the ability in order to interact with it. I want to be able to see the graph I want to see. So, people normally say, when Sachin Tendulkar scores a century, then the percentage of India wins. People won't find out this answer. So, that's not good enough, right? I mean, that is just one graph. I want to be able to find out when Sachin scored a century in Mumbai against Australia when the percentage of India wins. You can't publish all of these graphs. It will take an entire magazine and you'll never be able to go through that. So, you need an interactivity. You need to be able to choose the data that you want to see. In fact, this is one of the graphs in the Sachin statistics there. You can go to find out yourself where you choose a particular score and you see how many times Sachin scored below that and how many times Sachin scored above that. And of that, how many matches India won and how many matches India lost to both of these donuts. And why he scored hundreds so relevant? It's an arbitrary score, right? You can move the slide around in order to vary anywhere between 0 and 248, which is 248, 200, whatever. It's top score. So, how do we do that? How do we do these kinds of interactive charts using angular and high charts? Do you know a part? So, today we're going to be using the high charts charting library in order to render these charts. Anybody knows about high charts? You used high charts earlier? Yeah. So, high charts basically bench upon jQuery and renders SVG. I don't really care about implementation anymore because the thing that I need a part of, excellent API, reasonably good performance, and then being able to work on all of the devices, all of these parts. So, high charts charting library basically does all of these for us and then it has all kinds of charts, like 100 plus of them. You want basic bar chart, area chart, column chart, pie chart, donut chart, scatter plot, you're all covered. I want to stress a little bit more about the API because that is what makes me bring that today into the discussion in order to discuss angular areas. The API is very, very simple. In order to create a new high chart, you use a particular container of high chart and then pass a set from JSON options chart. What kind of chart? What is the title? What is the x-axis? What is the y-axis? All of these are JavaScript objects themselves or JSON options. Most notably, between the various different graphs, obviously the title and all of those change, but if you want to just talk about the data, there are two things, which is the categories, which is what you want to plot and then be the series, which is the data that you want to plot. These are the two things that has to be dynamically fitted into this one. So, angular is very good in pointing. We know that, right? Already we had two different sessions. You put something into a, you change something on a view and then it automatically gets reflected back in the controller and then you change something in the controller that gets reflected back in the view, automatic. And if you, one of the, if you have seen any angular example at all, all of them start with one basic example. Okay, let's have an input and let's display that and then you type anything into the input. Suddenly, this thing keeps changing. You see that? Yeah, there's a thing up there. Yeah, exactly. So, basically angular is extremely good in pointing. In order to develop these kinds of interactive charts, what I'm talking about is being able to develop these buttons where you click these in the chart updates itself. Angular is good for pointing. High chart is good for rendering. So, we use these two in order to develop interactive charts if you need. So, it's good. So, you already know a lot about Angular. Thanks to Sean Session and another session before this. But I want to stress one important point that Angular brings to the table, other than what JavaScript used to be. So, I have spoken to several of my friends who are extremely good developers and most of them wanted to avoid working on the front end because front end normally felt like, you know, doing hacks. It's like you want to make something work, you try this, you try that, CSS web transform, and then opacity, and you try it in different things and one of them happens to work. But back end is so not with that. You can literally engineer. This API comes in, you want to do that, you can write tests. What I think Angular brings to the table, which probably is true for several other frameworks as well, is brings the engineering back into the table. Using Angular, you can do tests the way you did in the backend. Using Angular, you don't have to bother about how do you pass things from controller into the view because it's automatically done. All right, so now you know what are all the things you know so far? You know high charts API, which is basically you provided JSON and then it gives you the charts, yes. You know that Angular is extremely good in binding, so you display a set of options as in when those change, options inside the controller changes, yes. And then you know that interactive charts occur, so we're going to develop it. So, let's say if you were to develop a high chart using this one, if you want to develop high charts, how would you do it? Go ahead, are you ready? Shab cannot answer because... Do you capture the values in some scope object? Right. You should do a service, get your JSON and you'll have to have any reasons. Sounds good, let's start with. So, I'll start with step minus one, which is not even using Angular. How would you do it using jQuery? If you were to do it using jQuery, basically you have a containers element and you say within this container give me high charts, these are my various different options, great. So, that's not good enough, right? I mean, if we have to change everything, so we want to do this all over again and again, we don't want to do that, we want to do that. So, step zero is something that he mentioned. Let's come to the Angular. So, we have a controller there, similar to the HTML, we have an HTML like earlier, except it also has a controller, we call it the chart controller, and for this controller we have the jQuery again. This is something Shab mentioned earlier, which is basically you put your jQuery inside your controller, it's not really good, but at least it gets the Angular part of it, it gets the controller. So, it's called step zero, it's like Angular. What's the step one? How can we better that? Can we do better? Yes? So, what can we do better? Yes. So, we learned earlier already what two things, one, we don't manipulate the DOM inside of a controller. Yes? Where do we manipulate the DOM? Yes, we manipulate the DOM in the directive and then where do we set the scope variables in the controller? So, how can we change it such that we put the DOM manipulation into the directive and we take the scope setting into the controller? How do we do it? So, we call it step one. So, this is the chart directive. So, the HTML remains the same. In this case, it starts with the directive. So, directive has so many different options, we can't cover that but I assume, quite a few of you are already quite comfortable with these options. You set, so instead of having a div element with the container, I replace it with the chart directive right now which is like a HTML element and then I say in the directive, I have a template which has a class and what is a directive? Directive is two things, the HTML that has to go with the JavaScript that has to affect on it. So, it is both what it displays and what is the behavior it has. So, what is the behavior it has? We will go into the link function. So, the directive basically is a restricted E in order to say it has to be given in the HTML as an element, not as an attribute or as a class. It has to be an element and it has to have a certain template and it has to go with a certain behavior. In the behavior, I take the first element of the template and then rendering high charts within that. Good. So, what do we do in the controller now? Anybody? What is remaining? So, we set the data. So, what does the directive do here? The directive does not necessarily automatically watch the scope variable. The controller does not even the controller does. Basically, the view renders automatically and the changes in the view go back to the controller. In the directive, in order to be able to watch for the chart ID, I put a watch on that. You see that I see on the scope, I watch chart ID. Whenever the changes, I create a new high chart object and then render the chart object. Another way of rendering high chart is to create high chart with chart object. That's about it. You don't have to call it like this. You don't have to call it like this. So, I am taking the high chart option that is there in the scope and then creating a high chart order. There is no need of digest. The digest is automatically handled. Inside the controller, basically, I set all of the options that I need. Sounds good? For the high charts. This is a good step one in order to do high chart angular interactive directive. Yes. So, can we do better? Can we do better than this? Anybody? What about the destruction? Sorry? What about the destruction? So, there are two ways. One of them, the chart ID gets replaced. Therefore, the new high chart comes up automatically. And B, if a controller goes out of the scope and another controller comes, automatically gone out of memory. What about the custom reasons created by high charts? I think since the controller goes out of scope, those also get erased out of memory. But I am not sure about whether it eliminates all of these from the memory or not. I will have to problem it. I think it does. There is no reason why it could not. So, what can we do better than that? So, do you see all of these chart options that I have written within the controller? Is this really the best play for it to go? What can we do? Where can we put that? Great. Excellent. Exactly. That's the next thing. So, we put all of these inside a service and then call, I want a spine chart with margin, with so much animation, with region, etc. And this service is injected into the controller and then I set the element after getting a JAX call of my particular data. Sounds good. Why would we want to put this in service? I would assume you are not having exactly one chart with so many different charts. And you don't set the options for the font, for the title and all of those within the CSS. Because this is SVG, you have to set it on these options. So, if you put it inside a service, then since this is a JavaScript object, you can extend each other and only manipulate and modify the thing that you find relevant for this particular chart to render. And you import this, you inject this one into your controller and then you use the specific, specific JavaScript project you created for a particular chart and then you set the chart ID and the high chart automatically renders from the narrative. Sounds good? This is good enough. This is good enough to one extent where you have amazing charts. So, this is Sachin Tendoshkar's progress through his career in 1990 he started with this is multiple y-axis which high charts forward automatically and then the green color range is the average. The left side y-axis represents aggregate runs and the right side y-axis represents the actual runs. So, you can see he has mentioned a consistent average and obviously the high score is going to be step by step once he scores a high score then it keeps increasing as and when goes wrong. This is already good enough not to do the basic high charts. But we set out, we started saying that basic simple high charts by displaying that you could probably do that using the PNG using the server side. What's the point of our friend? What do we need? We need to add interactivity. Yes? How do we add interactivity? How do you want to say let's say you want to display I don't know maybe only runs in that or only the aggregator runs or only this one or different kind of interactivity or you want to see test and what do you have that's an option here actually the right side. Okay. This particular chart hasn't got yet because I haven't had the time to scrape the test data yet. So, basically if you want to do that ODI and test interactivity how would you do that? Anybody? Exactly. Yeah, of course you have check boxes that is in the view which is mapped to a particular model and this model you have to watch initially let's say we watch it on the controller. Sounds good? So, we are watching a particular model and when this model changes we call the plot option everything that we did earlier in the controller I put it into a function called as plot here or plot chart or whatever and then when these options change based on ODI or test I call the plot option so that corresponding attribute for rendering the test data of ODI data. Sounds good? So, that's what basically is doing here you extend you know basically I'm watching the chosen option being test or the ODI data and then I call the plot data whenever the chosen option changes and I call the HTTP in order to get the JSON from the server in order the server or could even be my own server which is a local file in this case that does not matter so HTTP is already good enough to handle it and then I set the scope or chosen options at view is equal to ODI or test even though that runs I could do that and then whenever the plot data so this I think the step 3 whatever the option is there is closing the new other function that is the plot data function basically it creates a new JSON object based upon my default options as well as the current options and then renders the chart once this is set on the scope then what happens? High chart automatically directly automatically picks up and then renders the chart for me. Sounds good? So, this is how to do the options how would you do an interactive chart basically set the radio button with something changes you call the plot data with the corresponding attribute that you want to say you're good to go so I think there's a little since we're talking about high charts a little good time in order to take a little bit more regression apart high charts itself how it works and what are the other options we can add into the directory so if you say a new high chart what it basically does is destroys all the SVG elements that are present right now and then creates a new SVG element and creates the whole thing all over again it's ok I mean if it's on a web you hardly notice in fact sometimes you prefer that because of the animation but if you have a chart very similar to such in slide time score and you are on a mobile device then in order to compute all of these a render is going to take a few seconds you're not happy at all so you don't have to re-render the whole thing high charts has its own API in order to only manipulate the data and when you only manipulate the data instantly updates so you could potentially use that option and that's not good enough right instantly updates I'm not seeing anything chart is all about how beautiful you make it look we need animation so in order to animate it what do you do you add all of the new set data elements one by one to it actually I'm not sure such in chart has any good animation ok there is an animation you carry some of the chart if you're viewing it if you change the bottom things the pie chart expands and contracts very slowly with that that is the animation so you increase the value slowly one by one every 200 milliseconds that is when you achieve an animation this is a good time in order to say whether we need an animation whether we want an instant update or we want the chart to render all over again why would we want the chart to render all over again in case you're changing the title changing the options etc this does not really affect that so you this is a good time for us in order to say maybe I will put an option on the chart directive where I say draw equal to animate and how do you refer to that one within the directive I in this case I so you have a link function the link function would take I haven't included the actual link function here but the link function would take attributes as an option you refer to the attributes one and then you look for the draw and if that is there as animate then animate otherwise you update making one of them the default so instead so again this is also not good enough right can we do better only ODI and test I'm not happy I want to see like the first summary chart you see you can see runs centuries you can see in-country versus country you need multi-level JSONs let's say I have my multi-level JSON which is you have revenue this is one a-line application let's say you have for all clients you have for different months you have for 2013 you have 2014 today 2000 difference how would you know it so you have JSON that is listed structure and then so first I think you are in agreement that in order to do an interactive chart rather than having so many different JSON particularly if there is a API call let's club all of them into one JSON hierarchically what is the particular JSON are you in agreement with that because it says API calls for me only one API call it get all of the data and change of these radio buttons instead of referring to various JSONs I refer to an element inside the specific JSON so that's good so how would you do that so if you have to refer to a multiple JSON element just like how we had a chosen option earlier you have chosen options where it is not going to be just an array but it's going to be an array of arrays you refer to choose an option of 0 choose an option of 1 etc sounds good so that way you can have a multi-level JSON structure and be able to see the relevant graph by choosing the option within your controller by using the HR directive can we do better so this will be one complicated chart directly that we end up in the end which I will also refer to you can refer to can we do better than that anything we can do we have the chart as a directive but so far what are we doing we are putting options themselves directly in the HTML page can we do better than that we make these options themselves also as directives so we have an option whether you want to choose a revenue in this case whether you want to choose revenue specific month or you want to choose the specific month so many different levels four or five levels actually I have built charts with six master levels using this technique using the same directive it was extremely bad so one of the things you can do not to make it even better is not just make the chart as a directive even the options that go on the HTML as a directive so this is exactly where the angular option of directive is communicating to each other comes in you should probably refer to this one directive that has a controller which has all of these options populated automatically and the child directive which you say requires this directive can access the attributes that represent on the parent controller for example we have a form and then we have an input and input does not make any sense without a form so an input knows that a form exists and then therefore does lot of validations based on the form validation requirements or a drop down or a set of drop downs by looking up the parent directive's controller because all of the things are populated on that so where are we getting with this we have a highly interactive chart the first chart that you see in such a application where you have three levels you can choose what are your tests you can choose in country how many versus country and hope and you can see how many charts is this how many charts is this this is not one chart this is actually one chart but as a user for me if I want to see this how many charts is this seven yeah four into three into two 24 so ODA and test is one option and then in country versus country and home are three options and then you want to see how many matches what is this average and what are these these are the four so they are multiplied and then you have 24 different charts using one json and then one high chart rendering this is how one of the ways you build a high chart directive using angular direction interactive charts so what did we build so far what does it take in order to build a chart like such a local interactive chart we have built one directive that reads the parent directive controllers options in order to render the options and then we have a chart directive which looks into which is being watched in the directive itself on the scope and whenever it changes the high charts automatically populates so now knowing we have built out this in order to develop a chart like such an intern summary chart which has 24 different levels what does it take we basically have an interactive chart we like to call it an interactive chart or it's basically options I don't see the point why it should be called an interactive chart but that's irrelevant to this discussion so we say we have an interactive chart the directive itself can take the URL rather than you taking it in the controller and then populating it because the directive has the controller now which takes the data and then populates it and then you can say you can even say it is a pie chart within the services we already put the high chart options in the service area and then let's read the override now but basically if you have multiple pie charts you have unique different options you need something to override for this pie chart so the best place to define that would be on this chart's controller do you agree I have a pie chart I take a pie chart and render it then it renders exactly the same thing if I have a pie chart in two different places so I need to make specific where is the good place to do that which is that is the controller of this particular pie chart yes so what is the method what is the object that is defined on this particular controller controller which has to override everything so if you put all of these you say that you are you say the options and you say the override there's one more thing I need to provide which I probably missed here which is to say how many levels is this JSON so in this case it is three because ODI test and then you say that and then you provide level options wherever you want to do that level options level equal to one on the top right level equal to two both the chart level equal to three below the chart and then you provide the chart that's all it takes in order to build an interactive chart by building these components Sanskrit how do you have options in the you so that's the level options we directly we build right but you have I mean how yeah so in this case I am using ng-boostrap which provides me an option in order to provide a set of buttons as a radio set of options so the level options directive instead of giving all of these as radio buttons gives out a directive that ng-boostrap so that will be rendered and that's why I'm using the type also not necessarily all of the place you need buttons are places drop down some places radio some places you see the type equal to that so in order to develop an interactive chart basically what you say is okay get this data from this URL this is three levels deep level one options put here level two options put here as a drop down level three options put here can it be any simpler than that so this is one of the chart so it's basically which shows that the level one is in the form of the drop down and then level three is in the form of a slider in order to see which week that this belongs to and it displays there was a 14 data there was 13 data and the difference between those data and another important point to note about this particular cap although we haven't really dive into that discussion is what if the JSON is not exactly symmetric so when you say multiple level JSON you assume that in this case basically the answer to that is you sniff the JSON dynamically within the directive instead of actually assuming or defining the values either on the directive or on the controller you sniff the JSON dynamically in order to find out what various options are and these options vary themselves this particular chart also does that sniffing the JSON and then automatically updating the various level options we say here's the image here's the source go get it on the scale somebody who wrote the browser wrote some way in order to do all of this happen and using Angular Directives you wrote your interactive chart which is primarily like here's the you go get it and give me a chart you can add as many options you like to that or as little options you want to add in order to keep it simple so any questions it's probably something you are referring to is if you see all of these have URLs also on these here in this case the URL ends at somebody but in case you want the in-country versus country home etc. to be a part of the URL then you can define root specific to that and then when you have root specific to that you can share in fact I was very specific very keen in order to build you see the Facebook Twitter and share buttons there so high chart basically itself also has an exporting option which exports the current image that is existing so you click on this on your mobile device or this is not that is not it there but once it is there or on the web you call the high chart exporting library in order to be able to see exactly same chart without considering them as radio buttons which basically sees the state you can do it as a part of the URL using roots the problem yeah so who asks there is something similar so when you ask the link if you see the link with the back port so that is what name which you pass all these data and all these narratives if I try to create roots then it really messes with the way I am working all around right now instead of passing the roots maybe I can pass these as options and when it comes to this root and the get parameters I give to this chart that may be a better option Sanskrit so I am totally new to Angular I realize that you completely define the new element called chart which you created without simple image targets so do you have any idea to define your own that be your own element so is that now valid absolutely I think if you look at the future of HTML5 the way it is going one of the most important things that they are coming up is web components web components is like these components not web components is an Angular component I would say Angular directly is an Angular component a web component is basically somebody builds something like this basically and then shares it you can use it in your project as a web component so this is absolutely the right way to go about it I don't see any problem using this in fact Shab can answer more one thing is if you are using new element characters just be careful about IE IE7, IE8 if you need to support it don't do this otherwise you have to do the document of create element to tell IE that this is a key validation if you don't need to support IE in this case you have to be using and deliver and give an idea until you use that the way I would answer that is don't support IE and go ahead using it so so in summary so like we discussed earlier Angular brings engineering into the front end the right way the interactivity that Angular brings and then high charts provides the charting they go very well together there are other charts I think the next session is about one of the D3 charts so where he discuss about it's a little messy because D3 has its own binding Angular has its binding so how do you remove D3 to not have its binding and use Angular binding so you need to figure a lot of things out probably a good session for that we could do but if you are using something that does not have binding just provides charts it goes extremely well with Angular yeah so if you are using my interactivity choosing filtering on the front end because I don't want to see newspaper published charts on a particular half I want to be able to see and create my charts out of it I don't want to see that when such in-score essentially what is the percentage of time they have one person in their last I want to see when such in-score because all we are caring about in this case is just Jason coming to me somehow you could add a back end in the form of I if I were to use a back end I use Django framework which is amazing provides a lot of features in order to refer to the database and provide it but this particular application I worked on actually used a real CPI which is a they will use flask restful and then there is Seneca which is basically a Node.js very thin wrapper on top of Postgres and Radis only which can pull out the necessary Jason give to you use any back end you want as long as you provide the Jason this thing works yeah building your applications using Angular is absolutely at least an order of magnitude rather than not building an yeah so because all of this is the only thing we refer to from the server is a Jason nothing stops us from bundling all of these resources together and then putting it in an app so all the big data insights will be available to you on your phone very beautifully at that yeah with all of these it's absolutely a joy to work with Angular I think I should thank Sham and Misco and all the 600 other contributors for their 7000 or so full requests so in order to make it a joy for me to use Angular that's what I've got thank you if you have anything to talk about talk to me please feel free to contact me yeah I think you can already Google for it it's on both slideshare as well as one speaker deck any more questions so with respect to the performance with respect to using high charts I think the most important question there comes is the performance of the library we're using which is high charts which is reasonably good I have developed an application with hundreds of charts and then the performance test I've done is actually across the application and it's absolutely very fast I haven't seen any issues therefore it hasn't necessitated me in order to dive deeper into any performance there's no issue but there's no issues of high sir the unit test whatever we have it works for the chart also because I don't think you're doing the normal testing and it works for the rounds it's a good question I think it's a very good question there are several ways to do testing of charting libraries one way to do would be you create a chart you take an image artifact using the exporting thing and then what you know is right you save it in your database and then you run the test next time you provide the same data and using the API and then go the way for the PNG if they match you're good but I think that is not necessary what are you ending up testing anyway are you testing how high charts and other charts that's the job of high charts people in order to test I wouldn't want to test that what I want to test is do you provide the same series thing that I provide to the high chart which is easy I mean you can document an input JSON and then what the output JSON is and then if you want to run test you pass this and then verify this against what was in your database as long as they are same if you have the exact same JSON then you're good to go if you log in whether you have one of the scores you have it's a violation there are costs there how are you getting good outcomes not sure for the question so as long as you verify when you view this data to the chart this PNG is sorry this output in the form of series data is probably which you attach to the chart if you have evaluated this already irrespective of what user you obtain and then different kinds of data that is passed I would assume appropriate chart would be rendered to the right so if you want to go really for length you should probably verify the image why wouldn't do an image test I think it's going little too far I would only do the testing of a method which takes the API put it on provides me the series data which I pass to the HR because anything more than that and you're testing high charts I don't know unless HR is my equity I would enjoy this anything else alright, sounds good thank you