PDA

View Full Version : [CLOSED] Charts / can one force the order of the bars



tMp
Jan 16, 2014, 2:58 PM
When I want to a select TOP (10) of database and show it as a bar/chart, it takes the smallest value at the top and the largest at the bottom. Is there a way to force it the other way round?

Daniil
Jan 17, 2014, 5:53 AM
Hi @tmp,

Hmm, the bars should be in the order which they are in the Store's data. For example, here is an arbitrary order:
http://examples2.ext.net/#/Chart/Bar/Basic/

So, please sort the data as needed before binding it to the Store.

If it doesn't work for you, please provide a test case.

tMp
Jan 17, 2014, 9:09 AM
So the only way I can change the order (from bottom to top into top to bottom) is that I have to re-arrange my query output?

In the example you see that the first line is at the bottom but I would like it to be at the top. In my real case I use a TOP (10) query result that just looks nicer from top to bottom.

example:

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<script runat="server">

protected void Page_Load(object sender, EventArgs e)
{
// create sample data
System.Data.DataTable dt = new System.Data.DataTable();

System.Data.DataColumn dc = new System.Data.DataColumn("Name");
dc.DataType = System.Type.GetType("System.String");
dt.Columns.Add(dc);
dc = new System.Data.DataColumn("Data");
dc.DataType = System.Type.GetType("System.Int32");
dt.Columns.Add(dc);
System.Data.DataRow dr = dt.NewRow();
dr[0] = "First";
dr[1] = 100;
dt.Rows.Add(dr); dr = dt.NewRow();
dr[0] = "Second";
dr[1] = 75;
dt.Rows.Add(dr); dr = dt.NewRow();
dr[0] = "Third";
dr[1] = 55;
dt.Rows.Add(dr);


if (!X.IsAjaxRequest)
{
Ext.Net.Panel pnl = new Ext.Net.Panel
{
Title = "Chart Test",
Layout = "FitLayout",
Width = 500,
Height = 500,
Items =
{
new Chart {
ID = "ChartTest",
Shadow = true,
Animate = true,
LegendConfig = new ChartLegend() { Position = LegendPosition.Top },
Store = {
new Store {
DataSource = dt,
AutoDataBind = true,
Model = {
new Model {
Fields = {
new ModelField { Name = "Name" },
new ModelField { Name = "Data" }
}
}
}
}
},
Axes = {
new NumericAxis { Position = Position.Bottom, Fields = new string[] { "Data" }, Title = "#", Minimum = 0 },
new CategoryAxis { Position = Position.Left, Fields = new string[] { "Name" }, Title = "Name" }
},
Series = {
new BarSeries { Axis = Position.Bottom, XField = new string[] { "Name" }, YField = new string[] { "Data" } }
}
}
}
};

this.Form.Controls.Add(pnl);
}
}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<div>

</div>
</form>
</body>
</html>

Daniil
Jan 17, 2014, 11:36 AM
Well, it is not the only way.

You also can use a Store's Sorters.

Sorters =
{
new DataSorter()
{
Property = "Data",
Direction = Ext.Net.SortDirection.ASC
}
}

tMp
Jan 17, 2014, 2:33 PM
Not my day today... ;)

As always - a perfect solution!

thank you!