====== API: Chart Controls ======

API-referenca za dijagrame i vizualizacije.

===== TWvdSChart =====

Bazni Chart-Control za sve tipove dijagrama.

==== Namespace ====

''WvdS.UI.Controls.Charts''

==== PXAML ====

<code xml>
<Chart Title="Sales Overview">
  <Chart.Series>
    <LineSeries Title="Revenue"
                ArgumentDataMember="Month"
                ValueDataMember="Revenue"
                DataSource="{Binding SalesData}" />
    <BarSeries Title="Orders"
               ArgumentDataMember="Month"
               ValueDataMember="OrderCount"
               DataSource="{Binding SalesData}" />
  </Chart.Series>
  <Chart.Legend Position="Right" />
</Chart>
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ Title | string | '' | Naslov dijagrama |
^ Series | TWvdSSeriesCollection | nil | Nizovi podataka |
^ Legend | TWvdSLegend | nil | Legenda |
^ AxisX | TWvdSAxis | nil | X-os |
^ AxisY | TWvdSAxis | nil | Y-os |
^ Palette | TWvdSPalette | nil | Paleta boja |
^ EnableZoom | Boolean | False | Zoom aktiviran |
^ EnablePan | Boolean | False | Pomicanje aktivirano |

==== Events ====

| Event | Signatura | Opis |
^ OnSeriesClick | TSeriesClickEvent | Klik na podatkovnu točku |
^ OnLegendClick | TLegendClickEvent | Klik na legendu |

----

===== TWvdSSparkline =====

Kompaktni inline-dijagrami.

==== Namespace ====

''WvdS.UI.Controls.Charts''

==== PXAML ====

<code xml>
<Sparkline Type="Line"
           Data="{Binding TrendData}"
           Width="100" Height="20" />
<Sparkline Type="Bar"
           Data="{Binding Values}"
           HighlightMin="True" HighlightMax="True" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ Type | TWvdSSparklineType | stLine | Line, Bar, WinLoss, Area |
^ Data | TDoubleArray | nil | Podatkovne točke |
^ HighlightMin | Boolean | False | Istakni minimum |
^ HighlightMax | Boolean | False | Istakni maksimum |
^ NegativeColor | TWvdSColor | clRed | Boja za negativne vrijednosti |

----

===== Tipovi serija =====

Sve serije dijele zajedničke bazne properties:

| Property | Tip | Opis |
^ Title | string | Naslov serije |
^ DataSource | IEnumerable | Izvor podataka |
^ ArgumentDataMember | string | Polje X-vrijednosti |
^ ValueDataMember | string | Polje Y-vrijednosti |
^ Color | TWvdSColor | Boja |
^ Visible | Boolean | Vidljivo |

----

===== TWvdSLineSeries =====

Linijski dijagram.

==== PXAML ====

<code xml>
<LineSeries Title="Temperature"
            ArgumentDataMember="Date"
            ValueDataMember="Temp"
            MarkerType="Circle"
            LineStyle="Solid" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ MarkerType | TWvdSMarkerType | mtNone | None, Circle, Square, Triangle |
^ MarkerSize | Integer | 8 | Veličina markera |
^ LineStyle | TWvdSLineStyle | lsSolid | Solid, Dash, Dot |
^ LineWidth | Integer | 2 | Širina linije |

----

===== TWvdSAreaSeries =====

Površinski dijagram.

==== PXAML ====

<code xml>
<AreaSeries Title="Revenue"
            ArgumentDataMember="Month"
            ValueDataMember="Amount"
            Opacity="0.7" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ Opacity | Double | 0.5 | Prozirnost (0-1) |
^ ShowLine | Boolean | True | Prikaži gornju liniju |

----

===== TWvdSBarSeries =====

Stupčasti dijagram.

==== PXAML ====

<code xml>
<BarSeries Title="Sales"
           ArgumentDataMember="Product"
           ValueDataMember="Quantity"
           BarWidth="0.8" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ BarWidth | Double | 0.6 | Širina stupca (0-1) |
^ CornerRadius | Integer | 0 | Radijus kutova |
^ ShowLabels | Boolean | False | Prikaži vrijednosti |

----

===== TWvdSPieSeries =====

Kružni dijagram.

==== PXAML ====

<code xml>
<Chart>
  <PieSeries ArgumentDataMember="Category"
             ValueDataMember="Value"
             InnerRadius="0"
             StartAngle="0"
             ShowLabels="True" />
</Chart>
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ InnerRadius | Double | 0 | Donut-rupa (0=Pie) |
^ StartAngle | Double | 0 | Početni kut |
^ ShowLabels | Boolean | True | Prikaži labele |
^ ExplodeOffset | Double | 0 | Razmak segmenata |

----

===== TWvdSFunnelSeries =====

Lijevak-dijagram za Sales Funnels.

==== PXAML ====

<code xml>
<Chart>
  <FunnelSeries ArgumentDataMember="Stage"
                ValueDataMember="Count"
                NeckHeight="0.3"
                NeckWidth="0.3" />
</Chart>
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ NeckHeight | Double | 0.3 | Visina vrata (0-1) |
^ NeckWidth | Double | 0.3 | Širina vrata (0-1) |
^ GapRatio | Double | 0 | Razmak između segmenata |

----

===== TWvdSScatterSeries =====

Raspršeni dijagram.

==== PXAML ====

<code xml>
<ScatterSeries ArgumentDataMember="X"
               ValueDataMember="Y"
               MarkerType="Circle"
               MarkerSize="10" />
</code>

----

===== TWvdSBubbleSeries =====

Mjehurasti dijagram.

==== PXAML ====

<code xml>
<BubbleSeries ArgumentDataMember="X"
              ValueDataMember="Y"
              SizeDataMember="Size"
              MinBubbleSize="10"
              MaxBubbleSize="50" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ SizeDataMember | string | '' | Polje za veličinu mjehura |
^ MinBubbleSize | Integer | 10 | Minimalna veličina mjehura |
^ MaxBubbleSize | Integer | 50 | Maksimalna veličina mjehura |

----

===== TWvdSCandlestickSeries =====

Candlestick-dijagram za burzovne podatke.

==== PXAML ====

<code xml>
<CandlestickSeries ArgumentDataMember="Date"
                   OpenDataMember="Open"
                   HighDataMember="High"
                   LowDataMember="Low"
                   CloseDataMember="Close" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ OpenDataMember | string | '' | Otvorna cijena |
^ HighDataMember | string | '' | Najviša cijena |
^ LowDataMember | string | '' | Najniža cijena |
^ CloseDataMember | string | '' | Zatvorena cijena |
^ UpColor | TWvdSColor | clGreen | Boja kod dobitka |
^ DownColor | TWvdSColor | clRed | Boja kod gubitka |

----

===== TWvdSRadarSeries =====

Radar/Spider-dijagram.

==== PXAML ====

<code xml>
<Chart ChartType="Radar">
  <RadarSeries ArgumentDataMember="Skill"
               ValueDataMember="Score"
               Fill="True"
               FillOpacity="0.3" />
</Chart>
</code>

----

===== TWvdSTreeMapSeries =====

TreeMap-vizualizacija.

==== PXAML ====

<code xml>
<Chart ChartType="TreeMap">
  <TreeMapSeries LabelDataMember="Name"
                 ValueDataMember="Size"
                 GroupDataMember="Category" />
</Chart>
</code>

----

===== TWvdSSankeyDiagram =====

Sankey-dijagram toka.

==== PXAML ====

<code xml>
<SankeyDiagram DataSource="{Binding FlowData}"
               SourceDataMember="From"
               TargetDataMember="To"
               WeightDataMember="Value" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ SourceDataMember | string | '' | Izvorni čvor |
^ TargetDataMember | string | '' | Ciljni čvor |
^ WeightDataMember | string | '' | Jačina toka |

----

===== TWvdSWaterfallSeries =====

Vodopad-dijagram.

==== PXAML ====

<code xml>
<WaterfallSeries ArgumentDataMember="Category"
                 ValueDataMember="Change"
                 StartValue="1000"
                 ShowTotal="True" />
</code>

==== Properties ====

| Property | Tip | Default | Opis |
^ StartValue | Double | 0 | Početna vrijednost |
^ ShowTotal | Boolean | True | Prikaži ukupni zbroj |
^ PositiveColor | TWvdSColor | clGreen | Boja pozitivno |
^ NegativeColor | TWvdSColor | clRed | Boja negativno |

----

===== Vidi također =====

  * [[.:control-bibliothek|Biblioteka kontrola]]
  * [[.:api-controls-gauges|Gauges API]]
  * [[.:api-controls-data|Data Controls API]]