Veel applicaties tonen ergens wel een vorm van rapportages of statistieken. Vaak in tabellen, maar zou het niet mooi zijn om de gegevens (ook) in een grafiek te tonen. Natuurlijk was dit in voorheen wel mogelijk door het gebruik van chart-componenten die te koop worden aangeboden door een aantal bedrijven, maar nu brengt Microsoft zelf een chart-control op de markt. En is deze gratis te downloaden!

Veel applicaties tonen ergens wel een vorm van rapportages of statistieken. Vaak in tabellen, maar zou het niet mooi zijn om de gegevens (ook) in een grafiek te tonen. Natuurlijk was dit in voorheen wel mogelijk door het gebruik van chart-componenten die te koop worden aangeboden door een aantal bedrijven, maar nu brengt Microsoft zelf een chart-control op de markt. En is deze gratis te downloaden!
De Control
De chart control is beschikbaar voor Windows applicaties en voor Web applicaties vanaf Framework 3.5 SP1. Er zijn ongeveer 25 grafiek types en deze kunnen over het algemeen in 2D en 3D worden weergegeven. De opmaak is volledig aanpasbaar, zo kun je van een 3D grafiek bijvoorbeeld instellingen doen voor het perspectief, de belichting, de schaduw, de rotatie, transparantie, anti-aliasing, enz.
De waardes in de grafiek kun je statisch opgeven, maar het is ook mogelijk om d.m.v. databinding de grafiek bijvoorbeeld aan een database te koppelen. Hieronder een paar voorbeeldjes.
Gratis Microsoft Chart-controls voor .NET
Charts in ASP.NET
Wil je de grafieken gaan gebruiken in ASP.NET dan heeft de gebruiker geen browser-plugin nodig of iets dergelijks. De grafieken worden namelijk gerenderd naar een png-afbeelding. Deze wordt gewoon als <img /> element in de HTML geplaatst. De grafieken zijn te cachen of op te slaan op het filesystem wat natuurlijk goed is voor de performance en het gebruik van resources. Nadat je de control en de add-on voor Visual Studio 2008 hebt geïnstalleerd kun je deze gebruiken. In de Toolbox is hij terug te vinden onder het tabje “Data” of je kunt in de code gebruik maken van de <asp:Chart runat=”server”/> tag.
Gratis Microsoft Chart-controls voor .NET
Doormiddel van het zetten van de juiste properties kun je de grafiek zo maken als je wilt. Dit kan rechtstreeks in de ASPX code, in de programma code (C# / VB) of door middels van het properties venster met bijbehorende editors zoals hieronder afgebeeld.
Gratis Microsoft Chart-controls voor .NET
Als eerste ben ik begonnen om een grafiekje te maken naar aanleiding van de productprijzen in de AdventureWorks database. De Chart Control heb ik aan een SqlDataSource gekoppeld en vervolgens heb ik aangegeven welke as naar welke member moet kijken. In dit geval de X-as naar de “Name” en de Y-as naar de “ListPrice”. Voor de rest heb ik alleen wat kleurtjes op gegeven.
<asp:Chart ID="Chart1" runat="server"
            DataSourceID="SqlDataSourceProducts">
            <Series>
                <asp:Series Name="Series1" XValueMember="Name" YValueMembers="ListPrice" ChartType="Spline">
                </asp:Series>
            </Series>
            <ChartAreas>
                <asp:ChartArea Name="ChartArea1" AlignmentOrientation="All"
                    AlignmentStyle="Position" BackColor="255, 255, 192"
                    BackGradientStyle="TopBottom" BackSecondaryColor="255, 128, 0">                   
                </asp:ChartArea>
            </ChartAreas>
        </asp:Chart>
Iets meer moeite (maar nog altijd een fluitje van een cent) koste het me om een chart control te koppelen aan de “sales.vSalesPersonSalesByFiscalYears” view van dezelfde database. Deze view retourneert de verkopen van de verkopers per jaar. Eerst voor elk jaar een rij toevoegen, vervolgens een legenda erbij plaatsen, de namen van de verkopers roteren en klaar is de grafiek!
Hieronder zie je de resultaten van beide grafieken.
Gratis Microsoft Chart-controls voor .NET
Voorbeeld project
Microsoft heeft ook een voorbeeld project dat tevens als handleiding dient. Hierin staat alles duidelijk uitgelegd met honderden voorbeelden. Een ideale plek dus om te starten.
Een van de voorbeelden wil ik graag nog even benadrukken. Het is namelijk mogelijk om de chart control te combineren met AJAX. Hierdoor kun je onder andere aanpasbare grafieken maken of realtime grafieken die op een vaste interval geüpdate worden.
Aan de slag
Ik ben onder de indruk van de chart control die prima werkt en ook nog eens gratis wordt aangeboden. Mocht je er zelf mee aan de slag willen, zorg dan dat je het .Net Framework 3.5 met SP1 geïnstalleerd hebt. Installeer de Chart Control vanaf deze link: http://www.microsoft.com/downloads/details.aspx?FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c&DisplayLang=en
En bekijk het voorbeeld project dat hier vanaf deze link kunt downloaden: http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591