Highchart not display


#1

i try to display highchart. in my app i have dropdown and calendar when i select value from dropdown and dates from calendar then chart will be display i try this code

   var strArray = [['DDSB',39],['DPSB',9],['DSB',26],['MV',35],['PSB',52]];
   $(function () { 
  $('[ID*=search_data]').on('click', function () {
  var from = $('[ID*=fromdate]').val();
   var to = $('[ID*=todate]').val();
     var reg = $('[ID*=regiondrop] option:selected')[0].value; 
     var obj = {};
     obj.fdate = from;
     obj.tdate = to;
     obj.region = reg;
     GetData(obj);
     return false;
     });
   });
    function GetData(obj) {
      alert('1');
    $.ajax({
      type: "POST",
     contentType: "application/json; charset=utf-8",
     url: "WebForm1.aspx/GetVo",
   data: JSON.stringify(obj),
     dataType: "json",
     async: true,
     cache: false,
     success: function (result) {
         alert('2');
      alert(result.d);
        alert('3');
         // start
         strArray = result.d;
         var myarray = strArray;
         DreawChart(myarray);
         alert('4');
    },
    error: function (result) {
     alert("Error");

      }
 });
 }
 function DreawChart(result) {
 $('#container').highcharts({
     chart: {
         type: 'pie',
         options3d: {
             enabled: true,
             alpha: 45
         }
     },
     title: {
         text: 'Contents of Highsoft\'s weekly fruit delivery'
     },
     subtitle: {
         text: '3D donut in Highcharts'
     },
     plotOptions: {
         pie: {
             innerSize: 100,
             depth: 45
         }
     },
     series: [{
         name: 'Delivered amount',
         data: result
     }]
 });
 }

i use webmethod and in this webmethod return data is

         [['DDSB',39],['DPSB',9],['DSB',26],['MV',35],['PSB',52]]

WHEN i select value from dropdown and dates from calenda then this data is display in alert box but chart not display any help please


#2

any solution of this question please


#3

I use Highcharts a lot and it’s not hard to get it to work.

I think you have made your life unnecessarily complicated by using so much jQuery. You can usually do much better in Meteor without it. It’s very risky to make assumptions based on “traditional” jQuery programming when using Meteor: you will often not get the results you want.

For example, your GetData function could be rewritten as:

  function GetData(obj) {
    HTTP.post('WebForm1.aspx/GetVo', { data: obj }, (err, myarray) => {
      if (err) {
        alert('Error');
      } else {
        DreawChart(myarray);
      }
    });
  }

Note: I do not expect this will fix your problem - it’s just an illustration.

If your code is otherwise correct, some reasons for non-rendering of data are:

  1. Your template logic/structure is incorrect.
  2. You have your code in the wrong place.
  3. Your data is not ready (you use your data in the success callback, so this doesn’t apply here).

So you need to show us:

  1. The relevant templates.
  2. Where your code lives in relation to your templates (your onCreated, onRendered, helpers, events).

#4

hi … thanks for reply check this demo … chart is display but formatting is not correct… check this


#5

In which case the data you are using in the series stanza (result) is not what you think it is. If I overwrite result with [['DDSB',39],['DPSB',9],['DSB',26],['MV',35],['PSB',52]] and run your code I get this:


#6

YES that data is not constant this changes from database … like when i select different dates then data must be different

[[‘DDSB’,39],[‘DPSB’,9],[‘DSB’,26],[‘MV’,35],[‘PSB’,52]]


#7

I understand that. What I’m saying is that maybe you aren’t passing what you think you’re passing.

What do you get in your console.log if you modify your code like this?

  function DreawChart(result) {
    console.log(JSON.stringify(result, null, 2));
    $('#container').highcharts({
      chart: {
        type: 'pie',
        options3d: {
          enabled: true,
          alpha: 45,
        },
      },
      title: {
        text: 'Contents of Highsoft\'s weekly fruit delivery',
      },
      subtitle: {
        text: '3D donut in Highcharts',
      },
      plotOptions: {
        pie: {
          innerSize: 100,
          depth: 45,
        },
      },
      series: [{
        name: 'Delivered amount',
        data: result,
      }],
    });
  }

#8

hi thanks for reply
i set alert 3 just for test like this and i edit my code check code so when i run this code after alert 3 i did not get anything … after alert 3 i got same chart

    code
       <script type="text/javascript">
        var strarr = "[['sfdsdfLi', 9],['Kiwsdfi', 3],['Mixesdfd nuts', 1],['Oranges', 6],['Grapes (bunch)', 1]]";
        $(function () {
        $('[ID*=search_data]').on('click', function () {
         var from = $('[ID*=fromdate]').val();
        var to = $('[ID*=todate]').val();
           var reg = $('[ID*=regiondrop] option:selected')[0].value;
         var obj = {};
        obj.fdate = from;
        obj.tdate = to;
        obj.region = reg;
        Getdata(obj);
        return false;
    });
});
function Getdata(obj) {
    //alert('1');
    $.ajax({
        type: "POST",
        url: "WebForm1.aspx/GetVo",
        data: JSON.stringify(obj),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        cache: false,
        success: function (result) {

            //alert(result.d);
            //alert('2');
            strarr = result.d;
            var myarr = strarr;
            Drewchart(myarr);
            //alert(myarr);
             alert('3');

        },
        error: function (error) {
            alert("error");

        }
    });
}
function Drewchart(result) {
    console.log(JSON.stringify(result, null, 2));
    $('#container').highcharts({
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: 'Contents of Charts'
        },
        subtitle: {
            text: '3D donut in Highcharts'
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45
            }
        },
        series: [{
            name: 'Delivered amount',
            data: result
        }]

    });
}

#9

Have you checked your console log? You haven’t shown it.


#10

how i check console log?


#11

What browser are you using?


#12

OK HERE YOU GO


#13

Yep - that’s a string, not an array.


#14

so what should i do ?


#15

my webmethod look like this

[WebMethod]
            public static string GetVo(DateTime fdate, DateTime tdate, string region)
          { 
                string data2 = "[";
            try
            {
                Ts1 DB = new Ts1();
                
                var rea = (from vv in DB.tblVV
                           join rv in DB.tblRV on vv.MID equals rv.ID
                           join re in DB.tblRe on rv.RID equals re.RID
                          where
                           re.Region == region
                           && (vv.VName != "")
                           && re.StartDate <= fdate
                           && re.EndDate >= tdate
                          
                           group vv by vv.VName into g
                           select new
                           {
                               Name = g.Key,
                               cnt = g.Select(t => t.Name).Count()
                           }).ToList();
                data2 += rea.ToList().Select(x => "['" + x.Name + "'," + x.cnt + "]")
                  .Aggregate((a, b) => a + "," + b);
                data2 += "]";
                
            }
            catch (Exception)
            {
                throw new Exception();
                
            }
            return data2;
            
        }

#16

@robfallows ??? what should i do


#17

The main problem with that webmethod is that it’s not returning valid JSON. Instead of

[['DDSB',39],['DPSB',9],['DSB',26],['MV',35],['PSB',52]]

I would expect to see

[["DDSB",39],["DPSB",9],["DSB",26],["MV",35],["PSB",52]]

#18

so how i edit in code … i try to edit in this line
data2 += rea.ToList().Select(x => “[’” + x.Name + “’,” + x.cnt + “]”)
.Aggregate((a, b) => a + “,” + b);]

but when i edit then show errors


#19

http://www.aspsnippets.com/Articles/Return-JSON-data-object-from-WebMethod-PageMethod-in-ASPNet-using-C-and-VBNet.aspx


#20

@robfallows if you write this [[‘DDSB’,39],[‘DPSB’,9],[‘DSB’,26],[‘MV’,35],[‘PSB’,52]] instead of result and successfully works then why we expect this data [[“DDSB”,39],[“DPSB”,9],[“DSB”,26],[“MV”,35],[“PSB”,52]]