Home   Px Framework   Download   FAQ   Kontakt   Fórum
en_lang.jpg, 1 kB sk_lang.jpg, 1 kB
English Slovak

      Px Framework - ASP.NET komponenty pre rýchly vývoj databázových aplikácií


Menu:

Články o Px Frameworku:


PxChart - komponenta pre zobrazenie a prácu s grafmi



Komponenta PxChart je komponentou Px Frameworku, prostredníctvom ktorej môžete vytvárať atraktívne 2D a 3D grafy pre vaše webové aplikácie. Komponenta PxChart môže priamo načítať dáta z komponenty PxWebQuery, alebo priamo z XML súboru. PxChart obsahuje širokú škálu grafov, ako tradičný Bar graf, Line, Area, koláč a pod.
Na správnu funkciu komponenty PxChart je potrebne, aby ste mali nainštalovaný Flash Player vo vašom webovom prehliadači.

Pokiaľ chceme pracovať s komponentou PxChart, musíme si ju v súbore *.aspx zadefinovať nasledovne:

 <Prx:PxChart ID="Chart" runat="server"></Prx:PxChart>


Ak chceme, aby komponenta PxChart bola viditeľná v aspx súboroch, musíme si v hlavičke súboru zadefinovať "Prx" prefix s prepojeným na assembly komponenty PxChart. Toto vykonáme nasledovne:

 <%@ Register TagPrefix="Prx" Namespace="PxChart" Assembly="PxChart" %>


Keď máme toto vykonané, môžeme v súbore *.aspx.cs s komponentou PxChart pracovať nasledovne. Najprv si do komponenty PxWebQuery načítame dáta z databázy, a potom ju prepojíme z komponentou PxChart. Najprv ku komponente PxChart cez property PxDataSource pripojíme komponentu PxWebQuery. Potom cez property FieldName a FieldValue komponenty PxChart, zadefinujeme prepojenie stĺpcov komponenty PxWebQuery na jednotlivé osi, X a Y komponenty PxChart. Viac príklad dole:

 Chart.PxDataSource = wquStatistics;
 Chart.FieldName = "name";
 Chart.FieldValue = "pocet";


Popis grafu možeme zadefinovať cez property Caption a SubCaption, viac priklad dole:

 Chart.Caption = "Štatistika žánrov";
 Chart.SubCaption = "Sumár žánrov za všetky CD tituli";


Podobne si môžem zadefinovať typ grafu cez property TypeChart. Jednotlivé typy grafóv sú zadefinované vo výčtovom type PxChart.enumTypeCharts. Viac príklad dole:

 Chart.TypeChart = PxChart.PxChart.enumTypeCharts.tcColumn3D;


Celý zdrojový kód príkladu ktorý sme si tu preberali, aj s načítaným dát do komponenty PxWebQuery a prepojením na komponentu PxChart a výberom typu grafu, nájdete dole, v priloženom výpise zdrojového kódu.

 protected void Page_Load(object sender, EventArgs e)
 {
  if (wquStatistics.Active == false)
  {
    wquStatistics.ConnectString = AppConst.ConnectString;
    wquStatistics.SQLSelect = @"select CdTitul.IdZaner as idzaner,COUNT(*) as pocet,
        Zaner.Name as name from CdTitul, Zaner
        where CdTitul.IDZaner=Zaner.IdZaner
        group by CdTitul.IDZaner";

    wquStatistics.Open();
  }
  Chart.PxDataSource = wquStatistics;
  Chart.FieldName = "name";
  Chart.FieldValue = "pocet";

  Chart.Caption = "Štatistika žánrov";
  Chart.SubCaption = "Sumár žánrov za všetky CD tituli";
  //Chart.Width = 800;
  //Chart.Height = 800;

  Chart.TypeChart = PxChart.PxChart.enumTypeCharts.tcColumn3D;
  Chart.AddHeader("canvasBgColor", "F6DFD9");
  Chart.AddHeader("divlinecolor", "F47E00");
 }


Cez metódu AddHeader, môžeme do komponenty PxChart vkladať rôzne elementy aj s definíciou hodnoty, ktoré môžu rôzne ovplyvniť formu a tvar výstupného grafu.

Popis parametrov metody AddHeader:

C# syntax:

public void AddHeader(string Tag, string Value)

Popis parametrov:

Tag - do tejto premennej sa zadáva názov (name) tágu
Value - do tejto premennej sa zadáva hodnota(value) tágu

Obrázok výsledného grafu vyzerá nasledovne, viac obrázok dolu:

Obrázok PxChart - Column3D


Pokiaľ by sme chceli pracovať so seriovým grafom,t.j. viac inštancii grafov vedľa seba, môžeme to urobiť cez property FieldValue komponenty PxChart. Urobíme takzvané preťaženie property FieldValue, a to tým že do tejto property zadáme za sebou viac názvov stĺpcov z komponenty PxWebQuery, ktoré sú ddelené bodkočiarkou.

Ešte samozrejme do property TypeChart, musíme vybrať nejaký sériový graf, napr. tcMSColumn3D. Každý sériový graf sa začína prefixom tcMS...
Viac príklad dole:

 Chart.PxDataSource = wquStatistics;
 Chart.FieldName = "name";
 Chart.FieldValue = "pocet;idzaner";
 Chart.TypeChart = PxChart.PxChart.enumTypeCharts.tcMSColumn3D;


Obrázok výsledného grafu vyzerá nasledovne, viac obrázok dolu:

Obrázok PxChart - MSColumn3D


Pokiaľ by sme chceli graf, takzvaný koláčik, môžeme to urobiť zadaným typu grafu tcPie3D do property TypeChart.
Viac príklad dole:

 Chart.PxDataSource = wquStatistics;
 Chart.FieldName = "name";
 Chart.FieldValue = "pocet";
 Chart.TypeChart = PxChart.PxChart.enumTypeCharts.tcPie3D;


Obrázok výsledného grafu vyzerá nasledovne, viac obrázok dolu:

Obrázok PxChart - Pie


Pokiaľ by ste chceli načítať dáta do komponenty PxChart zo súboru xml a nie z komponenty PxWebQuery, môžete tak urobiť cez property ChartXML. V prípade že načítate dáta do komponenty PxChart cez property ChartXML, všetky property komponenty PxChart budú zablokované, okrem property TypeChart, do ktorej sa zadáva typ grafu. Vzor XML súboru by mohol vyzerať nasledovne, viac príklad dole:

 <graph caption='Štatistika žánrov' subCaption='Sumár žánrov za všetky CD tituli'
  showPercentageInLabel='1' pieSliceDepth='25' decimalPrecision='0' showNames='1'
  pieRadius='100' >
    <set name='Pop' value='8' color='0099CC' />
    <set name='Muzikal' value='4' color='FF0000' />
    <set name='Rock' value='2' color='006F00' />
    <set name='Komédia' value='2' color='0099FF' />
 </graph>


V časti <graph> zadávame elementy ktoré bližšie popisujú výsledný graf. Sú to napr. tágy Caption, Subcaption, showNames a pod. V časti <set> zadávame meno a hodnotu výstupného grafu.
Komponenta PxChart je zapuzdreným free komponenty FusionCharts v.2.0. Bližší popis jednotlivých elementov ktoré majú vplyv na zobrazenie grafu a popis vytvárania výsledného XML súboru môžete nájsť v dokumentácii ku komponentám FusionCharts v.2.0, alebo na internetovej adrese: http://www.proxima-soft.sk/data/FusionChartsFree/Contents/menu.html



Tu nájdete funkčný príklad s komponentou PxChart, aj so zdrojovými kódmi. Tento funkčný príklad na tomto webe, beží pod databázou MySQL 5.0.

P.č. Názov príkladu Zdrojové Kódy SQL Script
5.10.
Aplikácia CD Titul, slúži na evidenciu CD titulov. Umožňuje evidenciu autora, titulu, názvu piesne a pod. V tejto aplikácií je ukážka použitia komponent Px Frameworku spolu s Ajaxom.
V tejto aplikácií je použitá aj komponenta PxFilterView, ktorá zabezpečuje filtrovanie a výber dát formulára, podľa zadaných parametrov.
Vo formuláry Statistics.aspx je uvedený príklad práce z komponentou PxChart, ktorá slúži na prácu s grafmi, načítanie dát do tela komponenty, a ich následné zobrazenie v konkrétnom výstupnom grafe.
Vo formuláry CDTitul.aspx je predvedená práca s komponentou PxUploader.
Komponenty PxChart a PxUploaderpre svoje správne fungovanie musia mať vo webovom prehliadači, nainštalovaný Media Flash Player.
Z úsporných dôvodov tu nie je listing, výpis celej aplikácie.
CDTitul.aspx
CDTitul.aspx.cs
Statistics.aspx
Statistics.aspx.cs
 SQLScript_MySQL.5.1
SQLScript_MySQL.5.0




Ďalšie články o Px Frameworku:



Nie je zmyslom, tejto časti webu dopodrobna popisovať prácu s komponentami PxFrameworku, podrobný popis komponent najdete v manuali, ktorý si môľete stiahnuť tu: Download manual pre Px Framework




All rights reserved PROXIMA SOFT 2003-2011.
counter