Jul 22, 2014, 5:04 PM
[CLOSED] Column chart legend not showing correct color incase of merged chart
Scenario: - One column and two line chart in single graph
Issue: - Legend of column chart is not showing the corresponding color from graph. It is taking the color of line series.
I tried finding solution from other existing threads in the forum and implemented the override method of column series as suggested in one of the other thread. However, after that it is only taking color of one column for both legends.
Please find attached the images for reference.
Below is the code for same: -
Model: -
Issue: - Legend of column chart is not showing the corresponding color from graph. It is taking the color of line series.
I tried finding solution from other existing threads in the forum and implemented the override method of column series as suggested in one of the other thread. However, after that it is only taking color of one column for both legends.
Please find attached the images for reference.
Below is the code for same: -
Model: -
namespace Widgets
{
public class DummyDTO
{
public int Year { get; set; }
public int Initial_Count { get; set; }
public int Final_Count { get; set; }
public int Full_time_Salary { get; set; }
public int Part_time_Hourly { get; set; }
public static List<DummyDTO> GetDummyData()
{
List<DummyDTO> list = new List<DummyDTO>();
list.Add(new DummyDTO() { Year = 2005, Initial_Count = 7, Final_Count = 54, Full_time_Salary = 75, Part_time_Hourly = 19 });
list.Add(new DummyDTO() { Year = 2006, Initial_Count = 10, Final_Count = 82, Full_time_Salary = 197, Part_time_Hourly = 37 });
list.Add(new DummyDTO() { Year = 2007, Initial_Count = 17, Final_Count = 89, Full_time_Salary = 329, Part_time_Hourly = 59 });
list.Add(new DummyDTO() { Year = 2008, Initial_Count = 14, Final_Count = 156, Full_time_Salary = 509, Part_time_Hourly = 114 });
list.Add(new DummyDTO() { Year = 2009, Initial_Count = 33, Final_Count = 242, Full_time_Salary = 841, Part_time_Hourly = 208 });
list.Add(new DummyDTO() { Year = 2010, Initial_Count = 37, Final_Count = 315, Full_time_Salary = 1231, Part_time_Hourly = 312 });
list.Add(new DummyDTO() { Year = 2011, Initial_Count = 30, Final_Count = 506, Full_time_Salary = 1815, Part_time_Hourly = 498 });
list.Add(new DummyDTO() { Year = 2012, Initial_Count = 48, Final_Count = 527, Full_time_Salary = 2453, Part_time_Hourly = 687 });
list.Add(new DummyDTO() { Year = 2013, Initial_Count = 0, Final_Count = 3, Full_time_Salary = 2452, Part_time_Hourly = 683 });
list.Add(new DummyDTO() { Year = 2014, Initial_Count = 0, Final_Count = 0, Full_time_Salary = 2440, Part_time_Hourly = 683 });
return list;
}
}
}
JavaScript: -Ext.chart.series.Column.override({
getLegendColor: function (index) {
var me = this,
colorLength = me.colorArrayStyle.length;
if (me.style && me.style.fill) {
return me.style.fill;
}
else {
return me.colorArrayStyle[me.seriesIdx % colorLength];
}
}
});
View: -@model List<Widgets.DummyDTO>
@{
var X = Html.X();
}
@(Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig).RenderStyles(ResourceLocationType.None))
@(X.Container()
.ID("container_DummyTalentChart")
.Height(320)
.Margin(0).Padding(0)
.Items(
X.Container().ID("container_DummyTalentChart2").Layout(LayoutType.Fit).Height(300).Items(
X.Chart()
.ID("DummyTalentChart")
.Shadow(true)
.StyleSpec("background:#fff;")
.Animate(true)
.LegendConfig(X.ChartLegend().Position(LegendPosition.Bottom))
.Store(X.Store()
.ID("DummyTalenAcqStore")
.Data(Model)
.Model(X.Model()
.Fields(
X.ModelField().Name("Year"),
X.ModelField().Name("Initial_Count"),
X.ModelField().Name("Final_Count"),
X.ModelField().Name("Full_time_Salary"),
X.ModelField().Name("Part_time_Hourly")
)
)
)
.Axes(
X.NumericAxis()
.Fields(new[] { "Initial_Count", "Final_Count" })
.Title("Acquisition Count (Initial & Final)")
.LabelTitle(X.SpriteAttributes().Font("bold 12px Arial;"))
.Position(Position.Left)
.MajorTickSteps(5)
.Label(X.AxisLabel().Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');") ),
X.CategoryAxis()
.Position(Position.Bottom)
.Fields("Year"),
X.NumericAxis()
.Title("EE Type")
.LabelTitle(X.SpriteAttributes().Font("bold 12px Arial;"))
.Fields(new[] { "Full_time_Salary","Part_time_Hourly" })
.Grid(true)
.Position(Position.Right)
.MajorTickSteps(5)
.Label(X.AxisLabel().Renderer(r => r.Handler = "return Ext.util.Format.number(value, '0,0');"))
)
.Series(
X.LineSeries()
.SeriesID("LineSeriesInitialCount")
.Axis(Position.Left)
.Smooth(3)
.XField("Year")
.YField("Initial_Count")
.HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
.MarkerConfig(new SpriteAttributes { Type = SpriteType.Circle, Size = 4, Radius = 4, StrokeWidth = 0 })
.Tips(X.ChartTip()
.TrackMouse(true)
.Width(80)
.Height(25)
.Renderer(r => r.Handler = "this.setTitle(storeItem.get('Year') + ': ' + storeItem.get('Initial_Count'));")
),
X.LineSeries()
.SeriesID("LineSeriesFinalCount")
.Axis(Position.Left)
.Smooth(3)
.XField("Year")
.YField("Final_Count")
.HighlightConfig(new SpriteAttributes { Size = 7, Radius = 7 })
.MarkerConfig(new SpriteAttributes { Type = SpriteType.Circle, Size = 4, Radius = 4, StrokeWidth = 0 })
.Tips(X.ChartTip()
.TrackMouse(true)
.Width(80)
.Height(25)
.Renderer(r => r.Handler = "this.setTitle(storeItem.get('Year') + ': ' + storeItem.get('Final_Count'));")
),
X.ColumnSeries()
.SeriesID("TalentClassificationColumnSeries")
.Axis(Position.Right)
.XField("Year")
.YField(new[] { "Full_time_Salary", "Part_time_Hourly" })
.Tips(Html.X().ChartTip()
.TrackMouse(true)
.Width(100)
.Height(25)
)
)
)
)
)
Last edited by Daniil; Jul 23, 2014 at 1:29 PM.
Reason: [CLOSED]