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

Bar graph with negative values

4 Answers 191 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
dd
Top achievements
Rank 1
dd asked on 27 Sep 2017, 03:10 PM
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?

4 Answers, 1 is accepted

Sort by
0
Hristo
Telerik team
answered on 28 Sep 2017, 09:50 AM
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.
0
dd
Top achievements
Rank 1
answered on 28 Sep 2017, 02:13 PM

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
0
dd
Top achievements
Rank 1
answered on 28 Sep 2017, 02:15 PM
telerik version 2017.2.613.40
0
Hristo
Telerik team
answered on 29 Sep 2017, 08:44 AM
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.
Tags
ChartView
Asked by
dd
Top achievements
Rank 1
Answers by
Hristo
Telerik team
dd
Top achievements
Rank 1
Share this question
or