PDA

View Full Version : [CLOSED] Bar Chart scroll issue



PriceRightHTML5team
Apr 07, 2014, 1:08 PM
Hi,

I have bar chart which contains more than 50 columns, chart is not generated properly due to too many columns, therefore i want to add a horizontal scroll bar to chart or its container in which it is loaded.

So how to add scroll bar to bar chart or its container so that graph becomes in readable format?

Here is my sample code:

// Model




public class ChartModel
{
public string Name { get; set; }
public int Data1 { get; set; }
}




//Controller




public ActionResult Index()
{
return View(GenerateData());
}

public StoreResult GetData()
{
return new StoreResult(GenerateData());
}

public List<ChartModel> GenerateData()
{
List<ChartModel> lst=new List<ChartModel>();
ChartModel cm = new ChartModel();
for (int i = 1; i <= 80; i++)
{
cm = new ChartModel();
cm.Name = "Country " + i;
cm.Data1 = 100+i;
lst.Add(cm);
}
return lst;
}




// View





@{
ViewBag.Title = "Bar Chart";
var X = Html.X();
}
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig))

@{
<h3>Bar Chart Sample</h3><br />



@(X.Panel()
.Title("Column Chart")
.Layout(LayoutType.Fit)
.Width(800)
.Height(600)
.AutoScroll(true)
.Items(
X.Chart()
.ID("Chart1")
.Shadow(true)
.StyleSpec("background:#fff;")
.Animate(true)
.Store(X.Store()
.Data(Model)
.Model(X.Model()
.Fields(
X.ModelField().Name("Name"),
X.ModelField().Name("Data1")
)
)
.Proxy(X.AjaxProxy()
.Url(Url.Action("GetData"))
.Reader(X.JsonReader().Root("data"))
)
)
.Axes(
X.NumericAxis()
.Fields("Data1")
.Grid(true)
.Title("Revenue")
.Label(X.AxisLabel()
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
),
X.CategoryAxis()
.Position(Position.Bottom)
.Fields("Name")
.Title("Month of the Year")
.Label(X.AxisLabel()
.Rotate(X.RotateAttribute().Degrees(270))
)

)
.Series(X.ColumnSeries()
.Axis(Position.Left)
.Highlight(true)
.XField("Name")
.YField("Data1")
.Tips(X.ChartTip()
.TrackMouse(true)
.Width(140)
.Height(28)
.Renderer(r => r.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));")
)
.Label(X.SeriesLabel()
.Display(SeriesLabelDisplay.InsideEnd)
.Field(new [] { "Data1" })
.Orientation(Orientation.Horizontal)
.Color("#333")
.TextAnchor("middle")
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0');")
)
)
)
)
}



Thanks

Daniil
Apr 07, 2014, 6:24 PM
Hi @PriceRightHTML5team,

I am afraid a Chart cannot do such scrolling.

But you can organize scrolling for a Panel.

Set up .AutoScroll(true) for the Panel and remove its .Layout(LayoutType.Fit) setting.

Then set up enough width for the Chart and some Height.

PriceRightHTML5team
Apr 08, 2014, 5:43 AM
Hi @PriceRightHTML5team,

I am afraid a Chart cannot do such scrolling.

But you can organize scrolling for a Panel.

Set up .AutoScroll(true) for the Panel and remove its .Layout(LayoutType.Fit) setting.

Then set up enough width for the Chart and some Height.

Thanks Danill, it is working, but is there anyway to set auto width to chart.

Daniil
Apr 08, 2014, 2:47 PM
Depending on the amount of Columns in the Chart? I am afraid there is no such functionality.