I chartkontrollen er der så mange muligheder, at vi her blot vil se på nogle ganske enkle.

Save this PDF as:
 WORD  PNG  TXT  JPG

Størrelse: px
Starte visningen fra side:

Download "I chartkontrollen er der så mange muligheder, at vi her blot vil se på nogle ganske enkle."

Transkript

1 Den indbyggede chartkontrol i framework 4.0 Med denne kontrol kan man oprette meget forskellige diagrammer og måske, vil nogen nok synes, lettere end når man selv skal programmere det hele fra bunden, Chartkontrollen er indbygget i framework 4.0 og kan downloades til framework 3.5 SP1 I chartkontrollen er der så mange muligheder, at vi her blot vil se på nogle ganske enkle. Yderligere inspiration kan findes på følgende adresse: som indeholder mere end 200 forskellige chartkontroleksempler. Det første eksempel er meget enkelt, hvor det hele styres fra frontend. Opret først et nyt website i framework 4.0 Vælges et ASP.NET website rettes koden til, så den passer til det du vil vise Vælges ASP.NET empty website sættes den ønskede kode på Selve chartkontrollen findes i værktøjskassen under fanen Data. Slutresultat af diagram 1 I web.configfilen skal der laves henvisninger til chartkontrollen. Erstat derfor den eksisterende web.config med den udleverede og nærlæs den. Hvis man ikke laver henvisning til chartkontrollen, kan man ikke få lov til at se sine diagrammer. Den database der blev lavet i forbindelse med wizard og grafikprojektet genbruges her. Hent den derfor fra dette projekt. Importer også filen dataaccess.cs fra samme projekt. Diagram 1: På defaultsiden trækkes en chartkontrol ind. Dette giver nedenstående standardkode. <asp:chart ID="Chart1" runat="server"> <Series> <asp:series Name="Series1"> </asp:series> </Series> <ChartAreas> <asp:chartarea Name="ChartArea1"> </asp:chartarea> </ChartAreas> </asp:chart> På hver enkelt chart kan der være et eller flere områder, som man kan lave diagrammer på.

2 Chartkontrollen skal nu rettes til via properties. I designview markeres diagrammet og egenskaberne er synlige i propertiesvinduet. Egenskaberne skal være: Width="900px" BackColor="Gray" BackGradientStyle="DiagonalRight" BackSecondaryColor="WhiteSmoke" BorderlineDashStyle="Solid" BorderlineColor="Gray" BorderSkin: Emboss Title: ASP.NET Chartkontrollen (Font: Verdana; Størrelse: 16) Ud for Title trykkes på den grå knap med prikker. Herefter får man denne boks. Tryk først på Add og skriv dernæst titel, font og fontstørrelse. Dataserien laves ved at trykke på Series, der giver denne boks. Tryk her først på Add Name: Kolonnedata ChartType: Column Points giver denne boks, hvor man vælger Add og i YValues skriver dataværdien for det aktuelle punkt. Vælg Add igen og skriv en ny værdi for dette punkt i YValues. Dette gøres lige så mange gange, som der er data til. Data er 23, 25, 12, 14, 25, 20 Prøv at se resultatet i browseren. Det skulle gerne ligne dette Prøv nu at ændre farven på søjlerne at ændre den hvide farve i diagrammt at ændre farven på titlen at ændre farve på selve diagrammet oprette endnu en dataserie, som skal vises som den type, der kaldes line. Giv den farve fjerne embossegenskaben

3 Diagram 2 Alle disse egenskaber kan selvfølgelig også skrives i codebehind filen. Det sker i Page_Load metoden. Opret derfor en ny fil. Importer namespacene System.Web.UI.DataVisualization.Charting; System.Drawing; Træk en chartkontrol ind på siden. Fjern serieskoden på frontend og skriv egenskaberne i codebehind Egenskaberne sættes i Page_Load med f. eks. følgende kode (Ment som lidt hjælp til at komme i gang) Chart1.BackColor = Color.Gray; Chart1.BackSecondaryColor = Color.WhiteSmoke; Chart1.BackGradientStyle = GradientStyle.DiagonalRight; Diagrammets baggrundsfarve sættes med denne kode Chart1.ChartAreas[0].BackColor = Color.Red; Titlen sættes med denne kode Chart1.Titles.Add("ASP.NET ChartKontrol"); Chart1.Titles[0].Font = new Font("Verdana", 16); Chart1.Series.Add(new Series("Kolonnedata") ChartType = SeriesChartType.Column, ); Selve dataserien skrives som et array Chart1.Series[0].Points.DataBindY(new int[] 14, 5, 18, 14, 12, 11, 10 ); Diagram 3 Diagram 3 er et diagram, hvor data kommer fra en database og vises med reader Databasen dbwizard.mdf bruges i dette eksempel Opret endnu en side Træk en kontrol ind. Koden skal skrives i codebehind i Page_Load Formateringen fra diagram 2 kan genbruges eller man kan lave et nyt layout Man laver en ny serie og fortæller, hvordan den skal vises med nedenstående kode

4 Chart1.Series.Add(new Series("Kolonnedata") ChartType = SeriesChartType.Column ); Der laves forbindelse til databasen SqlConnection conn = new SqlConnection( ConfigurationManager.ConnectionStrings["Local"].ConnectionString); Dernæst definers commandstrengen SqlCommand command = new SqlCommand("Select count(tblperson.fldalderid) as Antal, tblalder.fldalder as Alder from tblperson inner join tblalder on tblperson.fldalderid = tblalder.fldid group by tblperson.fldalderid, tblalder.fldalder", conn); Commandobjektet åbnes og lægges over I readeren command.connection.open(); SqlDataReader reader = command.executereader(); Data lægges i readeren Chart1.Series[0].Points.DataBindXY(reader, "Alder", reader, "Antal"); DataBindXY tager 4 parametre, nemlig readeren, feltet Alder fra database, readeren, feltet Antal fra database Udvid diagram 3 med en visning af brugernes sportsmønster Diagram 4 Den sidste måde at tegne et diagram på, er også ved udtræk fra databasen, men denne gang bruges dataset og DataTable I App_Codemappen oprettes filen datafactory.cs. Den skal indeholde metoden getdataalder() (som er lavet i wizardgrafikprojektet) Opret endnu en side Træk en kontrol ind. Koden skal skrives i codebehind i Page_Load Formateringen fra diagram 2 kan genbruges eller man kan lave et nyt layout Den første kodelinie giver diagrammets baggrundsfarve Chart1.ChartAreas[0].BackColor = Color.Thistle; Her erklæres på ganske normal vis en instans af vores factory datafactory datafactory objvis = new datafactory(); Datatabellen dtalder oprettes og fyldes med data trukket ud af getalderdata DataTable dtalder = objvis.getdataalder(); Vi fortæller hvilke data, der skal bruges i diagrammet Chart1.DataSource = dtalder.defaultview; Der er ikke oprettet en speciel serie og vi burger derfor den defaultserie, som oprettes som standard. Vi fortæller, hvordan data skal vises

5 Chart1.Series["Series1"].ChartType = SeriesChartType.Column; Vi fortæller, hvilke data der skal vises på xaksen og hvilke, der skal vises på yaksen Chart1.Series["Series1"].XValueMember = "Alder"; Chart1.Series["Series1"].YValueMembers = "Antal"; Chart1.DataBind(); Udvid diagram 4 med en visning af brugernes avismønster Opret selv endnu en side, hvor man se fordelingen af brugeren på køn Dette var nogle meget indledende eksempler på den indbyggede chartkontrol

6 Herunder kommer koderne til de forskellige diagrammer Diagram Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> Register Assembly="System.Web.DataVisualization, Version= , Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %> <asp:content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:content> <asp:content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <h2> Velkommen til chartkontrollen! </h2> <p> Hvis du vil have yderligere inspiration, så tjek dette link <a href=" title="flere charts" target="_blank">chartkontroller</a>. <br /><br /> I dette chart er egenskaberne og data sat i designview. </p> <asp:chart ID="Chart1" runat="server" Width="900px" BackColor="Gray" BackGradientStyle="DiagonalRight" BackSecondaryColor="WhiteSmoke" BorderlineDashStyle="Solid" BorderlineColor="Gray"> <Series> <asp:series Name="Kolonnedata" YValueMembers="1,2,3" BackHatchStyle="DarkUpwardDiagonal" BackSecondaryColor="Red" Color="#CCFF99"> </asp:series> </Series> <ChartAreas> <asp:chartarea Name="ChartArea1" BackColor="#9999FF" /> </ChartAreas> <Titles> <asp:title Font="Verdana, 15.75pt" Name="Title1" Text="ASP.NET Chartkontrollen"> </asp:title> </Titles> <BorderSkin SkinStyle="Emboss" /> </asp:chart> </asp:content> Diagram 2 codebehind using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.DataVisualization.Charting; using System.Drawing; public partial class Default3 : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) //formatter diagrammet Chart1.BackColor = Color.Gray; Chart1.BackSecondaryColor = Color.WhiteSmoke; Chart1.BackGradientStyle = GradientStyle.DiagonalRight; //formatter selve diagrammets baggrundsfarve Chart1.ChartAreas[0].BackColor = Color.Wheat; Chart1.Width = 900; //tilføj og formatter titel //selve titlen tilføjes med Add //der kan også være mere end en titel i et diagramområde. Derfor er man også her nødt til at referere til titlen via et index //Chart1.Titles[0].Font = new Font("Verdana", 16); Chart1.BorderlineDashStyle = ChartDashStyle.Solid; Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;

7 Chart1.BorderlineColor = Color.Gray; // format the chart area Chart1.ChartAreas[0].BackColor = Color.Wheat; // add and format the title Chart1.Titles.Add("ASP.NET ChartKontrol"); Chart1.Titles[0].Font = new Font("Verdana", 16); Chart1.Series.Add(new Series("ColumnSeries") ChartType = SeriesChartType.Column, ); Chart1.Series.Add(new Series("LineSeries") ChartType = SeriesChartType.Line, BorderWidth = 3, ShadowOffset = 2, Color = Color.PaleVioletRed ); Chart1.Series[0].Points.DataBindY(new int[] 14, 5, 18, 14, 12, 11, 10 ); Chart1.Series[1].Points.DataBindY(new int[] 6, 10, 15, 2, 23, 20, 6 ); Diagram 3 codebehind using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.DataVisualization.Charting; using System.Drawing; using System.Data; using System.Data.SqlClient; using System.Configuration; public partial class Default4 : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) //formatter diagrammet Chart1.BackColor = Color.Gray; Chart1.BackSecondaryColor = Color.WhiteSmoke; Chart1.BackGradientStyle = GradientStyle.DiagonalRight; //formatter selve diagrammets baggrundsfarve Chart1.ChartAreas[0].BackColor = Color.Wheat; Chart1.Width = 900; //tilføj og formatter titel //selve titlen tilføjes med Add //der kan også være mere end en titel i et diagramområde. Derfor er man også her nødt til at referere til titlen via et index //Chart1.Titles[0].Font = new Font("Verdana", 16); Chart1.BorderlineDashStyle = ChartDashStyle.Solid; Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss; Chart1.BorderlineColor = Color.Gray; // format the chart area Chart1.ChartAreas[0].BackColor = Color.Thistle; // add and format the title Chart1.Titles.Add("Udtræk fra database via datareader"); Chart1.Titles[0].Font = new Font("Verdana", 16); Chart1.Series.Add(new Series("Kolonnedata")

8 ); ChartType = SeriesChartType.Column, //Laver forbindelse til database SqlConnection conn = new SqlConnection( ConfigurationManager.ConnectionStrings["Local"].ConnectionString); // definerer commandsætning SqlCommand command = new SqlCommand("Select count(tblperson.fldalderid) as Antal, tblalder.fldalder as Alder from tblperson inner join tblalder on tblperson.fldalderid = tblalder.fldid group by tblperson.fldalderid, tblalder.fldalder", conn); // åbner command og danner readeren command.connection.open(); SqlDataReader reader = command.executereader(); //Lægger data i readeren Chart1.Series[0].Points.DataBindXY(reader, "Alder", reader, "Antal"); Diagram 4 codebehind using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.DataVisualization.Charting; using System.Drawing; using System.Data; using System.Data.SqlClient; using System.Configuration; public partial class Default5 : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) //formatter diagrammet Chart1.BackColor = Color.Gray; Chart1.BackSecondaryColor = Color.WhiteSmoke; Chart1.BackGradientStyle = GradientStyle.DiagonalRight; //formatter selve diagrammets baggrundsfarve Chart1.ChartAreas[0].BackColor = Color.Wheat; Chart1.Width = 900; //tilføj og formatter titel //selve titlen tilføjes med Add //der kan også være mere end en titel i et diagramområde. Derfor er man også her nødt til at referere til titlen via et index Chart1.Titles.Add("Udtræk fra database via en datatable"); Chart1.Titles[0].Font = new Font("Verdana", 16); Chart1.BorderlineDashStyle = ChartDashStyle.Solid; Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss; Chart1.BorderlineColor = Color.Gray; // formatter diagramområdet Chart1.ChartAreas[0].BackColor = Color.Thistle; datafactory objvis = new datafactory(); DataTable dtalder = objvis.getdataalder(); Chart1.DataSource = dtalder.defaultview; Chart1.Series["Series1"].ChartType = SeriesChartType.Column; Chart1.Series["Series1"].XValueMember = "Alder"; Chart1.Series["Series1"].YValueMembers = "Antal"; Chart1.DataBind();