How to create area range chart - c#
I want to create area range chart as given in the following link
I want to add data to ranges using loop on my data. What should be the type of the ranges to create chart?
Please suggest. Thanks in advance. Here's the JSFiddle code:
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS:
$(function () {
var ranges = [[1246406400000,33,22],[1246492800000,24,12],[1246579200000,15,1],[1246665600000,28,17],[1246752000000,22,12],[1246838400000,34,22],[1246924800000,30,19],[1247011200000,27,15],[1247097600000,35,24],[1247184000000,29,14],[1247270400000,32,20],[1247356800000,32,21],[1247443200000,34,23],[1247529600000,19,9],[1247616000000,31,21],[1247702400000,22,7],[1247788800000,25,11],[1247875200000,19,6],[1247961600000,33,18],[1248048000000,33,18],[1248134400000,21,7],[1248220800000,31,19],[1248307200000,25,15],[1248393600000,29,19],[1248480000000,34,23],[1248566400000,21,9],[1248652800000,27,12],[1248739200000,19,4],[1248825600000,32,19],[1248912000000,32,20],[1248998400000,16,1]], ranges2 = [[1246406400000,22,-22],[1246492800000,12,-12],[1246579200000,1,-1],[1246665600000,17,-17],[1246752000000,12,-12],[1246838400000,22,-22],[1246924800000,19,-19],[1247011200000,15,-15],[1247097600000,24,-24],[1247184000000,14,-14],[1247270400000,20,-20],[1247356800000,21,-21],[1247443200000,23,-23],[1247529600000,9,-9],[1247616000000,21,-21],[1247702400000,7,-7],[1247788800000,11,-11],[1247875200000,6,-6],[1247961600000,18,-18],[1248048000000,18,-18],[1248134400000,7,-7],[1248220800000,19,-19],[1248307200000,15,-15],[1248393600000,19,-19],[1248480000000,23,-23],[1248566400000,9,-9],[1248652800000,12,-12],[1248739200000,4,-4],[1248825600000,19,-19],[1248912000000,20,-20],[1248998400000,1,-1]], ranges3 = [[1246406400000,-22,-45],[1246492800000,-12,-30],[1246579200000,-1,-17],[1246665600000,-17,-43],[1246752000000,-12,-40],[1246838400000,-22,-45],[1246924800000,-19,-43],[1247011200000,-15,-45],[1247097600000,-24,-50],[1247184000000,-14,-37],[1247270400000,-20,-44],[1247356800000,-21,-42],[1247443200000,-23,-42],[1247529600000,-9,-37],[1247616000000,-21,-40],[1247702400000,-7,-24],[1247788800000,-11,-27],[1247875200000,-6,-27],[1247961600000,-18,-34],[1248048000000,-18,-46],[1248134400000,-7,-36],[1248220800000,-19,-48],[1248307200000,-15,-30],[1248393600000,-19,-49],[1248480000000,-23,-50],[1248566400000,-9,-38],[1248652800000,-12,-27],[1248739200000,-4,-26],[1248825600000,-19,-45],[1248912000000,-20,-40],[1248998400000,-1,-17]];
$('#container').highcharts({
title: {
text: 'Sentiment Flood Map'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: null
}
},
tooltip: {
crosshairs: true,
shared: true,
valueSuffix: ''
},
legend: {
},
series: [ {
name: 'Positive',
data: ranges,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[2],
fillOpacity: 0.8,
zIndex: 0
}
, {
name: 'Neutral',
data: ranges2,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[1],
fillOpacity: 0.8,
zIndex: 0
}
, {
name: 'Negative',
data: ranges3,
type: 'arearange',
lineWidth: 0,
linkedTo: ':previous',
color: Highcharts.getOptions().colors[3],
fillOpacity: 0.8,
zIndex: 0
}
]
});
});
Here is an example the produces a Chart graphic just like the one in the linked image.
Note: After I have created a few testdata I calculate a dummy series with a transparent color that will make the whole data stack up so that the median of the "neutral" series sits nicely on one horizontal line.
int numPoints = 30; // create some test data
List<int> neutralData = new List<int>();
List<int> negativeData = new List<int>();
List<int> positiveData = new List<int>();
List<int> dummyData = new List<int>();
for (int i = 0; i < numPoints; i++)
{
// the real data series, using a Random R:
positiveData.Add(R.Next(i + 22));
neutralData .Add(R.Next(i + 33));
negativeData.Add(R.Next(i + 44));
// calculate the transparent bottom series:
dummyData.Add( - neutralData[i] / 2 - negativeData[i]);
}
// set up the Chart:
chart1.ChartAreas.Add("StackedArea"); // if necessary
Series s0 = chart1.Series.Add(" ");
Series s1 = chart1.Series.Add("negative");
Series s2 = chart1.Series.Add("neutral");
Series s3 = chart1.Series.Add("positive");
foreach (Series s in chart1.Series) s.ChartType = SeriesChartType.StackedArea;
s0.Color = Color.Transparent;
s1.Color = Color.FromArgb(200, Color.Red);
s2.Color = Color.FromArgb(200, Color.LightSlateGray);
s3.Color = Color.FromArgb(200, Color.Green)
// now add the data points:
for (int i = 0; i < numPoints; i++)
{
s0.Points.AddXY(i, dummyData[i]);
s1.Points.AddXY(i, negativeData[i] );
s2.Points.AddXY(i, neutralData [i]);
s3.Points.AddXY(i, positiveData[i]);
}
If you want to show a tooltip similar to the one from your example you can add this to the AddXY loop:
int a2 = dummyData[i] + negativeData[i];
int a3 = a2 + neutralData[i];
int a4 = a3 + positiveData[i];
string tt = string.Format( "Data Point {0}\r\nPositive: {1} - {2}\r\n"
+ "Neutral: {2} - {3}\r\nNegative: {3} - {4}", i, a4, a3, a2, dummyData[i]);
s1.Points[i].ToolTip = tt;
s2.Points[i].ToolTip = tt;
s3.Points[i].ToolTip = tt;
Here is an example image:
You can not create a chart exactly like the one shown in link but you can use different series on your chart. I am posting the code that creates a chart and populates it with 2 series, you can add as many series as you want.
DataSet dataSet;
ConnectionClass.GetInstance().connection_string = Properties.Settings.Default.MindMuscleConnectionString;
ConnectionClass.GetInstance().Sql = "Select Count(MemberInfo.memberName) as 'Members', CompetitionName as 'Competition' FROM MemberInfo, MemberBodyInfo, Competition WHERE MemberInfo.memberID = MemberBodyInfo.memberID AND MemberBodyInfo.weight >= Competition.CompetitionCategory and MemberBodyInfo.weight <= Competition.CompetitionCategory + 5 group by CompetitionName;";
dataSet = ConnectionClass.GetInstance().GetConnection;
chart1.Series["Series1"].Name = "Members";
chart1.Series["Members"].YValueMembers = "Members";
chart1.Series["Members"].XValueMember = "Competition";
chart1.Series.Add("Members2");
chart1.Series["Members2"].ChartType = SeriesChartType.StackedArea;
chart1.Series["Members2"].IsValueShownAsLabel = true;
chart1.Series["Members2"].YValueMembers = "Members";
chart1.Series["Members2"].XValueMember = "Competition";
this.chart1.Titles.Add("Competition Participants"); // Set the chart title
chart1.Series["Members"].ChartType = SeriesChartType.StackedArea;
chart1.Series["Members"].IsValueShownAsLabel = true; // To show chart value
chart1.DataSource = dataSet;
chart1.DataBind();
I have not actually created a new series from some different data... Both series are same here but I have just showed you an example.
Related
How to get lowest and highest number from range
I have numbers list like this: {100, 150, 200, 250, 300, 350, 400, 450} How to find lowest and highest number in between by given number? Examples: If x = 90 and desired output is 100. if x = 120 then desired output is 100, 150 If x = 150 then desired output is 150 If x = 151 then desired output is 150, 200 If x = 420 then desired output is 400, 450 If x = 450 then desired output is 450 If x = 451 then desired output is > 450 Code: I have tried with windows app (C#), but results are not accurate. private void GetRangeList() { string givenValue = txtgivenValue.Text.ToString(); long givenValueNumber = long.Parse(txtgivenValue.Text.ToString().Trim()); var numbers = new List<long> { 100, 150, 200, 250, 300, 350, 400, 450 }; var lowest = numbers.Where(n => n <= givenValueNumber).Max().ToString(); var highest = string.Empty; if (givenValueNumber < 450) { highest = numbers.Where(n => n >= givenValueNumber).Min().ToString(); } lblOutput.Text = lowest.ToString() + ", " + highest.ToString(); }
Please, note that Max() / Min() on empty cursor throws exception: long givenValueNumber = 90; var numbers = new List<long> { 100, 150, 200, 250, 300 , 350 , 400 , 450 }; // n => n <= givenValueNumber condition makes the cursor empty // Max() will throw exception var lowest = numbers.Where(n => n <= givenValueNumber).Max(); This fact, probably, is the main difficuly in your case; however, one simple foreach loop is enough. The only (small) difficulty is to return the result in the right format for all possible cases: // IEnumerable<long> be nice and accept any enumerable data source; // say, array, list etc. private static string TheRange(IEnumerable<long> data, long target) { long? lower = null; long? upper = null; // all we have to do is to enumerate the data while updating lower and upper // bounds in the process foreach (var item in data) { if (item <= target && (!lower.HasValue || item > lower)) lower = item; if (item >= target && (!upper.HasValue || item < upper)) upper = item; } // we have upper and lower bound; time to return them in the right format if (!lower.HasValue) if (!upper.HasValue) return $"Empty array"; else return $"< {upper}"; else if (!upper.HasValue) return $"> {lower}"; else if (lower == upper) return $"{lower}"; else return $"{lower}, {upper}"; } Let's have a look: using System.Linq; // for testing only ... var numbers = new List<long> { 100, 150, 200, 250, 300, 350, 400, 450 }; long[] tests = new long[] { 90, 120, 150, 151, 420, 450, 451 }; string report = string.Join(Environment.NewLine, tests .Select(test => $"{test, 3} :: {TheRange(numbers, test)}")); Console.Write(report); Outcome: 90 :: < 100 120 :: 100, 150 150 :: 150 151 :: 150, 200 420 :: 400, 450 450 :: 450 451 :: > 450 Finally, GetRangeList() can be implemented as follows private void GetRangeList() { var numbers = new List<long> { 100, 150, 200, 250, 300, 350, 400, 450 }; // 1. txtgivenValue.Text is pf type string, ToString() is redundant // 2. Parse is smart enough to call Trim when necessary long givenValueNumber = long.Parse(txtgivenValue.Text); lblOutput.Text = TheRange(numbers, givenValueNumber); }
Just use: var belowList = numbers.Where(i => i <= x); var aboveList = numbers.Where(i => i >= x); long? upper = belowList.Any() ? belowList.Max() : null; long? lower = aboveList.Any() ? belowList.Min() : null; // now you need to handle various scenarios if( upper.HasValue && lower.HasValue ) { // both are found and have value // if (upper == lower) return any // else return both } else if( ! upper.HasValue ) { // belowList was empty string result "< " + numbers.Min(); } else if( ! lower.HasValue ) { // aboveList was empty string result "> " + numbers.Max(); } else { // none have value }
dotnet highchart error, not showing data
i just curious on how to get the specific data column based on database string[] arrLabel = new string[dt.Rows.Count]; Object[] data = new Object[dt.Rows.Count]; Object[] dataDetail = new Object[dt.Rows.Count]; String[] detail = new String[dt.Rows.Count]; var returnObject = new List<object>(); var returnColumnList = new List<object>(); int i = 0; foreach (DataRow item in dt.Rows) { for (int j = 0; j < 1; j++) { returnColumnList.Add(new object[] {item["ATT_WF_STATUS_2"], item["ATT_WF_STATUS_3"]}); } dataDetail = returnColumnList.ToArray(); returnObject.Add(new object[] { item["DEPARTEMENT"],dataDetail[i]}); arrLabel[i] = ((string)item["DEPARTEMENT"]); i++; } data = returnObject.ToArray(); this.data = data; this.arrLabel = arrLabel; however, the graphic using dotnet is not showing but like this. when i inspect element using browser $(document).ready(function() { chartColumnDetail = new Highcharts.Chart({ chart: { renderTo:'chartColumnDetail_container', options3d: { alpha: 10, beta: 0, depth: 50, enabled: true, viewDistance: 25 }, plotShadow: false, type: 'column' }, credits: { enabled: false }, legend: { enabled: true, itemStyle: { color: '#2C3E50' } }, plotOptions: { column: { allowPointSelect: true, colorByPoint: true, cursor: 'pointer', dataLabels: { enabled: true, style: { font:'14px', fontWeight:'bold' } }, depth: 50, showInLegend: true } }, subtitle: { text: 'Grouped by Status' }, title: { text: 'Attendance Analytics From 01 January 2010 Until 15 December 2016' }, tooltip: { formatter: function(){ var sliceIndex =this.point.index; var sliceName = this.series.chart.axes[0].categories[sliceIndex]; return 'The value for <b>' + this.point.name + '</b> is <b>' + this.y +'</b>';} }, xAxis: { categories: ['DO-Advisory Department', 'EDP Department', 'Enterprise Infrastructure Services Department', 'Pre Sales Department', 'Sales Department 1', 'IO-DCOPS Department', 'Human Capital Department'], labels: { align: 'center', style: { font: 'bold 10px Verdana,sans-serif' } } }, yAxis: { min: 0, title: { text: 'Amount' } }, exporting: { buttons: { contextButton: { align: 'center', x: 350, y: -3 } }, enabled: true, scale: 5 }, series: [{ data: [['DO-Advisory Department', [15, 32]], ['EDP Department', [26, 5]], ['Enterprise Infrastructure Services Department', [8, 1]], ['Pre Sales Department',[ 1, 6]], ['Sales Department 1', [1, 3]], ['IO-DCOPS Department',[ 1, 0]], ['Human Capital Department',[1, 0]], name: 'Department' }] }); }); is there any way to fix this problem ? thank you very much Update : i am taking this from sql database which has this similar conditionenter image description here Another update: this is full coding for this case protected DataTable GetDataDetail() { SortedList sl = new SortedList(); DateTime dateFrom = DateTime.ParseExact(Request.Form[txtOldDate.UniqueID], "yyyy-MM-dd", null); DateTime dateTo = DateTime.ParseExact(Request.Form[txtNewDate.UniqueID], "yyyy-MM-dd", null); sl.Add("#DATE_FROM-date", dateFrom); sl.Add("#DATE_TO-date", dateTo); DataTable dt = new DataTable(); dateFromChart = dateFrom.ToString("dd MMMM yyyy", CultureInfo.InvariantCulture); dateToChart = dateTo.ToString("dd MMMM yyyy", CultureInfo.InvariantCulture); dt = bll.GetAttendanceAnalyticsBasedWfStatus(sl); string[] arrLabel = new string[dt.Rows.Count]; Object[] data = new Object[dt.Rows.Count]; Object[] dataDetail = new Object[dt.Rows.Count]; var returnObject = new List<object>(); List<object[]> returnColumnList = new List<object[]>(); int i = 0; foreach (DataRow item in dt.Rows) { for (int j = 0; j < 1; j++) { returnColumnList.Add(new object[] { item["DEPARTEMENT"], item["ATT_WF_STATUS_2"], item["ATT_WF_STATUS_3"] }); } dataDetail = returnColumnList.ToArray(); returnObject.Add(new object[] { returnColumnList.Select(b => new { name = b.GetValue(0), data = returnColumnList.Select(y => y.GetValue(1) + "," + y.GetValue(2)).ToArray() }).ToArray() }); arrLabel[i] = ((string)item["DEPARTEMENT"]); i++; } jsonSeries = new JavaScriptSerializer().Serialize(returnObject); Response.Write(jsonSeries); data = returnObject.ToArray(); this.data = data; this.arrLabel = arrLabel; return dt; } then the dotnetchart protected void ColumnChartDetail() { GetDataDetail(); //Binding data to Chart DotNet.Highcharts.Highcharts chartColumnDetail = new DotNet.Highcharts.Highcharts("chartColumnDetail").InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) .SetOptions(new GlobalOptions { Colors = new[] { ColorTranslator.FromHtml("#50B432"), //using system.drawing ColorTranslator.FromHtml("#ED561B"), ColorTranslator.FromHtml("#DDDF00"), ColorTranslator.FromHtml("#24CBE5"), ColorTranslator.FromHtml("#64E572"), ColorTranslator.FromHtml("#FF9655"), ColorTranslator.FromHtml("#34495E"), ColorTranslator.FromHtml("#6AF9C4") } }) //set title .SetTitle(new Title { Text = "Attendance Analytics From " + this.dateFromChart + " Until " + this.dateToChart, }) //set subtitle .SetSubtitle(new Subtitle { Text = "Grouped by Status", }) //set tooltip .SetTooltip(new Tooltip { Formatter = #"function(){ var sliceIndex = this.point.index; var sliceName = this.series.chart.axes[0].categories[sliceIndex]; return 'The value for <b>' + this.point.name + '</b> is <b>' + this.y +'</b>';}" }) //Exporting options .SetExporting(new Exporting { Enabled = true, Scale = 5, Buttons = new ExportingButtons { ContextButton = new ExportingButtonsContextButton { Align = HorizontalAligns.Center, X = 350, Y = -3 } } }) //set plot option .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { AllowPointSelect = true, Depth = 50, DataLabels = new PlotOptionsColumnDataLabels { Enabled = true, Style = "font:'14px', fontWeight:'bold'" }, ShowInLegend = true, ColorByPoint = true, Cursor = Cursors.Pointer, } }) //set chart initial .InitChart(new Chart { Type = ChartTypes.Column, PlotBackgroundColor = null, PlotBorderWidth = null, PlotShadow = false, Options3d = new ChartOptions3d // options for 3D { Enabled = true, Alpha = 10, Beta = 0, Depth = 50, ViewDistance = 25 } }) //set xAxis formatter text .SetXAxis(new XAxis { Categories = arrLabel, Labels = new XAxisLabels { Style = "font: 'bold 10px Verdana,sans-serif'", Align = HorizontalAligns.Center } }) //set yAxis formater text .SetYAxis(new YAxis { Min = 0, Title = new YAxisTitle { Text = "Amount" } }) //remove watermark of highcharts .SetCredits(new Credits { Enabled = false }) //set Legend .SetLegend(new Legend { Enabled = true, ItemStyle = "color: '#2C3E50'" }) //set Series .SetSeries(new[] { new Series { Name = "Department", Data = new Data(data) }, }); chartContainerColumnDetail.Text = chartColumnDetail.ToHtmlString(); } after added code, the result become like this [[[{"name":"DO-Advisory Department","data":["15,32"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18"]},{"name":"EDP Department","data":["15,32","11,18"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1"]},{"name":"EDP Department","data":["15,32","11,18","8,1"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6","1,3"]},{"name":"Sales Department 1","data":["15,32","11,18","8,1","1,6","1,3"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"Sales Department 1","data":["15,32","11,18","8,1","1,6","1,3","1,0"]},{"name":"IO-DCOPS Department","data":["15,32","11,18","8,1","1,6","1,3","1,0"]}]],[[{"name":"DO-Advisory Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"EDP Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Enterprise Infrastructure Services Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Pre Sales Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Sales Department 1","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"IO-DCOPS Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]},{"name":"Human Capital Department","data":["15,32","11,18","8,1","1,6","1,3","1,0","1,0"]}]]]
Update 2: Can u form the data result like this : List<object[]> returnColumnList = new List<object[]>(); string json = string.Empty; var returnObject = new List<object>(); returnColumnList.Add(new object[] { "Depart" , "123", "345" }); returnColumnList.Add(new object[] { "Depart", "123", "345" }); foreach (var item in returnColumnList) { returnObject.Add(new {name = item.GetValue(0), data = (new object[] {item.GetValue(1) , item.GetValue(2)})}); } json = new JavaScriptSerializer().Serialize(returnObject); ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ List item The Series is not set properly. Please do it this way : series: [{ name: 'DO-Advisory Department', data: [15, 32] }, { name: 'EDP Department', data: [26, 5] }, { name: 'Enterprise Infrastructure Services Department', data: [8, 1] }] Have attached the image of results.
MS Chart X Axis label repeated - showing multiple points for a single item [Range Bar]
I have created a RangeBar MS Chart control that binds with a datatable. This datatable is created based on the below list data. The problem is that x axis is showing multiple points for same item with different range. List MS Chart X axis represents the 1st column of the list and Y axis values are 3rd and 4th columns. "dt" is the datatable name Code chChart.Series["Series1"].ChartType = SeriesChartType.RangeBar; chChart.Series["Series1"].Points.DataBind(dt.DefaultView, "Number", "Start Time,Stop Time","ToolTip=Name,Label=Name"); Tried binding as different series but still not working. var IETable = (dt as System.ComponentModel.IListSource).GetList(); chChart.DataBindCrossTable(IETable, "Number", "Number", "Start Time,Stop Time",""); foreach (Series sr in chChart.Series) { sr.ChartType = SeriesChartType.RangeBar; sr.YValueType = ChartValueType.Time; sr.XValueType = ChartValueType.String; } Is there a way to group x axis value for same item so that the bars are in same line? Note - When using custom labels, only one value is shown for each x axis label.
Add 1 Series into the chart. Then for the Series, make sure YValuesPerPoint = 2. Add new DataPoints so that the XValue represents the line (in the example for line ABC1, XValue = 1 and line ABC2, XValue = 2. For the DataPoint.AxisLabel you can set the label of that axis (in this case 'ABC1' and 'ABC2'). Then for the YValues, you specify values comma separated, for example 1,2 or 7,20. Example: chChart.Series["Series1"].Points.Add(new DataPoint() { AxisLabel = "ABC1", XValue = 1, YValues = new double[] { 2,5 } }); chChart.Series["Series1"].Points.Add(new DataPoint() { AxisLabel = "ABC1", XValue = 1, YValues = new double[] { 6,7 } }); chChart.Series["Series1"].Points.Add(new DataPoint() { AxisLabel = "ABC1", XValue = 1, YValues = new double[] { 9,10 } }); chChart.Series["Series1"].Points.Add(new DataPoint() { AxisLabel = "ABC2", XValue = 2, YValues = new double[] { 3,6 } }); chChart.Series["Series1"].Points.Add(new DataPoint() { AxisLabel = "ABC2", XValue = 2, YValues = new double[] { 7,8 } }); So the key is that the XValue must be same (double?) for all the bars on same line.
Manipulating datapoints individually for each series did the trick. Based on the index of the custom label, i modified the Xvalue of the datapoint. "vn" is a string array that has custom label names. var IETable = (dt as System.ComponentModel.IListSource).GetList(); chChart.DataBindCrossTable(IETable, "Number","","Start Time,StopTime",""); foreach (Series sr in chChart.Series) { sr.ChartType = SeriesChartType.RangeBar; sr.XValueType = ChartValueType.String; foreach (DataPoint p in sr.Points) { int dpIndex=0; // foreach unique x axis value, increment dpIndex //ToDoCode //aligning the datapoint's X axis value in the middle p.XValue = dpIndex + 0.5; } }
Creating an object array of two value arrays dynamically – application: highcharts dotnet
I'm hoping to get a quick solution to this. Here is a snippet of the code that works when creating a series: Series SeriesABC2 = new Series { Name = '#' + HakuAlueet[1], Data = new Data( new object[]{ new[] { 300, 440 }, new[] { 400, 540 } }), PlotOptionsArearange = new PlotOptionsArearange { Visible = true, LineWidth = 0, FillOpacity = 0.3 }, Type = ChartTypes.Arearange }; Now the plan is to make this dynamic creating the values in the object "new[] { 300, 440 }, new[] { 400, 540 }" inside .net C#. I'm quite new to C# so I'm not quite sure of the naming convention, but I seem to need to make an array object of an two value arrays. How would I go about this? I've tried countless ways of managing this but just haven't found a solution that would be acceptable to dotnet.Highcharts. Thanks!
string[] books= source.Select(a => a.bookName).ToArray(); object[] visits = source.Select(a => (object)a.Visits).ToArray(); DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart") .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar, Width = 900 }).SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { ColorByPoint = true, DataLabels = new PlotOptionsBarDataLabels { Enabled = true } } }).SetXAxis(new XAxis { Categories = books, }).SetSeries(new Series { Data = new Data(visits), Name = "User Book Visits" }); lb_chart.Text = chart.ToHtmlString(); Here source contain data where I am querying some dynamic content. This is working and hope this will also help you.
Repeated values in x axis in dotnet highchart controls
I m facing problem with dotnet highcharts controls the problem is the values in x axis are repeating i.e. 0 0 1 1 2 2 3 3 4 4 5 5. Please help below is my code. Javascript code <div id='ContentAvailabilty_container'></div> <script type='text/javascript'> var ContentAvailabilty; $(document).ready(function() { ContentAvailabilty = new Highcharts.Chart({ chart: { renderTo:'ContentAvailabilty_container', type: 'bar' }, legend: { enabled: false, layout: 'horizontal' }, plotOptions: { bar: { borderWidth: 0 } }, title: { text: 'Content Availabilty' }, xAxis: { categories: ['#Rest of Published', '#Published Queue', '#Rest of Unpublished', '#Unpublished Queue', '#New Approved'] }, yAxis: { labels: { formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, min: 0, title: { text: '' } }, series: [{ data: [5, 0, 0, 0, 0] }] }); }); </script> DOT NET CODE DotNet.Highcharts.Highcharts currentReport = new DotNet.Highcharts.Highcharts("ContentAvailabilty"); currentReport.InitChart(new Chart { Type = ChartTypes.Bar }); currentReport.SetTitle(new Title { Text = "Content Availabilty" }); currentReport.SetXAxis(new XAxis { Categories = new[] { "#Rest of Published", "#Published", "#Rest of Unpublished", "#Unpublished", "#Approved" } }); currentReport.SetYAxis(new YAxis { Title = new XAxisTitle { Text = "" } , Labels = new XAxisLabels { Formatter = "function() { return Highcharts.numberFormat(this.value, 0); }" }//function to convert 4k to 4000 ,Min=0 }); currentReport.SetLegend(new Legend { Enabled = false }); currentReport.SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { BorderWidth=0} }); currentReport.SetSeries(new Series[] { new Series{ Data = new Data( new object[]{ RestofPublished, publishedQueue, Rest_of_UnPublished, UnPublished_Queue, newApproved } ) } }); ReportContainerLabel.Text = string.Empty; ReportContainerLabel.Text = currentReport.ToHtmlString();
xAxis : [{categories : []}], // when defining X-Axis chart.xAxis[0].setCategories(JSON_object); // when parsing data ,from another method , if you want to use categories X-Axis or Y-Axis ? .bcoz the code and the chart image confusing me , any way if you want to set the categories by manually , then initially make categories as null , and assigned a array to it by using JQuery , if you loading dynamic data , then there should be a parsed json object or something semilar