locked
high chart total data RRS feed

  • Question

  • User639567535 posted

    I try to populate chart when user click on button .. and chart is display like this now 

    now the problem i want total i.e. as in image in red circle i write TOTAL : 3 .. 3 is beacuse 2 for MV and 1 for DSB so total is 3 I try this

    this is the code which i try

     <script type="text/javascript">
        var strArray = "[['sfdsdfLi', 9],['Kiwsdfi', 3],['Mixesdfd nuts', 1],['Oranges', 6],['Grapes (bunch)', 1]]";
        $(function () {
            $('#tabledata').on('click', 'tr', function () {
                var row = $(this);
                var Id = row.find('td')[0].firstChild.data;
                var obj = {};
                obj.ID = Id;
                GetData(obj);
                return false;
            });
        });
    function GetData(obj) {
        $.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) {
                if (result !== null && result.length == 0) {
                    $("#cont").hide();
                    return;
                }
                strArray = result.d;
                var myarray = eval(strArray);
                $("#cont").show();
                $('#cont').highcharts({
                    chart: {
                        borderColor: 'Grey',
                        borderWidth: 2,
                        type: 'pie',
                        options3d: {
                            enabled: true,
                            alpha: 45
                        }
                    },
                    title: {
                        text: 'Data1'
                    },
                  
                position: {
                        align: 'right',
                        verticalAlign: 'bottom',
                        x: 10,
                        y: -10
                  },
                subtitle: {
                    text: '3D Chart'
                },
    
    
                plotOptions: {
                    pie: {
                        innerSize: 100,
                        depth: 45,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.y} %',
                           
                        },
                        showInLegend: true
                    }
                },
                    series: [{
                        name: 'Delivered amount',
                        data: myarray
                    }]
                });
            },
            error: function (error) {
                alert(error);
            }
    
        });
            }
      </script>

     

    Saturday, July 30, 2016 10:05 AM

Answers

  • User61956409 posted

    Hi Bakhtawar Ashiq,

    you mean i will write one more query for total ?

    You misunderstand my meaning. According to your description and code, we could find you fetch data from server using jQuery ajax and populate chart on client side via JavaScript. The returned result of ajax request should contain these data (2 for MV and 1 for DSB), is it right? So as I mentioned in my previous reply, you could extract the data you want from the returned result and do calculation. You need not to write another query for get total from database.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 1, 2016 5:55 AM

All replies

  • User61956409 posted

    Hi Bakhtawar Ashiq,

    You could extract data from data source (the returned data of ajax request) and do calculation for total after you populate high chart on ajax success callback function.

    function GetData(obj) {
        $.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) {
                if (result !== null && result.length == 0) {
                    $("#cont").hide();
                    return;
                }
                strArray = result.d;
                var myarray = eval(strArray);
                $("#cont").show();
    
                //your code
                //populate high chart
    
                //loop through myarray
                //and extract data from array myarray and do calculation
                //find the element of total and update text or value of the element with total number
            },
            error: function (error) {
                alert(error);
            }
    
        });
    }
    

    Best Regards,

    Fei Han

    Monday, August 1, 2016 2:58 AM
  • User639567535 posted

    you mean i will write one more query for total ?

    Monday, August 1, 2016 5:29 AM
  • User61956409 posted

    Hi Bakhtawar Ashiq,

    you mean i will write one more query for total ?

    You misunderstand my meaning. According to your description and code, we could find you fetch data from server using jQuery ajax and populate chart on client side via JavaScript. The returned result of ajax request should contain these data (2 for MV and 1 for DSB), is it right? So as I mentioned in my previous reply, you could extract the data you want from the returned result and do calculation. You need not to write another query for get total from database.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 1, 2016 5:55 AM
  • User639567535 posted

    yes that is the question how i extract total data Undecided

    Monday, August 1, 2016 6:09 AM
  • User639567535 posted

    Fei Han - MSFT

    Hi Bakhtawar Ashiq,

    Bakhtawar Ashiq

    you mean i will write one more query for total ?

    You misunderstand my meaning. According to your description and code, we could find you fetch data from server using jQuery ajax and populate chart on client side via JavaScript. The returned result of ajax request should contain these data (2 for MV and 1 for DSB), is it right? So as I mentioned in my previous reply, you could extract the data you want from the returned result and do calculation. You need not to write another query for get total from database.

    Best Regards,

    Fei Han

    i try this

     subtitle: {
                        //text: '3D Chart'
                        text: 'Total: ' + myarray.length
                    },

    but this shows

    total :2 instead of total:3

    Monday, August 1, 2016 6:15 AM
  • User639567535 posted

    Hi Bakhtawar Ashiq,

    Bakhtawar Ashiq

    you mean i will write one more query for total ?

    You misunderstand my meaning. According to your description and code, we could find you fetch data from server using jQuery ajax and populate chart on client side via JavaScript. The returned result of ajax request should contain these data (2 for MV and 1 for DSB), is it right? So as I mentioned in my previous reply, you could extract the data you want from the returned result and do calculation. You need not to write another query for get total from database.

    Best Regards,

    Fei Han

    i try this and this is working .. 

    events: {
                        load: function (event) {
                            var total = 0;
                            for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                                total += this.series[0].yData[i];
                            }
                            var text = this.renderer.text(
                              'Total: ' + total,
                              this.plotLeft,
                              this.plotTop - 20
                          ).attr({
                              zIndex: 5
                          }).add()
                        }
                    },

    Monday, August 1, 2016 6:51 AM