The other day I blogged about how easy it was to turn a
into a BarChart using Wijmo. Today, I want to show you how to do the same thing with pure JavaScript calls. Before we had to start with a template that we wanted to decorate. This time, all we need to do is create a placeholder for our BarChart: Now, move up to the JavaScript area of your page, and add the following: Let’s examine this code for a second, because it’s a lot more than we had to write before.
seriesList: This is a parameter that we use to set the data inside the chart. It has several properties, but for right now the only ones we are interested in are label, legendEntry, and data. Note that this is an array, so I can add as many series to the list as I would like. label: This property is a string containing the name of our series. I called it “Event A” as an example. But you could easily call it “Number of Waffles” or “People Who Wanted to See Gigli”. legendEntry: This property tell wijbarchart to display the name of the series in our legend. data: This property contains our data. It requires both x and y axis information. In my example above, x contains all the elements that I have data for, and y are the values of those elements. X and y need to contain the same number of elements, or you might have some misleading results.
That doesn’t seem to bad, does it? I bet you want to see what the rendered result will look like? No more waiting: Very cool stuff! The JavaScript approach gives you much more flexibility over your charts. As we did with the
approach, we can add another series to the list by adding to the seriesList array. Below I’ve highlighted the new portion of code in our seriesList. And the rendered result looks like this: And there you go! I hope this explains using the BarChart in Wijmo easily enough. If you have any questions at all, feel free to post in the comments. Kevin Griffin keving@componentone.com
