Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Working with Negative numbers

1 Answer 217 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Kurt Kluth
Top achievements
Rank 1
Kurt Kluth asked on 19 Aug 2015, 08:47 PM
chart.png

I am trying to work with the HTMLChart negative numbers while setting the Min & Max values on the Y axis.  Logic works fine with all dollar/percentages whose values are greater than 0 (zero).  The X-axis is all the way in the middle and I have implemented the code suggested here. 

Any other suggestions on how I can get the X-axis to remain at the bottom even for negative numbers?  I have included the code below

<telerik:RadScriptBlock runat="server">
        <script>
            function BottomXAxisLabels() {
                var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
            var axis = $telerik.$.extend(true, {}, chart.options.categoryAxis);
            axis.line.visible = false;
            chart.setOptions({ categoryAxis: [{}, axis] });
            chart.options.valueAxis.axisCrossingValues = [0, -99999999999];
            chart.redraw();
            }
 
            function onRequestStart(sender, args) {
                if (args.get_eventTarget().indexOf("_btnXLSExport") >= 0) {
                    args.set_enableAjax(false);
                }
            }
            function OnSeriesClick(args) {
                var kendoWidget = args.sender;
                alert("You clicked on a series item with value '" + args.value + "' from category '" + args.category + "'.");
            }
 
    </script>
    </telerik:RadScriptBlock>
 
                    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Visible="false" Legend-Appearance-Position="Top" Width="95%">
                        <ClientEvents OnLoad="BottomXAxisLabels" OnSeriesClick="OnSeriesClick" />
                        <PlotArea>
                            <Series>
                                <telerik:ScatterLineSeries DataFieldY="ReturnedValue" DataFieldX="cycle_Date">
                                    <TooltipsAppearance Color="White" >
                                    </TooltipsAppearance>
                                    <LabelsAppearance Visible="false">
                                    </LabelsAppearance>
                                </telerik:ScatterLineSeries>
                            </Series>
                            <YAxis>
                                <LabelsAppearance>
                                    <TextStyle Bold="true" />
                                </LabelsAppearance>
                                <MinorGridLines Visible="false"></MinorGridLines>
                                <MajorGridLines Visible="false"></MajorGridLines>
                            </YAxis>
                            <XAxis DataLabelsField="cycle_Date" BaseUnit="Years" MajorTickSize="1" >
                                <LabelsAppearance Visible="true" RotationAngle="90" DataFormatString="Year {0:yyyy}">
                                    <TextStyle Bold="true" />
                                </LabelsAppearance>
                                <TitleAppearance Text="Dates">
                                    <TextStyle Bold="true" />
                                </TitleAppearance>
                                <MinorGridLines Visible="false"></MinorGridLines>
                                <MajorGridLines Visible="true"></MajorGridLines>
                            </XAxis>
                        </PlotArea>
                        <ChartTitle>
                            <Appearance>
                                <TextStyle Bold="true" />
                            </Appearance>
                        </ChartTitle>
                        <Legend>
                            <Appearance Visible="true" Position="Bottom"></Appearance>
                        </Legend>
                    </telerik:RadHtmlChart>

 

The min value may be something like -0.0545423.  I am attempting to create a buffer to the min value and max value. 

Private Sub grdResults_SelectedIndexChanged(sender As Object, e As EventArgs) Handles grdResults.SelectedIndexChanged
     For Each item As GridDataItem In grdResults.SelectedItems
         Dim strID As String = TryCast(item.FindControl("lblRowField"), Label).Text
         Dim strID2 As String = TryCast(item.FindControl("lblRowText"), Label).Text
         Dim strID3 As String = TryCast(item.FindControl("lblRowNumber"), Label).Text
         Me.RadHtmlChart1.Visible = True
         GetData(strID, strID2, strID3)
 
     Next
 End Sub
 
Private Sub GetData(InField As String, InColumnName As String, InRowCount As String)
     Try
         oConn.Open()
 
         Dim ocmd As New SqlCommand("sp_seTrendTracking", oConn)
         ocmd.CommandType = CommandType.StoredProcedure
 
         With ocmd.Parameters
             .Add(New SqlParameter("@charter_num", Session("Charter_Num")))
             '.Add(New SqlParameter("@charter_num", 95778))
             .Add(New SqlParameter("@field", InField))
         End With
 
         reader = ocmd.ExecuteReader
 
         If reader.HasRows Then
             Dim dt As DataTable = New DataTable()
 
             dt.Load(reader)
             RadHtmlChart1.DataSource = dt
             RadHtmlChart1.ChartTitle.Text = InColumnName
 
             Dim dr As DataRow
             dr = dt.Rows(0)
 
             Dim percentage As Double = 0.1D    '10%
             Dim currentValue As Double
 
             If InRowCount <= 6 Then
                 RadHtmlChart1.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0:c0}"
                 RadHtmlChart1.PlotArea.CommonTooltipsAppearance.DataFormatString = "{0:c0}"
                 'Grab the current value in TextBox1
                 If Double.TryParse(dr("Minvalue"), Globalization.NumberStyles.Number, Nothing, currentValue) Then
                     'Add 10% of the value to it
                     currentValue -= dr("Minvalue") * percentage
                     RadHtmlChart1.PlotArea.YAxis.MinValue = currentValue.ToString
                 End If
 
                 If Double.TryParse(dr("MaxValue"), Globalization.NumberStyles.Number, Nothing, currentValue) Then
                     'Add 10% of the value to it
                     currentValue += dr("MaxValue") * percentage
                     RadHtmlChart1.PlotArea.YAxis.MaxValue = currentValue.ToString
                 End If
                 RadHtmlChart1.PlotArea.CommonTooltipsAppearance.DataFormatString = "{1:c0}<br/>{0:MMM yyyy}"
             Else
                 RadHtmlChart1.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0:p2}"
                 RadHtmlChart1.PlotArea.CommonTooltipsAppearance.DataFormatString = "{0:p2}"
                 If Double.TryParse(dr("Minvalue"), Globalization.NumberStyles.Number, Nothing, currentValue) Then
                     Dim MinValue As Decimal
                     MinValue = dr("Minvalue")
                     If dr("MinValue") < 0 Then
                         'percentage = -1.5D
                         currentValue += MinValue * percentage
                     Else
                         'Add 10% of the value to it
                         currentValue -= dr("Minvalue") * percentage
                     End If
                     RadHtmlChart1.PlotArea.YAxis.MinValue = currentValue
                 End If
 
                 If Double.TryParse(dr("MaxValue"), Globalization.NumberStyles.Number, Nothing, currentValue) Then
                     'Add 10% of the value to it
                     currentValue += dr("MaxValue") * percentage
                     RadHtmlChart1.PlotArea.YAxis.MaxValue = currentValue
                 End If
                 RadHtmlChart1.PlotArea.CommonTooltipsAppearance.DataFormatString = "{1:p2}<br/>{0:MMM yyyy}"
             End If
             RadHtmlChart1.DataBind()
         End If
     Catch ex As Exception
         MyLabel.Text = ex.Message
     Finally
         oConn.Close()
     End Try
 End Sub

 

 

 

1 Answer, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 25 Aug 2015, 06:21 AM
Hi Kurt,

You are using numeric series, so the client-side script should be modified a little bit. Also XAxis.DataLabelsField property is required only for category series (area, line, bar, column, etc.), so it is not required for numeric series like scatterline.

Please examine the code below for details:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script>
        function BottomXAxisLabels() {
            var chart = $find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget();
            var axis = $telerik.$.extend(true, {}, chart.options.xAxis);
            axis.line.visible = false;
             
            chart.setOptions({ xAxis: [{}, axis] });
            chart.options.xAxis[0].labels.visible = false;
            chart.options.yAxis.axisCrossingValues = [0, -99999999999];
            chart.redraw();
        }
 
        function onRequestStart(sender, args) {
            if (args.get_eventTarget().indexOf("_btnXLSExport") >= 0) {
                args.set_enableAjax(false);
            }
        }
        function OnSeriesClick(args) {
            var kendoWidget = args.sender;
            alert("You clicked on a series item with value '" + args.value + "' from category '" + args.category + "'.");
        }
 
    </script>
</telerik:RadScriptBlock>
 
<telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Visible="true" Legend-Appearance-Position="Top" Width="95%">
    <ClientEvents OnLoad="BottomXAxisLabels" OnSeriesClick="OnSeriesClick" />
    <PlotArea>
        <Series>
            <telerik:ScatterLineSeries DataFieldY="ReturnedValue" DataFieldX="cycle_Date">
                <TooltipsAppearance Color="White">
                </TooltipsAppearance>
                <LabelsAppearance Visible="false">
                </LabelsAppearance>
            </telerik:ScatterLineSeries>
        </Series>
        <YAxis>
            <LabelsAppearance>
                <TextStyle Bold="true" />
            </LabelsAppearance>
            <MinorGridLines Visible="false"></MinorGridLines>
            <MajorGridLines Visible="false"></MajorGridLines>
        </YAxis>
        <XAxis BaseUnit="Years" MajorTickSize="1">
            <LabelsAppearance Visible="true" RotationAngle="90" DataFormatString="Year {0:yyyy}">
                <TextStyle Bold="true" />
            </LabelsAppearance>
            <TitleAppearance Text="Dates">
                <TextStyle Bold="true" />
            </TitleAppearance>
            <MinorGridLines Visible="false"></MinorGridLines>
            <MajorGridLines Visible="true"></MajorGridLines>
        </XAxis>
    </PlotArea>
    <ChartTitle>
        <Appearance>
            <TextStyle Bold="true" />
        </Appearance>
    </ChartTitle>
    <Legend>
        <Appearance Visible="true" Position="Bottom"></Appearance>
    </Legend>
</telerik:RadHtmlChart>



Regards,
Danail Vasilev
Telerik
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 Feedback Portal and vote to affect the priority of the items
Tags
Chart (HTML5)
Asked by
Kurt Kluth
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Share this question
or