We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Sample Chart using Knockout

Thread ID:

Created:

Updated:

Platform:

Replies:

124285 May 30,2016 04:18 AM Jun 2,2016 06:17 AM JavaScript 3
loading
Tags: ejChart
sam kolala
Asked On May 30, 2016 04:18 AM

Hi,

Could we have a guide on how to bind ejchart with knockout. I'm looking for a scenario where I need to loop over some array and drawing chart for each object in the array periodically using setInterval

Sanjith Kesavan [Syncfusion]
Replied On May 31, 2016 05:15 AM

Hi Sam, 

Thanks for contacting Syncfusion support. We have analyzed your query and prepared sample as per your requirement. To bind ejchart with knockout JS please follow the below steps. 
1.       Please refer following script files in your sample. 
  <script src="Scripts/jquery-1.10.2.min.js"></script> 
     <script src="Scripts/knockout.min.js"></script> 
     <script src="Scripts/ej.chart.min.js"></script> 
     <script src="Scripts/ej.widget.ko.min.js"></script> 

2.       To render default chart in knockout js please follow the below code.  
<div id="Chart" data-bind="ejChart: {  }"></div> 
 
Please find the screenshot of default chart below 
 

For binding datasource, zoomfactor, zoomposition of the chart using knockout please follow the below code. 
commonSeriesOptions:{ dataSource:dataSource}, series:[{xName:'EmployeeID', yName:'Value', name:'Product', type:'line'}], 
xZoomFactor:xZoomFactor , yZoomFactor:yZoomFactor,xZoomPosition:xZoomPosition ,yZoomPosition:yZoomPosition, 
<script type="text/javascript"> 
function setData(number, year) { 
         var data = []; 
         for (var i = 0; i < number; i++) { 
             var y = Math.random() * 10; 
             var points = 
             [ 
                 { "EmployeeID": new Date(year, 1, i), "Value": y }, 
 
             ]; 
             data.push(points[0]); 
         } 
         return data; 
     } 
var obj = setData(179, 2000); 
window.employeeView =  
              {  
                  enable: ko.observable(true),               
                     xZoomFactor:ko.observable(1), 
                     yZoomFactor:ko.observable(1), 
                     xZoomPosition:ko.observable(0), 
                     yZoomPosition: ko.observable(0),   
                                           dataSource: ko.observableArray(obj), 
              }; 
ko.applyBindings(employeeView); 
</script> 

In the above code, we have bound the zoomfactor, zoomposition for x and y axis and datasource for the chart. Now the chart will render like below.  
 
To update the chart with the datasource in array using setInterval please follow the below code.  
In the getData() method we have written the below code.  

  function getData(number, year) { 
         for (var i = 0; i < 5; i++) { 
             data = setData(number, year); 
             maindata.push(data); 
         } 
         return maindata; 
     } 

Above will return the array which containing 5 datasources. We have subscribed the button click event and written the below code. 

buttonclick: function () { 
                         visibility: true; 
                         var chart = this; 
                         obj = getData(100, 2002); 
                         var j = 0; 
                         setInterval(function () 
                         { 
                             chart.dataSource(null); 
                             if (j < obj.length){ 
                                 chart.dataSource(obj[j]); 
                                 j = j + 1; 
                             } 
                             else { 
                                 j = 0; 
                                 chart.dataSource(obj[j]); 
                             } 
                         }, 1000); 
                     }, 

In the above code, we have used setInterval to change the datasource of the chart for each 1000 milliseconds. Now the chart will be updated for the every 1000 milliseconds. 

In the below link, we have attached sample for your reference.  

Please find the below online sample for your reference 

Please let us know if you have any concern. 

Regards, 
Sanjith. 


sam kolala
Replied On June 1, 2016 04:50 AM

This works fine, however I bumped into another issue when trying to data bind to remote data from web api. What is the recommended way for fetching remote data to bind to the observable array in the knockout viewmodel? 

Sanjith Kesavan [Syncfusion]
Replied On June 2, 2016 06:17 AM

Hi Sam, 
 
We have analyzed your query and prepared sample based on your requirement. In sample, we have retrieved the data from the service using the following code. 
 
[JS] 
var dataManger = new ej.DataManager({ 
            url: "http://mvc.syncfusion.com/Services/Northwnd.svc/" 
        }); 
        var query = ej.Query().from("Orders").take(10); 
In the above code, we have used data manager to retrieve the data from the service. Query is used to select the data from datasource. To bind this retrieved data as datasource for series, please follow the below code.  
[JS] 
series:[{dataSource:dataManger,xName:'ShipCity', yName:'Freight', name:'Product', query: chartquery , type:'column’ }], 
 
In the above code, we have set the dataManager as datasource the chart and given the xName and YName value which contains x and y values in the datasource. In the viewmodel we have written the below code.  
 
window.employeeView = 
         { 
             enable: ko.observable(true), 
             xZoomFactor: ko.observable(1), 
             yZoomFactor: ko.observable(1), 
             xZoomPosition: ko.observable(0), 
             yZoomPosition: ko.observable(0), 
             chartquery: query, 
         }; 
         ko.applyBindings(employeeView); 
 
Now the chart will render like below. 
 
 
In the below link, we have attached sample for your reference. 
 
Please let us know if you have any concern. 
 
Regards, 
Sanjith. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;