www.proxima-soft.sk

Juraj Z.

Ako sa pracuje s komponentou PxChart ?

admin

Here you will find an article about PxChart component in English:
http://www.proxima-soft.sk/articles/PxChart-component-for-displaying-and-working-with-charts.html

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. Komponeta 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:

k�d:

<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:

k�d:

<%@ 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:

k�d:

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

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

k�d:

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:

k�d:

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.

k�d:

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.

Obr�zok v�sledn�ho grafu vyzer� nasledovne, viac obr�zok dolu:

Pokia� by sme chceli pracova� zo 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� oddelen� 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:

k�d:

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:

Pokia� by sme chceli graf, takzvan� kol��ik, m��eme to urobi� zadan�m typu grafu tcPie3D do property TypeChart. Viac pr�klad dole:

k�d:

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:

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:

k�d:

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

Uk�ku funk�n�ho grafu s komponentou PxChart, m��ete n�js� na Url adrese: http://www.proxima-soft.sk/examples/510_CD_Titul_Px_Fram_Ajax/Statistics.aspx