Highcharts, Filter no Refresh

  1. #1

    Highcharts, Filter no Refresh

    Hi Guys

    I Have some problems with te postback.
    i'm using Highcharts JS v2.1.6, when load page, works perfectly, but when i want apply a filter, per example, data range.

    No refresh the chart. (i did debugging and my class result data is correct)

    Grafica.aspx
    <script src="Scripts/graficaglobal.js" type="text/javascript"></script>
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
    
    <ext:Viewport ID="ViewPort1" runat="server" >
            <Items>
                <ext:BorderLayout ID="BorderLayout1" runat="server" BodyStyle="padding:5px 0px 0;">
                    <Center>
                        <ext:Panel ID="Panel4" runat="server" Frame="true" Layout="FormLayout" Title="Graficas"
                            AutoScroll="true" AnchorHorizontal="-20">
                            <Items>
                                <ext:Panel ID="filtrospanel" runat="server" Layout="ColumnLayout" Border="true" Title="Filtros"
                                    AnchorHorizontal="-20" Split="true" BodyBorder="true" Icon="Lightning" AnimCollapse="true"
                                    Collapsible="true" Height="100" Collapsed="false">
                                    <Items>
                                        <ext:Panel ID="Panel6" runat="server" Border="false" Header="false" Padding="5" Layout="Form"
                                            LabelAlign="Left">
                                            <Items>
                                                <ext:ComboBox ID="cmbplanta" runat="server" FieldLabel="Planta" EmptyText="-planta-"
                                                    Width="150">
                                                    <Items>
                                                        <ext:ListItem Value="1" Text="CMD" />
                                                        <ext:ListItem Value="2" Text="FEEDER" />
                                                    </Items>
                                                </ext:ComboBox>
                                                <ext:DateField ID="txtfecharangoa" runat="server" Vtype="daterange" FieldLabel="Rango Fecha a"
                                                    Format="yyyy-MM-dd" Width="150">
                                                    <CustomConfig>
                                                        <ext:ConfigItem Name="startDateField" Value="#{txtfecharangodesde}" Mode="Value" />
                                                    </CustomConfig>
                                                </ext:DateField>
                                            </Items>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel1" runat="server" Border="false" Header="false" Padding="5" Layout="Form"
                                            LabelAlign="Left">
                                            <Items>
                                                <ext:ComboBox ID="cmbanio" runat="server" FieldLabel="Año" EmptyText="-año-" Width="150">
                                                    <Items>
                                                        <ext:ListItem Value="1" Text="2007" />
                                                        <ext:ListItem Value="2" Text="2008" />
                                                        <ext:ListItem Value="3" Text="2009" />
                                                        <ext:ListItem Value="4" Text="2010" />
                                                        <ext:ListItem Value="5" Text="2011" />
                                                    </Items>
                                                </ext:ComboBox>
                                                <ext:DateField ID="txtfecharangodesde" runat="server" Vtype="daterange" FieldLabel="Desde"
                                                    Format="yyyy-MM-dd" Width="150">
                                                    <CustomConfig>
                                                        <ext:ConfigItem Name="endDateField" Value="#{txtfecharangoa}" Mode="Value" />
                                                    </CustomConfig>
                                                </ext:DateField>
                                            </Items>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel3" runat="server" Border="false" Header="false" Padding="5" Layout="Form"
                                            LabelAlign="Left">
                                            <Items>
                                                <ext:Label runat="server" ID="hiddenn">
                                                </ext:Label>
                                                <ext:Button ID="btnfiltro" runat="server" Text="filtrar" Icon="Lightning">
                                                    <DirectEvents>
                                                        <Click OnEvent="Filtrar_Click">
                                                            <EventMask ShowMask="true" MinDelay="500" />
                                                        </Click>
                                                    </DirectEvents>
                                                </ext:Button>
                                            </Items>
                                        </ext:Panel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                            <Content>
                                <div id="container" style="width: 85%; height: 450px; margin: 0 auto">
                                </div>
                                <br />
                            </Content>
                        </ext:Panel>
                    </Center>
                </ext:BorderLayout>
            </Items>
        </ext:Viewport>
    Grafica.aspx.cs

    Method for build the data and register the result set

    
    private void llenardata(DatosGrafica[][] dgr)
        {
            List<string> xcategorias = new List<string>();
            List<float> cmpmc = new List<float>();
            List<float> cmpmo = new List<float>();
            List<float> cmpec = new List<float>();
            List<float> cmpeo = new List<float>();
            List<double> efectividad = new List<double>();
            cumplidastipo.Add(0);
            cumplidastipo.Add(0);
    
            #region graficaglobal
            foreach (DatosGrafica itemdg in dgr[0])
            {
                xcategorias.Add(itemdg.Mes_Descripcion);
            }
    
            foreach (DatosGrafica itemdg in dgr[0])
            {
                cmpmc.Add(itemdg.Total);
                cmpmo.Add(0);
                cumplidastipo[0] = cumplidastipo[0] + Convert.ToInt32(itemdg.Total);
            }
    
            foreach (DatosGrafica itemdg in dgr[1])
            {
                cmpec.Add(itemdg.Total);
                cmpeo.Add(0);
                cumplidastipo[1] = cumplidastipo[1] + Convert.ToInt32(itemdg.Total);
            }
    
            foreach (DatosGrafica itemdg in dgr[2])
            {
                cmpmo[itemdg.Mes_ID - 1] = itemdg.Total;
            }
    
            foreach (DatosGrafica itemdg in dgr[3])
            {
                cmpeo[itemdg.Mes_ID - 1] = itemdg.Total;
            }
    
            double res = 0;
            for (int i = 0; i < cmpmo.Count; i++)
            {
                res = ((cmpmc[i] + cmpec[i]) / (cmpmc[i] + cmpec[i] + cmpmo[i] + cmpeo[i])) * 100;
                efectividad.Add(Math.Round(res, 2));
            }
    
    
            List<float> Horas = new List<float>();
            foreach (DatosGrafica itemdg in dgr[4])
            {
                Horas.Add(itemdg.Total);
            }
    
            #endregion
    
    
            //agregar datos al construtor de string
            StringBuilder builderScript = new StringBuilder();
    
            string Scriptdata = string.Format(" var datampmc = [{0}]; ",
                string.Join(",", Array.ConvertAll<float, string>(cmpmc.ToArray(), new Converter<float, string>(ConvertFloatToString))));
    
            builderScript.Append(Scriptdata);
    
            Scriptdata = string.Format(" var datacmpec = [{0}]; ",
                string.Join(",", Array.ConvertAll<float, string>(cmpec.ToArray(), new Converter<float, string>(ConvertFloatToString))));
    
            builderScript.Append(Scriptdata);
    
            Scriptdata = string.Format(" var datacmpmf = [{0}]; ",
                string.Join(",", Array.ConvertAll<float, string>(cmpmo.ToArray(), new Converter<float, string>(ConvertFloatToString))));
    
            builderScript.Append(Scriptdata);
    
            Scriptdata = string.Format(" var datacmpef = [{0}]; ",
                string.Join(",", Array.ConvertAll<float, string>(cmpeo.ToArray(), new Converter<float, string>(ConvertFloatToString))));
    
            builderScript.Append(Scriptdata);
    
            Scriptdata = string.Format(" var datacategorias = ['{0}']; ", string.Join("','", xcategorias.ToArray()));
    
            builderScript.Append(Scriptdata);
    
            Scriptdata = string.Format(" var dataefectividad =[{0}]; ",
                string.Join(",", Array.ConvertAll<double, string>(efectividad.ToArray(), new Converter<double, string>(ConvertDoubleToString))));
    
            builderScript.Append(Scriptdata);
    
            Scriptdata = string.Format(" var datahoras = [{0}]; ",
                string.Join(",", Array.ConvertAll<float, string>(Horas.ToArray(), new Converter<float, string>(ConvertFloatToString))));
    
            builderScript.Append(Scriptdata);
    
            builderScript.AppendFormat(" var datampe = {0}; ", cumplidastipo[1]);
            builderScript.AppendFormat(" var datampm = {0}; ", cumplidastipo[0]);
    
    
            ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "grafica", builderScript.ToString(), true);
    
        }

    Thanks in Advance
    Attached Thumbnails Click image for larger version. 

Name:	chartglobal.jpg 
Views:	291 
Size:	99.4 KB 
ID:	3232  
    Attached Files
  2. #2
    Use Ext.Net.X.Js.AddScript during ajax request
  3. #3
    Quote Originally Posted by Vladimir View Post
    Use Ext.Net.X.Js.AddScript during ajax request
    Thanks! its Works!
  4. #4
    Hi,

    The ExtJS charts has been included into Ext.NET v2.
    https://examples2.ext.net/#/Chart/Dashboard/Basic/

    More details about Ext.NET v2 are here:
    http://forums.ext.net/showthread.php?16883

Similar Threads

  1. HighCharts in Coolite
    By ljankowski in forum 1.x Help
    Replies: 2
    Last Post: Jan 12, 2012, 4:13 PM
  2. Using HighCharts with Coolite
    By ttbsoftware in forum 1.x Help
    Replies: 3
    Last Post: Jan 12, 2012, 4:09 PM
  3. Paging toolbar refresh after filter
    By dan182 in forum 1.x Help
    Replies: 6
    Last Post: Dec 28, 2011, 9:48 AM
  4. [CLOSED] Filter focus lost after grid refresh
    By yobnet in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 15, 2010, 9:36 AM
  5. HighCharts With Coolite
    By simonmicheal in forum Open Discussions
    Replies: 0
    Last Post: Dec 04, 2009, 9:59 AM

Tags for this Thread

Posting Permissions