2008-12-02 73 views
5

Quería agregar gráficos dinámicos en la página web. Funciona así ...Agregar gráficos dinámicos utilizando ASP.NET CHART CONTROL, C#

Obtengo la fecha de inicio y finalización del usuario y dibujo tablas separadas para cada fecha desde la fecha de inicio y finalización.

consigo los datos de base de datos SQL y enlazarlo con la tabla de la siguiente manera:

SqlConnection UsageLogConn = new 
      SqlConnection(ConfigurationManager.ConnectionStrings["UsageConn"].ConnectionString); 
       UsageLogConn.Open();//open connection 

       string sql = "SELECT v.interval,dateadd(mi,(v.interval-1)*2,'" + startdate + " 00:00:00') as 'intervaltime',COUNT(Datediff(minute,'" + startdate + " 00:00:00',d.DateTime)/2) AS Total FROM usage_internet_intervals v left outer join (select * from Usage_Internet where " + name + " LIKE ('%" + value + "%') and DateTime BETWEEN '" + startdate + " 00:00:00' AND '" + enddate + " 23:59:59') d on v.interval = Datediff(minute,'" + startdate + " 00:00:00',d.DateTime)/2 GROUP BY v.interval,Datediff(minute,'" + startdate + " 00:00:00',d.DateTime)/2 ORDER BY Interval"; 

       SqlCommand cmd = new SqlCommand(sql, UsageLogConn); 
       SqlDataAdapter mySQLadapter = new SqlDataAdapter(cmd); 

       Chart1.DataSource = cmd; 

       // set series members names for the X and Y values 
       Chart1.Series["Series 1"].XValueMember = "intervaltime"; 
       Chart1.Series["Series 1"].YValueMembers = "Total"; 
       UsageLogConn.Close(); 
       // data bind to the selected data source 
       Chart1.DataBind(); 


       cmd.Dispose(); 

El código anterior se suma una sola tabla para una fecha y he añadido 'chart1' a la vista de diseño y no es creado dinámico. Pero quería agregar más gráficos dinámicos en el tiempo de ejecución a la página web.

¿Alguien me puede ayudar con esto?

Estoy usando VS 2008, ASP.NET 3.5 y la lib de creación de gráficos es: using System.Web.UI.DataVisualization.Charting;

Respuesta

4

Ok, es posible que haya exagerado esto, pero traté de hacer esto bastante dinámico. Sí, los nombres de las listas son un poco extraños, pero utilicé otro ejemplo mío para construir esto.

protected void Page_Load(object sender, EventArgs e) 
{ 
    Bench[] benchList; 
    FoodIntake[] foodIntakeList; 
    Panel panelChartHolder; 

    panelChartHolder = new Panel(); 
    Controls.Add(panelChartHolder); 

    benchList = Bench.GetAll(); 
    AddNewCharts(benchList, panelChartHolder, 
    GetBenchXValue, GetBenchYValue); 

    foodIntakeList = FoodIntake.GetAll(); 
    AddNewCharts(foodIntakeList, panelChartHolder, 
    GetFoodIntakeXValue, GetFoodIntakeYValue); 
    } 

Ok, esta primera parte es simple. Cree un panel para contener los gráficos que está agregando, obtenga las listas que desea representar en los gráficos (para este ejemplo, funcionan con Linq en Sql) y llame al método para crear los gráficos.

private void AddNewCharts<T>(T[] listToAdd, Panel panelToAddTo, 
    Func<T, DateTime> xMethod, Func<T, Int32> yMethod) 
    { 

    ChartArea mainArea; 
    Chart mainChart; 
    Series mainSeries; 

    mainChart = new Chart(); 
    mainSeries = new Series("MainSeries"); 

    for (Int32 loopCounter = 0; loopCounter < listToAdd.Length; loopCounter++) 
    { 
     mainSeries.Points.AddXY(xMethod(listToAdd[loopCounter]), 
     yMethod(listToAdd[loopCounter])); 
    } 

    mainChart.Series.Add(mainSeries); 
    mainArea = new ChartArea("MainArea"); 
    mainChart.ChartAreas.Add(mainArea); 

    panelToAddTo.Controls.Add(mainChart); 
    } 

Como puede ver, acabo de crear un gráfico nuevo, le agregué una serie y le agregué un ChartArea. La siguiente parte es simplemente recorrer la colección y agregar cada elemento en la misma lista. Utiliza los métodos de delegado pasados ​​(Func) para obtener los valores X e Y.

La última parte contiene los cuatro métodos responsables de obtener los valores X e Y de las dos listas. Básicamente, hice esto para permitir que el método de creación de gráficos sea lo más genérico posible. Podría ser excesivo.

private DateTime GetBenchXValue(Bench currentBench) 
    { 
    return currentBench.DateLifted; 
    } 

    private Int32 GetBenchYValue(Bench currentBench) 
    { 
    return currentBench.BenchAmount; 
    } 

    private DateTime GetFoodIntakeXValue(FoodIntake currentIntake) 
    { 
    return currentIntake.DateEaten; 
    } 

    private Int32 GetFoodIntakeYValue(FoodIntake currentIntake) 
    { 
    return currentIntake.Calories; 
    } 

Y así cuando ejecutas esto, obtendrás dos gráficos uno al lado del otro. Eso sí, serán muy simples ya que hay millones de propiedades diferentes que se pueden configurar para mejorar el aspecto. Espero que esto sea lo que estabas pidiendo.

using System; 
    using System.Web.UI.DataVisualization.Charting; 
    using System.Web.UI.WebControls; 
+0

Estoy utilizando SQL y estoy teniendo problema con esta línea mainSeries.Points.AddXY ("intervaltime", "Total"); donde intervaltime, Total proviene de la consulta de selección sql. –

+0

Honestamente, parece que ya tienes el otro código que necesitas con lo que escribiste arriba. Simplemente enviaría el comando al método en lugar de lo que hice, databind, y luego establecí el .XValueMember/.YValueMember. Tienes la mayoría de lo que necesitas en tu propio código. –

+0

Lo principal que debo tomar de mi publicación es cómo agregar gráficos dinámicamente. Ya has descubierto la unión de datos. Tanto –

2
protected void Page_Load(object sender, EventArgs e) 
    { 
     MySqlConnection UsageLogConn = new MySqlConnection("Server=localhost;UID=root;Password=;database=productactivation"); 
     UsageLogConn.Open();//open connection 

     string sql = "select * from sales"; 
     DataSet ds = new DataSet(); 
     MySqlCommand cmd = new MySqlCommand(sql, UsageLogConn); 
     MySqlDataAdapter mySQLadapter = new MySqlDataAdapter(cmd); 
     mySQLadapter.Fill(ds); 
     Chart1.DataSource = ds; 

     // set series members names for the X and Y values 
     Chart1.Series["Series1"].XValueMember = "title_id"; 
     Chart1.Series["Series1"].YValueMembers = "qty"; 
     Chart1.Series["Series2"].XValueMember = "title_id"; 
     Chart1.Series["Series2"].YValueMembers = "qty"; 
     UsageLogConn.Close(); 
     // data bind to the selected data source 
     Chart1.DataBind(); 


     cmd.Dispose(); 

    } 
+0

DataSource y DataSourceID se definen en este enlace me ayudó: http://jibrankhan.wordpress.com/2008/06/18/both-datasource-and-datasourceid-are-defined-on-gridview1-remove-one -definition-bind-multiple-datasources-to-a-gridview-control / – dgamma3

Cuestiones relacionadas