Appendix C: Delivering mobile-friendly charts

On this page:	Download:
Rationale and approach | Implementation | Determining screen width

Rationale and approach

Delivering charts to mobile browsers presents a different set of challenges compared to delivering charts to desktop browsers. Mobile browsers are constrained by bandwidth limitations as well as varying support for HTML5 canvas or JavaScript-based charting frameworks.

In addition to client-side canvas-based charting frameworks, server-side charting libraries provide an option for browsers that do not support JavaScript.

Implementation

The legacy Mileage Stats web app used a combination of server-rendered images and client-rendered charts. To support browsers that are not JavaScript enabled, server-rendered chart images are delivered to the browser. The System.Web.Helpers.Chart class provides this server-side charting functionality. For JavaScript-enabled browsers, the jqPlot library was used to render charts on the browser.

However, the jqPlot library was not used in the Mileage Stats Mobile web app due to its size (more than 200KB minified and gzipped). Charting libraries such as flot and Flotr2 were also considered but were not utilized in Mileage Stats Mobile due to limited support across the set of target browsers.

In order to provide a consistent and predictable solution to all target browsers, the server-side rendered chart technique was chosen. The chart image generated on the server ranges from 15KB to 20KB. This solution requires no client-side charting libraries to be loaded since all chart generation occurs server side. One drawback to this solution is that new chart images are frequently downloaded to the client. These chart images cannot be cached due to changes to the back-end data. This makes poor use of bandwidth.

Average fuel efficiency chart generated server side

Another challenge with rendering charts for a mobile browser is that mobile device screen widths vary dramatically. Some small devices are less than 200 pixels wide. Larger devices and tables can be more than 1000 pixels wide. It is important to appropriately size the chart based on the width of the device. Images can be automatically scaled to shrink or enlarge to fit a given area. However, if the image is reduced too much, the text and numerical values in the axis markers will be too small to read. If the image is enlarged too much, the image will look grainy. It is important to provide the charting API a close approximation of the width the image will eventually occupy.

Determining screen width

The ASP.NET MVC framework provides basic browser capability properties. One such property is ScreenPixelWidth, which can be accessed from Request.Browser.ScreenPixelWidth. For more information on how this property is populated, see Detecting devices and their features.

This ScreenPixelWidth property is then used to render mobile charts:

if (Request.Browser.IsMobileDevice)
{
    chartWidth = Math.Min(Request.Browser.ScreenPixelsWidth, MOBILE_CHART_MAXWIDTH);
    …
}
…
var myChart = GetChartInstance(chartWidth, chartHeight, theme);

Previous Topic | Home | Community

Last built: June 5, 2012