PDA

View Full Version : [CLOSED] How to change label color for the chart.



tactime10
Feb 15, 2013, 5:13 PM
Hi,

I need to set the color of label for the columnSeries of the chart from codebehind.
I want to set black color but when I run my page I see the white color for the label.
the code when I create a label is below



SeriesLabel seriesLabel = new SeriesLabel();
seriesLabel.Contrast = true;
seriesLabel.Display = SeriesLabelDisplay.InsideEnd;
seriesLabel.Field = new string[]{"defectiveness"};
seriesLabel.TextAnchor = "middle";
seriesLabel.Color = "#000";

columnSeries.Label = seriesLabel;


below there is the complete example.


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

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

<script runat="server">

public void Page_Load() {

FormPanel formPanelLevel = new FormPanel();
formPanelLevel.ID = "formPanelLevel";
formPanelLevel.Border = false;
formPanelLevel.Height = 600;
formPanelLevel.Weight = 300;
formPanelLevel.MarginSpec = "0 5 5 5";
formPanelLevel.Frame = true;
formPanelLevel.BodyPadding = 5;
formPanelLevel.Hidden = false;
formPanelLevel.Collapsed = false;
formPanelLevel.Collapsible = false;
HBoxLayoutConfig hBoxLayoutConfig = new HBoxLayoutConfig();
hBoxLayoutConfig.Align = HBoxAlign.Stretch;
formPanelLevel.LayoutConfig.Add(hBoxLayoutConfig);

formPanelLevel.Show();
formPanelLevel.AddTo(panelContentLevels);
this.panelContentLevels.Show();

Ext.Net.Panel panelLevels = new Ext.Net.Panel();
panelLevels.Flex = 1;
panelLevels.ID = "panelLevels";
panelLevels.Layout = "FitLayout";
panelLevels.Title = "Chart";

Chart chartAnalysisLevel = new Chart();
chartAnalysisLevel.ID = "chartAnalysis";
chartAnalysisLevel.Theme = "CustomThemeAnalysis";
SetUpChartLevels(chartAnalysisLevel);
SetupGradient(chartAnalysisLevel);
panelLevels.Items.Add(chartAnalysisLevel);

chartAnalysisLevel.GetStore().DataSource = CreateItems();
chartAnalysisLevel.DataBind();

panelLevels.AddTo(formPanelLevel);
panelLevels.Show();
}

public void SetupGradient(Chart chartAnalysisLevel) {
Gradient gradientRed = new Gradient();
gradientRed.GradientID = "redColor";
gradientRed.Angle = 0;

GradientStop gradientStopRed1 = new GradientStop();
gradientStopRed1.Offset = 0;
gradientStopRed1.Color = "#e21413";
GradientStop gradientStopRed2 = new GradientStop();
gradientStopRed2.Offset = 0;
gradientStopRed2.Color = "#d82931";

gradientRed.Stops.Add(gradientStopRed1);
gradientRed.Stops.Add(gradientStopRed2);

Gradient gradientOrangeColor = new Gradient();
gradientOrangeColor.GradientID = "orangeColor";
gradientOrangeColor.Angle = 0;

GradientStop gradientStopOrange1 = new GradientStop();
gradientStopOrange1.Offset = 0;
gradientStopOrange1.Color = "#ecbe38";
GradientStop gradientStopOrange2 = new GradientStop();
gradientStopOrange2.Offset = 0;
gradientStopOrange2.Color = "#dc9614";

gradientOrangeColor.Stops.Add(gradientStopOrange1) ;
gradientOrangeColor.Stops.Add(gradientStopOrange2) ;

Gradient gradientGreenColor = new Gradient();
gradientGreenColor.GradientID = "greenColor";
gradientGreenColor.Angle = 0;

GradientStop gradientStopGreen1 = new GradientStop();
gradientStopGreen1.Offset = 0;
gradientStopGreen1.Color = "#3ed730";
GradientStop gradientStopGreen2 = new GradientStop();
gradientStopGreen2.Offset = 0;
gradientStopGreen2.Color = "#3ea830";

gradientOrangeColor.Stops.Add(gradientStopGreen1);
gradientOrangeColor.Stops.Add(gradientStopGreen2);

Gradient gradientBlueColor = new Gradient();
gradientBlueColor.GradientID = "blueColor";
gradientBlueColor.Angle = 0;

GradientStop gradientStopBlue1 = new GradientStop();
gradientStopBlue1.Offset = 0;
gradientStopBlue1.Color = "#4868e7";
GradientStop gradientStopBlue2 = new GradientStop();
gradientStopBlue2.Offset = 0;
gradientStopBlue2.Color = "#3c56bf";

gradientOrangeColor.Stops.Add(gradientStopBlue1);
gradientOrangeColor.Stops.Add(gradientStopBlue2);

chartAnalysisLevel.Gradients.Add(gradientRed);
chartAnalysisLevel.Gradients.Add(gradientOrangeCol or);
chartAnalysisLevel.Gradients.Add(gradientGreenColo r);
chartAnalysisLevel.Gradients.Add(gradientBlueColor );
}

public void SetUpChartLevels(Chart chartAnalysisLevel) {
chartAnalysisLevel.Height = 500;
chartAnalysisLevel.Animate = true;
chartAnalysisLevel.Shadow = true;

Store storeAnalysisLevel = new Store();
storeAnalysisLevel.ID = "storeAnalysisLevel";
storeAnalysisLevel.Reader.Add(new Ext.Net.ArrayReader());

ModelField modelFieldDefectiveness = new ModelField("defectiveness");
ModelField modelFieldPartNumber = new ModelField("partNumber");

Model model = new Model();
model.ID = "modelAnalysis";
model.Fields.Add(modelFieldDefectiveness);
model.Fields.Add(modelFieldPartNumber);

storeAnalysisLevel.Model.Add(model);

NumericAxis numericAxisDefectiveness = new NumericAxis();
numericAxisDefectiveness.Fields = new string[]{"defectiveness"};
numericAxisDefectiveness.Position = Position.Left;
numericAxisDefectiveness.Minimum = 0;

CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.Position = Position.Bottom;
categoryAxis.Fields = new string[]{"partNumber"};

chartAnalysisLevel.Axes.Add(numericAxisDefectivene ss);
chartAnalysisLevel.Axes.Add(categoryAxis);

ColumnSeries columnSeries = new ColumnSeries();
columnSeries.Axis = Position.Left;
columnSeries.Highlight = true;
columnSeries.XField = new string[]{"partNumber"};
columnSeries.YField = new string[]{"defectiveness"};

SeriesLabel seriesLabel = new SeriesLabel();
seriesLabel.Contrast = true;
seriesLabel.Display = SeriesLabelDisplay.InsideEnd;
seriesLabel.Field = new string[]{"defectiveness"};
seriesLabel.TextAnchor = "middle";
seriesLabel.Color = "#000";

columnSeries.Label = seriesLabel;

chartAnalysisLevel.Series.Add(columnSeries);

chartAnalysisLevel.Store.Add(storeAnalysisLevel);
}

public List<object> CreateItems() {
List<object> listDefectivenessItems = new List<object> ();

listDefectivenessItems.Add(new object[]{50.6,25,24,"partnumber1"});
listDefectivenessItems.Add(new object[]{40.6,20,24,"partnumber2"});
listDefectivenessItems.Add(new object[]{55.3,26,22,"partnumber3"});
return listDefectivenessItems;
}

</script>

<body>
<form Method=post Runat="server">
<ext:ResourceManager Id="resourceManager" runat="server" />
<br/>
<h3>Example</h3>
<br/>
<ext:ChartTheme
ID="CustomThemeAnalysisID"
runat="server"
ThemeName="CustomThemeAnalysis"
Colors="url(#orangeColor),url(#redColor),url(#greenColor), url(#blueColor)">
</ext:ChartTheme>

<ext:Panel runat="server" ID="panelContentLevels" Border="false" Hidden="true" >
</ext:Panel>
</form>
</Body>
</Html>


Thank you.

Baidaly
Feb 16, 2013, 12:02 AM
Hello!

This happens due to Contrast property: http://forums.ext.net/showthread.php?20844-OPEN-13-labels-LineSeries-aren-t-shown-into-the-chart&p=90555&viewfull=1#post90555

Try the following:



SeriesLabel seriesLabel = new SeriesLabel();
seriesLabel.Display = SeriesLabelDisplay.InsideEnd;
seriesLabel.Field = new string[]{"defectiveness"};
seriesLabel.TextAnchor = "middle";
seriesLabel.Font = "17px Arial";
seriesLabel.Fill = "#000";

tactime10
Feb 17, 2013, 9:52 AM
Hi

thanks for the reply,

in my code I removed the property Contrast, so ti works and I see the color of the label is black.



SeriesLabel seriesLabel = new SeriesLabel();
seriesLabel.Display = SeriesLabelDisplay.InsideEnd;
seriesLabel.Field = new string[]{"defectiveness"};
seriesLabel.TextAnchor = "middle";
seriesLabel.Color = "#000";

columnSeries.Label = seriesLabel;



thank you so much

Baidaly
May 30, 2013, 6:57 AM
Hello!

The issue appears to be fixed in the SVN trunk. Please update.