1. Home
  2. Forum
  3. jQuery
  4. unable to use the datamanager

unable to use the datamanager

hi, 

there  is obviousely a simple fix to my problem but i cannot figure out how at this time  :p

here the code i am using

            var dataManger = new ej.DataManager(
       {
           url: "../myWebService.asmx/freqchartMonth"
       });

and in the console , i have this error

Uncaught ReferenceError: dataManager is not defined


if i don't use the datamanager and i set the data locally like in the line.html demo it works, and i can see the chart .
but if i use the datamanager i have this error .


here the scripts that i have included


  •     <script src="../cdns/jquery-2.1.4.min.js"></script>

  •     <script src="../syncfusion/scripts/jquery.globalize.min.js"></script>
  •     <script src="../syncfusion/scripts/ej.web.all.min.js" type="text/javascript"></script>
  •     <script src="../syncfusion/scripts/properties.js" type="text/javascript"></script>


also i have checked that my webservice is working and returning the data

thanks for your help .

8 Replies
SK Sanjith Kesavan Syncfusion Team November 28, 2015 09:07 AM UTC

Hi Issam

Thanks for contacting Syncfusion support. We have analyzed your query. If the data manager is not bound for the chart, then “dataManager is not defined” error occurs. So please ensure that whether datamanager is bound to the chart or not. We have prepared the sample with datamanager.

[JS]


In the above code example we have created the datamanager. We have used query to take data from the data from the datamanager.


In the above code example we have bound the datamanager to the chart. Please make sure that the name of the datamanger is as same as the datasource name which is you binding for the datasource. Now the chart will render using the data from the datamanager. Please find the below screenshot.


Please find the sample from below location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/121287/ze/datamanager955582061
Please let us know if you have any concern.

Regards,
Sanjith K.

IS issam November 29, 2015 08:41 AM UTC

hmm strange !

your sample worked perfectly but not mine ...

now i am getting internal server error 500


i am using a webservice to get the data and according to this page, it's possible .

here what i have tried

       var dataManager = ej.DataManager({url: "MyWebService.asmx/freqchartMonth"});
       var promise = dataManager.executeQuery(new ej.Query());
       promise.done(function (e) {
            alert(e.result); 
        });


and my webmethod code wich is working correctly and returning data if i run it from the asmx test page
        [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = false)]
        [WebMethod(EnableSession = true)]
        public string freqchartMonth()
        {

            using (MyDBEntities ctx = new MyDBEntities())
            { 
                var model = ctx.CONNECTIONS_STATS

               .GroupBy(o => new
               {
                   Month = ((DateTime)o.CS_DATE).Month,
                   Year = ((DateTime)o.CS_DATE).Year
               })
               .ToList()
               .Select(g => new FreqChartData()
               {

                   DT = (new DateTime(g.Key.Year, g.Key.Month, 1)),
                   connectpat = g.Where(a => a.CS_TYPE_USER == 0).Count(),
                   connectmed = g.Where(a => a.CS_TYPE_USER == 1).Count()
               })
               .OrderBy(a => a.DT.Year)
               .ThenBy(a => a.DT.Month)
               .ToList();
                JavaScriptSerializer serializer = new JavaScriptSerializer();

                var result = serializer.Serialize(model.ToList());
                return result;

            }
        }

i have also tried returning a List<FreqChartData> with the same issue .

any idea pleas eon what going on ?


ps : please add quotes and code balise to the post editor ;)


IS issam November 29, 2015 02:36 PM UTC

UPDATE

there is some progress .
now i dont get any error , but i still cannot see the chart .
here the js code

 <script type="text/javascript">
        function createlinechart(lc)
        {
            $("#line-chart").ejChart(
      {
          chartArea:
          {
              border: { width: 1 }
          },
          
          primaryXAxis:
          {
              rangePadding: 'Additional',
              labelRotation: 45,
              title: { text: "Mois" }
          },
          primaryYAxis:
          {
              title: { text: "Fréquentation" }
          },

          
          series:
          [
              {
                  
                  type: 'line',
                  enableAnimation: true,
                  dataSource: lc,
                  xName: "DT",
                  yName: "connectpat",
                  fill: "#69D2E7"
              }
          ],
          canResize: true,
          size: { height: "600" }
      });

        }
        $(document).ready(function () {

            var linesdata = "";
            var dataManager = new ej.DataManager({
                url: "MyWebService.asmx/freqchartMonth",
                offline: true, adaptor: "UrlAdaptor"

            }); 
            $("#line-chart").ejWaitingPopup()
            $("#line-chart").ejWaitingPopup("show");

            var promise = dataManager.executeQuery(new ej.Query());

            promise.done(function (e) {
              
                createlinechart(JSON.stringify(e.result));
                $("#line-chart").ejWaitingPopup("hide");
            });
        });
    </script>

DP Deepaa Pragaasam Syncfusion Team November 30, 2015 09:34 AM UTC

Hi Issam,
We have analyzed your code
From your code, we have found the following
1.       When the offline property of the dataManager is set to true,the data will be present in the e.result.d
2.       The result of the query promise is already present as JSON object. So it need not be converted again to JSON.String
When the argument to the chart datasource is assigned as the below the chart is rendered correctly
Code Example:

    var dataManager = new ej.DataManager(

           {

               url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Foods", offline: true


           });



            var promise = dataManager.executeQuery(new ej.Query());

            promise.done(function (e) {


                createlinechart(e.result.d);

            });

Screenshot:

 

We have attached the sample for your reference
Sample Link: http://www.syncfusion.com/downloads/support/forum/121287/ze/datamanager-1892653623
Please let us know if you have any concerns
Regards,
Deepaa.


IS issam November 30, 2015 05:50 PM UTC

it's finally working  ! and i must say that it's a real good feeling :)

now time for some fun !

i am almost sure that i have seen an example in the help section or here in the forum responses on using the chart with the rangenavigator , but i cannot find it .

any help on this ?

thanks again .

DP Deepaa Pragaasam Syncfusion Team December 1, 2015 10:29 AM UTC

Hi Issam,

We have analyzed your query.

We have prepared a sample containing the chart and Range navigator.


Sample Link: http://jsplayground.syncfusion.com/tkmemnuk

 To know more about RangeNavigator and chart please refer the below link
 
http://help.syncfusion.com/js/rangenavigator/getting-started

Please let us know if you have any concerns

Regards,
Deepaa.


IS issam December 1, 2015 11:28 AM UTC

perfect !

thanks a lot .

MP Michael Prabhu M Syncfusion Team December 7, 2015 05:46 AM UTC

Hi Issam,
 
Thanks for the update, feel free to contact us anytime if you need further assistance on this.
 
Thanks,
Michael.

Loader.
Up arrow icon