Label on the Chart using Microsoft Chart controls - asp.net

I am creating a 3d chart using Microsoft Chart controls. Here is the image:
(source: highoncoding.com)
I want to show the point on the top of each bar graph. Like for Exam 1 on top of bar chart it should show 2 (as in 2 points) etc.
Here is the code:
private void BindData() {
var exams = new List<Exam>()
{
new Exam() { Name = "Exam 1", Point = 10 },
new Exam() { Name = "Exam 2", Point = 12 },
new Exam() { Name = "Exam 3", Point = 15 },
new Exam() { Name = "Exam 4", Point = 2 }
};
var series = ExamsChart.Series["ExamSeries"];
series.YValueMembers = "Point";
series.XValueMember = "Name";
//series.MarkerStyle = System.Web.UI.DataVisualization.Charting.MarkerStyle.Circle;
//series.MarkerSize = 20;
//series.LegendText = "hellow";
//series.Label = "something";
var chartAreas = ExamsChart.ChartAreas["ChartArea1"];
ExamsChart.DataSource = exams;
ExamsChart.DataBind();
}
and here is the html code:
<asp:Chart ID="ExamsChart" Width="600" Height="320" runat="server">
<Titles>
<asp:Title Text="Exam Report" />
</Titles>
<Series>
<asp:Series Name="ExamSeries" ChartType="Column">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<Area3DStyle Enable3D="true" WallWidth="10" />
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
UPDATE:
Here is the answer:
foreach (var exam in exams) {
var point = new DataPoint();
point.SetValueXY(exam.Name, exam.Point);
point.Label = exam.Name;
series.Points.Add(point);
}

Directly from the MS chart samples:
// Show data points values as labels
chart1.Series["Series1"].IsValueShownAsLabel = true;
// Set data point label
chart1.Series["Series1"].Points[2].Label = "My Point Label\nLabel Line #2";

Related

Table header column background color not changing

I am using ASPOSE Slides in my project to perform a PPT task. I want to change my table header background-color but I have not found any solutions in Aspose forum for it. Can anybody provide me with the solution?
ISlide sld = press.Slides[0];
double[] dblCols = { 250, 250};
double[] dblRows = { 70, 70, 70,70 };
// Add table shape to slide
ITable tbl = sld.Shapes.AddTable(100, 100, dblCols, dblRows);
tbl[0, 1].TextFrame.Text = "some text";
tbl[0, 2].TextFrame.Text = "some text";
tbl[0, 3].TextFrame.Text = "some text";
tbl[0, 3].BorderBottom.FillFormat.FillType = FillType.Solid;
tbl[0, 3].FillFormat.SolidFillColor.BackgroundColor = Color.Blue;
tbl[0,3].BorderBottom.Width = 2;
Portion portion = (Portion)tbl[0, 1].TextFrame.Paragraphs[0].Portions[0];
portion.PortionFormat.FillFormat.FillType = FillType.Solid;
portion.PortionFormat.FillFormat.SolidFillColor.Color = Color.Black;
}
I have observed you requirements related to setting table header background. Please try using following sample code that has example of setting fill color for one of header row cell. You can replicate the same for other cells too.
public static void TestTableBackground()
{
Presentation press = new Presentation();
ISlide sld = press.Slides[0];
double[] dblCols = { 250, 250 };
double[] dblRows = { 70, 70, 70, 70 };
// Add table shape to slide
ITable tbl = sld.Shapes.AddTable(100, 100, dblCols, dblRows);
tbl[0, 1].TextFrame.Text = "some text";
tbl[0, 2].TextFrame.Text = "some text";
tbl[0, 3].TextFrame.Text = "some text";
tbl[0, 0].FillFormat.FillType = FillType.Solid;
tbl[0, 0].FillFormat.SolidFillColor.Color = Color.Blue;
Portion portion = (Portion)tbl[0, 1].TextFrame.Paragraphs[0].Portions[0];
portion.PortionFormat.FillFormat.FillType = FillType.Solid;
portion.PortionFormat.FillFormat.SolidFillColor.Color = Color.Black;
press.Save(#"C:\Aspose Data\TableFormat.pptx", Aspose.Slides.Export.SaveFormat.Pptx);
}
I am working as Support developer/ Evangelist at Aspose.

AmCharts not displayed when adding website to local IIS

I created asp.net webform project including amcharts using visual studio. Everything works when I run project. But when I publish it on a local IIS (current version is 7 - windows 7 64 bit) it is not displayed. I googled a bit but not found a solution yet. (One of them was Setting up IIS for correctly handling SVG files, but it also didn't help.) Is anybody faced this problem?
I use Chrome. When I run project it works. But not works after deploying to IIS.
Here is code I reduced additional parts.
Visual basic.Net code that gets data from SQL and creates string of JS function
Protected Sub btn1_Click(sender As Object, e As EventArgs) Handles btn1.Click
comm.CommandText = "Select DateMeasr, data1, data2 from dbo.Measurements where DateMeasr>'2017-06-13 12:04:30' and DateMeasr<'2017-06-13 17:00:00' Order by DateMeasr"
If conn.State <> ConnectionState.Open Then conn.Open()
da.Fill(dtC)
If dtC.Rows.Count > 0 Then
DataCollect()
End If
End Sub
Protected Sub DataCollect()
Dim sb As New StringBuilder
Dim strtime As DateTime
sb.Append("<script type=""text/javascript"">")
sb.Append("function generateChartData() {")
For i = 0 To dtC.Rows.Count - 1
strtime = CDate(dtC.Rows(i).Item(0))
sb.Append("var newDate = new Date(" + strtime.Year.ToString + ", " + (strtime.Month - 1).ToString + ", " + strtime.Day.ToString + ", " + strtime.Hour.ToString + ", " + strtime.Minute.ToString + ", " + strtime.Second.ToString + ");")
sb.Append("var data1 = " + dtC.Rows(i).Item(1).ToString + ";")
sb.Append("var data2 = " + dtC.Rows(i).Item(2).ToString + ";")
sb.Append("chartData1.push({")
sb.Append("date: newDate,")
sb.Append("data1: data1,")
sb.Append("data2: data2")
sb.Append("});")
Next
sb.Append("}")
sb.Append("</script>")
ScriptManager.RegisterStartupScript(btn1, btn1.GetType, "teststring", sb.ToString, False)
End Sub
Javascript function to create Amchart
<script type="text/javascript">
var chart1;
var chartData1 = [];
AmCharts.ready(function () {
chart1 = new AmCharts.AmSerialChart();
chart1.dataProvider = chartData1;
chart1.dataDateFormat = "YYYY-MM-DD, JJ:NN:SS";
chart1.categoryField = "date";
chart1.rotate = true;
chart1.autoMargins = false;
chart1.marginLeft = 85;
chart1.marginTop = 200;
chart1.pathToImages = "https://www.amcharts.com/lib/3/images/";
chart1.synchronizeGrid = true; // this makes all axes grid to be at the same intervals
// AXES
// category
var categoryAxis1 = chart1.categoryAxis;
categoryAxis1.parseDates = true; // as our data is date-based, we set parseDates to true
categoryAxis1.minPeriod = "ss";
categoryAxis1.minorGridEnabled = true;
categoryAxis1.axisColor = "#DADADA";
categoryAxis1.twoLineMode = true;
categoryAxis1.dateFormats = [{
period: 'fff',
format: 'JJ:NN:SS'
}, {
period: 'ss',
format: 'JJ:NN:SS'
}, {
period: 'mm',
format: 'JJ:NN'
}, {
period: 'hh',
format: 'JJ:NN'
}, {
period: 'DD',
format: 'DD'
}, {
period: 'WW',
format: 'DD'
}, {
period: 'MM',
format: 'MMMM'
}, {
period: 'YYYY',
format: 'YYYY'
}];
// first value axis (on the left)
var valueAxis1 = new AmCharts.ValueAxis();
valueAxis1.offset = 175;
valueAxis1.position = "right";
valueAxis1.axisColor = "#04a016";
valueAxis1.axisThickness = 2;
chart1.addValueAxis(valueAxis1);
var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.offset = 125;
valueAxis2.position = "right";
valueAxis2.axisColor = "#ea0e19";
valueAxis2.axisThickness = 2;
chart1.addValueAxis(valueAxis2);
// GRAPHS
// first graph
var graph1 = new AmCharts.AmGraph();
graph1.valueAxis = valueAxis1; // we have to indicate which value axis should be used
graph1.lineColor = valueAxis1.axisColor;
graph1.title = "data1graph";
graph1.valueField = "data1";
graph1.hideBulletsCount = 30;
graph1.bulletBorderThickness = 1;
graph1.lineThickness = 2;
chart1.addGraph(graph1);
var graph2 = new AmCharts.AmGraph();
graph2.valueAxis = valueAxis2; // we have to indicate which value axis should be used
graph2.lineColor = valueAxis2.axisColor;
graph2.title = "data2graph";
graph2.valueField = "data2";
graph2.hideBulletsCount = 30;
graph2.bulletBorderThickness = 1;
graph2.lineThickness = 2;
chart1.addGraph(graph2);
// CURSOR
var chartCursor1 = new AmCharts.ChartCursor();
chartCursor1.cursorAlpha = 0.1;
chartCursor1.fullWidth = true;
chartCursor1.valueLineBalloonEnabled = true;
chart1.addChartCursor(chartCursor1);
// SCROLLBAR
var chartScrollbar1 = new AmCharts.ChartScrollbar();
chart1.addChartScrollbar(chartScrollbar1);
// LEGEND
var legend1 = new AmCharts.AmLegend();
legend1.markerLabelGap = 3;
legend1.spacing = 1;
legend1.position = "absolute";
legend1.position = "top";
chart1.addLegend(legend1);
});
function clicktodrawchart()
{
generateChartData();
chart1.write("chartdiv1");
}
</script>
Asp.net tags for buttons and div that show chart
<div>
<ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
<HeaderTemplate>
Charts<br />
</HeaderTemplate>
<ContentTemplate>
<br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn1" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" ID="btn1" Text="Get data from DB" />
</ContentTemplate>
</asp:UpdatePanel>
<br />
<input id="btnforchart" value="Click to draw charts" type="button" style="color: black; font-size:15px; padding:4px;" onclick="clicktodrawchart()" />
<div id="chartdiv1" style="width: 400px; height: 1000px; position: absolute; top: 260px; left: 40px; border: 2px solid #9ccfed;"></div>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</div>

Set label to X-values on a chart ASP.NET

I have a chart in ASP.NET (.NET 3.5) that contains 3 series. The date is filled dynamic in code. How can I set a label to each X-entry from code? (Label1, Label2, Label3, etc)
Maybe you mean this
in aspx
<asp:Chart ID="Chart1" runat="server" Height="400px" Width="500px">
<Series>
<asp:Series Name="Series1" ChartType="Column" ChartArea="ChartArea1" />
<asp:Series Name="Series2" ChartType="Column" ChartArea="ChartArea1" />
<asp:Series Name="Series3" ChartType="Column" ChartArea="ChartArea1" />
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1" />
</ChartAreas>
</asp:Chart>
Binding data
protected void Page_Load(object sender, EventArgs e)
{
// Initialize arrays for series 1
double[] yval1 = { 2, 6, 5 };
string[] xval1 = { "Peter", "Andrew", "Julie" };
// Initialize arrays for series 2
double[] yval2 = { 4, 5, 3 };
string[] xval2 = { "Peter", "Andrew", "Julie" };
// Initialize arrays for series 3
double[] yval3 = { 6, 5,7 };
string[] xval3 = { "Peter", "Andrew", "Julie" };
// Bind the arrays to each data series
Chart1.Series["Series1"].Points.DataBindXY(xval1, yval1);
Chart1.Series["Series2"].Points.DataBindXY(xval2, yval2);
Chart1.Series["Series3"].Points.DataBindXY(xval3, yval3);
// Align series using their X axis labels
Chart1.AlignDataPointsByAxisLabel();
}

ASP.NET Pie chart not being displayed

I have a pie chart that takes values from a datatable.
This is my code:
ASP.NET Code:
<asp:Chart ID="Chart1" runat="server" EnableViewState="True">
<Series>
<asp:Series ChartType="Pie" Legend="% Completed" Name="Series1" XAxisType="Secondary" XValueType="Double" YValueType="Double">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea BorderWidth="5" Name="ChartArea1">
<Area3DStyle Enable3D="True" WallWidth="15" />
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="% Completed" Title="% Completed">
</asp:Legend>
</Legends>
<Titles>
<asp:Title Name="Completed" Text="Completed">
</asp:Title>
<asp:Title Name="Title1">
</asp:Title>
</Titles>
</asp:Chart>
VB.NET Code:
Sets Session Variables for GetTable()
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load, Chart1.Load
Dim ProjectID As Integer = Session("project_id")
Session("ProjectID") = ProjectID
lblProjNameHeading.Text = "[ " + ProjectID.ToString + " ]"
Dim conn As New SqlConnection("Data Source=BRIAN-PC\SQLEXPRESS;Initial Catalog=master_db;Integrated Security=True")
Dim projComm As String = "SELECT project_id, project_start, project_finish, project_budget, project_cost FROM projects WHERE project_id=#parameter"
Dim projSQL As New SqlCommand
conn.Open()
projSQL = New SqlCommand(projComm, conn)
projSQL.Parameters.AddWithValue("#parameter", ProjectID.ToString)
Dim datareader As SqlDataReader = projSQL.ExecuteReader()
While datareader.Read
lblProjectCode.Text = datareader("project_id").ToString
lblProjectStart.Text = datareader("project_start").ToString
lblProjectStart2.Text = datareader("project_start").ToString
lblProjectEnd.Text = datareader("project_finish").ToString
lblProjectEnd2.Text = datareader("project_finish").ToString
lblProjectBudget.Text = datareader("project_budget").ToString
lblProjectBudget2.Text = datareader("project_budget").ToString
lblProjectCost.Text = datareader("project_cost").ToString
lblProjectCost2.Text = datareader("project_cost").ToString
' lblProjectLeader.Text = datareader("project_cost").ToString
'lblProjectExpenditures.Text = agdgssag
Dim StartDate As DateTime = datareader("project_start")
Dim FinishDate As DateTime = datareader("project_finish")
Dim today As DateTime = DateTime.Now
Dim sumDays = (FinishDate - StartDate).TotalDays
Dim daysToNow = (today - StartDate).TotalDays
Dim percentage = daysToNow / sumDays * 100
Dim percentageLeft = 100 - percentage
Session("PercentageCompleted") = percentage
Session("PercentageLeft") = percentageLeft
GetTable()
lblProjectPercentage.Text = percentage.ToString("N2") + "%"
End While
datareader.Close()
conn.Close()
If Not Page.IsPostBack Then
BindData()
End If
End Sub
The Problem is that when I run the code, the pie chart is not displayed.
Can someone tell me what's wrong?
I think the issue is you haven't set the XvalueMember and YvalueMember for the chart.
<Series>
<asp:Series ChartType="Pie" Legend="% Completed" Name="Series1" XAxisType="Secondary" XValueType="Double" YValueType="Double" XValueMember="yourXValue" YValueMember="YourYvalue">
</asp:Series>
</Series>
Check out the below example.
http://itzonesl.blogspot.com/search/label/Charts

asp.net chart control value label position

I am displaying data in asp.net chart control. Using a 3d bar chart. I am showing the values next to the bars. (seriesCount.IsValueShownAsLabel = true;). The chart control is rendering the value label still on top of the bar and is making the value hard to read. I am trying to position this label to the right but so far I've found no way to do it. I've also tried enabling Smart labels hoping and putting a marker on the bar to push the value away but I haven't been successful. Any suggestions are appreciated.
Sample code:
Chart chartSubjects = new Chart();
chartSubjects.Width = Unit.Pixel(800);
chartSubjects.Height = Unit.Pixel(300);
chartSubjects.AntiAliasing = AntiAliasingStyles.All;
Series seriesCount = new Series("subjectsCountSeries");
seriesCount.YValueType = ChartValueType.Int32;
seriesCount.ChartType = SeriesChartType.Bar;
seriesCount.IsValueShownAsLabel = true;
seriesCount.ChartArea = "subjectsCountArea";
chartSubjects.Series.Add(seriesCount);
ChartArea areaCount = new ChartArea("subjectsCountArea");
LabelStyle yAxisStyle = new LabelStyle();
yAxisStyle.ForeColor = System.Drawing.ColorTranslator.FromHtml("#444444");
yAxisStyle.Font = new System.Drawing.Font("Arial", 11, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Pixel);
areaCount.AxisY.LabelStyle = yAxisStyle;
areaCount.AxisY.IsLabelAutoFit = false;
areaCount.Position.Width = 50;
areaCount.Position.Height = 100;
areaCount.Position.X = 0;
areaCount.Position.Y = 0;
areaCount.Area3DStyle.Enable3D = true;
areaCount.Area3DStyle.LightStyle = LightStyle.Realistic;
areaCount.Area3DStyle.WallWidth = 4;
areaCount.Area3DStyle.Inclination = 10;
areaCount.Area3DStyle.Perspective = 10;
areaCount.Area3DStyle.Rotation = 20;
areaCount.Area3DStyle.PointDepth = 90;
chartSubjects.ChartAreas.Add(areaCount);
int[] pointsToAdd = new int[] { 1434, 712, 601, 204, 173, 168, 64, 35, 22, 8, 2 };
foreach (int point in pointsToAdd)
{
DataPoint dataPoint = new DataPoint();
dataPoint.SetValueY(point);
seriesCount.Points.Add(dataPoint);
}
Is this what you are looking for?
<asp:Series Name="Series1" ChartType="Bar"
CustomProperties="BarLabelStyle=Right" IsValueShownAsLabel="True"
Palette="EarthTones" XValueMember="xvalue" YValueMembers="yvalue">
</asp:Series>
CustomProperties="BarLabelStyle=Right" did it for me.
In your case I'd use:
chartSubjects.Series["seriesCount"]["LabelStyle"] = "Right";

Resources