create dynamic chart

4 posts, 0 answers
  1. cielo valdoz
    cielo valdoz avatar
    33 posts
    Member since:
    Dec 2009

    Posted 15 Apr 2010 Link to this post

    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
  2. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 16 Apr 2010 Link to this post

    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.
  3. DevCraft banner
  4. cielo valdoz
    cielo valdoz avatar
    33 posts
    Member since:
    Dec 2009

    Posted 19 Apr 2010 Link to this post

    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 
  5. Giuseppe
    Admin
    Giuseppe avatar
    2363 posts

    Posted 20 Apr 2010 Link to this post

    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.
Back to Top