Skip to main content Skip to footer

FlexChart in SpreadJS

Wijmo5 offers a collection of client-side controls including FlexChart, FlexGrid and several other Input controls. The FlexChart control provides a powerful and flexible way to visualize data.You can use the FlexChart control to create charts that display data in several formats, including bar, line, symbol, bubble, and others. This blog showcases how you can integrate the FlexChart with SpreadJS using AngularJS in such a way that FlexChart displays the same data that is displayed in SpreadJS. To start with, we will create a function in the controller that will provide data to SpreadJS as well as FlexChart, here is the code:


app.controller('appCtrl', function appCtrl($scope)  
{  
   // generate some random data  
   var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','), data = [];  
   for (var i = 0; i < countries.length; i++)  
   {  
      data.push({ country: countries[i], downloads: Math.round(Math.random() * 20000), sales:      Math.random() * 10000, expenses: Math.random() * 5000 });  
   }  
   // add data array to scope  
   $scope.data = data;  
});  

Once the controller is in place, you need to initialize FlexChart and SpreadJS using AngularJS to load the data returned by the controller. Here is the sample code:


<wj-flex-chart id="test" items-source="data" binding-x="country" style="height: 300px; width: 500px">  
   <wj-flex-chart-series name="Sales" binding="sales"></wj-flex-chart-series>  
   <wj-flex-chart-series name="Expenses" binding="expenses"></wj-flex-chart-series>  
   <wj-flex-chart-series name="Downloads" binding="downloads"></wj-flex-chart-series>  
</wj-flex-chart>  

<wij-spread id="ssdb" usewijmotheme="false" newtabvisible="false" style="height: 400px">  
  <sheets>  
     <sheet datasource="data" name="Data">  
        <columns>  
           <column datafield="country" headertext="country"></column>  
           <column datafield="sales" headertext="sales"></column>  
           <column datafield="expenses" headertext="expenses"></column>  
           <column datafield="downloads" headertext="downloads"></column>  
        </columns>  
     </sheet>  
  </sheets>  
</wij-spread>  

After both FlexChart and SpreadJS are initialized, the next step is to add the chart to SpreadJS. SpreadJS supports the floating objects feature. You can create custom floating objects and picture floating objects and display them in SpreadJS. These custom floating objects can be moved and resized. We will use the same approach to display FlexChart in SpreadJS. Firstly, we need to create a floating object using the FlexChart with the following code:


var customFloatingObject = new $.wijmo.wijspread.CustomFloatingObject("f1", 10, 10, 60, 64);  
var chart = document.getElementById("test");  
customFloatingObject.Content(chart);  
customFloatingObject.startRow(1);  
customFloatingObject.startColumn(5);  
customFloatingObject.width(500);  
customFloatingObject.height(300);  

You may refer to the following link which describes the details for creating custom floating objects. After, the floating object for FlexChart has been created, simply add it to SpreadJS as follows:


var spread = $("#ssdb").wijspread("spread");  
var activeSheet = spread.getActiveSheet();  
activeSheet.setRowCount(30);  
activeSheet.setColumnCount(15);  
activeSheet.addFloatingObject(customFloatingObject);  

Here is how the final output looks like: Flex_Chart_Spread You may refer to the sample for complete implementation.

MESCIUS inc.

comments powered by Disqus