Oct 31, 2013, 4:10 AM
[CLOSED] Create a Line Chart
Hi,
I am trying to create a line chart in my application, where the data in the screenshot "GraphData.png" attached, to be bound to graph.
This is the first time I am creating a chart in Ext.Net and hence need your advise on how I can accomplish this...
I started off with basic chart code ...but not sure on how I can accomplish it as per my requirements.
I want to have , on X-axis, "PROJECTED_DATE". And on Y axis, I need to show "PROJECTED_USAGE_MONTH" when radiobutton "Month" is checked,
or show "PROJECTED_USAGE_QUARTER". when radio - "Quarter" is checked.
Having said this, i thought of making both NumericAxis components as well as both line series components hidden in aspx page,
and whenever the checkbox is checked, only that corresponding Y axis to be shown. but unsure on how to accomplish this...I saw the samples, but could get nothing out of it...
Also, one more requirement is that I have a slider control based on which the graph and also the summary data box(marked with red color mark in Required_Graph.png) needs to be updated with the updated data based on slider movement.
currently, I am having the direct event for slider, where I am taking the slider value and reloading the chartstore and also the summary box store.
I have also attached a screenshot on how the graph is expected to be displayed. ( Required_Graph.png )
my aspx code is as follows:
---------------------------
Thanks,
Veda
I am trying to create a line chart in my application, where the data in the screenshot "GraphData.png" attached, to be bound to graph.
This is the first time I am creating a chart in Ext.Net and hence need your advise on how I can accomplish this...
I started off with basic chart code ...but not sure on how I can accomplish it as per my requirements.
I want to have , on X-axis, "PROJECTED_DATE". And on Y axis, I need to show "PROJECTED_USAGE_MONTH" when radiobutton "Month" is checked,
or show "PROJECTED_USAGE_QUARTER". when radio - "Quarter" is checked.
Having said this, i thought of making both NumericAxis components as well as both line series components hidden in aspx page,
and whenever the checkbox is checked, only that corresponding Y axis to be shown. but unsure on how to accomplish this...I saw the samples, but could get nothing out of it...
Also, one more requirement is that I have a slider control based on which the graph and also the summary data box(marked with red color mark in Required_Graph.png) needs to be updated with the updated data based on slider movement.
currently, I am having the direct event for slider, where I am taking the slider value and reloading the chartstore and also the summary box store.
I have also attached a screenshot on how the graph is expected to be displayed. ( Required_Graph.png )
my aspx code is as follows:
---------------------------
<ext:Container runat="server" Layout="HBoxLayout">
<Items>
<ext:RadioGroup ID="rdoMonthQtr" runat="server" >
<Items>
<ext:Radio ID="rdoMonth" runat="server" BoxLabel="Month" Checked="false" BoxLabelCls="boxcls" Width="50" />
<ext:Radio ID="rdoQuarter" runat="server" BoxLabel="Quarter" Checked="false" BoxLabelCls="boxcls" Width="50" />
</Items>
</ext:RadioGroup>
<ext:Slider
ID="SliderAvgGrowthPercent" Width="300"
runat="server"
Single="true"
FieldLabel="Avg. Growth Percent"
MinValue="0"
MaxValue="100" Increment="1">
<DirectEvents>
<Change OnEvent="SliderChange" />
</DirectEvents>
</ext:Slider>
</Items>
</ext:Container>
<ext:Chart ID="SummaryChart" runat="server" Animate="true" Width="800"
Height="500" Frame="true" InsetPadding="30">
<Loader ID="Loader1" runat="server">
<LoadMask ShowMask="true"></LoadMask>
</Loader>
<Store>
<ext:Store ID="ChartSummaryStore" AutoLoad="true" runat="server">
<Proxy>
<ext:AjaxProxy Json="true" Url='<%#ChartURL%>' AutoDataBind="true" >
<ActionMethods Read="POST" Create="POST" />
<Headers>
<ext:Parameter Name="Accept" Value="application/json" />
<ext:Parameter Name="Content-Type" Value="application/json" />
</Headers>
<Reader>
<ext:JsonReader Root="" />
</Reader>
<Writer>
<ext:JsonWriter Root="" Encode="true" />
</Writer>
<ExtraParams>
<ext:StoreParameter Name="InstanceID" Value="168"/>
</ExtraParams>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="ChartStoreModel" runat="server">
<Fields>
<ext:ModelField Name="PROJECTED_DATE" Type="String" />
<ext:ModelField Name="PROJECTED_USAGE_MONTH" Type="Float" >
<Convert Fn="percentageConvert" />
</ext:ModelField>
<ext:ModelField Name="PROJECTED_USAGE_QUARTER" Type="Float" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Fields="PROJECTED_USAGE_MONTH" Position="Left" Title="Projected Usage" >
<GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>
</ext:NumericAxis>
<ext:NumericAxis Fields="PROJECTED_USAGE_QUARTER" Position="Left" Title="Projected Usage" >
<GridConfig>
<Odd Opacity="1" Fill="#ddd" Stroke="#bbb" StrokeWidth="0.5" />
</GridConfig>
</ext:NumericAxis>
<ext:CategoryAxis Fields="PROJECTED_DATE" Position="Bottom" Title="Meses" />
</Axes>
<Series>
<ext:LineSeries SeriesID="Series1" Axis="Left" XField="PROJECTED_USAGE_MONTH" YField="PROJECTED_DATE">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_MONTH'));"></Renderer>
</Tips>
</ext:LineSeries>
<ext:LineSeries SeriesID="Series2" Axis="Left" XField="PROJECTED_USAGE_QUARTER" YField="PROJECTED_DATE">
<HighlightConfig Size="7" Radius="7" />
<MarkerConfig Type="Cross" Size="4" Radius="4" StrokeWidth="0" />
<Tips ID="Tips2" runat="server" TrackMouse="true" Width="140" Height="35">
<Renderer Handler="this.setTitle(storeItem.get('PROJECTED_DATE') + '<br />' + storeItem.get('PROJECTED_USAGE_QUARTER'));"></Renderer>
</Tips>
</ext:LineSeries>
</Series>
</ext:Chart>
..
Code behind:
--------------
public void SliderChange(object sender, DirectEventArgs e)
{
string growthType = "";
string InstanceID = null;
InstanceID = Convert.ToString(this.hdnInstanceID.Value);
if (this.rdoMonth.Checked == true)
{
growthType = "AVG_GROWTH_MONTHLY_24MON";
}
else
{
growthType = "AVG_GROWTH_QUARTERLY_24MON";
}
// growthType = "AVG_GROWTH_MONTHLY_24MON";
// string AvgGrowthValue = "0";
string AvgGrowthValue = Convert.ToString(this.SlrAvgGrowthPercent.Value);
ChartSummaryStore.Reload(new Ext.Net.ParameterCollection()
{
new Ext.Net.Parameter("InstanceID",Convert.ToString(InstanceID))
,new Ext.Net.Parameter("GrowthValue",AvgGrowthValue)
,new Ext.Net.Parameter("GrowthType",growthType)
});
}Thanks,
Veda
Last edited by Daniil; Nov 05, 2013 at 8:36 AM.
Reason: [CLOSED]
Originally Posted by Daniil
