Can we show 3 Yvalues on chart control? - asp.net

I have a web application on which there are 2 chart control as follows:
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1"
Height="589px" Width="1109px">
<Series>
<asp:Series Name="Series1" IsValueShownAsLabel="True" LabelAngle="90"
XValueMember="Question" YValueMembers="YesCounter">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY Title="Number of Yes">
</AxisY>
<AxisX Title="Questions" IsLabelAutoFit="False">
<LabelStyle Angle="90" Interval="1" />
</AxisX>
<Position Height="94" Width="50" X="3" Y="3" />
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
and
<asp:Chart ID="Chart2" runat="server" DataSourceID="SqlDataSource2"
Height="589px" Width="1109px">
<Series>
<asp:Series Name="Series1" IsValueShownAsLabel="True" LabelAngle="90"
XValueMember="Question" YValueMembers="NoCounter">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY Title="Number of No">
</AxisY>
<AxisX Title="Questions" IsLabelAutoFit="False">
<LabelStyle Angle="90" Interval="1" />
</AxisX>
<Position Height="94" Width="50" X="3" Y="3" />
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
Now I want to show one single chart that contains questions on the X-axis and a "yes,no" count on the Y-axis. How this can be done?

You can use stacked bar chart. Something like this http://www.dotnetcharting.com/gallery/view.aspx?id=Gallery/a03

Related

Google Chrome not letting ASP.NET Chart Controls render. Throws Error " Website sent an invalid response"!

I am trying to show a chart control, it works fine in IE but it is throwing error "Website sent an invalid response" when loads up in Google Chrome. Suggestions are appreciated. Please help. Thank you. Below is the chart code:
<asp:Chart ID="Chart_1" runat="server" BorderlineColor="Black" style="top: 22px; left: 7000px; position: absolute; z-index: 1; bottom: 280px; width: 320px; height: 305px;" Visible="False">
<Titles>
<asp:Title Font="Lucida Sans Unicode, 11pt" Name="Title1"
Text="Calender Days to Make Repair">
</asp:Title>
</Titles>
<Series>
<asp:Series Name="Series1" ChartType="Line" Color="Black"></asp:Series>
</Series>
<BorderSkin SkinStyle="Emboss"></BorderSkin>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="lightblue" ShadowColor="Transparent" BackGradientStyle="TopBottom" Area3DStyle-Enable3D="true">
<AxisX LineColor="Red">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="LightGray" />
</AxisX>
<AxisY LineColor="Red">
<LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" />
<MajorGrid LineColor="LightGray" />
</AxisY>
<Area3DStyle Rotation="30" Perspective="30" Inclination="15" IsRightAngleAxes="False" WallWidth="0" IsClustered="False" />
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

Pie Chart control in asp.net

Is it possible to reduce the width of data point line in 3D Pie chart graph in asp.net?
Please check the image, you can able to see red color round, i want to reduce width of this line
Please check the code behind it:
style="border-bottom-style: solid; border-bottom-color: #FFFFFF">
<div style="overflow-x: hidden; overflow-y: hidden;" class="body">
<asp:Chart ID="ChartOnBDomesticByLocationType" runat="server"
BackImageTransparentColor="224, 224, 224"
TextAntiAliasingQuality="SystemDefault" BackSecondaryColor="Snow"
BorderlineColor="Silver" BorderlineDashStyle="Solid" BorderlineWidth="2">
<Series>
<asp:Series ChartType="Pie" BorderWidth="4" YValuesPerPoint="10" Name="Series1"
MarkerSize="2" Font="Microsoft Sans Serif, 10pt, style=Bold" IsValueShownAsLabel="True"
BackImageTransparentColor="192, 0, 0" IsXValueIndexed="True" ChartArea="ChartArea3"
Legend="On Board"
CustomProperties="PieLineColor=DimGray, CollectedSliceExploded=True, MinimumRelativePieSize=50, PieLabelStyle=Outside, 3DLabelLineSize=30">
</asp:Series>
<asp:Series ChartType="Pie" BorderWidth="4" YValuesPerPoint="10" Name="Series2"
MarkerSize="2" Font="Microsoft Sans Serif, 10pt, style=Bold" IsValueShownAsLabel="True"
BackImageTransparentColor="192, 0, 0" IsXValueIndexed="True" ChartArea="ChartArea3"
Legend="On Board"
CustomProperties="PieLineColor=LightGray, 3DLabelLineSize=30"
LabelForeColor="White">
<EmptyPointStyle MarkerBorderColor="White" MarkerColor="DimGray"
MarkerSize="1" />
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea3" BorderWidth="7" BackColor="White" BackGradientStyle="TopBottom"
BackImageTransparentColor="128, 128, 255" BackSecondaryColor="White" ShadowColor="RoyalBlue"
>
<AxisY Interval="10" Minimum="0" Maximum="100" TitleFont="Microsoft Sans Serif, 12pt"
TitleForeColor="ForestGreen">
<MajorGrid LineColor="Gray" />
<LabelStyle Format="0" />
</AxisY>
<AxisX LineColor="Red" LineWidth="0" TitleForeColor="Black" >
<MajorGrid LineWidth="0" LineColor="Gray" />
</AxisX>
<%-- <Area3DStyle Inclination="20" PointDepth="12" Rotation="20" LightStyle="None"
WallWidth="10" IsRightAngleAxes="False" Perspective="15" />--%>
</asp:ChartArea>
<asp:ChartArea Name="samplechartarea" BackColor="224, 224, 224" BackGradientStyle="TopBottom"
BackImageTransparentColor="0, 192, 0" BackSecondaryColor="224, 224, 224" ShadowColor="Lime"
Area3DStyle-Enable3D="true">
<AxisY Interval="10" Minimum="0" Maximum="100" TitleFont="Microsoft Sans Serif, 12pt"
IsMarginVisible="False" TitleForeColor="ForestGreen" Title="PreServiceCatalog">
<MajorGrid LineColor="Gray" />
</AxisY>
<AxisX LineColor="Red" LineWidth="0" TitleForeColor="ForestGreen">
<MajorGrid LineWidth="0" LineColor="Gray" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="On Board" Title="Office Location" Docking="Bottom"
Alignment="Center" Font="Microsoft Sans Serif, 9pt, style=Bold"
IsTextAutoFit="False">
</asp:Legend>
</Legends>
<%--<Titles>
<asp:Title Font="Microsoft Sans Serif, 12pt" ShadowOffset="10" Alignment="TopCenter"
IsDockedInsideChartArea="False" ForeColor="Black" DockedToChartArea="ChartArea3"
Name="Title1" Text="Domestic OnBoarding By Location Type" Docking="Top" BackColor="White"
BorderColor="DarkGreen">
<Position Height="5.063335" Width="52.16632" X="4.365" Y="3" />
</asp:Title>
</Titles>--%>
</asp:Chart>
</div>
</td>
</tr>

How to show values on ASP.NET Chart

Here is my chart:
ASP.NET code:
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" Width="752px">
<Series>
<asp:Series Name="Series1" XValueMember="Column2" YValueMembers="Column1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="DarkGray">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
How can I show values on blue boxes?
You can do this from your codebehind:
Chart1.Series["Series1"].IsValueShownAsLabel = true;
You can also do this from your ASPX code:
<asp:Chart ID="Chart1" runat="server" DataSourceID="SqlDataSource1" Width="752px">
<Series>
<asp:Series Name="Series1" XValueMember="Column2" YValueMembers="Column1" IsValueShownAsLabel="true">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderColor="DarkGray">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

Mschart - How to change width between bars

I know how to change the width of the bars using PointWidth which will relatively increase the space between the bars, but I want to keep the same width of the bar while increasing the space between the bars.
<asp:Chart ID="chart" runat="server" Height="300px" Width="850px"
BorderDashStyle="Solid" BorderWidth="2" BackColor="#f0f0f0" Visible="false" EnableViewState="true">
<Legends>
<asp:Legend TitleFont="Microsoft Sans Serif, 8pt, style=Bold" BackColor="Transparent"
Font="Trebuchet MS, 8.25pt, style=Bold" IsTextAutoFit="False" Enabled="False"
Name="Default">
</asp:Legend>
</Legends>
<Series>
<asp:Series Name="s1" Color="#4f81bd" CustomProperties="PointWidth=.6" ChartType="StackedColumn100">
</asp:Series>
<asp:Series Name="s2" Color="#c0504d" CustomProperties="PointWidth=.6" ChartType="StackedColumn100">
</asp:Series>
<asp:Series Name="s3" Color="#9bbb59" CustomProperties="PointWidth=.6" ChartType="StackedColumn100">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" BorderDashStyle="Solid">
<AxisX>
<LabelStyle Enabled="false" />
<MajorTickMark Enabled="false" />
</AxisX>
<AxisY>
<MajorGrid Interval="10" IntervalOffset="10" />
<MajorTickMark Enabled="true" Interval="10" IntervalOffset="10" />
<LabelStyle Format="{#}%" Interval="10" IntervalOffset="10" />
</AxisY>
<Position Y="0" Height="100" Width="100" X="5"></Position>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
Looks like the space between bars is dynamic and not editable. Changing the width of the chart increases the space between the bars.

How do you hide the white border in a Asp.net Chart

How do I hide the white border that appears round the chart using the ASP.NET charting control?
<asp:Chart ID="chtGender" runat="server" BorderSkin-BorderColor="Green" Width="300" Height="350">
<Series>
<asp:Series ChartType="Pie" Palette="EarthTones" ChartArea="MainChartArea">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="MainChartArea" BackColor ="Black" BorderColor = "Black" BorderWidth= "0" Area3DStyle-Enable3D="true">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
I had the same problem and couldnt find a proper solution.
The way I did it was set the borderwidth on the "chartarea" to 20 which overwrote the white border around my pie chart. eg:-
<asp:Chart id="myPieChart" runat="server">
<series>
<asp:Series Name="Series1" ChartType="Pie">
<Points>
<asp:DataPoint YValues="45" />
<asp:DataPoint YValues="34" />
<asp:DataPoint YValues="67" />
</Points>
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1"
BackColor="#E6F1FA"
BorderDashStyle="Solid"
BorderWidth="20"
BorderColor="#E6F1FA">
</asp:ChartArea>
</chartareas>
</asp:Chart>

Resources