I really need help creating a chart with dual Y axis. I am getting a simple data from SQL database. The data I'm getting looks like:
Date
Price
TRP Analyst Rating
2009-08-03 00:00:00
119.92
2
2009-08-04 00:00:00
119.6
3
2009-08-05 00:00:00
118.47
2009-08-06 00:00:00
117.38
2009-08-07 00:00:00
119.33
2009-08-10 00:00:00
118.7
2009-08-11 00:00:00
117.79
5
2009-08-12 00:00:00
119.29
2009-08-13 00:00:00
119.58
2009-08-14 00:00:00
118.57
2009-08-17 00:00:00
116.86
1
2009-08-18 00:00:00
117.63
I would like my X-axis to be column "Date", Y1_axis to be "Price" and Y2_axis to be "TRP Analyst Rating".
I've read the posts about this topic but for some reason none of them seem to work for me.
I just tried using ColumnLine chart and it didn't work.
Please Help!!
Try this example:DataTable dt = new DataTable();dt.Columns.Add("Date", typeof(string));dt.Columns.Add("Price", typeof(double));dt.Columns.Add("Rating", typeof(double));
dt.Rows.Add(new object[] { "2009-08-03", 119, 2 });dt.Rows.Add(new object[] { "2009-08-04", 118, 3 });dt.Rows.Add(new object[] { "2009-08-05", 117, 2 });dt.Rows.Add(new object[] { "2009-08-06", 119, 2 });dt.Rows.Add(new object[] { "2009-08-07", 117, 3 });
UltraChart1.ChartType = ChartType.ColumnLineChart;
UltraChart1.ColumnLineChart.ColumnData.DataSource = dt;UltraChart1.ColumnLineChart.ColumnData.IncludeColumn(2, false);UltraChart1.ColumnLineChart.ColumnData.SwapRowsAndColumns = true;
UltraChart1.ColumnLineChart.LineData.DataSource = dt;UltraChart1.ColumnLineChart.LineData.IncludeColumn(1, false);UltraChart1.ColumnLineChart.LineData.SwapRowsAndColumns = true;
UltraChart1.Axis.X2.Visible = false;UltraChart1.Data.DataBind();
This should display a columnline chart with a few rows of data. While this is a decent starting point, I do reccomend using a composite chart for this, because it is more customizable.
Thank you for your response.
I used composite graphs to do this and it worked just like I wanted.
Some of the problems i'm having are:
First, The labels for the X axis is not displaying properly. Here is a snippet of the aspx code:
<igchartprop:AxisItem OrientationType="X_Axis" DataType="String" LineEndCapStyle="NoAnchor" LineDrawStyle="Solid" RangeMin="0" LineColor="Black" RangeType="Automatic" Key="axis5" TickmarkInterval="20" LineThickness="1" Extent="100" LogBase="10" SetLabelAxisType="ContinuousData" RangeMax="0" TickmarkStyle="Percentage" TickmarkPercentage="10" NumericAxisType="Linear">
<StripLines Interval="20" Visible="True">
<PE FillGradientStyle="None" FillOpacity="255" FillStopOpacity="255" ElementType="SolidFill" Fill="Transparent" Hatch="None" Texture="LightGrain" ImageFitStyle="StretchedFit" FillStopColor="Transparent" StrokeOpacity="255" ImagePath="" Stroke="Black" StrokeWidth="1" ImageWrapMode="Tile" TextureApplication="Normal"></PE>
</StripLines>
<ScrollScale Scale="1" Scroll="0" Height="10" Width="15" Visible="False"></ScrollScale>
<MinorGridLines AlphaLevel="255" DrawStyle="Dot" Color="LightGray" Visible="False" Thickness="1"></MinorGridLines>
<MajorGridLines AlphaLevel="255" DrawStyle="Dot" Color="Gainsboro" Visible="True" Thickness="1"></MajorGridLines>
<Labels ItemFormatString="<ITEM_LABEL:MMM-dd-yy>" VerticalAlign="Near" WrapText="False" FontSizeBestFit="True" SeriesFormatString="<SERIES_LABEL:MMM-dd-yy>" ClipText="True" Font="Verdana, 7pt" Flip="False" ItemFormat="ItemLabel" FontColor="Black" Orientation="VerticalLeftFacing" Visible="True" OrientationAngle="0" HorizontalAlign="Center">
<SeriesLabels Font="Microsoft Sans Serif, 7.8pt" Visible="True" HorizontalAlign="Near" FontSizeBestFit="True" ClipText="True" FormatString="<SERIES_LABEL>" Orientation="Horizontal" WrapText="False" Flip="False" FontColor="Black" VerticalAlign="Center" OrientationAngle="0"></SeriesLabels>
</Labels>
<TimeAxisStyle TimeAxisStyle="Continuous"></TimeAxisStyle>
<Margin>
<Far MarginType="Percentage" Value="0"></Far>
<Near MarginType="Percentage" Value="0"></Near>
</Margin>
</igchartprop:AxisItem>
What am I doing wrong? I even tried to set it in the code behind:
UltraChart1.CompositeChart.ChartAreas.Item(0).Axes.Item(1).TickmarkIntervalType = AxisIntervalType.Ticks
UltraChart1.CompositeChart.ChartAreas.Item(0).Axes.Item(1).TickmarkInterval = 1
UltraChart1.CompositeChart.ChartAreas.Item(0).Axes.Item(2).Labels.ItemFormatString =
"ITEM_FORMAT:MMM-dd-yy"
Second, I can't get the lables on the right and left of the chart to display:
Here is how i'm trying to set it:
UltraChart1.TitleLeft.Text =
"Price"
UltraChart1.TitleLeft.VerticalAlign = Drawing.StringAlignment.Center
UltraChart1.TitleRight.Text =
"TRP Analyst Rating"
UltraChart1.TitleRight.VerticalAlign = Drawing.StringAlignment.Center
Any Help will be appreciated!!
Thanks in advance!
Which type of layer are you displaying? If you want a time axis, it has to be a line layer. Also, for time axis, you have to supply NumericTimeSeries as your data. Otherwise, the date labels are treated as strings.
For your title properties, I think you just have to set Visible to true.
The data for the X-axis is of type Date.
I set the DataType to be "String", SetLableAxisType to be "ContinuousData".
The ItemFormatString is "MMM-dd-yy" but the labels on the X-axis is displayed as the full date string i.e. "05/14/2010 12:00:00 AM"
How do I get to display the X-axis lable as "05-14-10"?
You will have to use a NumericTimeSeries with an x axis of type Time. You will also have to host both layers on a separate set of x axes. The column layer should remain on the string x axis and the line layer should be on a time x axis. Here's an example of a line layer on a time axis.
<igchart:UltraChart ID="UltraChart1" runat="server" ChartType="Composite" EmptyChartText="Data Not Available. Please call UltraChart.Data.DataBind() after setting valid Data.DataSource" Version="9.2"> <CompositeChart> <Series> <igchartprop:NumericTimeSeries Key="series1" Label="series"> <points> <igchartprop:NumericTimeDataPoint Label="item1" NumericValue="4" TimeValue="08/01/2010 13:47:31"> <pe elementtype="None" /> </igchartprop:NumericTimeDataPoint> <igchartprop:NumericTimeDataPoint Label="item2" NumericValue="1" TimeValue="08/02/2010 13:47:34"> <pe elementtype="None" /> </igchartprop:NumericTimeDataPoint> <igchartprop:NumericTimeDataPoint Label="item3" NumericValue="6" TimeValue="08/03/2010 13:47:37"> <pe elementtype="None" /> </igchartprop:NumericTimeDataPoint> <igchartprop:NumericTimeDataPoint Label="item4" NumericValue="4" TimeValue="08/04/2010 13:47:39"> <pe elementtype="None" /> </igchartprop:NumericTimeDataPoint> </points> </igchartprop:NumericTimeSeries> </Series> <ChartLayers> <igchartprop:ChartLayerAppearance AxisXKey="axis1" AxisYKey="axis2" ChartAreaKey="area1" ChartType="LineChart" Key="chartLayer1" SeriesList="series1"> <ChartTypeAppearances> <igchartprop:LineChartAppearance> </igchartprop:LineChartAppearance> </ChartTypeAppearances> </igchartprop:ChartLayerAppearance> </ChartLayers> <ChartAreas> <igchartprop:ChartArea Key="area1"> <Axes> <igchartprop:AxisItem DataType="Time" Key="axis1" OrientationType="X_Axis" SetLabelAxisType="GroupBySeries" TickmarkInterval="0"> <TimeAxisStyle TimeAxisStyle="Discrete" /> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels HorizontalAlign="Center" ItemFormatString="<ITEM_LABEL:MMM-dd-yy>" Orientation="Horizontal" VerticalAlign="Near"> <SeriesLabels HorizontalAlign="Center" Orientation="Horizontal" VerticalAlign="Center"> </SeriesLabels> </Labels> </igchartprop:AxisItem> <igchartprop:AxisItem DataType="Numeric" Key="axis2" OrientationType="Y_Axis" SetLabelAxisType="GroupBySeries" TickmarkInterval="0"> <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="<DATA_VALUE:00.##>" Orientation="Horizontal" VerticalAlign="Center"> <SeriesLabels HorizontalAlign="Center" Orientation="Horizontal" VerticalAlign="Center"> </SeriesLabels> </Labels> </igchartprop:AxisItem> </Axes> <GridPE ElementType="None" /> </igchartprop:ChartArea> </ChartAreas> </CompositeChart> <Axis> <PE ElementType="None" Fill="Cornsilk" /> <X LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="True"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" ItemFormatString="<ITEM_LABEL>" Orientation="VerticalLeftFacing" VerticalAlign="Center"> <SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" FormatString="" HorizontalAlign="Near" Orientation="VerticalLeftFacing" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </X> <Y LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="True"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Far" ItemFormatString="<DATA_VALUE:00.##>" Orientation="Horizontal" VerticalAlign="Center"> <SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" FormatString="" HorizontalAlign="Far" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Y> <Y2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near" ItemFormatString="<DATA_VALUE:00.##>" Orientation="Horizontal" VerticalAlign="Center" Visible="False"> <SeriesLabels Font="Verdana, 7pt" FontColor="Gray" FormatString="" HorizontalAlign="Near" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Y2> <X2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Far" ItemFormatString="<ITEM_LABEL>" Orientation="VerticalLeftFacing" VerticalAlign="Center" Visible="False"> <SeriesLabels Font="Verdana, 7pt" FontColor="Gray" FormatString="" HorizontalAlign="Far" Orientation="VerticalLeftFacing" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </X2> <Z LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" ItemFormatString="" Orientation="Horizontal" VerticalAlign="Center"> <SeriesLabels Font="Verdana, 7pt" FontColor="DimGray" HorizontalAlign="Near" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Z> <Z2 LineThickness="1" TickmarkInterval="0" TickmarkStyle="Smart" Visible="False"> <MajorGridLines AlphaLevel="255" Color="Gainsboro" DrawStyle="Dot" Thickness="1" Visible="True" /> <MinorGridLines AlphaLevel="255" Color="LightGray" DrawStyle="Dot" Thickness="1" Visible="False" /> <Labels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near" ItemFormatString="" Orientation="Horizontal" VerticalAlign="Center" Visible="False"> <SeriesLabels Font="Verdana, 7pt" FontColor="Gray" HorizontalAlign="Near" Orientation="Horizontal" VerticalAlign="Center"> <Layout Behavior="Auto"> </Layout> </SeriesLabels> <Layout Behavior="Auto"> </Layout> </Labels> </Z2> </Axis> <Effects> <Effects> <igchartprop:GradientEffect /> </Effects> </Effects> <ColorModel AlphaLevel="150" ColorBegin="Pink" ColorEnd="DarkRed" ModelStyle="CustomLinear"> </ColorModel> <Tooltips Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" /></igchart:UltraChart>