Hello, I have a whole bunch of charts which I'm trying to standardize to have similar size, look and feel, but it proved to be a very challenging task. Basically I need to make sure that all axis are lined up, the axis labels have the same font and size and also I need be able to change the green line in chart 1 from green to red (see the image below).
So there are 2 questions:
1. I'm using the Harvest theme for the website and all controls seem to be inherit from that theme just fine, and just the charts are all over the place, so is there a way to make them all look like they are part of the same application design wise?
2. How do I change the green line in chart 1 from green to red. Here is the ASP.NET code below for Chart #1:
<Header Text="HISTORICAL RETURNS">
<ExpandedAppearance>
<Styles ForeColor="#727484" Font-Size="10px">
</Styles>
</ExpandedAppearance>
<HoverAppearance>
<Styles BackColor="DarkGray">
</HoverAppearance>
</Header>
<Template>
<igchart:UltraChart ID="UltraChart1" runat="server" BackgroundImageFileName="" BorderColor="Silver"
BorderWidth="0px" ChartType="Composite" EmptyChartText="Data Not Available. Please call UltraChart.Data.DataBind() after setting valid Data.DataSource" Version="9.1" Width="450px">
<ColorModel AlphaLevel="150" ColorBegin="Pink" ColorEnd="#c04f15" ModelStyle="CustomLinear">
</ColorModel>
<CompositeChart>
<ChartLayers>
<igchartprop:ChartLayerAppearance AxisXKey="axis1" AxisYKey="axis2" ChartAreaKey="area1"
ChartType="ColumnChart" Key="chartLayer1">
<ChartTypeAppearances>
<igchartprop:ColumnChartAppearance>
</igchartprop:ColumnChartAppearance>
</ChartTypeAppearances>
</igchartprop:ChartLayerAppearance>
<igchartprop:ChartLayerAppearance AxisXKey="axis3" AxisYKey="axis2" ChartAreaKey="area1" ChartType="LineChart" Key="chartLayer2">
<igchartprop:PaintElement Fill="Red" />
<igchartprop:LineChartAppearance StartStyle="NoAnchor" DrawStyle="Solid">
</igchartprop:LineChartAppearance>
</ChartLayers>
<ChartAreas>
<igchartprop:ChartArea Key="area1">
<Axes>
<igchartprop:AxisItem Extent ="30" DataType="String" Key="axis1"
OrientationType="X_Axis" SetLabelAxisType="GroupBySeries"
TickmarkInterval="3" Visible="False" LineThickness="1" LineColor="Red">
<MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1"
Visible="True" />
<MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1"
Visible="False" />
<Labels HorizontalAlign="Near" ItemFormatString="<ITEM_LABEL>" Orientation="VerticalLeftFacing"
VerticalAlign="Center" Font="Calibri, 8pt">
<SeriesLabels HorizontalAlign="Center" Orientation="Horizontal" VerticalAlign="Center">
</SeriesLabels>
</Labels>
</igchartprop:AxisItem>
<igchartprop:AxisItem DataType="Numeric" Key="axis2" OrientationType="Y_Axis" SetLabelAxisType="GroupBySeries"
TickmarkInterval="0" LineThickness="1">
<Labels HorizontalAlign="Near" ItemFormatString="<DATA_VALUE:0.00%>" Orientation="Horizontal"
<igchartprop:AxisItem Extent="30" DataType="Time" Key="axis3"
TickmarkInterval="3" LineThickness="1">
<Labels HorizontalAlign="Center" ItemFormatString="<ITEM_LABEL:MMM-yy>"
Orientation="VerticalLeftFacing" VerticalAlign="Near" Font="Calibri, 8pt">
<SeriesLabels HorizontalAlign="Center" VerticalAlign="Center"
Orientation="Horizontal">
</Axes>
<GridPE ElementType="None" />
</igchartprop:ChartArea>
</ChartAreas>
</CompositeChart>
<Axis>
<PE ElementType="None" Fill="Cornsilk" />
<X LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="True">
<Labels Font="Calibri, 8pt" FontColor="DimGray" HorizontalAlign="Near" ItemFormatString="<ITEM_LABEL>"
Orientation="VerticalLeftFacing" VerticalAlign="Center">
<SeriesLabels Font="Calibri, 8pt" FontColor="DimGray" FormatString="" HorizontalAlign="Near"
<Layout Behavior="Auto">
</Layout>
</X>
<Y LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="True">
<Labels Font="Calibri, 8pt" FontColor="DimGray" HorizontalAlign="Far" ItemFormatString="<DATA_VALUE:00.##>"
Orientation="Horizontal" VerticalAlign="Center">
<SeriesLabels Font="Calibri, 8pt" FontColor="DimGray" FormatString="" HorizontalAlign="Far"
</Y>
<Y2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False">
<Labels Font="Calibri, 8pt" FontColor="Gray" HorizontalAlign="Near" ItemFormatString="<DATA_VALUE:00.##>"
Orientation="Horizontal" VerticalAlign="Center" Visible="False">
<SeriesLabels Font="Calibri, 8pt" FontColor="Gray" FormatString="" HorizontalAlign="Near"
</Y2>
<X2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False">
<Labels Font="Calibri, 8pt" FontColor="Gray" HorizontalAlign="Far" ItemFormatString="<ITEM_LABEL>"
Orientation="VerticalLeftFacing" VerticalAlign="Center" Visible="False">
<SeriesLabels Font="Calibri, 8pt" FontColor="Gray" FormatString="" HorizontalAlign="Far"
</X2>
<Z LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False">
<Labels Font="Calibri, 8pt" FontColor="DimGray" HorizontalAlign="Near" ItemFormatString=""
<SeriesLabels Font="Calibri, 8pt" FontColor="DimGray" HorizontalAlign="Near" Orientation="Horizontal"
VerticalAlign="Center">
</Z>
<Z2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False">
<Labels Font="Calibri, 8pt" FontColor="Gray" HorizontalAlign="Near" ItemFormatString=""
<SeriesLabels Font="Calibri, 8pt" FontColor="Gray" HorizontalAlign="Near" Orientation="Horizontal"
</Z2>
</Axis>
<Effects>
<igchartprop:GradientEffect />
</Effects>
<Border Thickness="0" />
<Tooltips Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False"
Font-Underline="False" />
</igchart:UltraChart>
</Template>
Thanks a lot!
riskai said:1. I'm using the Harvest theme for the website and all controls seem to be inherit from that theme just fine, and just the charts are all over the place, so is there a way to make them all look like they are part of the same application design wise?
Infragistics Web Controls' themes are based on CSS, which wouldn't have an effect on the charts, since they are image-based. The WebChart has a number of style presets available, but they are not related to the theme settings you see on our other web controls.
riskai said:2. How do I change the green line in chart 1 from green to red.
There are several ways to achieve this. The simplest is to add a Red PaintElement to the PEs collection of the NumericSeries represented by that line.
Yes, I understand that charts are images and hence cannot be "themed", however, can you please provide an example of how to achieve a universal look for the charts in the example above by, for example, applying a similar gradient color effect on the charts background, and making sure the coordinates take up the whole space.
riskai said:however, can you please provide an example of how to achieve a universal look for the charts in the example above
you could initialize each chart by loading a preset (using the LoadPreset method), but this would have to be done before any other settings are applied.
riskai said:applying a similar gradient color effect on the charts background
this can be done using the BackgroundImage property of the chart.
riskai said:and making sure the coordinates take up the whole space
i'm not exactly sure what this means, but my best guess is that you need to decrease the Axis.X.Extent property on some charts to move the X-axis closer to the bottom edge.
Thanks, one more questions for Chart #3 (line chart). When there are a lot of points in the chart's series, the labels on the X axis (dates) disappear. Is there a way to deal with that issue?
Thanks
you could set Axis.X.Labels.Layout.Behavior = None, but that might result in some overlapping labels. probably the best solution is to set the Axis.X.TickmarkStyle = DataInterval, and set the Axis.X.TickmarkInterval and Axis.X.TickmarkIntervalType as well.