[CLOSED] Bar Chart scroll issue

[PriceRightHTML5team]

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]

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]

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]

Depending on the amount of Columns in the Chart? I am afraid there is no such functionality.