I have the following data in sql that needs to be represented in Stacked Column chart.
Name Type Amount
Paul T1 100
John T2 200
John T3 300
The name represents the X-axis and the Type as Series. The issue I am facing is duplicate X-axis value with the same name. This is the code example I was following before getting the duplicate Name but now doesn't make sense.
SectionData data = GetSectionData(sectionId);
List<double[]> yValues= new List<double[]>();
if (data != null && data.LineItems.Count() > 0)
{
List<string> xValues = new List<string>();
List<string> typeNames = new List<string>();
int index=0;
foreach (var yval in data.LineItems)
{
xValues.Add(yval.Name);
typeNames.Add(yval.TypeName);
double[] temp = new double[data.LineItems.Count()];
temp.SetValue(yval.Amont, index);
yValues.Add(temp);
index++;
}
foreach (string name in typeNames)
{
StackedColumnChart.Series.Add(
new Series
{
Name = name,
ChartType = SeriesChartType.StackedColumn,
Font= new Font("Segoe UI", 8),
CustomProperties="DrawingStyle=Cylinder",
Legend = "Default"
}
);
}
for (int counter = 0; counter < typeNames.Count; counter++)
{
try
{
StackedColumnChart.Series[counter].Points.DataBindXY(xValues, yValues.Select(i => i[counter]).ToList());
}
catch (Exception ex)
{
//throw ex
}
}
}
Any help.
Related
Ive been working at this for hours and cant seem to figure out how to correctly display the data in a table
using (TextFieldParser csvParser = new TextFieldParser(path)) {
csvParser.CommentTokens = new string[] { "#" };
csvParser.SetDelimiters(new string[] { "," });
csvParser.HasFieldsEnclosedInQuotes = true;
csvParser.ReadLine();
int pointX = 30;
int pointY = 40;
while (!csvParser.EndOfData) {
string[] fields = csvParser.ReadFields();
int rowNums = fields.Length;
int index = 0;
for(index = 0; index < rowNums;index++) {
string Name = fields[index];
TextBox n = new TextBox();
n.Text = Name;
n.Location = new Point(pointX, pointY);
panel2.Controls.Add(n);
panel2.Show();
pointY += 20;
if(index != 0) {
pointX += 100;
}
}
}
}
Whats happening so far is im grabbing a csv file stored in the path variable and reading it the output is accessible through fields[] This works fine then I am trying to create textbox to put the data into based on rows however what i currently have comes out look like this
Program Display
I would like to display the column names and rows correctly in order here is an example image of what it looks like in notepad
Notepad Display
In notepad you will see each new line is a row and every , dictates a new entry in the row and i wanna display it this way in my program but in textbox
Also note that not all csv files that this program will be opening are short most will be large files with thousands or rows or more so theres no way that it could be simply putting fields[0] hard coded
You are much better off using a DataGridView to display this type of data in a table format.
From the toolbox add the DataGridView control to your form. You will need to build a DataTable that will bind to your DataGridview.
Below is what you can use(I commented out where you are skipping the header in your CSV file, and am using that line to get the column headers to be used in the datagrid)
var dt = new DataTable();
var lineNo = 0;
using (var csvParser = new TextFieldParser(path))
{
csvParser.CommentTokens = new string[] { "#" };
csvParser.SetDelimiters(new string[] { "," });
csvParser.HasFieldsEnclosedInQuotes = true;
//csvParser.ReadLine();
while (!csvParser.EndOfData)
{
var fields = csvParser.ReadFields();
var rowNums = fields.Length;
var row = dt.NewRow();
lineNo += 1;
int index = 0;
for (index = 0; index < rowNums; index++)
{
if (lineNo==1)
{
dt.Columns.Add(fields[index]);
}
else
{
row[index] = fields[index];
}
}
if (lineNo == 1) continue;
dt.Rows.Add(row);
dt.AcceptChanges();
}
}
dataGridView1.DataSource = dt;
I think the controls are overlapping, so you can not see them. That they are overlapping like chairs is the problem. You are not resetting your coordinates.
Here an improvement:
using (TextFieldParser csvParser = new TextFieldParser(path)) {
csvParser.CommentTokens = new string[] { "#" };
csvParser.SetDelimiters(new string[] { "," });
csvParser.HasFieldsEnclosedInQuotes = true;
csvParser.ReadLine();
int offsetX = 30;
int offsetY = 40;
int counter;
while (!csvParser.EndOfData) {
int pointerY = ++counter * offsetY; // first counter increments by one, then counter times offsetY occurs
int pointerX;
string[] fields = csvParser.ReadFields();
int rowNums = fields.Length;
for(int index = 0; index < rowNums;index++) {
pointerX = (index + 1) * offsetX;
string name = fields[index];
TextBox n = new TextBox() { Text = name, Location = new Point(pointerX, pointerY) };
panel2.Controls.Add(n);
panel2.Show(); // should be unnecessary
}
}
}
I am making a custom report using Google Visualization API.
It will have 6 sections with each section having tables on either side and a chart in the middle.
Since the formats differ slightly I was spending a lot of time defining classes for each one-off case.
I decided to try Google.DataTable.Net.Wrapper 3.1.0.0.
I created a stored procedure that returns a DataSet and then walk through the DataSet in my Controller and pass each table that I need.
The Data looks something like this
rownum charttypeid charttypename
----------- ----------- ------------------
1 1 Membership Sales
rownum chartareaid chartareaname
----------- ----------- -------------------------
1 1 Membership Sales Overview
2 2 Membership Sales Chart
title value display
------------------------- ----------- ----------
# of Walk-ins 25 25
# of Tours 17 17
# of New Members 35 35
Tour Conversion 78 78%
Percent to Goal 87 87%
Month value display goalvalue goaldisplay
----- ----------- ---------- ----------- -----------
Sep 3125 $3,125.00 1500 $1,500.00
Oct 4500 $4,500.00 1500 $1,500.00
Sometimes the charts will have money formats or other display formats, sometimes dates etc.
I can't figure out how to add/modify the "f" part of the cell which provides a string format for display.
My Controller code looks like this
[ResponseType(typeof(List<ChartPanel>))]
public IHttpActionResult GetChart(int gym, string dateCategory, string iso8601date, int id = -1)
{
if (!String.IsNullOrWhiteSpace(dateCategory))
{
dateCategory = dateCategory.ToLower();
string strConnString = ConfigurationManager.ConnectionStrings["PrimaryDBConnection"].ConnectionString;
// return DataSet From USP
DataSet dashBoardDataSet = GetDataSQL(strConnString, gym, dateCategory, iso8601date, 0);
if (dashBoardDataSet != null)
{
int chartPanelCount = dashBoardDataSet.Tables[0].Rows.Count;
List<ChartPanel> chartTypeList = new List<ChartPanel>(); // list for all the panels
// first table describes the Chart Panels
int tableCount = 0;
for (int chartPanelLoop = 0; chartPanelLoop < chartPanelCount; chartPanelLoop++)
{ // for every panel
tableCount++;
ChartPanel chartPanel = new ChartPanel();
chartPanel.name = dashBoardDataSet.Tables[0].Rows[chartPanelLoop][2].ToString();
// second table describes the following chart areas for the panel
int panelAreaCount = dashBoardDataSet.Tables[1].Rows.Count;
List<ChartArea> chartAreaList = new List<ChartArea>();
int areaTableCount = tableCount;
for (int panelAreaLoop = 0; panelAreaLoop < panelAreaCount; panelAreaLoop++)
{ // for every area
int areaTable = areaTableCount;
ChartArea chartArea = new ChartArea();
chartArea.name = dashBoardDataSet.Tables[areaTable].Rows[panelAreaLoop][2].ToString();
int chartAreaRowNum = panelAreaLoop + 1;
System.Data.DataTable systDT = new System.Data.DataTable();
systDT = dashBoardDataSet.Tables[areaTable + chartAreaRowNum];
var dt = systDT.ToGoogleDataTable(); //convert with wrapper
//issue ==> //dt = RemoveColumnsWithTitleLikeDisplayAndPassCellContentsAsFormattedStringToPreviousCell(dt);
chartArea.table = JsonConvert.DeserializeObject(dt.GetJson());
chartAreaList.Add(chartArea);
//}
if (chartAreaList.Count() > 0) chartPanel.areas = chartAreaList;
tableCount++;
}
if (chartPanel.areas != null && chartPanel.areas.Count() > 0) chartTypeList.Add(chartPanel);
}
return Ok(chartTypeList);
}
else { return NotFound(); }
}
else { return NotFound(); }
}
Is there a better way to do this?
Figured it out. Here is my working code with a hack to look for any column where (colName.Contains("_display")) and make it be the formatted ("f") data for the previous column.
To map the column to the formatting column I made a custom class.
Custom Class
class ColumnDisplayMap
{
public int columnToFormat { get; set; }
public int formatColumn { get; set; }
}
Method For Building Charts
[ResponseType(typeof(List<ChartPanel>))]
public IHttpActionResult GetChart(int gym, string dateCategory, string iso8601date, int id = -1)
{
if (!String.IsNullOrWhiteSpace(dateCategory))
{
dateCategory = dateCategory.ToLower();
string strConnString = ConfigurationManager.ConnectionStrings["PrimaryDBConnection"].ConnectionString;
// return DataSet From USP
DataSet dashBoardDataSet = GetDataSQL(strConnString, gym, dateCategory, iso8601date, 0);
if (dashBoardDataSet != null)
{
int chartPanelCount = dashBoardDataSet.Tables[0].Rows.Count;
List<ChartPanel> chartTypeList = new List<ChartPanel>(); // list for all the panels
// first table describes the Chart Panels
int tableCount = 0;
for (int chartPanelLoop = 0; chartPanelLoop < chartPanelCount; chartPanelLoop++)
{ // for every panel
ChartPanel chartPanel = new ChartPanel();
chartPanel.name = dashBoardDataSet.Tables[0].Rows[chartPanelLoop][2].ToString();
// second table describes the following chart areas for the panel
DataRow[] areaTableRows = dashBoardDataSet.Tables[1].Select("charttype = " + (chartPanelLoop + 1).ToString());
int panelAreaCount = areaTableRows.Count();
List<ChartArea> chartAreaList = new List<ChartArea>();
for (int panelAreaLoop = 0; panelAreaLoop < panelAreaCount; panelAreaLoop++)
{ // for every area
int areaTable = 1;
ChartArea chartArea = new ChartArea();
chartArea.name = areaTableRows[panelAreaLoop][3].ToString(); // dashBoardDataSet.Tables[areaTable].Rows[panelAreaLoop][3].ToString();
DataColumnCollection columns = dashBoardDataSet.Tables[areaTable + tableCount + 1].Columns;
DataRowCollection rows = dashBoardDataSet.Tables[areaTable + tableCount + 1].Rows;
Google.DataTable.Net.Wrapper.DataTable gdt = new Google.DataTable.Net.Wrapper.DataTable();
List<ColumnDisplayMap> cMap = new List<ColumnDisplayMap>();
foreach (DataColumn col in columns)
{
string colName = col.ToString();
if (!colName.Contains("_display"))
{
ColumnType type = ColumnType.Number;
if (!col.IsNumeric()) type = ColumnType.String;
gdt.AddColumn(new Column(type, col.ToString(), col.ToString()));
}else
{
ColumnDisplayMap cdm = new ColumnDisplayMap(){columnToFormat = col.Ordinal - 1, formatColumn = col.Ordinal};
cMap.Add(cdm);
}
}
foreach (DataRow row in rows)
{
var r = gdt.NewRow();
for (int cellItem = 0; cellItem < row.ItemArray.Count(); cellItem++)
{
if (cMap.Any(c => c.columnToFormat.Equals(cellItem)))
{
r.AddCell(new Cell(row.ItemArray[cellItem], row.ItemArray[cellItem + 1].ToString()));
}
else if (cMap.Any(c => c.formatColumn.Equals(cellItem)))
{
// do nothing
}
else
{
r.AddCell(new Cell(row.ItemArray[cellItem], row.ItemArray[cellItem].ToString()));
}
}
gdt.AddRow(r);
}
chartArea.table = JsonConvert.DeserializeObject(gdt.GetJson());
chartAreaList.Add(chartArea);
//}
if (chartAreaList.Count() > 0) chartPanel.areas = chartAreaList;
tableCount++;
}
if (chartPanel.areas != null && chartPanel.areas.Count() > 0) chartTypeList.Add(chartPanel);
}
return Ok(chartTypeList);
}
else { return NotFound(); }
}
else { return NotFound(); }
}
I have data in the form shown below. I want to display the data in such a way that time (the "No column name" column in the figure) should be along the Y-axis and testiD and queryId in the X-axis. I need it in such a way that items with same testId should be grouped (in the X-axis) and the corresponding time should be displayed (Y-axis)
here is the code I use, it does not work as I expected.
protected internal Chart GenerateChart(DataTable dtChartDataSource,Chart chart,int intType )
{
ChartArea chartArea = new ChartArea() { Name = "ChartArea" };
chart.ChartAreas.Add(chartArea);
chart.Palette = ChartColorPalette.BrightPastel;
string series = string.Empty;
if (dtChartDataSource != null)
{
foreach (DataColumn dc in dtChartDataSource.Columns)
{
if (chart.Series.FindByName(dc.ColumnName) == null)
{
series = dc.ColumnName[1].ToString();
chart.Series.Add(series);
chart.Series[series].ChartType = (SeriesChartType)intType;
}
foreach (DataRow dr in dtChartDataSource.Rows)
{
double dataPoint = 0;
double.TryParse(dr[dc.ColumnName].ToString(), out dataPoint);
DataPoint objDataPoint = new DataPoint() { AxisLabel = "series", YValues = new double[] { dataPoint } };
chart.Series[series].Points.Add(dataPoint);
}
}
}
return chart;
}
I could get my requirement done by below code.
public Chart fnTestChart(Chart chart, DataTable dt)
{
DataTable dtUniqueCols = dt.DefaultView.ToTable(true, "Test ID");
chart.ChartAreas.Add("area");
chart.ChartAreas["area"].AxisX.Minimum = 0;
//chart.ChartAreas["area"].AxisX.Interval = 1;
chart.ChartAreas["area"].AxisY.Minimum = 0;
//chart.ChartAreas["area"].AxisY.Interval = 1;
foreach (DataRow dr in dtUniqueCols.Rows)
{
chart.Series.Add(dr[0].ToString());
}
foreach (DataRow dr in dt.Rows)
{
chart.Series[dr[0].ToString()].Points.AddXY(dr[1].ToString(), dr[2].ToString());
}
return chart;
}
You can use many different libraries, to achieve this goal.
Ex: (Visblox)
http://csharp-source.net/open-source/charting-and-reporting
Look at this picture from my web application ASP.NET 4.0.
As you can se the lines have a different length. Also there is duplicate x axis entry.
The blue serie has a missing datapoint, the yellow does not.
Question 1:
How do I align them so the x- axis stays the same. Currently im doing this. And make the lines equally long?
Question 2: Is there a way to make the chart interactive so that you can some and hold the cursor on the line to see data from that point, using ASP.NET?
int amountofrows = Convert.ToInt32(dt.Rows[0]["antal"].ToString());
for (int i = 0; i < amountofrows; i++)
{
List<string> xvals = new List<string>();
List<decimal> yvals = new List<decimal>();
string serieName = dt.Rows[i]["doman_namn"].ToString();
Chart1.Series.Add(serieName);
Chart1.Series[i].ChartType = SeriesChartType.Line;
foreach (DataRow dr in dt.Rows)
{
try
{
if (String.Equals(serieName, dr["doman_namn"].ToString(), StringComparison.Ordinal))
{
xvals.Add(dr["ranking_date"].ToString());
yvals.Add(Convert.ToDecimal(dr["ranking_position"].ToString()));
}
}
catch (Exception)
{
throw new InvalidOperationException("Diagrammet kunde inte ritas upp");
}
}
try
{
Chart1.Series[serieName].XValueType = ChartValueType.String;
Chart1.Series[serieName].YValueType = ChartValueType.Auto;
Chart1.Series[serieName].Points.DataBindXY(xvals.ToArray(), yvals.ToArray());
Chart1.DataManipulator.InsertEmptyPoints(1, IntervalType.Days, serieName);
}
catch (Exception ex)
{
throw new InvalidOperationException(ex.Message);
}
}
Chart1.DataBind();
Chart1.Visible = true;
This was the answer!
Thanks for pointing that out JBL!
foreach (System.Web.UI.DataVisualization.Charting.Series serien in Chart1.Series)
{
foreach(System.Web.UI.DataVisualization.Charting.DataPoint dataPoint in serien.Points)
{
if (dataPoint.YValues[0] == 0)
{
dataPoint.IsEmpty = true;
}
}
serien.Sort(PointSortOrder.Ascending,sortBy:("X"));
}
I'm currently building an application that shows a line-graph and uses MSChartControl.
Here is the relevant code:
WeatherDatabase _db = new WeatherDatabase(Properties.Settings.Default.SqlConnectionString);
private void AddSensorDataToGraph(int sensorType, string xTitle, string yTitle, string Title)
{
var sensorIdList = (from d in _db.Sensors where d.TypeId == sensorType select d.Id).ToArray();
var startDate = dateTimePickerStart.Value;
var stopDate = dateTimePickerStop.Value;
SetMaxMinValues(dateTimePickerStart.Value.ToOADate(), dateTimePickerStop.Value.ToOADate());
this.Text = chartValues.Titles["Titel"].Text = String.Format("{0} vom {1} bis {2}", Title, startDate, stopDate);
chartValues.ChartAreas[CHARTAREA].AxisX.Title = xTitle;
chartValues.ChartAreas[CHARTAREA].AxisY.Title = yTitle;
// Alte Datensätze löschen
chartValues.Series.Clear();
foreach (var sensorId in sensorIdList)
{
var values = (from d in _db.DeviceIO where d.IdSensor == sensorId && d.Timestamp > startDate && d.Timestamp < stopDate orderby d.Timestamp ascending select d).ToArray();
if (values.Length > 0)
{
var desc = values[0].Sensors.SensorType.Description;
chartValues.Series.Add(GenerateDefaultSeries(String.Format("{0}\r\nSensorId: {1}", desc, sensorId)));
//chartValues.Series.Add("Test" + sensorId);
int seriesId = chartValues.Series.Count - 1;
foreach (var item in values)
{
if (item.Value == null)
{
continue;
}
if ((double)item.Value == NOVALUE)
{
continue;
}
AddPointToChart((DateTime)item.Timestamp, (double)item.Value, seriesId);
}
}
}
}
private void AddPointToChart(DateTime timestamp, double value, int series)
{
DataPoint dataPoint = chartValues.Series[series].Points.Add(value);
dataPoint.XValue = timestamp.ToOADate();
dataPoint.AxisLabel = "dd.MM.yy hh:mm";
}
private void SetMaxMinValues(double min, double max)
{
if (min < max)
{
chartValues.ChartAreas[CHARTAREA].AxisX.Minimum = min;
chartValues.ChartAreas[CHARTAREA].AxisX.Maximum = max;
}
}
private Series GenerateDefaultSeries(string Name)
{
// Grundeinstellungen für die Data-Series setzen
Series series = new Series();
series.ChartType = SeriesChartType.Line;
series.Name = Name;
series.IsValueShownAsLabel = false;
series.IsVisibleInLegend = true;
series.IsXValueIndexed = false;
series.AxisLabel = "dd.MM.yy hh:mm";
// series.LabelFormat = "g";
series.XAxisType = AxisType.Primary;
series.XValueType = ChartValueType.Auto;
series.YValuesPerPoint = 1;
// series.AxisLabel = "dd.MM.yy hh:mm";
return series;
}
If i add a series in designer mode x-axies Labels are correct
Click for pic
But if i start my application and add a series programmatically it loks like this
Anyone knows why the x-axis caption / label is not displayed correctly?
EDIT:
Based on Tom's help I change some things:
var seriesName = String.Format("{0}\r\nSensorId: {1}", desc, sensorId);
var curSeries = chartValues.Series.Add(seriesName);
UpdateSeriesSettings(ref curSeries);
[...]
AddPointToChart((DateTime)item.Timestamp, (double)item.Value, curSeries);
[...]
private void UpdateSeriesSettings(ref Series series)
{
// Grundeinstellungen für die Data-Series setzen
// Series series = new Series();
series.ChartType = SeriesChartType.Spline;
series.IsValueShownAsLabel = false;
series.IsVisibleInLegend = true;
series.IsXValueIndexed = false;
series.AxisLabel = "dd.MM.yy hh:mm";
// series.LabelFormat = "g";
series.XAxisType = AxisType.Primary;
series.XValueType = ChartValueType.Auto;
series.YValuesPerPoint = 1;
// series.AxisLabel = "dd.MM.yy hh:mm";
}
But my X axis stil ain't having a label ):
Used the following code:
Fixed my problem.
var desc = values[0].Sensors.SensorType.Description;
var seriesName = String.Format("{0}\r\nSensorId: {1}", desc, sensorId);
curSeries = chartValues.Series.Add(seriesName);
curSeries.ChartType = SeriesChartType.Line;
curSeries.XValueType = ChartValueType.DateTime;
foreach (var item in values)
{
curSeries.Points.AddXY(item.Timestamp, item.Value);
}
It looks like you are adding each point as its own series. Usually, you would add many points into one series.
Do you intend to change seriesId right before you use it?
int seriesId = chartValues.Series.Count - 1;
This happens before you call AddPointToChart() so that is getting a different value than you used in the series
chartValues.Series.Add(GenerateDefaultSeries(String.Format("{0}\r\nSensorId: {1}", desc, sensorId)));
EDIT
The line chartValues.Series.Add(...) will return a variable of type Series which you can add to directly. see http://www.dotnetperls.com/chart
SensorID is your number and I think that there are no guarantees that the system will choose to populate its collection of Series in any particular order.
EDIT
It looks like you're adding your points to the series before you finish setting them up. Instead, set them all the way up, then add them:
private void AddPointToChart(DateTime timestamp, double value, int series)
{
DataPoint dataPoint = new DataPoint(timestamp.ToOADate(), value);
dataPoint.AxisLabel = "dd.MM.yy hh:mm"; // not sure how this will work, but try it.
chart1.Series[series].Points.Add(dataPoint );
}