FlexChart Series: Build Responsive Apps For Mobile and Desktop

October 16 2015

Creating Responsive Applications on the Web

Creating responsive web application usually consists of finding your favorite CSS framework and then probably doing some sort of layout manipulation based on the screen size. You might move a menu from the side of the page to the top of the page when you shift from desktop to mobile. Anyone who's ever visited a website on their phone knows that it’s not just the layout that affects the experience, but also the way in which you're asked to interact with the application. When you use your phone, you lack the precision of a mouse or keyboard. You're forced to use your finger and an on-screen keyboard.

Wijmo controls have built-in optimizations that can really make the mobile experience feel more native. These features include things like touch support, zooming, and inertial scrolling for the grid. It might not be the case, though, that these built-in features are enough.

Demonstrating the Problem

Let’s consider this simple application using Wijmo FlexChart. We need our control host in our markup:

Next we need to add some stock data and do some bindings. I won’t put all of them here; you can refer to the sample. But to begin, we need to declare some series.

// Define a new collectionView  
var dataelm = new wijmo.collections.CollectionView(data);  
// Bind out FlexChart to our Control Host   
var responsiveFlexChart = new wijmo.chart.FlexChart('#responsiveFlexChart');  
// Create a new FlexChart Series  
var currentSalesSeries = new wijmo.chart.Series();  

// Define Custom Props on each Series  
currentSalesSeries.name = 'Current Sales';  
currentSalesSeries.binding = 'currentSales';  
currentSalesSeries.chartType = wijmo.chart.ChartType.Bar;  
currentSalesSeries.bindingX="companyName"  
currentSalesSeries.visibility ="Visible";  

// Push the revenue stream series into the chart   
responsiveFlexChart.series.push(revStreamSeries);  
responsiveFlexChart.itemsSource = dataelm;  
responsiveFlexChart.bindingX = "companyName";

Here it is, rendered in a desktop viewport:

And a mobile viewport:

You can see that it renders well—touch support is there, and the bars are a little small, but I can zoom in to see it better. You can see that the axis labels are a little off as well. FlexChart's flexible API allows us to ease the transition from mobile to desktop with a few configurations. Let's explore some of these ideas.

Working with Series Collection in FlexChart

Initially, we'll need to understand how to work with the series. As you can see in the sample application above, we instantiate a new series and set some properties on it:

var genericSeries = new wijmo.chart.Series();  
genericSeries.name = ‘ ';  
genericSeries.binding = '';  
genericSeries.chartType = wijmo.chart.ChartType.Bar;  
genericSeries.bindingX=" "  
genericSeries.visibility ="Visible";

Once we have a collection of series that we want to display in our FlexChart, we can simply push them into the series collection.

responsiveFlexChart.series.push(genericSeries);

This is the initial configuration for our desktop vs. mobile view. If we're loading the chart on a mobile device with less screen space, maybe we'll want to hide unimportant series or allow users to toggle series on or off. When they're loaded in and we change viewports, we'll need to clear the series collection and add the series we want:

// if Desktop   
responsiveFlexChart.series.clear();  
responsiveFlexChart.legendToggle = false; // Don’t need toggle on desktop since all are visible.   
genericSeries.visibility = “Visibile”;   
secondGenericSeries.visibility ="Visible";  

// if Mobile   
responsiveFlexChart.series.clear();   
responsiveFlexChart.legendToggle = true;  
genericSeries.visibility = “Visibile”;  
secondGenericSeries.visibility ="Legend";  

// For all views   
responsiveFlexChart.series.push(genericSeries);  
responsiveFlexChart.series.push(secondGenericSeries);

Making the FlexChart Control Responsive

Let’s now work with the sample app.

Legends

To begin, we can move the legend around the chart area to help maximize screen space. I like the legends underneath the chart plot area. You can set it to Top, Right, Left, or Bottom.

responsiveFlexChart.legend.position ="Bottom";

DataLabels and ToolTips

Next, we can add a dataLabel layer to the grid. Adding the dataLabel shows the value of an item in the series directly on top of the bar. When it comes time to switch to mobile view, we'll be able to remove the Y Axis since we'll no longer need that context to read the chart due to the data layer. This helps us free up some pixels. In order to really make the most of the surface, we can also add a tooltip layer. In this case, though, we're going to keep the tooltip consistent across both views.

// for All Views   
responsiveFlexChart.tooltip.content = '

{companyName}
-------------

Located In: {location}   
 Current Sales: {currentSales}   
Number of Units Sold: {unitsSold}    
   Revenue Stream: {revenueStream}';  

// if Desktop  
responsiveFlexChart.dataLabel.position = "None";  

// if Mobile   
responsiveFlexChart.dataLabel.position = "Top";  
responsiveFlexChart.dataLabel.content = "{value}";

Configuring Header and Footer

When we load our charts on desktops, we want a really great title to explain what the chart's trying to show. When we scale down to mobile, though, we'll abbreviate the title to fit the smaller space. Let's see how we can accomplish this:

// if Desktop  
responsiveFlexChart.header = "A FlexChart showing Information about Global Automakers";  
responsiveFlexChart.footer = "Desktop View";  

// if Mobile   
responsiveFlexChart.header = "Sales - Global Automakers";  
responsiveFlexChart.footer = "Mobile Phone View";

Handling X and Y Axes

Next, let's deal with the X-Axis labels. When we go down to a mobile screen, we want to rotate the X axis labels so we can see still all of the values. The nice thing about the desktop view is that you have the screen space to show the labels horizontally, in a straight line. On mobile, we don’t have that luxury, and we'll need to ask our users to turn their heads. Of course, for our terms of revenue we'll display that in a different scale. So we add a second Y-Axis, position it on the opposite side and only show it for mobile.

// if Desktop  
responsiveFlexChart.axisY.labels =true;  
responsiveFlexChart.axisX.labelAngle = 0;  
responsiveFlexChart.axisY.majorUnit = 50;  

// Add a custom secondary y axis to the chart  
var axis2 = new wijmo.chart.Axis();  
    axis2.position = "Right";  
    axis2.title = "Revenue in Terms of Billions ( line FlexChart )"  
revStreamSeries.axisY = axis2;  

// if Mobile   
responsiveFlexChart.axisY.labels =false;  
responsiveFlexChart.axisY.majorUnit = 100;  
responsiveFlexChart.axisX.labelAngle = 90;

Add Event Listeners and Set Conditionals

Finally, we need to wire up an event listener to decide whether or not it's a mobile application or a desktop application. Then, we can see the app work.

// Add the event listener to the chart   
responsiveFlexChart.addEventListener(window, 'resize', configureChart);  

// Resize/ Reconfigure function  
function configureChart() {  
var phone = responsiveFlexChart.hostElement.getBoundingClientRect().width <=999;  
var desktop = responsiveFlexChart.hostElement.getBoundingClientRect().width > 999;  
 if(phone){  
//set props  
 }   
else if (desktop){  
//set props  
}  
else{….}  
 }

Final Output

For Desktop: For Mobile:

Resources

Fork the sample on Github >>
Plnkr >> More about FlexChart >>

MESCIUS inc.