create dynamic chart

[cielo valdoz]

Hi,

How can i create dynamic chart? Right now im declaring the chart in code-behind but it doesn't show at all.

   Dim TopSalesItem As XDocument
Dim ChartTopSellingItems as New RadChart
        Dim format As System.IFormatProvider = New System.Globalization.CultureInfo("en-US")
        Dim ItemsConfig As New List(Of TopSellingOptions)
        Dim intChart As Integer
        Dim intItems As Integer
        Dim series As New DataSeries()

        PanelTopSellingItems.Visibility = Windows.Visibility.Visible

        If intDrillDown = 0 Then
            TopSalesItem = XDocument.Load("XML/Top10SalesItemsByAmount.XML", LoadOptions.SetBaseUri)
            'ChartTopSellingItems.DefaultView.ChartTitle.Content = "Top Selling Items"
        Else
            TopSalesItem = XDocument.Load("XML/Top10SalesItemsByAmount/Top10SalesItemsByAmount" & intLocation & ".XML", LoadOptions.SetBaseUri)
            'ChartTopSellingItems.DefaultView.ChartTitle.Content = "Top Selling Item for " & strLocation
        End If

        ChartTopSellingItems.HorizontalAlignment = Windows.HorizontalAlignment.Stretch
        ChartTopSellingItems.VerticalAlignment = Windows.VerticalAlignment.Stretch
        Select Case ChartTypeTSI.SelectedItem.Content
            Case "Bar" : intChart = 1
            Case "Horizontal Bar" : intChart = 2
            Case "Line" : intChart = 3
            Case "Pie" : intChart = 4
            Case "Doughnut" : intChart = 5
            Case "Area" : intChart = 6
        End Select

        Select Case ItemsTSI.SelectedItem.Content
            Case "Sales" : intItems = 1
            Case "Sold Items" : intItems = 2
        End Select

        If datePickerTSI.SelectedDate Is Nothing Then datePickerTSI.SelectedDate = Now.Date

        ItemsConfig.Add(New TopSellingOptions(intChart, intItems, datePickerTSI.SelectedDate))

        Dim Sales = From SalesElement In TopSalesItem.Descendants("Sales") _
                Where ConvertDate(SalesElement.Attribute("Date").Value, format) >= ItemsConfig(0).Dates And ConvertDate(SalesElement.Attribute("Date").Value, format) <= ItemsConfig(0).Dates.AddDays(30)

        For i As Integer = 0 To Sales.Count - 1
            Dim Items = From SalesItem In TopSalesItem.Descendants("Item") _
            Where ConvertDate(Sales(i).Attribute("Date").Value, format) >= ConvertDate(SalesItem.Element("Date").Value, format) And ConvertDate(Sales(i).Attribute("Date").Value, format) <= ConvertDate(SalesItem.Element("Date").Value, format).AddDays(30) _
                                Select Value = SalesItem.Element("Value").Value, _
                                       Name = SalesItem.Element("Name").Value, _
                                       Sold = SalesItem.Element("Sold").Value
                                       Order By Value Ascending

            For x As Integer = 0 To Items.Count - 1
                Dim point As New DataPoint
                If ItemsConfig(0).Items = 1 Then point.YValue = Items(x).Value 'Sales
                If ItemsConfig(0).Items = 2 Then point.YValue = Items(x).Sold 'Sold
                point.XCategory = Items(x).Name
                series.Add(point)
            Next

            If ItemsConfig(0).Chart = 1 Then series.Definition = New BarSeriesDefinition
            If ItemsConfig(0).Chart = 2 Then series.Definition = New HorizontalBarSeriesDefinition
            If ItemsConfig(0).Chart = 3 Then series.Definition = New LineSeriesDefinition
            If ItemsConfig(0).Chart = 4 Then series.Definition = New PieSeriesDefinition
            If ItemsConfig(0).Chart = 5 Then series.Definition = New DoughnutSeriesDefinition
            If ItemsConfig(0).Chart = 6 Then series.Definition = New AreaSeriesDefinition


            series.Definition.ShowItemLabels = False
            series.Definition.ItemToolTipFormat = "Item: #XCAT" & vbCr & vbLf & "Sales: #Y"
            series.Definition.ShowItemToolTips = True

            ChartTopSellingItems.DefaultView.ChartArea.DataSeries.Clear()
            ChartTopSellingItems.DefaultView.ChartArea.DataSeries.Add(series)

        Next

Thanks

[Giuseppe]

Hello cielo valdoz,

Once you have created the desired control in code-behind, you need to place it on the UserControl surface:

' LayoutRoot is the name of the top-most Grid panel in a default UserControl layout
Me.LayoutRoot.Children.Add(ChartTopSellingItems)

Regards,
Freddie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[cielo valdoz]

Hi Freddie,

Thanks for your reply. I can now display the chart dynamically by declaring also the Grid in code-behind. But i have still problem about the size of the chart. I want to fit the charts based on the screen resolution. Is that possible? I used HorizontalAlignment=Stretch and VerticalAlignment=Stretch but  everytime i add new chart to the grid, it changes the size of the chart. Kindly check the attached screenshot and code for layout configuration.

Thanks again.
Cielo

Private Sub subGraphConfiguration(ByVal blnTopSellingItems As Boolean, ByVal blnSalesByOutlet As Boolean, ByVal blnMonthlySales As Boolean, _

ByVal blnYearlySales As Boolean, ByVal blnInputOutput As Boolean, ByVal blnStockHealth As Boolean)

Dim row As Integer = -1

Dim column As Integer = 0

Dim i As Integer

Dim chartLayout As New Grid()

chartLayout.Margin = New Thickness(5, 5, 5, 5)

For i = 0 To Graphs.Count - 1

If i Mod 2 = 0 Then

column = 0

row = row + 1

chartLayout.RowDefinitions.Add(New RowDefinition())

chartLayout.ColumnDefinitions.Add(New ColumnDefinition())

chartLayout.RowDefinitions(row).Height = Windows.GridLength.Auto

chartLayout.ColumnDefinitions(column).Width = Windows.GridLength.Auto

Else

chartLayout.ColumnDefinitions.Add(New ColumnDefinition())

chartLayout.ColumnDefinitions(column).Width = Windows.GridLength.Auto

column = 1

End If

Select Case Graphs(i).GraphName

Case "TopSellingItems"

'RadChart1.Content = chartLayout

chartLayout.Children.Add(ChartTopSellingItems)

Grid.SetRow(ChartTopSellingItems, row)

Grid.SetColumn(ChartTopSellingItems, column)

subChartTopSellingItems(1, 0, 0, "")

blnTSIAdded = True

Case "SalesByOutlet"

'RadChart1.Content = chartLayout

chartLayout.Children.Add(ChartSalesByOutlet)

Grid.SetRow(ChartSalesByOutlet, row)

Grid.SetColumn(ChartSalesByOutlet, column)

subChartSalesByOutlet(1)

blnSBO = True

Case "MonthlySales"

'RadChart1.Content = chartLayout

chartLayout.Children.Add(ChartMonthlySales)

Grid.SetRow(ChartMonthlySales, row)

Grid.SetColumn(ChartMonthlySales, column)

subChartMonthlySales(1, 0, 0, "")

blnMS = True

Case "YearlySales"

'RadChart1.Content = chartLayout

chartLayout.Children.Add(ChartYearlySales)

Grid.SetRow(ChartYearlySales, row)

Grid.SetColumn(ChartYearlySales, column)

subChartYearlySales(1, 0, 0, "")

blnYS = True

Case "InputOutput"

'RadChart1.Content = chartLayout

chartLayout.Children.Add(ChartInputOutput)

Grid.SetRow(ChartInputOutput, row)

Grid.SetColumn(ChartInputOutput, column)

subChartInputOutput(1, 0, 0, "")

blnIO = True

Case "StockHealth"

'RadChart1.Content = chartLayout

chartLayout.Children.Add(ChartStockHealth)

Grid.SetRow(ChartStockHealth, row)

Grid.SetColumn(ChartStockHealth, column)

subChartStockHealth(1)

blnSH = True

End Select

'row = row + 1

Next

RadChart1.Content = chartLayout

End Sub  Private Sub subChartTopSellingItems(ByVal intDummyXML As Integer, ByVal intDrillDown As Integer, ByVal intLocation As Integer, ByVal strLocation As String) Dim TopSalesItem As XDocument Dim format As System.IFormatProvider = New System.Globalization.CultureInfo("en-US") Dim ItemsConfig As New List(Of TopSellingOptions) Dim intChart As Integer Dim intItems As Integer Dim series As New DataSeries() PanelTopSellingItems.Visibility = Windows.Visibility.Visible If intDrillDown = 0 Then TopSalesItem = XDocument.Load("XML/Top10SalesItemsByAmount.XML", LoadOptions.SetBaseUri) 'ChartTopSellingItems.DefaultView.ChartTitle.Content = "Top Selling Items" Else TopSalesItem = XDocument.Load("XML/Top10SalesItemsByAmount/Top10SalesItemsByAmount" & intLocation & ".XML", LoadOptions.SetBaseUri) 'ChartTopSellingItems.DefaultView.ChartTitle.Content = "Top Selling Item for " & strLocation End If ChartTopSellingItems.HorizontalAlignment = Windows.HorizontalAlignment.Stretch ChartTopSellingItems.VerticalAlignment = Windows.VerticalAlignment.Stretch 'ChartTopSellingItems.Width = New GridLength(0, GridUnitType.Auto).Value 'ChartTopSellingItems.Height = New GridLength(0, GridUnitType.Auto).Value Select Case ChartTypeTSI.SelectedItem.Content Case "Bar" : intChart = 1 Case "Horizontal Bar" : intChart = 2 Case "Line" : intChart = 3 Case "Pie" : intChart = 4 Case "Doughnut" : intChart = 5 Case "Area" : intChart = 6 End Select Select Case ItemsTSI.SelectedItem.Content Case "Sales" : intItems = 1 Case "Sold Items" : intItems = 2 End Select If datePickerTSI.SelectedDate Is Nothing Then datePickerTSI.SelectedDate = Now.Date ItemsConfig.Add(New TopSellingOptions(intChart, intItems, datePickerTSI.SelectedDate)) Dim Sales = From SalesElement In TopSalesItem.Descendants("Sales") _ Where ConvertDate(SalesElement.Attribute("Date").Value, format) >= ItemsConfig(0).Dates And ConvertDate(SalesElement.Attribute("Date").Value, format) <= ItemsConfig(0).Dates.AddDays(30) 'For i As Integer = 0 To Sales.Count - 1 ' Dim Items = From SalesItem In TopSalesItem.Descendants("Item") _ ' Where ConvertDate(Sales(i).Attribute("Date").Value, format) >= ConvertDate(SalesItem.Element("Date").Value, format) And ConvertDate(Sales(i).Attribute("Date").Value, format) <= ConvertDate(SalesItem.Element("Date").Value, format).AddDays(30) _ ' Select Value = SalesItem.Element("Value").Value, _ ' Name = SalesItem.Element("Name").Value, _ ' Sold = SalesItem.Element("Sold").Value ' Order By Value Ascending ' For x As Integer = 0 To Items.Count - 1 ' Dim point As New DataPoint ' If ItemsConfig(0).Items = 1 Then point.YValue = Items(x).Value 'Sales ' If ItemsConfig(0).Items = 2 Then point.YValue = Items(x).Sold 'Sold ' point.XCategory = Items(x).Name ' series.Add(point) ' Next ' If ItemsConfig(0).Chart = 1 Then series.Definition = New BarSeriesDefinition ' If ItemsConfig(0).Chart = 2 Then series.Definition = New HorizontalBarSeriesDefinition ' If ItemsConfig(0).Chart = 3 Then series.Definition = New LineSeriesDefinition ' If ItemsConfig(0).Chart = 4 Then series.Definition = New PieSeriesDefinition ' If ItemsConfig(0).Chart = 5 Then series.Definition = New DoughnutSeriesDefinition ' If ItemsConfig(0).Chart = 6 Then series.Definition = New AreaSeriesDefinition ' series.Definition.ShowItemLabels = False ' series.Definition.ItemToolTipFormat = "Item: #XCAT" & vbCr & vbLf & "Sales: #Y" ' series.Definition.ShowItemToolTips = True ' ChartTopSellingItems.DataSeries.Clear() ' ChartTopSellingItems.DataSeries.Add(series) 'Next

[Giuseppe]

Hello cielo valdoz,

If you would like to achieve "floating" layout i.e. the charts shrinking / growing in size based on the window size, you should not specify any dimensions on the charts, and you should use the default GridLength for the RowDefinition.Height / ColumnDefinition.Width of the Grid panel that is "*" (star) and not "Auto".

Here is a sample code snippet to get you started:

Dim grid As New Grid()
grid.RowDefinitions.Add(New RowDefinition())
grid.RowDefinitions.Add(New RowDefinition())
grid.ColumnDefinitions.Add(New ColumnDefinition())
grid.ColumnDefinitions.Add(New ColumnDefinition())

Dim chart As New RadChart()
chart.ItemsSource = New Integer() {1, 2, 3, 4}
Grid.SetRow(chart, 0)
Grid.SetColumn(chart, 0)
grid.Children.Add(chart)

Dim chart2 As New RadChart()
chart2.ItemsSource = New Integer() {5, 6, 7, 8}
Grid.SetRow(chart2, 0)
Grid.SetColumn(chart2, 1)
grid.Children.Add(chart2)

Dim chart3 As New RadChart()
chart3.ItemsSource = New Integer() {9, 10, 11, 12}
Grid.SetRow(chart3, 1)
Grid.SetColumn(chart3, 0)
grid.Children.Add(chart3)

Dim chart4 As New RadChart()
chart4.ItemsSource = New Integer() {13, 14, 15, 16}
Grid.SetRow(chart4, 1)
Grid.SetColumn(chart4, 1)
grid.Children.Add(chart4)

Me.LayoutRoot.Children.Add(grid)

Best wishes,
Freddie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.