I use a dynamic cartesianchart, but when the columns are too many its resize them to fit the chart. But I want the columns to have a minimum column width, otherwise the chart is not readable. The page has 2 panels, in the top one there is the CartesianChart and a PolarChart. I follow this example
Code:
<ext:Panel ID="Panel1" runat="server" Height="250" MarginSpec="0 0 3 0">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:CartesianChart
ID="BarChart1"
runat="server"
Border="true"
Flex="4"
StoreID="storeSites" AutoScroll="true" Resizable="true" >
<Interactions>
<ext:ItemHighlightInteraction />
</Interactions>
<AnimationConfig Duration="300" Easing="EaseOut" />
<Axes>
<ext:NumericAxis Position="Left" Fields="patientstarget" Minimum="0" Hidden="true" />
<ext:CategoryAxis Position="Bottom" Fields="site">
<Label Font="9px Arial" RotationDegrees="-45" />
<Renderer Handler="return Ext.String.ellipsis(label, 15, false);" />
</ext:CategoryAxis>
</Axes>
<Series>
<ext:BarSeries
Highlight="true"
XField="site"
YField="patientstarget" >
<StyleSpec>
<ext:Sprite FillStyle="#456d9f" />
</StyleSpec>
<HighlightConfig>
<ext:Sprite FillStyle="#619fff" StrokeStyle="black" />
</HighlightConfig>
<Label
Display="InsideEnd"
Field="patientstarget"
Color="#000"
Orientation="Vertical"
TextAlign="Center"
/>
<Listeners>
<ItemMouseUp Fn="onMouseUp" />
</Listeners>
</ext:BarSeries>
</Series>
<Plugins>
<ext:ChartItemEvents ID="ChartItemEvents1" runat="server" />
</Plugins>
</ext:CartesianChart>
//PolarChart
</Items>
</ext:Panel>
I am using the Chart component in MS Visual Studio 2010 via System.Web.UI.DataVisualization.Charting. I am having trouble with the column graph, where I want to show label as percentage. The graph shows number of decisions (positive - green, negative - red, neutral - blue) in each month throughtout the whole year. Trouble is that if I use the following commands...
ChartDecisionDyn.Series["Positive"].IsValueShownAsLabel = true;
ChartDecisionDyn.Series["Positive"].Label = "#PERCENT";
...I do not get supposed percentage result. The result shown states number of positive decisions in certain month / number of positive decisions throughout the year, but my desired result is number of positive decisions in certain month / number of total decisions on the certain month. Does anyone have any suggestion? Thanks in advance for any help.
You can see the details of my graph here
Could not see the image for your chart but I did this:
<asp:Chart ID="Chart1" runat="server" DataSourceID="ObjectDataSource1" Width="451px">
<Series>
<asp:Series Name="Series1" XValueMember="Month" YValueMembers="Percentage"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY>
<LabelStyle Format="P0" />
</AxisY>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
OR this:
Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "P0";
and got this:
EDIT: What about this:
<asp:Chart ID="Chart1" runat="server" DataSourceID="ObjectDataSource1" Width="451px">
<Series>
<asp:Series Name="Series1" XValueMember="Month" YValueMembers="Percentage" IsValueShownAsLabel="True" LabelFormat="F2"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY>
<MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
<LabelStyle Format="P0" />
</AxisY>
<AxisX>
<MajorGrid Enabled="False" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DataObjectTypeName="WebApplication9.DataPoint" DeleteMethod="Remove" InsertMethod="Add" SelectMethod="ToArray" TypeName="WebApplication9.DataPointList" UpdateMethod="Add"></asp:ObjectDataSource>
EDIT 2: Adding multiple series.
<asp:Chart ID="Chart1" runat="server" DataSourceID="ObjectDataSource1" Width="499px">
<Series>
<asp:Series Name="Percent" XValueMember="Month" YValueMembers="Percent" IsValueShownAsLabel="True" LabelFormat="P0" Legend="Legend1" YAxisType="Secondary"></asp:Series>
<asp:Series ChartArea="ChartArea1" IsValueShownAsLabel="True" LabelFormat="N0" Legend="Legend1" Name="Positive" XValueMember="Month" YValueMembers="Positive">
</asp:Series>
<asp:Series ChartArea="ChartArea1" IsValueShownAsLabel="True" LabelFormat="N0" Legend="Legend1" Name="Neutral" XValueMember="Month" YValueMembers="Neutral">
</asp:Series>
<asp:Series ChartArea="ChartArea1" IsValueShownAsLabel="True" LabelFormat="F0" Legend="Legend1" Name="Negative" XValueMember="Month" YValueMembers="Negative">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY>
<MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
</AxisY>
<AxisX>
<MajorGrid Enabled="False" />
</AxisX>
<AxisY2>
<MajorGrid LineColor="DarkGray" LineDashStyle="Dot" />
<LabelStyle Format="P0" />
</AxisY2>
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Alignment="Center" Docking="Top" Name="Legend1">
</asp:Legend>
</Legends>
</asp:Chart>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DataObjectTypeName="WebApplication11.DecisionPoint" DeleteMethod="Remove" InsertMethod="Add" SelectMethod="ToArray" TypeName="WebApplication11.DecisionPointList"></asp:ObjectDataSource>
Use ChartDecisionDyn.Series["Positive"].LabelFormat like ChartDecisionDyn.Series["Positive"].LabelFormat="#.00′ %'";
My understanding is that those options are mutually exclusive. The second will overwrite the first. How about setting IsValueShownAsLabel=true and setting the value of the positive point =positive/(positive+negative+neutral)*100
or set series Label="#LABEL" and when adding the point's value also add the point's label equal to positive/(positive+negative+neutral)*100 as a string
I'm trying to get Microsoft Chart controls working on an ASP.NET project. Microsoft have helpfully replaced the samples file with a new version which doesn't include an asp.net code, so I can't look there for help.
On a blank asp.net 4 forms app, if I add the following (or just drag 'Chart' from the toolbar)
<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1"></asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1"></asp:ChartArea>
</ChartAreas>
</asp:Chart>
I get the following error
Server Error in '/' Application.
Stack empty.
Any ideas?
UPDATE:
For those asking, I did try adding data. The following code has the same result
<asp:Chart ID="chtNBAChampionships" runat="server">
<Series>
<asp:Series Name="Championships" YValueType="Int32" ChartType="Column" ChartArea="MainChartArea">
<Points>
<asp:DataPoint AxisLabel="Celtics" YValues="17" />
<asp:DataPoint AxisLabel="Lakers" YValues="15" />
<asp:DataPoint AxisLabel="Bulls" YValues="6" />
<asp:DataPoint AxisLabel="Spurs" YValues="4" />
<asp:DataPoint AxisLabel="76ers" YValues="3" />
<asp:DataPoint AxisLabel="Pistons" YValues="3" />
<asp:DataPoint AxisLabel="Warriors" YValues="3" />
</Points>
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="MainChartArea">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
I found the answer. I needed to manually add the following to my web.config.
<appSettings>
<add key="ChartImageHandler" value="storage=file;timeout=20;" />
</appSettings>
<system.web>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
</assemblies>
</compilation>
</system.web>
<system.webServer>
<handlers>
<add name="ChartImg" verb="*" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
</handlers>
</system.webServer>
For some reason this was not auto-added when dragging in a chart component. When I started a new, blank asp.net app and dragged a chart onto a blank page, this was added.
What I had to do was set the path correctly in the ChartImageHandler appSetting...
<appSettings>
<add key="ChartImageHandler" value="storage=file;timeout=20;dir=C:\Temp\ChartFiles\;" />
</appSettings>
In CRM 2011 I have several records that contain a two-state (nullable boolean) field. I would like to plot a bar chart that counts the number of true and false values over all the records and plot them in the same chart (a bar for 'true' records and a bar for 'false' records).
Here is the modified XML I (originally generated using CRM) and for the life of me I can't figure out how to plot a chart with the 2 values, I have multiple records per month so the horizontal axis is the records cretedOn date (month).
Can anyone exaplin how I would modify the XML to achieve this? Or point me to a resource that explains what to do?
<visualization>
<visualizationid>{CCA96081-E319-E211-B2CA-0800273EE9D1}</visualizationid>
<name>Compliance Stages 1 & 2, Chart 1</name>
<primaryentitytypecode>intellic_suppliersalesprocess</primaryentitytypecode>
<datadescription>
<datadefinition>
<fetchcollection>
<fetch mapping="logical" aggregate="true">
<entity name="intellic_suppliersalesprocess">
<attribute alias="aggregate_column" name="intellic_csvfileimported" aggregate="count" />
<filter>
<condition attribute="intellic_csvfileimported" operator="eq" value="true" />
</filter>
<attribute alias="aggregate_column1" name="intellic_csvfileimported" aggregate="count" />
<filter>
<condition attribute="intellic_csvfileimported" operator="eq" value="false" />
</filter>
<attribute groupby="true" alias="groupby_column" dategrouping="month" name="createdon" />
</entity>
</fetch>
</fetchcollection>
<categorycollection>
<category>
<measurecollection>
<measure alias="aggregate_column" />
</measurecollection>
<measurecollection>
<measure alias="aggregate_column1" />
</measurecollection>
</category>
</categorycollection>
</datadefinition>
</datadescription>
<presentationdescription>
<Chart>
<Series>
<Series IsValueShownAsLabel="True" Color="110, 20, 78" BackGradientStyle="TopBottom" BackSecondaryColor="141, 44, 45" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40"></Series>
<Series IsValueShownAsLabel="True" Color="55, 118, 193" BackGradientStyle="TopBottom" BackSecondaryColor="41, 88, 145" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PointWidth=0.75, MaxPixelPointWidth=40"></Series>
</Series>
<ChartAreas>
<ChartArea BorderColor="White" BorderDashStyle="Solid">
<AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IntervalAutoMode="VariableCount">
<MajorGrid LineColor="239, 242, 246" />
<MajorTickMark LineColor="165, 172, 181" />
<LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
</AxisY>
<AxisX LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181" IntervalAutoMode="VariableCount">
<MajorGrid LineColor="Transparent" />
<LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
</AxisX>
</ChartArea>
</ChartAreas>
<Titles>
<Title Alignment="TopLeft" DockingOffset="-3" Font="{0}, 13px" ForeColor="59, 59, 59"></Title>
</Titles>
</Chart>
</presentationdescription>
<isdefault>false</isdefault>
</visualization>
Any adivce would be much apprecited.
Jack
You need to have two series, and each needs to do an aggregate on the count of records, but for a filtered set of records according to your bit field.
So while a typical two series chart might plot number of new Accounts and number of new Leads (say) in each month, here you want to plot the same entity twice, in each case do a count, but filter the records being counted.
As a useful example to compare against, there is a built-in chart which shows Opportunities as deals won vs deals lost. In this example it does a sum of Actual Revenue for all Opportunities won, and a sum of estimated revenue for Opps lost. You can find this chart and export it, I have pasted below for ease of reference:
<visualization>
<visualizationid>{C1CB81B1-575F-DF11-AE90-00155D2E3002}</visualizationid>
<name>Deals Won vs. Deals Lost By Owner</name>
<description>Shows the amount of revenue for won deals versus lost deals.</description>
<primaryentitytypecode>opportunity</primaryentitytypecode>
<datadescription>
<datadefinition>
<fetchcollection>
<fetch mapping="logical" aggregate="true">
<entity name="opportunity">
<link-entity name="opportunity" from="opportunityid" to="opportunityid" link-type="outer">
<attribute alias="sum_lost" name="estimatedvalue" aggregate="sum"></attribute>
<filter>
<condition attribute="statecode" operator="eq" value="2" />
</filter>
</link-entity>
<link-entity name="opportunity" from="opportunityid" to="opportunityid" link-type="outer">
<attribute alias="sum_won" name="actualvalue" aggregate="sum"></attribute>
<filter>
<condition attribute="statecode" operator="eq" value="1" />
</filter>
</link-entity>
<attribute groupby="true" alias="groupby_column" name="ownerid"></attribute>
</entity>
</fetch>
</fetchcollection>
<categorycollection>
<category>
<measurecollection>
<measure alias="sum_won" />
</measurecollection>
<measurecollection>
<measure alias="sum_lost" />
</measurecollection>
</category>
</categorycollection>
</datadefinition>
</datadescription>
<presentationdescription>
<Chart Palette="None" PaletteCustomColors="97,142,206; 168,203,104; 209,98,96; 142,116,178; 93,186,215; 255,155,83; 148,172,215; 217,148,147; 189,213,151; 173,158,196; 145,201,221; 255,180,138">
<Series>
<Series Name="o:opportunity_statecode,1" Color="149, 189, 66" IsValueShownAsLabel="False" BackGradientStyle="TopBottom" BackSecondaryColor="112, 142, 50" Font="{0}, 9.5px" LabelForeColor="59, 59, 59">
<SmartLabelStyle Enabled="True" />
</Series>
<Series Name="o:opportunity_statecode,2" Color="255,124,31" IsValueShownAsLabel="False" BackGradientStyle="TopBottom" BackSecondaryColor="235,98,0" Font="{0}, 9.5px" LabelForeColor="59, 59, 59">
<SmartLabelStyle Enabled="True" />
</Series>
</Series>
<ChartAreas>
<ChartArea BorderColor="White" BorderDashStyle="Solid">
<AxisY LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181">
<MajorGrid LineColor="239, 242, 246" />
<MajorTickMark LineColor="165, 172, 181" />
<LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
</AxisY>
<AxisX LabelAutoFitMinFontSize="8" TitleForeColor="59, 59, 59" TitleFont="{0}, 10.5px" LineColor="165, 172, 181">
<MajorGrid Enabled="False" />
<MajorTickMark Enabled="False" />
<LabelStyle Font="{0}, 10.5px" ForeColor="59, 59, 59" />
</AxisX>
</ChartArea>
</ChartAreas>
<Titles>
<Title Alignment="TopLeft" DockingOffset="-3" Font="{0}, 13px" ForeColor="0, 0, 0"></Title>
</Titles>
<Legends>
<Legend Alignment="Center" LegendStyle="Table" Docking="Bottom" Font="{0}, 11px" ForeColor="59, 59, 59"></Legend>
</Legends>
</Chart>
</presentationdescription>
<isdefault>false</isdefault>
</visualization>
Notice the "filter" tags in each link-entity? Also see that there are two "measure collections" which define the series, and two entries for the presentation of these eg the colour.
How to set the grid/text colour of an asp:chart?
I'm refering to the colour of the gridlines and the colour of the text on the x and y axis?
Basically I want the black grid and black text below to be shown as white.
In your ChartArea you need to set the X and Y axis colors:
<ChartAreas>
<asp:ChartArea Name="ChartArea1" >
<AxisY>
<MajorGrid LineColor="White" />
<MajorTickMark LineColor="White" />
<LabelStyle ForeColor="White" />
</AxisY>
<AxisX>
<MajorGrid LineColor="White" />
<MajorTickMark LineColor="White" />
<LabelStyle ForeColor="White" />
</AxisX>
</asp:ChartArea>
</ChartAreas>
There are options for MajorGrid, MinorGrid and StripLines. The LabelStyle sets your text.