Update Wijmo Charts in Real Time

Wijmo 1.3.0 introduced a very cool feature called Series Transitions. What this feature allow you to do is define a chart (pie/line/bar), and have it fluently update based on new data. Before this feature, the chart would have to redraw itself every time. Check out the Wijmo Explore demo to see this in action. This opens up a lot of possibilities for your applications, and is even the topic for an upcoming MSDN webcast I’m presenting. You should go register for it. I’ll wait here! The basis for the webcast is that you can automate the updating of the charts by using AJAX calls back to the server. First step we take is to create a basic, empty chart.

<div id="popularGenres">  
</div>  

dashboard.init = function () {  
        $("#popularGenres").wijbarchart({  
            width: 700  
        });  

        dashboard.populatePopularGenres();  
        dashboard.startTimer();  
    };

Next, we need to write some code that’ll get the initial data from the server and kick off a process for pinging the server.

dashboard.startTimer = function (){  
        dashboard._updateTimer = setInterval("dashboard.populatePopularGenres()", dashboard.updateInterval);  
};  

dashboard.populatePopularGenres = function () {  
        $.ajax("@Url.Action("GetTotalOrdersByGenre", "Dashboard")", {  
            success: function (data){  
                $("#popularGenres").wijbarchart("option", "seriesList", data);  
            },  
            error: function () {  
                alert("Something terrible went wrong.");  
                dashboard.clearTimer();  
            }  
        });  
};

The startTimer method is used call the populatePopularGenres method. It uses the JavaScript method setInterval to make a function call every X milliseconds. The populatePopularGenres method is where the magic happens. First, you’ll see we make an AJAX call to an Action in our MVC controller “dashboard”. This call returns a custom object that mimics what is required for the seriesList property on the chart.

public class BarChartSeriesList  
{  
        public string label { get; set; }  
        public bool legendEntry { get; set; }  

        public BarChartData data { get; set; }  
}  

public class BarChartData  
{  
        public List<object> x { get; set; }  
        public List<int> y { get; set; }  
}

While this isn't all the options available, it's enough for our needs in the demo. If we return a JSON-ified version of a BarChartSeriesList object, we can set it as the value of the seriesList property for our bar chart. Wijmo will detect the data change and automatically transition itself to reflect the new data. What will happen, if you have a real time system, is that the chart will update with new data on your defined interval. In our demo, I’m going to be using the MVC Music Studio example to show off how this approach can be used with real data. If you’d like to see more, or ask me questions live in person, feel free to register for my webcast “Real-Time Dashboards with ASP.NET MVC, jQuery, and Wijmo” on August 23rd. Kevin Griffin keving@componentone.com Follow me on twitter @1kevgriff