Highchart not display

bakhtawar · July 11, 2016, 10:10am

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

bakhtawar · July 12, 2016, 4:33am

any solution of this question please

robfallows · July 13, 2016, 1:42pm

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:

Your template logic/structure is incorrect.
You have your code in the wrong place.
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:

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

bakhtawar · July 14, 2016, 4:49am

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

robfallows · July 14, 2016, 9:26am

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:

bakhtawar · July 14, 2016, 9:41am

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]]

robfallows · July 14, 2016, 9:48am

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,
      }],
    });
  }

bakhtawar · July 14, 2016, 10:03am

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
        }]

    });
}

robfallows · July 14, 2016, 10:12am

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

bakhtawar · July 14, 2016, 10:51am

how i check console log?

robfallows · July 14, 2016, 10:56am

What browser are you using?

bakhtawar · July 14, 2016, 10:57am

OK HERE YOU GO

robfallows · July 14, 2016, 11:02am

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

bakhtawar · July 14, 2016, 11:08am

so what should i do ?

bakhtawar · July 14, 2016, 11:10am

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;
            
        }

bakhtawar · July 14, 2016, 11:17am

@robfallows ??? what should i do

robfallows · July 14, 2016, 11:19am

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]]

bakhtawar · July 14, 2016, 11:30am

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

robfallows · July 14, 2016, 11:39am

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

bakhtawar · July 14, 2016, 12:19pm

@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]]