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!!
Assuming that this is for a line chart, you can set NullHandling to DontPlot in order to hide null values. Here's a small example:ultraChart1.ChartType = ChartType.LineChart;DataTable dataTable1 = new DataTable();dataTable1.Columns.Add("label", typeof(string));dataTable1.Columns.Add("value", typeof(double));dataTable1.Rows.Add(new object[] { "Value A", null });dataTable1.Rows.Add(new object[] { "Value B", 10 }); dataTable1.Rows.Add(new object[] { "Value C", 25 });dataTable1.Rows.Add(new object[] { "Value D", 20 });dataTable1.Rows.Add(new object[] { "Value E", null });
NumericSeries series = new NumericSeries();series.Data.DataSource = dataTable1;series.Data.LabelColumn = "label";series.Data.ValueColumn = "value";series.DataBind();
ultraChart1.Series.Add(series);ultraChart1.LineChart.NullHandling = NullHandling.DontPlot;
Hi Max, you solution on color to graphics is good, tks. I have other problem and i don't know as do it or explicator, ok this is the problem.
I have the next DataSource:
Value A = Null
Value B = 10
Value C = 25
Value D = 20
Value E = Null
And my graphic the Value RangeMin the Axis Y and Y2 is -10(this is a value real to my graphic), so the value "A" is null the line begin in the value in -10("A") to point "B" that value is 10, the next line is point "B" to "C", the next line is point "C" to "D" and last line as the first line the value is the point "D" to -10 so my value is Null. I only want view the line of the point "B" to "C", "C" to "D". I don't know if you understand me? or You know as do it?. Realy so much thank you, regards.
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>
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"?
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.