Skip to main content Skip to footer

Wijmo How To: Build Line Charts with Wijmo

Last week we walked building a BarChart with Wijmo, either by using a

template or through pure JavaScript. Before you read this post, I really recommend you go check both those posts out. Go ahead, I’ll wait here. Back? Good. Today, we want to take a look at how we can build Line Charts with Wijmo. I’ll tell you a dirty little secret:

Everywhere you type .wijlbarchart(), type .wijlinechart().

If you use the code snippets from the BarChart examples, and change the method call, here is the rendered result: image In case you need proof, here’s the source code for graph above using JavaScript.

$("#linechart").wijlinechart({ seriesList: [ { label: "Event A", legendEntry: true, data: { x: ["8:00-8:29", "8:30-8:59", "9:00-9:29", "9:30-9:59", "10:00-10:29", "10:30-10:59", "11:00-11:29", "11:30-11:50"], y: [10, 12, 2, 21, 40, 12, 29, 6] } }, { label: "Event B", legendEntry: true, data: { x: ["8:00-8:29", "8:30-8:59", "9:00-9:29", "9:30-9:59", "10:00-10:29", "10:30-10:59", "11:00-11:29", "11:30-11:50"], y: [25, 14, 2, 5, 31, 22, 19, 16] } } ] });

That's the gist of it! Give it a try, and feel free to post any comments or questions in the comments. Kevin Griffin keving@componentone.com

MESCIUS inc.

comments powered by Disqus