Jul 22, 2013, 9:24 PM
Multiple zeros appear in Y axis
Hello,
I have a chart with a column series that periodically refreshes via ajax. Sometimes there will be data to report and other times not. So, by design, the chart doesn't always have something to graph.
The problem I'm having is that when there is no data to graph, the y-axis shows two zero values: one at the origin and one above the origin. This is confusing and doesn't make logical sense.
You can see this in the screen shot here:
My question is how do I get the chart to only display one zero value on the y-axis when there is no data to be graphed.
Here is the markup for the graph pictured in the screenshot:
I have a chart with a column series that periodically refreshes via ajax. Sometimes there will be data to report and other times not. So, by design, the chart doesn't always have something to graph.
The problem I'm having is that when there is no data to graph, the y-axis shows two zero values: one at the origin and one above the origin. This is confusing and doesn't make logical sense.
You can see this in the screen shot here:
My question is how do I get the chart to only display one zero value on the y-axis when there is no data to be graphed.
Here is the markup for the graph pictured in the screenshot:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SystemHealth.ascx.cs" Inherits="Com.Wolfgang.BCycle.EnterpriseSystem.Web.Dashboard.Widgets.SystemHealth" %>
<ext:Panel ID="MainPanel" runat="server" Flex="1" Cls="widget" Padding="10" >
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"/>
</LayoutConfig>
<Items>
<ext:Container ID="chartContainer"
runat="server"
Title="Bar Chart"
Layout="Fit"
Padding="5"
Flex="2">
<Items>
<ext:Chart
ID="SystemHealthChart"
runat="server"
Shadow="true"
Animate="true"
Theme="SystemHealthTheme"
MaintainFlex="true"
Padding="10">
<Store>
<ext:Store runat="server">
<MessageBusListeners>
<ext:MessageBusListener Name="AutoDataUpdateTask"/>
</MessageBusListeners>
<Proxy>
<ext:AjaxProxy Json="true" >
<ActionMethods Read="GET" />
<Reader>
<ext:JsonReader Root="ChartData" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="StatisticTitleName" Type="String" />
<ext:ModelField Name="CurrentAmount" Type="Float" />
</Fields>
</ext:Model>
</Model>
<Sorters >
<%--
An ext:DataSorter is now being created in code behind, which changes the direction to "ASC" if this
is the battery voltage widget or "DESC" if not. The markup would look something like this:
<ext:DataSorter Property="CurrentAmount" Direction="DESC" />
--%>
</Sorters>
</ext:Store>
</Store>
<Gradients>
<ext:Gradient GradientID="v-1" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(213,247,255)" />
<ext:GradientStop Offset="100" Color="rgb(157,217,238)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-2" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(136,221,246)" />
<ext:GradientStop Offset="100" Color="rgb(64,167,203)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-3" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(163,222,78)" />
<ext:GradientStop Offset="100" Color="rgb(105,184,5)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-4" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(86,153,78)" />
<ext:GradientStop Offset="100" Color="rgb(19,98,5)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-5" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(218,254,122)" />
<ext:GradientStop Offset="100" Color="rgb(158,211,150)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="v-6" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(79,152,198)" />
<ext:GradientStop Offset="100" Color="rgb(6,88,159)" />
</Stops>
</ext:Gradient>
<%--"Battery Voltage for Solar Only Kiosks" type only:--%>
<ext:Gradient GradientID="voltageColorCodeGreen" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(127,255,42)" />
<ext:GradientStop Offset="100" Color="rgb(70,176,66)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="voltageColorCodeYellow" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(255,255,0)" />
<ext:GradientStop Offset="100" Color="rgb(251,220,69)" />
</Stops>
</ext:Gradient>
<ext:Gradient GradientID="voltageColorCodeRed" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="rgb(192,23,27)" />
<ext:GradientStop Offset="100" Color="rgb(221,68,61)" />
</Stops>
</ext:Gradient>
</Gradients>
<Axes>
<ext:NumericAxis
Position="Left"
Grid="false"
Width="0"
Minimum="0"
Title="<%# ChartUnit %>" AutoDataBind="true">
<Label Font="14px Arial">
<Renderer Handler="return Ext.util.Format.number(value, '0,000');" />
</Label>
</ext:NumericAxis>
<ext:CategoryAxis
Fields="StatisticTitleName"
Position="Bottom">
<Label Font="14px Arial">
<Rotate Degrees="70" />
<Renderer Handler="return Ext.util.Format.ellipsis(value, 11);" />
</Label>
</ext:CategoryAxis>
</Axes>
<Series>
<ext:ColumnSeries
Axis="Bottom"
Highlight="true"
XField="StatisticTitleName"
YField="CurrentAmount">
<Tips runat="server" TrackMouse="true" Width="300" Height="30">
<Renderer Handler="this.setTitle(storeItem.get('StatisticTitleName') + ': ' + Ext.util.Format.number(storeItem.get('CurrentAmount'), '0,000'));" />
</Tips>
<Label
Font="14px Arial"
Display="InsideStart"
Field="CurrentAmount"
Orientation="Vertical" TextAnchor="middle">
<%--The handler for this renderer is determined server side in the code behind--%>
<Renderer />
</Label>
<%--The handler for this renderer is determined server side in the code behind--%>
<Renderer />
</ext:ColumnSeries>
</Series>
</ext:Chart>
</Items>
</ext:Container>
<ext:Container ID="StatisticsPanel" runat="server" Layout="VBoxLayout" Flex="1">
<Tpl runat="server">
<Html>
<div class="Container">
<div class="NormalRow">
<div class="KioskDataColumn">{dataLabel}</div>
<div class="KioskDataColumnRight">{avgDataValue}</div>
</div>
<div class="NormalRow">
<div class="KioskDataColumn">{dataLabelAvg}</div>
<div class="KioskDataColumnRight">{avgDataAvg}</div>
</div>
</div>
</Html>
</Tpl>
<Loader runat="server" Mode="Data" >
<MessageBusListeners>
<ext:MessageBusListener Name="AutoDataUpdateTask" />
</MessageBusListeners>
<AjaxOptions Json="true" Method="GET" />
</Loader>
</ext:Container>
</Items>
</ext:Panel>