PDA

View Full Version : [CLOSED] Create a Line Chart



Sowjanya
Oct 31, 2013, 5:10 AM
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:
---------------------------


<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)
});

}


pls advise on how i can get this done, asap.

Thanks,
Veda

Daniil
Oct 31, 2013, 6:20 AM
Hi Veda,

It might be possible to change visibility of axes and series on the fly, but it is better and easier to have two Chart components. You can put them into a Container with a CardLayout and pick up a respective card according to a Radio.

You can still have the only Store and assign it to both the Charts using their StoreID property.

Sowjanya
Oct 31, 2013, 8:46 AM
Hi Veda,

It might be possible to change visibility of axes and series on the fly, but it is better and easier to have two Chart components. You can put them into a Container with a CardLayout and pick up a respective card according to a Radio.

You can still have the only Store and assign it to both the Charts using their StoreID property.

can you give me a sample code of how to change them on the fly ? using the data i provided?

Daniil
Oct 31, 2013, 8:57 AM
Unfortunately, we have on such an example.


on the fly

Probably, I didn't not express myself clearly. I highly do not recommend to do it on the fly. I recommend to create two Charts.

Sowjanya
Oct 31, 2013, 2:16 PM
Hi Veda,

It might be possible to change visibility of axes and series on the fly, but it is better and easier to have two Chart components. You can put them into a Container with a CardLayout and pick up a respective card according to a Radio.

You can still have the only Store and assign it to both the Charts using their StoreID property.

ok, one more question...

why is the line with markers ( indicating values ) show wrong ? e.g, I am having a value - 69.92 near 0 ? its wrong right ? why is that ?
screenshot attached.




<ext:Chart ID="SummaryChart" runat="server" Animate="true" Width="500"
Height="300" 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" Minimum="0" Maximum="100" MajorTickSteps="9">
<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" Minimum="0" Maximum="100" MajorTickSteps="9">
<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>

Daniil
Oct 31, 2013, 2:37 PM
Yes, it looks incorrect. I don't see any obvious reason.

Should you not to replace

XField="PROJECTED_USAGE_MONTH" YField="PROJECTED_DATE"
with

YField="PROJECTED_USAGE_MONTH" XField="PROJECTED_DATE"
?

Sowjanya
Oct 31, 2013, 3:42 PM
Yes, it looks incorrect. I don't see any obvious reason.

Should you not to replace

XField="PROJECTED_USAGE_MONTH" YField="PROJECTED_DATE"
with

YField="PROJECTED_USAGE_MONTH" XField="PROJECTED_DATE"
?

ok, tht worked..thanks !


btw, how can i get json data of the chart as extraparams of some button click ?

Daniil
Oct 31, 2013, 4:17 PM
You can use:

<ext:Parameter Name="data" Value="App.ChartSummaryStore.getRecordsValues()" Mode="Raw" Encode="true" />
and deserialize it on server.