PDA

View Full Version : [CLOSED] Bar Chart overlapping the Category Axis when there are only negative values



PriceRightHTML5team
Apr 15, 2014, 10:43 AM
Hi,

I have a bar chart is plotted using positive & negative values, there are some scenario in which bar chart is plotted using negative values.
The issue is, if the bar chart is build with the negative values, it is overlapping the Category Axis and if there is both negative & positive values chart is displaying correctly.

Chart with Positive and Negative values:
9941

Chart with Negative values only.
9951

Here is my sample code:

//Model



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



// Controller



public StoreResult GenerateNegativData()
{
List<ChartModel> lst = new List<ChartModel>();
ChartModel cm = new ChartModel();

//*****To generate bar chart with Positive & negative values uncomment this******//
//cm = new ChartModel();
//cm.Name = "Country - 1";
//cm.Data1 = 96498000;
//lst.Add(cm);

cm = new ChartModel();
cm.Name = "Country - 2";
cm.Data1 = -4289142;
lst.Add(cm);

cm = new ChartModel();
cm.Name = "Country - 3";
cm.Data1 = -4502571;
lst.Add(cm);

cm = new ChartModel();
cm.Name = "Country - 4";
cm.Data1 = -4929428;
lst.Add(cm);

return new StoreResult(lst);
}

public ActionResult NegativeBarChart()
{
return View();
}


// 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)
.Items(
X.Chart()
.ID("Chart1")
.Width(800)
.Height(600)
.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("GenerateNegativData"))
.Reader(X.JsonReader().Root("data"))
)
)
.Axes(
X.NumericAxis()
.Fields("Data1")
.Grid(true)
.Title("Revenue")
.Label(X.AxisLabel().Rotate(X.RotateAttribute().De grees(0))
.Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');")
),
X.CategoryAxis()
.Position(Position.Bottom)
.Fields("Name")
.Title("Scenario")
.Label(X.AxisLabel()
.Rotate(X.RotateAttribute().Degrees(315))
)

)
.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 15, 2014, 4:22 PM
Hi @PriceRightHTML5team,

Yes, it is a problem. I can suggest the following solution.

Ext.chart.axis.Axis.override({
getRange: function() {
var range = this.callParent(arguments);

if (range.max < 0) {
range.max = 1;
}

return range;
}
});

PriceRightHTML5team
Apr 18, 2014, 4:21 AM
Thanks Daniil..

It is working fine.