This is a migrated thread and some comments may be shown as answers.

create dynamic chart

3 Answers 138 Views
Chart
This is a migrated thread and some comments may be shown as answers.
cielo valdoz
Top achievements
Rank 1
cielo valdoz asked on 15 Apr 2010, 11:13 AM
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

3 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 16 Apr 2010, 05:27 PM
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.
0
cielo valdoz
Top achievements
Rank 1
answered on 19 Apr 2010, 06:52 AM
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 BooleanByVal blnSalesByOutlet As BooleanByVal blnMonthlySales As Boolean, _  
                                      ByVal blnYearlySales As BooleanByVal blnInputOutput As BooleanByVal 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 IntegerByVal intDrillDown As IntegerByVal intLocation As IntegerByVal 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 
0
Giuseppe
Telerik team
answered on 20 Apr 2010, 02:48 PM
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.
Tags
Chart
Asked by
cielo valdoz
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
cielo valdoz
Top achievements
Rank 1
Share this question
or