Read more about our involvement in Juice UI.

And keep an eye out for something we have coming soon…

By harnessing the server to do a lot of the “heavy lifting”, we can give our users a smooth experience.  What heavy lifting would need to be done?  Assume you have a data set of 1 million rows.  That’s a lot of data to send to the client, and then sort/page/filter.  If we ask the server to sort/page/filter the data before sending it to the client, we can quickly reduce the overhead of the client.

I’m going to be using the example from my webcast, which you can access here.

The Server

For data, I’m using the Chinook database.  It’s quick and easy to set up, and gives me good data to use in my examples.  I’m using ASP.NET MVC 3 for my examples, and we’ll only be implementing sorting and filtering.

        public JsonResult GetAlbumList()
        {
            int pageSize = Request.Params["paging[pageSize]"] != null ? Convert.ToInt32(Request.Params["paging[pageSize]"]) : 0;
            int pageIndex = Request.Params["paging[pageIndex]"] != null ? Convert.ToInt32(Request.Params["paging[pageIndex]"]) : 0;

            string sortColumn = Request.Params["sorting[0][dataKey]"];
            string sortDirection = Request.Params["sorting[0][sortDirection]"];

            if (string.IsNullOrEmpty(sortColumn)) sortColumn = String.Empty;
            if (string.IsNullOrEmpty(sortDirection)) sortDirection = String.Empty;

            using (var entity = new ChinookEntities())
            {
                var allAlbums = from al in entity.Albums
                                join ar in entity.Artists on al.ArtistId equals ar.ArtistId
                                select new AlbumResult()
                                           {
                                               AlbumName = al.Title,
                                               ArtistName = ar.Name
                                           };

                var totalRowCount = allAlbums.Count();

                if (pageSize == 0)
                    pageSize = totalRowCount;

                if (sortColumn.ToLower() != "album")
                    allAlbums = sortDirection.ToLower() == "descending"
                                    ? allAlbums.OrderByDescending(p => p.ArtistName).Skip(pageSize*pageIndex).Take(pageSize)
                                    : allAlbums.OrderBy(p => p.ArtistName).Skip(pageSize*pageIndex).Take(pageSize);
                else
                    allAlbums = sortDirection.ToLower() == "descending"
                                    ? allAlbums.OrderByDescending(p => p.AlbumName).Skip(pageSize*pageIndex).Take(pageSize)
                                    : allAlbums.OrderBy(p => p.AlbumName).Skip(pageSize*pageIndex).Take(pageSize);

                var result = new WijmoGridResult { Items = allAlbums.ToList(), TotalRowCount = totalRowCount };

                return Json(result, JsonRequestBehavior.AllowGet);
            }
        }

Let’s walkthrough what this code does, because it does a lot.  The first six lines pulls out Request parameters that Wijmo will send.  Because it is possible for these values to be null, a little bit of self checking needs to take place.

Starting at the using statement, we’re opening a connection to our database with Entity Framework.  We use the idea of lazy loading to create a structured query so our round trip to SQL Server only happens once.  The first query creates a query for all the albums in the database.  This is needed to get the total row count.  Wijmo will use that to determine the paging requirements.

For sorting, you’ll probably be drawn to the epic IF..ELSE statement.  All this is doing is determining what column we want to sort by and how we want to sort it (ascending or descending), and apply the correct LINQ filter.  These calls are also using the Skip() and Take() technique for pagination. 

Finally, you might notice I don’t have the definitions for AlbumResult and WijmoGridResult.  Here is the code for those classes:

    public class AlbumResult
    {
        public string AlbumName { get; set; }
        public string ArtistName { get; set; }
    }

    public class WijmoGridResult
    {
        public List Items { get; set; }
        public int TotalRowCount { get; set; }
    }

The Client

Now that the server is configured, we need to change our Wijmo configuration a little bit to use the new settings.

	$(document).ready(function () {

		var dataReader = new wijarrayreader([
				{ name: "Artist", mapping: "ArtistName" },
				{ name: "Album", mapping: "AlbumName" }
			]);

		var dataSource = new wijdatasource({
			proxy: new wijhttpproxy({
				url: "@Url.Action("GetAlbumList")",
				dataType: "json"
			}),
			dynamic: true,
			reader: {
				read: function (datasource) {
					var count = datasource.data.TotalRowCount;
					datasource.data = datasource.data.Items;
					datasource.data.totalRows = count;
					dataReader.read(datasource);
					}
			}
		});

		$("#remoteTable").wijgrid({
			pageSize: 15,
			data: dataSource,
			allowPaging: true,
			allowSorting: true

		});
	});

At the top, we’re going to declare a new datareader for the JSON coming from the server.  This tells Wijmo how to map JSON properties to Columns in the grid. 

Next is the datasource.  This is a proxy for a URL.  Wijmo will do a GET on this URL to pull information.  The dynamic keyword tells Wijmo that the server will accept sorting, filtering, and paging requests.  If this is false or not set, Wijmo will not send the request parameters we mentioned earlier.  The reader tells WIjmo how to interpret the data coming in, and decipher row counts and then finally apply the datareader.

The last call is the actual WijGrid creation.  This shouldn’t be too different from what you’ve seen in the past.  The only thing that makes Wijmo use the server to gather data is the datasource. 

I hope this serves as an introduction to doing server side calls with Wijmo.  If you have any questions at all, feel free to post them to the comments or email me!

Kevin Griffin
keving@componentone.com

Follow Me On Twitter

Getting Started

To get started, we need to create a new DIV for the gauge to live in.

<div id="gauge"></div>

There you go!  Of course, that doesn’t do anything, so let’s write a little bit of JavaScript to turn that DIV into a Linear Gauge.

$("#gauge").wijlineargauge();

If you render this as is, the gauge will look similar to this picture:

A couple of things to point out on this gauge.  First is the tick marks.  These are called Major Ticks.  By default, these are set to automatically show for an interval of 10.  There are also Minor Ticks that can be shown in between each major tick.  By default, these are not displayed.  We’ll show you how to change the value in a moment.

Changing Minimum and Maximum Values

There are two properties for setting minimum and maximum values of the linear gauge.  These are called min and max.  Let’s play with the values:

$("#gauge").wijlineargauge({ min: 0, max: 1000 });

Doing this will product an image like so:

Whoa!  What’s wrong!?  Well, the tick major is still set to 10, so the gauge is trying to render a tick for every interval from 0 to 1000.  Let’s change the ticks to a more reasonable value.

Setting Tick Intervals

I’m going to play with two new values: tickMajor and tickMinor. 

$("#gauge").wijlineargauge({
            min: 0,
            max: 1000,
            tickMajor: {
                interval: 200
            },
            tickMinor: {
                interval: 50,
                visible: true
            }
        });

Refresh the page.  Note the bolded visible: true.  This is important since the tickMajor.visible property is defaulted to false.  Here’s what the updated picture looks like:

Doesn’t that look much better!  Next, let’s play around with that pointer and set the gauge to a value other than zero.

Setting Pointer Value

$("#gauge").wijlineargauge({
            min: 0,
            max: 1000,
            tickMajor: {
                interval: 200
            },
            tickMinor: {
                interval: 50,
                visible: true
            },
            value: 475
        });

The code change is highlighted above.  Set the value property to update where the pointer goes.  Pictures don’t do this justice, because the transition is animated.

If you’d like to update the value dynamically, all you need to do is use jQueryUI property updating syntax:

$("#gauge").wijlineargauge("option", "value", 755);

Ranges

$("#gauge").wijlineargauge({
            min: 0,
            max: 1000,
            tickMajor: {
                interval: 200
            },
            tickMinor: {
                interval: 50,
                visible: true
            },
            value: 475,
            ranges: [
                {
                    startValue: 800,
                    endValue: 1000,
                    startDistance: 0.95,
                    endDistance: 0.75,
                    startWidth: 0.5,
                    endWidth: 0.5,
                    style: {
                        fill: "90-#3DA1D8-#3A6CAC",
                        opacity: "1",
                        stroke: "none"
                    }
                }
            ]
        });

The ranges property is an array. Inside the array is a list of range values that are to be applied to the gauge. In this example, I’m only creating a single range, but you can add more. StartValue and endValue are obvious. This is where the range begins and ends. StartWidth and endWidth determine the width (or depending on the orientation it could considered height).   Let’s assume I change the value of startWidth to 0.1.

Pretty cool, huh?  Last option is for startDistance and endDistance.  This changes where on gauge the fill starts to render.  For example, I’ll change startDistance to .095 and endDistance to .75 (width is also set back to .5).  The rendered result will “tilt” the range. 

Why would this be useful?  Here’s a great example over in the Wijmo control explorer.  It shows how ranges can provide a cool visual effect for showing scale.

And there you have it.  All the basics you need to know in order to get started with Wijmo’s linear gauges.  I hope you enjoy working with them!  If you have any questions, feel free to shoot me an email or ask in the comments.

Kevin Griffin
keving@componentone.com

Follow Me on Twitter

If you’re converting existing <tables> into Grids, you’ll want to give this post a quick read.  Done?  Cool, because now we’re going to add a whole bunch of awesome to our new grids.

For this example, we’re going to start with a new grid:

<table id="tableDepartmentInformation">

    <thead>

        <tr>

            <th>First Name

            </th>

            <th>Last Name</th>

            <th>Department</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Kevin</td>

            <td>Griffin</td>

            <td>Marketing</td>

        </tr>

        <tr>

            <td>Rich</td>

            <td>Dudley</td>

            <td>Marketing</td>

        </tr>

        <tr>

            <td>Chris</td>

            <td>Bannon</td>

            <td>Development</td>

        </tr>

        <tr>

            <td>Johnny</td>

            <td>Doe</td>

            <td>Management</td>

        </tr>

        <tr>

            <td>Tommy</td>

            <td>Tutone</td>

            <td>IT</td>

        </tr>

        <tr>

            <td>Joe</td>

            <td>Montana</td>

            <td>IT</td>

        </tr>

        <tr>

            <td>Ingio</td>

            <td>Montoya</td>

            <td>Freelance</td>

        </tr>

        <tr>

            <td>Luke</td>

            <td>Skywalker</td>

            <td>Jedi</td>

        </tr>

    </tbody>

</table>

<script type="text/javascript">

    $(document).ready(function () {

$("#tableDepartmentInformation").wijgrid();

});

</script>

Sorting

First thing we want to do is add basic sorting to this application.  All we have to do is add the allowSorting property to the wijgrid method.

$("#tableDepartmentInformation").wijgrid(

                {

                    allowSorting: true

                });

Wasn’t that easy!

Paging

Now let’s say you get a request from your clients to add paging to the grids.  This is a common request since grids can quickly get out of hand when you’re dealing with a lot of data.  To quickly enable paging, you’ll want to set the allowPaging property.  By default, WijGrid will default to a pageSize of 10, but you can override that by setting pageSize yourself.

$("#tableDepartmentInformation").wijgrid(

{

     allowPaging: true,

     pageSize: 2

});

Filtering

A filter is a component of the grid that allows you to filter down results by column values.  For example, if you want to return all users in the grid whose Department is equal to Marketing, you can use a filter for that.  To add this feature, you’ll want to set the showFilter property.

$("#tableDepartmentInformation").wijgrid(

{

     showFilter: true

});

Grouping

A group is a logical ordering of rows by the columns that you select.  For example, we want to group all the rows in our grid by their Department.  A filter won’t work because we still want to see all departments, and sorting kinda works, but it doesn’t allow you to open or collapse the groups.  To enable grouping on this grid, we’ll want to set the allowColMoving property to true as well as the showGroupArea property.  When this is done, you will be able to move columns to the “group area” and Wijmo will group them logically for you.

$("#tableDepartmentInformation").wijgrid(

{

     allowColMoving: true,

     showGroupArea: true

});

Wrapping up

There you have it!  In a few lines of code, we took our new WijGrid and added sorting, paging, filtering, and grouping.  I hope this aids you in your travels of Wijmo.  In an upcoming post, I’m going to talk about moving all this functionality to the server for performance increases galore!

Kevin Griffin
KevinG@ComponentOne.com

Follow me on Twitter

Happy Holidays and Merry Wijmas to all! We have heard that the gift on everyone’s wish list this year is Wijmo v2.

“All I want for the Holidays is Wijmo v2″ – Everyone

Team Wijmo is offering a couple gifts to you for the holidays to help you give the gift of Wijmo.

Get 25% off Wijmo until 2012

We are offering 25% off on Wijmo from now until the end of the year. So you can buy as much Wijmo as you want thought December 31st 2011 at a 25% discount!

Discount code: wijmas2011
25% off good December 22nd through December 31st 2011
Purchase Wijmo online

Buy Now and Get v2 for Free

We have had a ton of people asking about when Wijmo v2 will launch and if they will be eligible for an upgrade. Instead of the normal 30 day upgrade we have decided that anyone who purchases anytime during the v2 Beta will get a free upgrade to Wijmo v2 when it releases. Purchase Wijmo now to lock in your v2 license!

Please take some time to check out the festive new widgets in the v2 Beta!

The Gift that Keeps Giving

This year, give the gift that keeps giving. Give the gift of widgets. Or you can always treat yourself to something nice. Go ahead, you deserve it. Let us write the JavaScript while you sit by the fire enjoying the holiday season.

Happy Holidays – Team Wijmo

I always find it amazing when I talk to people and people haven’t heard about ThemeRoller. It’s just the greatest thing since sliced bread.

ThemeRoller

When jQueryUI was released, it provided a great array of user interface widgets for you to use in your applications. However, if you’ve used other component packs you know that theming can be really really hard or really really easy. Developers don’t really do theming or design well, so that’s where the ThemeRoller tool was born.

ThemeRoller lets you or another person design themes for your sites. It’s developer friendly, and awesome if you have a designer on your team. Build your own custom themes or tweak one of the many existing ones.

When I used to do consulting, I used <COMPETITOR NAME REDACTED>’s toolset. But it was so frustrating to do a lot of stuff that should be similar in terms of theming. Instead, I rewrote the majority of the site with jQueryUI widgets. I provided the ThemeRoller tool to my designer and within the day, she provided me the CSS file I needed to add to my project. It’s just that easy!

How Wijmo Uses ThemeRoller

Out of the box, Wijmo uses ThemeRoller themes. You don’t have to do ANYTHING. Imagine you have a grid:

It’s a nice grid, but you like the “Redmond” style better. That’s cool, just replace the CSS file.

BOOM! You’re done.

Editing Themes

I’m bringing this note up since someone asked a question in the forums. How do you edit a theme after you’ve downloaded it? That’s easy!

First, open up the CSS file. Scroll down a couple lines until you find this comment:

Note: if CSS is minified, you won’t see this.

See that link at the bottom, paste it into your browser and go. ThemeRoller will automatically load all the settings for that theme. Make your changes and download the new style. This is handy on jQueryUI updates. If they add new widgets, you can just load the file into ThemeRoller and it’ll create an updated style sheet for the theme.

So go have fun! Let me know if you have questions or comments! Go have fun with ThemeRoller, and make Wijmo your own!

Kevin Griffin
keving@componentone.com

Follow me on Twitter @1kevgriff

Breaking Change!

Important: We have migrated from jQuery.Globalization to Globalize.

We are working with the jQuery UI team on the Grid Project and on thing thing that has come out of it is a refactoring of the globalization plugin. jQuery UI has made Globalize which is a localization tool to use beyond jQuery. Moving forward they will be supporting and using this library. We wanted to do the same. It is very easy to change support in your code for this.

Fix your references

Change your references from:

<script src="http://cdn.wijmo.com/external/jquery.glob.min.js" type="text/javascript"></script>

To this:

<script src="http://cdn.wijmo.com/external/globalize.min.js" type="text/javascript"></script>

Update your code

Change any code you have using $.format from:

$.format(

To this:

Globalize.format(

We just had a couple samples that needed updated for Pie Charts that used format in tooltips to create percentages. So if you copied any code from Pie Chart samples you should do a search for $.format in your project.

Chart Enhancement

We added collision detection to the tooltips in our charts so now they will not get cut off be the edge of the SVG element.

Tooltip edge collision detection

Grid Enhancements

Added new events called filtering and filtered to the event model. These can be used before and after filtering is done in the Filter Row.

Added numeric input widget as the filter editor when the column is formatted as a percentage.

Go get it!

Make sure to download the latest version of Wijmo and read the change log!

This added some nice new features and fixed quite a few bugs.

New Theme – Arctic
We added a new premium theme called “Arctic”. It is a very clean gray theme that works pretty much everywhere.

Grid – Added nested grouping
We added showGroupArea and groupAreaCaption options to provide a convenient way of grouping by as many columns as the end users wants. The end users can drag column headers to the top bar to create nested groups of data by column. Check out the new nested grouping feature in action.

We fixed a ton of bugs from a rendering issue in Combobox to click events in Upload. Make sure to download the latest version of Wijmo and read the change log!

New Widget Explorer

In case you missed it, we recently released an all new widget explorer too! Check it out.

New Widget: Upload

This release features a preview of our new upload widget. It supports batch or single uploads and has an API for displaying upload progress.

New Features: Chart Animations

One of the coolest new features in Wijmo is the refactored animation in our charts! We have added a new options to Bar Chart, Line Chart and Pie Chart called seriesTransition. This new options controls animation when the chart series data changes. As you can see in the demo it makes visualizing live charting much more smooth.

We have added support for named easing equations in all of our charts: “easeInCubic”,”easeOutCubic”,”easeInBack”,”easeOutBack”,”easeOutElastic”,”easeOutBounce”.

Line Chart now has a direction option for animation to control how the line is animated in when being drawn. Valid values are “vertical” and “horizontal”.

Breaking Changes in 1.3.0

We standardized on event naming to ensure consistency within the toolkit. All events are now lower camel-case. For example, pageindexchanging was renamed to pageIndexChanging in the Grid.

We also standardized the animation in all of our charts. Each chart now has the same animation option with the same default values: {enabled:true, duration:2000, easing:”>”}. Some options are added on top of this core for chart type specific animations like “direction” in Line Chart.

As we see modern browsers launching new versions left (Firefox 4) and right (IE9), we hear a lot about HTML5. HTML5 is a working spec from the W3C that is defining a revolution in how we develop web apps.

Imagination, meet implementation. HTML5 is the cornerstone of the W3C’s open web platform; a framework designed to support innovation and foster the full potential the web has to offer.
-W3C

Pretty inspiring, but how does that help Web developers? Well, let’s take a look at how you can benefit from HTML5 today.

Data Visualization via HTML5 and SVG

Wijmo has bar charts, line charts and pie charts all powered by inline Scalable Vector Graphics (SVG). This technology is not new, but it is new to most browsers. SVG is a powerful means of creating vector drawings in the browser. Vector drawings can be scaled to any size without losing any quality. They also have a very small XML format. That makes SVG perfect for creating data visualizations for the Web. We have done all the hard work to make using SVG effortless. Check out the benefits of  charting with SVG.

True Client-side Charting

Our charts are actually drawn on the client and only require the data to be passed from the server. This eliminates the need for large graphics to be downloaded from the server. Since our charts are powered by SVG they are actually part of the DOM. Which means every aspect of our charts can be inspected, accessed and manipulated in JavaScript. They are perfect for building Ajax dashboards that have constantly-changing data. Nothing compares to being able to draw charts within the browser.

DOM-friendly

jQuery development is all about the DOM, so we built charts that not only utilized the DOM, but are completely a part of it. We are drawing SVG elements in the DOM. That means you can easily access the chart elements in JavaScript. With SVG, you can easily attach events to elements like “click” and “hover”. You can also easily manipulate the elements like changing colors and positions. Most importantly, you can debug SVG elements in the browser. That’s right; you can literally inspect every SVG element of our charts in Firebug. That is one of the major benefits of using SVG instead of Canvas.

Hardware Accelerated Graphics

Our charting is all about performance and SVG makes high-performance charting possible. SVG is now being hardware accelerated in every modern browser. Our charts written in JavaScript are actually utilizing powerful rendering engines in these browsers instead of drawing static images on the server. Browser vendors are putting a lot of work into making SVG even better in their browsers. That means our charts will just get faster as new versions come out.

Interactive Animations and Tooltips

SVG also allows us to make our charts more than static images on the Web. The Wijmo charts are fully interactive with built-in animations, transitions and tooltips. Adding interaction to your data is very important to User Experience (UX). We recognize that and have made doing so effortless. Our charts have animation that can be turned on with one property. When turned on, the points, lines and slices will animate when they are hovered over. The charts will also show smooth transitions when data is first loaded into them. It is important to keep charts informative yet uncluttered. Our charts have built-in tooltips that help you hide labels until they are needed. Tooltips are useful for popping up information when specific parts of the charts are selected. These rich interactions can take data from boring to brilliant. Check out some samples of our interactive charts.

Streaming Visualizations

Since SVG is drawn in the browser, the graphic can be transformed without refreshing the page. This feature creates powerful streaming charts for visualizing real-time data. The Wijmo charts can be used to display dynamic data. For instance, a line charts could be used to display live Stock Market data as it streams from a Web service.  The line and points of the chart can even be animated to show data as is progresses through time. When it comes to working with constantly-changing data, having the ability to stream it smoothly in the browser is very important. Wijmo charts make it easy to bring your streaming data to life. Check out this sample of streaming data in our line chart.

Write Once, Run Anywhere (Without Plugins)

Our charts render in SVG and require no additional plugins. Many other charts have rich features like animation and interaction. However, said charts require plugins to be installed on the end user’s machine. While Flash and Silverlight make for great charting tools, they have limitations. The obvious limitation is the dependency on a plugin. Another limitations is their lack of support in most modern Smart Phones. End users have come to expect rich experiences on today’s mobile devices. When important parts of your application don’t render on them, it is a problem. The good news is, most of these mobile devices support SVG!  Our charts render beautifully on iPhones, iPads, and many more devices.

Start Charting in SVG with Wijmo

OK, enough of all this talk. Let’s see some SVG charts in action! We are going to take a simple HTML table and turn it into a chart with just one line of code. The Wijmo charts are actually jQuery UI widgets. So they work by turning HTML elements into interactive widgets. Using a table is a means of representing data semantically and easily transforming it into a chart. You can also use a simple div element and provide the data to the widget in another form like JSON.

To start we need our script and stylesheet references. We are going to use all CDN references in this example:

<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.wijmo.com/jquery.wijmo-open.1.1.5.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.wijmo.com/jquery.wijmo-complete.1.1.5.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.11/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/external/jquery.glob.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/external/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/external/raphael-min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-open.1.1.5.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.1.1.5.min.js" type="text/javascript"></script>

Note: Make sure you always use the most recent version of the CDN here.

Now we create a simple HTML table with a bit of data in it. Here is the markup for our table:

<table id="tb" border="1">
    <caption>
        Hardware Sales by Category</caption>
    <thead>
        <tr>
            <td>
            </td>
            <th>
                Desktops
            </th>
            <th>
                Notebooks
            </th>
            <th>
                Tablets
            </th>
            <th>
                Phones
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                Q1
            </th>
            <td>
                64594.6
            </td>
            <td>
                32760.69
            </td>
            <td>
                62973.35
            </td>
            <td>
                23432.04
            </td>
        </tr>
        <tr>
            <th scope="row">
                Q2
            </th>
            <td>
                74933.4
            </td>
            <td>
                25261.26
            </td>
            <td>
                39395.51
            </td>
            <td>
                41129.49
            </td>
        </tr>
        <tr>
            <th scope="row">
                Q3
            </th>
            <td>
                39269.73
            </td>
            <td>
                17746.36
            </td>
            <td>
                20775.42
            </td>
            <td>
                16430.82
            </td>
        </tr>
        <tr>
            <th scope="row">
                Q4
            </th>
            <td>
                55709.52
            </td>
            <td>
                19976.28
            </td>
            <td>
                39878.09
            </td>
            <td>
                18992.22
            </td>
        </tr>
    </tbody>
</table>

This table just represents some sales data for four quarters in a year across four product lines. It should look like this when rendered:

While it looks ok, we can make this data more meaningful by charting it. We can do that by adding  a little jQuery magic:

$("#tb").wijlinechart();

That’s it! You literally only need that one line of jQuery and you have turned this plain onld HTML table into an interactive SVG chart.

And here is what our new chart will look like when it renders.

Pretty cool huh? Now, that was just a simple implementation. You could add all sorts of options and Ajax calls to build a fully interactive dashboard. In fact, we built a nice little dashboard using the StackOverflow API. It loads all data asynchronously from a Web service and then plots it in a Grid, Bar Chart, Line Chart and Pie Chart. You can play around with the StackOverflow dashboard online. Here is a snapshot of how it looks:

Try it for Yourself!

Now go build something cool with Wijmo charts! We believe that SVG and HTML5 are the future of the Web when comes to data visualization. Give them a try and let us know what you think.

Download Wijmo

Check out more Wijmo samples