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:


<!-- Control Host -->
<div id="responsiveFlexChart"></div>

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 = '<h2>{companyName}</h2>Located In: {location} <br> Current Sales: {currentSales} <br>Number of Units Sold: {unitsSold} <br> 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 >>