Dynamic Chart and Grid binding data from DataTable

  1. #1

    Dynamic Chart and Grid binding data from DataTable

    I'm trying to to build both grid and chart depends from DataTable data. I followed this thread and it's working well for grid but no for chart because it's being rendering empty. Something is wrong with my chart series, but I didn't realized what is wrong.

    Could somebody give me a help?

    Here is my code:

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">  
      private ModelFieldType MappingType(Type type)
      {
        if (type == typeof(string))
        {
          return ModelFieldType.String;
        }
        else if (type == typeof(DateTime))
        {
          return ModelFieldType.Date;
        }
        else if (type == typeof(int))
        {
          return ModelFieldType.Int;
        }
        else if (type == typeof(double))
        {
          return ModelFieldType.Float;
        }
        else if (type == typeof(bool))
        {
          return ModelFieldType.Boolean;
        }
    
        return ModelFieldType.Auto;
      }
    
      protected void Page_Load(object sender, EventArgs e)
      {
        EamCore.Domain dom = new EamCore.Domain(Guid.Parse("d952652d-142c-4e9f-b97e-968df211a3b1"), ConfigurationManager.ConnectionStrings["EamInternalDBConnectionString"].ConnectionString);
        EamCore.Reports rep = new EamCore.Reports();
        System.Data.DataTable tb = rep.GetAlarmsRate(dom, "1", "day", "01/01/2013", "05/01/2013", "", true);
    
        Model readerChart = new Model();
        Model readerGrid = new Model();
    
        Store storeChart = new Store { ID = "storeChart", Model = { readerChart } };
        Store storeGrid = new Store { ID = "storeGrid", Model = { readerGrid } };
    
        GridPanel grid = new GridPanel
        {
          ID = "GridPanel1",
          AutoDoLayout = true,
          ForceFit = true,
          Collapsible = true,
          Store = { storeGrid }
        };
        grid.BottomBar.Add(new PagingToolbar());
    
        System.Collections.Generic.List<ColumnSeries> Serieslist = new System.Collections.Generic.List<ColumnSeries>();
    
        if (tb != null)
        {
          for (int i = 0; i < tb.Columns.Count; i++)
          {
            bool valuedSerie = false;
            foreach (System.Data.DataRow dr in tb.DefaultView.Table.Rows)
            {
              if (dr.ItemArray[i].ToString() != "0")
              {
                valuedSerie = true;
                break;
              }
            }
            if (valuedSerie)
            {
              readerChart.Fields.Add(tb.Columns[i].ColumnName, this.MappingType(tb.Columns[i].DataType));
              Serieslist.Add(new ColumnSeries { Highlight = true, XField = new string[] { tb.Columns[i].ColumnName } });
              readerGrid.Fields.Add(tb.Columns[i].ColumnName, this.MappingType(tb.Columns[i].DataType));
              grid.ColumnModel.Columns.Add(new Ext.Net.Column { Text = tb.Columns[i].ColumnName, DataIndex = tb.Columns[i].ColumnName });
            }
          }
        }
    
        createChart(tb, Serieslist, storeChart);
        storeGrid.DataSource = tb;
        storeGrid.DataBind();
    
        this.Form.Controls.Add(grid);
      }
    
      private void createChart(System.Data.DataTable dTable, System.Collections.Generic.List<ColumnSeries> listLineSeries, Store store)
      {
        Chart chart = new Chart()
        {
          ID = "chtGrafico",
          Animate = true,
          Width = 800,
          Height = 500,
          Frame = true,
          InsetPadding = 30
        };
    
        store.DataSource = dTable;
        chart.Store.Add(store);
    
        NumericAxis numericAxis = new NumericAxis { AdjustMaximumByMajorUnit = true, Minimum = 0 };
        chart.Axes.Add(numericAxis);
    
        CategoryAxis categoryAxis = new CategoryAxis()
        {
          Fields = new string[] { "DateTime" },
          Position = Position.Bottom
        };
        chart.Axes.Add(categoryAxis);
    
        listLineSeries.ForEach(x => { chart.Series.Add(x); });
    
        this.Form.Controls.Add(chart);
    
      }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
    </head>
    <body>
      <form id="form1" runat="server">
      <ext:ResourceManager ID="ResourceManager1" runat="server" />
      </form>
    </body>
    </html>
    Thanks.
  2. #2
    I found the problem:

    change:
    readerChart.Fields.Add(tb.Columns[i].ColumnName, this.MappingType(tb.Columns[i].DataType));
    Serieslist.Add(new ColumnSeries { Highlight = true, XField = new string[] { tb.Columns[i].ColumnName } });
    to:
    readerChart.Fields.Add(tb.Columns[i].ColumnName, this.MappingType(tb.Columns[i+1].DataType));
    Serieslist.Add(new ColumnSeries { Highlight = true, XField = new string[] { tb.Columns[0].ColumnName }, YField = new string[] { tb.Columns[i+1].ColumnName } });

    Quote Originally Posted by posser View Post
    I'm trying to to build both grid and chart depends from DataTable data. I followed this thread and it's working well for grid but no for chart because it's being rendering empty. Something is wrong with my chart series, but I didn't realized what is wrong.

    Could somebody give me a help?

    Here is my code:

    <%@ Page Language="C#" AutoEventWireup="true" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <script runat="server">  
      private ModelFieldType MappingType(Type type)
      {
        if (type == typeof(string))
        {
          return ModelFieldType.String;
        }
        else if (type == typeof(DateTime))
        {
          return ModelFieldType.Date;
        }
        else if (type == typeof(int))
        {
          return ModelFieldType.Int;
        }
        else if (type == typeof(double))
        {
          return ModelFieldType.Float;
        }
        else if (type == typeof(bool))
        {
          return ModelFieldType.Boolean;
        }
    
        return ModelFieldType.Auto;
      }
    
      protected void Page_Load(object sender, EventArgs e)
      {
        EamCore.Domain dom = new EamCore.Domain(Guid.Parse("d952652d-142c-4e9f-b97e-968df211a3b1"), ConfigurationManager.ConnectionStrings["EamInternalDBConnectionString"].ConnectionString);
        EamCore.Reports rep = new EamCore.Reports();
        System.Data.DataTable tb = rep.GetAlarmsRate(dom, "1", "day", "01/01/2013", "05/01/2013", "", true);
    
        Model readerChart = new Model();
        Model readerGrid = new Model();
    
        Store storeChart = new Store { ID = "storeChart", Model = { readerChart } };
        Store storeGrid = new Store { ID = "storeGrid", Model = { readerGrid } };
    
        GridPanel grid = new GridPanel
        {
          ID = "GridPanel1",
          AutoDoLayout = true,
          ForceFit = true,
          Collapsible = true,
          Store = { storeGrid }
        };
        grid.BottomBar.Add(new PagingToolbar());
    
        System.Collections.Generic.List<ColumnSeries> Serieslist = new System.Collections.Generic.List<ColumnSeries>();
    
        if (tb != null)
        {
          for (int i = 0; i < tb.Columns.Count; i++)
          {
            bool valuedSerie = false;
            foreach (System.Data.DataRow dr in tb.DefaultView.Table.Rows)
            {
              if (dr.ItemArray[i].ToString() != "0")
              {
                valuedSerie = true;
                break;
              }
            }
            if (valuedSerie)
            {
              readerChart.Fields.Add(tb.Columns[i].ColumnName, this.MappingType(tb.Columns[i].DataType));
              Serieslist.Add(new ColumnSeries { Highlight = true, XField = new string[] { tb.Columns[i].ColumnName } });
              readerGrid.Fields.Add(tb.Columns[i].ColumnName, this.MappingType(tb.Columns[i].DataType));
              grid.ColumnModel.Columns.Add(new Ext.Net.Column { Text = tb.Columns[i].ColumnName, DataIndex = tb.Columns[i].ColumnName });
            }
          }
        }
    
        createChart(tb, Serieslist, storeChart);
        storeGrid.DataSource = tb;
        storeGrid.DataBind();
    
        this.Form.Controls.Add(grid);
      }
    
      private void createChart(System.Data.DataTable dTable, System.Collections.Generic.List<ColumnSeries> listLineSeries, Store store)
      {
        Chart chart = new Chart()
        {
          ID = "chtGrafico",
          Animate = true,
          Width = 800,
          Height = 500,
          Frame = true,
          InsetPadding = 30
        };
    
        store.DataSource = dTable;
        chart.Store.Add(store);
    
        NumericAxis numericAxis = new NumericAxis { AdjustMaximumByMajorUnit = true, Minimum = 0 };
        chart.Axes.Add(numericAxis);
    
        CategoryAxis categoryAxis = new CategoryAxis()
        {
          Fields = new string[] { "DateTime" },
          Position = Position.Bottom
        };
        chart.Axes.Add(categoryAxis);
    
        listLineSeries.ForEach(x => { chart.Series.Add(x); });
    
        this.Form.Controls.Add(chart);
    
      }
    </script>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
      <title></title>
    </head>
    <body>
      <form id="form1" runat="server">
      <ext:ResourceManager ID="ResourceManager1" runat="server" />
      </form>
    </body>
    </html>
    Thanks.
  3. #3
    Thank you for your update!

Similar Threads

  1. [CLOSED] Need help with MVC Line Chart with Dynamic Data
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 19, 2013, 9:09 AM
  2. Save edited data of grid panel to Datatable
    By Vinci in forum 2.x Help
    Replies: 3
    Last Post: Jul 03, 2013, 11:24 PM
  3. Replies: 4
    Last Post: May 31, 2011, 3:53 PM
  4. [CLOSED] tree grid dynamic binding issue
    By ArcadisUS in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 09, 2011, 8:59 PM
  5. Replies: 11
    Last Post: Oct 21, 2010, 1:35 PM

Tags for this Thread

Posting Permissions