none
Personnaliser mon Google Charts avec ASP.Net RRS feed

  • Question

  • Bonjour á tous,

    étant donné que je n´arrivais pas a joindre mon google Charts fait dans Visual Studio C# avec le classic ASP(voir mon Threads precedent), j´ai donc essayer de creer ce google chart avec "ASP.NET Web Forms Application".

    tout fonctionne bien jusqu´a present. je crois que vous pouvez voir en cliquant le lient suivant.

    http://localhost:57038/WebForm1.aspx

    J´aimerais actuellement personaliser mon google Charts.

    1- seul les resultats des 30 derniers jours doivent etre affichés avec comme maximum la journée d aujourd´hui

    2-scaler la valeur Min et Max de l´axe des 'Y'

    3- filtrer les heures et afficher juste les dates sur l´axe des 'X'

    Merci infiniment si quelqu´un peut m´aider sur l une des 3 Questions précedentes.

    voila mon code WebForm1.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Configuration;
    using System.Data.SqlClient;
    using System.Data;
    using System.Text;
    
    namespace VersuchAsp2
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)  
            {  
                // Bind Gridview  
                BindGvData();  
      
                // Bind Charts  
                BindChart();  
            }  
        }  
      
        private void BindGvData()  
        {  
            gvData.DataSource = GetChartData();  
            gvData.DataBind();  
        }  
      
        private void BindChart()  
        {  
            DataTable dsChartData = new DataTable();  
            StringBuilder strScript = new StringBuilder();  
      
            try  
            {  
                dsChartData = GetChartData();  
      
                strScript.Append(@"<script type='text/javascript'>  
                        google.load('visualization', '1', {packages: ['corechart']});</script>  
      
                        <script type='text/javascript'>  
                        function drawVisualization() {         
                        var data = google.visualization.arrayToDataTable([  
                        ['Datum', 'FirstInProductionDate'],");  
      
                foreach (DataRow row in dsChartData.Rows)  
                {
                    strScript.Append("['" + row["Datum"] + "'," + row["FirstInProductionDate"] + "],");  
                }  
                strScript.Remove(strScript.Length - 1, 1);  
                strScript.Append("]);");
    
                strScript.Append("var options = { title : 'Chart_Ansicht_Infos', vAxis: {title: 'Anzahl'},  hAxis: {title: 'Datum',  titleTextStyle: {color: 'Black'}}, seriesType: 'bars', pointSize: '5'};");  
                strScript.Append(" var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));  chart.draw(data, options); } google.setOnLoadCallback(drawVisualization);");  
                strScript.Append(" </script>");  
      
                ltScripts.Text = strScript.ToString();  
            }  
            catch  
            {  
            }  
            finally  
            {  
                dsChartData.Dispose();  
                strScript.Clear();  
            }  
        }  
      
        /// <summary>  
        /// fetch data from mdf file saved in app_data  
        /// </summary>  
        /// <returns>DataTable</returns>  
        private DataTable GetChartData()  
        {  
            DataSet dsData = new DataSet();  
            try  
            {  
                SqlConnection sqlCon = new SqlConnection(@"server=sql3; database=BarForce; Trusted_Connection=yes; connection timeout=120");
                SqlCommand command5 = new SqlCommand("USE BarForce SELECT CONVERT(date, FirstInProductionDate) AS Datum, COUNT(CONVERT(date, FirstInProductionDate)) As FirstInProductionDate FROM SlitteApp WHERE FirstInProductionDate IS NOT NULL GROUP BY CONVERT(date, FirstInProductionDate) ORDER BY CONVERT(date, FirstInProductionDate)", sqlCon);
                SqlDataAdapter sqlCmd = new SqlDataAdapter(command5);  
                //sqlCmd.SelectCommand.CommandType = CommandType.StoredProcedure;  
      
                sqlCon.Open();  
      
                sqlCmd.Fill(dsData);  
      
                sqlCon.Close();  
            }  
            catch  
            {  
                throw;  
            }
         
            //double End = DateTime.Now.ToOADate();
           // double Start = End - 30;
            return dsData.Tables[0];  
        }
        public override void VerifyRenderingInServerForm(Control control)
        {
            //base.VerifyRenderingInServerForm(control);
        }
    }  
    
      
    
            }
        


    Voila mon code WebForm1.aspx

    <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="VersuchAsp2.WebForm1" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <%--<head runat="server">  
        <title>Charts Example</title>  
    </head--%>>  
    <body>  
        <%--<form id="form1" runat="server">--%>  
        <div>  
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>  
            <asp:GridView ID="gvData" runat="server">  
            </asp:GridView>  
            <br />  
            <br />  
            <asp:Literal ID="ltScripts" runat="server"></asp:Literal>  
            <div id="chart_div" style="width: 800px; height: 600px;">  
            </div>  
        </div>  
        </form>  
    </body>  
    </html>  
        </asp:content>
    <asp:Content ID="Content3" ContentPlaceHolderID="FeaturedContent" runat="server">
    </asp:Content>
    <asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
        <div id="chart_div" style="width: 660px; height: 400px;">  
            </div> 
        </asp:Content>
    

    Voila le code Web.config

    <?xml version="1.0" encoding="utf-8"?>
    <!--
      For more information on how to configure your ASP.NET application, please visit
      http://go.microsoft.com/fwlink/?LinkId=169433
      -->
    <configuration>
      <configSections>
        <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
        <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=5.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
      </configSections>
      <connectionStrings>
        <add name="connectionString" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-VersuchAsp2-20150217105416;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-VersuchAsp2-20150217105416.mdf" />
      </connectionStrings>
      <system.web>
        <compilation debug="true" targetFramework="4.5" />
        <httpRuntime targetFramework="4.5" />
        <pages>
          <namespaces>
            <add namespace="System.Web.Optimization" />
          </namespaces>
          <controls>
            <add assembly="Microsoft.AspNet.Web.Optimization.WebForms" namespace="Microsoft.AspNet.Web.Optimization.WebForms" tagPrefix="webopt" />
          </controls>
        </pages>
      </system.web>
    </configuration>

    Merci


    • Modifié maness mardi 17 février 2015 16:50
    mardi 17 février 2015 16:47

Réponses

  • Bonjour,

    voila quelques reponses a ma preoccupation sur ce Thread.

    pourque les resultats des 30 derniers jours soit affichés, on pouvait faire le trie deja sur la demande SQL Apres la commande "WHERE"

    WHERE FirstInProductionDate IS NOT NULL AND CONVERT(date, FirstInProductionDate) >= DATEADD("D", -30, getdate())

    Pour personnaliser le google charts avec les MAX, MIN, Couleur ect.... tout se fait dans le programm au niveau de "var options". consultez le lien suivant

    https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart

    merci

    cordialement


    maness


    • Marqué comme réponse maness vendredi 20 février 2015 15:20
    • Modifié maness vendredi 20 février 2015 15:21
    vendredi 20 février 2015 15:20

Toutes les réponses