This project is read-only.

Update HighChart depending upon criteria.

Aug 8, 2014 at 8:03 AM
Hi,

I have created a chart and the user can select date from the page and I want the chart to be refreshed with new data. I have tried the following code...
public string GenerateChart(string startDate, string endDate)
{
PlotOptionsPie pie = new PlotOptionsPie
            {
                InnerSize = new PercentageOrPixel(95, false),
                Depth = 45,               
                Size = new PercentageOrPixel(60, true),
                AllowPointSelect = true,
                Cursor = Cursors.Pointer,
                ShowInLegend = true,
                Shadow = true
            };
            PlotOptions opt = new PlotOptions();
            opt.Pie = pie;

            DataSet ds = GetData(startDate, endDate);

string[] category = new string[ds.Tables[0].Rows.Count];
            Object[] values = new Object[ds.Tables[0].Rows.Count];
            if (ds != null && ds.Tables.Count > 0 && ds.Tables[0] != null)
            {
                int i = 0;
                foreach (DataRow dr in ds.Tables[0].Rows)
                {
                    //category[i] = Convert.ToString(dr["label"].ToString());
                    //values[i++] = Convert.ToInt32(dr["value"].ToString());
                    values[i++] = new Object[] { Convert.ToString(dr["label"].ToString()), Convert.ToInt32(dr["value"].ToString()) };
                }
            }

            Highcharts chart = new Highcharts("Chart1");
            chart.SetExporting(new Exporting { Enabled = false });
            Chart initChart = new Chart();

            ChartOptions3d Opt3d = new ChartOptions3d();
            Opt3d.Enabled = true;
            Opt3d.Alpha = 15;

            initChart.DefaultSeriesType = ChartTypes.Pie;
            initChart.Options3d = Opt3d;
            initChart.PlotShadow = true;

            chart.InitChart(initChart);
            chart.SetLegend(new Legend { Enabled = false, });
            chart.SetPlotOptions(opt);
            chart.SetSeries(new[] { new Series { Name = "Count", Data = new Data(values) } }); ;
            chart.SetExporting(new Exporting { Enabled = false });
            chart.SetCredits(new Credits { Enabled = false });
            return chart.ToHtmlString();
}
This is my html where my chart is rendered.
<div class="chart" id="Chart11" runat="server">
                                        <span></span>
                                    </div>
This is called at page load. It shows the chart. Now I am rendering the chart from Jquery, where it is not updating the chart

below mentioned code I m using for criteria...
 $('.daterangeForChart').daterangepicker(
        {
            ranges: {
                'Today1': [moment(), moment()],
                'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
                'Last 7 Days': [moment().subtract('days', 6), moment()],
                'Last 30 Days': [moment().subtract('days', 29), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
            },
            startDate: moment().subtract('days', 29),
            endDate: moment()
        },
    function (start, end) {
        var dataValue = "{\"StartDate\": \"" + start.format('YYYY-MM-DD') + "\", \"EndDate\": \"" + end.format('YYYY-MM-DD') + "\"}";
        $.ajax({
            type: "POST",
            url: "PageName.aspx/RenderDonutChart",
            data: dataValue,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
            },
            success: function (result) {
                //var htmlString = result.d
                ////var res = htmlString.replace("$(document).ready(function()", "$(function()");
                ////alert(res);
                ////console.log(htmlString, '');
                $("#<%= hdnDonut.ClientID %>").val(htmlString);
                
                //$('#DonutChart11').html(htmlString);
                ////$('#DonutChart11').innerHTML = htmlString;
                //alert($('input[id$=hdnDonut]').val());
            }
        });
    });
[WebMethod]
        public static string GenerateChart(string StartDate, string EndDate)
        {
            string sText = ChartUtils.RenderDonutChart(StartDate, EndDate);

            return sText
        }