Sample Chart using Knockout

[sam kolala]

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]

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.  

Sample link: http://jsplayground.syncfusion.com/cogno2wm  

Please find the below online sample for your reference 

Sample link: http://js.syncfusion.com/demos/web/#!/azure/knockout/chart 

Please let us know if you have any concern. 

Regards, 

Sanjith. 

[sam kolala]

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]

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. 

Sample link: http://www.syncfusion.com/downloads/support/forum/124285/ze/knockout323442545  

 

Please let us know if you have any concern. 

 

Regards, 

Sanjith.