Bar graph with negative values

5 posts, 0 answers
  1. dd
    dd avatar
    9 posts
    Member since:
    Mar 2010

    Posted 27 Sep Link to this post

    I want my bar graph to always start at zero and go up if positive and down if negative like in the first attachment. My code creates a graph like the second attachment, where the bar starts at the minimum range and goes up. How do i make my bars on my graph start at zero and pivot up or down depending if the value is positive or negative?
  2. Hristo
    Admin
    Hristo avatar
    1031 posts

    Posted 28 Sep Link to this post

    Hello,

    Thank you for writing.

    The negative bar values in RadChartView will be painted by default going down. Additionally, you may want to also move the horizontal axis by setting its StartPoisionAxis and StartPoisitionValue properties: http://docs.telerik.com/devtools/winforms/chartview/axes/axis-alignment.

    Please check my code snippet below: 
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
     
            BarSeries barSeries = new BarSeries("Performance", "RepresentativeName");
            barSeries.Name = "Q1";
            barSeries.DataPoints.Add(new CategoricalDataPoint(177, "Harley"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(128, "White"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(-250, "Smith"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(111, "Jones"));
            barSeries.DataPoints.Add(new CategoricalDataPoint(-118, "Marshall"));
     
            barSeries.ShowLabels = true;
            barSeries.DrawLinesToLabels = true;
            this.radChartView1.Series.Add(barSeries);
     
            CategoricalAxis axis = (CategoricalAxis)this.radChartView1.Axes[0];
            axis.StartPositionAxis = this.radChartView1.Axes[1];
            axis.StartPositionValue = 0;
        }
    }

    I am also attaching a screenshot showing the result on my end. In case you need further assistance, please share code snippet how you are generating the series and the settings you are using.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. dd
    dd avatar
    9 posts
    Member since:
    Mar 2010

    Posted 28 Sep in reply to Hristo Link to this post

    I am unable to make my chart do this. I am using it in bound mode. here is some example code that reproduces it. I also attached the image it creates.

    Imports Telerik.Charting
    Imports Telerik.WinControls
    Imports Telerik.WinControls.UI
     
    Public Class BarGraphExample1
     
        Public Sub BuildChart()
            Dim chart1 As RadChartView
     
            'build dataset
            Dim data As New List(Of TestGenChartItem)
            For x = 0 To 9
                Dim d = x * 10
                If x Mod 2 Then
                    data.Add(New TestGenChartItem With {.Value = x * -1, .Category = d})
                Else
                    data.Add(New TestGenChartItem With {.Value = x, .Category = d})
                End If
     
            Next
     
            'create chart and x axis
            chart1 = New RadChartView()
            Dim xAxis As New CategoricalAxis()
            xAxis.AxisType = Telerik.Charting.AxisType.First
            xAxis.MajorTickInterval = 1
            xAxis.LabelFitMode = AxisLabelFitMode.None
            xAxis.GapLength = 0.6
            xAxis.TickLength = 0
            xAxis.StartPositionValue = 0
            chart1.Axes.Add(xAxis)
     
            'create y axis
            Dim yAxis = New Telerik.WinControls.UI.LinearAxis()
            yAxis.AxisType = Telerik.Charting.AxisType.Second
            yAxis.HorizontalLocation = AxisHorizontalLocation.Left
            yAxis.TickLength = 0
            chart1.Axes.Add(yAxis)
     
            'create bar series
            Dim barSeries = New Telerik.WinControls.UI.BarSeries()
            barSeries.Name = "p&l"
            barSeries.LegendTitle = "p&l"
            barSeries.BackColor = Color.Blue
            barSeries.BorderColor = Color.Blue
            barSeries.CombineMode = ChartSeriesCombineMode.None
            barSeries.DataSource = data
            barSeries.BorderWidth = 2
            barSeries.ValueMember = "Value"
            barSeries.CategoryMember = "Category"
            barSeries.HorizontalAxis = CType(chart1.Axes(0), Telerik.WinControls.UI.CategoricalAxis)
            barSeries.VerticalAxis = CType(chart1.Axes(1), Telerik.WinControls.UI.LinearAxis)
            chart1.Series.Add(barSeries)
     
            'save chart
            Dim fileName = Guid.NewGuid.ToString + "__" + FTNUtilities.Util.FileSafeDateFormat(Now) + ".png"
            SaveChartToDisk(fileName, chart1)
            Process.Start("explorer.exe", fileName)
     
        End Sub
     
        Public Sub SaveChartToDisk(fileName As String, c As RadChartView)
            Try
                ThemeResolutionService.AllowAnimations = False
     
                If (System.IO.File.Exists(fileName)) Then
                    System.IO.File.Delete(fileName)
                End If
     
                Using bmp = New System.Drawing.Bitmap(c.ClientSize.Width, c.ClientSize.Height)
                    c.DrawToBitmap(bmp, c.Bounds)
     
                    Using stream = New System.IO.FileStream(fileName, System.IO.FileMode.Create, System.IO.FileAccess.Write)
                        bmp.Save(stream, System.Drawing.Imaging.ImageFormat.Png)
                    End Using
                End Using
            Catch ex As Exception
                Throw
            End Try
     
        End Sub
     
     
    End Class
     
    Public Class TestGenChartItem
     
        Property Value As Double
     
        Property Category As String
     
        Public Sub New()
     
        End Sub
     
        Public Sub New(cat As String, val As Double)
            Category = cat
            Value = val
        End Sub
     
    End Class
  4. dd
    dd avatar
    9 posts
    Member since:
    Mar 2010

    Posted 28 Sep Link to this post

    telerik version 2017.2.613.40
  5. Hristo
    Admin
    Hristo avatar
    1031 posts

    Posted 29 Sep Link to this post

    Hi David,

    Thank you for writing back.
     
    Indeed the observed on your end behavior is a regression issue in the 2017.2.613.40 version of the controls. It has been fixed with the 2017.3.912 release.

    Due to the complexity of the issue, I cannot suggest your a workaround with the R2 2017 version. If possible please upgrade to the latest version. I am also attaching a screenshot showing the expected result in this kind of setup.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top