Im using dotnethighcharts and want the columns to have a pointwidth=20, but I cant get it to work with dotnethighcharts, any suggestions how to make that?
Highcharts chart;
chart = new Highcharts("chart")
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
.SetXAxis(new XAxis
{
Categories = new[] { "1", "2" },
Title = new XAxisTitle { Text = string.Empty }
})
.SetPlotOptions(new PlotOptions
{
Bar = new PlotOptionsBar
{
DataLabels = new PlotOptionsBarDataLabels { Enabled = true }
},
})
.SetSeries(new[]
{
new Series {Name = "1", Data = new Data(new object[] {1})},
new Series {Name = "2", Data = new Data(new object[] {4})}
});
Here is an example how to us pointwidth
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-pointwidth-20/
The answer - I was missing this
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
PointWidth = 40,
BorderWidth = 0
}
Here is all code
Highcharts chart;
chart = new Highcharts("chart")
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
.SetXAxis(new XAxis
{
Categories = new[] { "1", "2" },
Title = new XAxisTitle { Text = string.Empty }
})
.SetPlotOptions(new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
PointWidth = 40,
BorderWidth = 0
},
Bar = new PlotOptionsBar
{
DataLabels = new PlotOptionsBarDataLabels { Enabled = true }
},
})
.SetSeries(new[]
{
new Series {Name = "1", Data = new Data(new object[] {1})},
new Series {Name = "2", Data = new Data(new object[] {4})}
});
Related
Public Shared Function GenerateParagraph() As Paragraph
Dim element = New Paragraph(New Run(New FieldChar(New FormFieldData(New FormFieldName() With {
.Val = "Check1"
}, New Enabled(), New CalculateOnExit() With {
.Val = BooleanValues.Zero
}, New CheckBox(New AutomaticallySizeFormField(), New DefaultCheckboxFormFieldState() With {
.Val = BooleanValues.Zero
}))) With {
.FieldCharType = FieldCharValues.Begin
}), New BookmarkStart() With {
.Name = "Check1",
.Id = 0
}, New Run(New FieldCode(" FORMCHECKBOX ") With {
.Space = "preserve"
}), New Run(New FieldChar() With {
.FieldCharType = FieldCharValues.[End]
}), New BookmarkEnd() With {
.Id = 0
}, New Run(New Text("My check box"))) With {
.RsidParagraphAddition = "00784880",
.RsidRunAdditionDefault = "00B77989"
}
Return element
End Function
My responsive rules are not being applied in Highcharts .NET.
Can anyone point me to the right direction?
I want the step=2 to be applied when max width of 460.
I can put step=2 on the x axis in the highcharts object but that results in the chart always having 2 step. I only want this when the responsive condition is applied.
This is my controller code:
public ActionResult FundInformation()
{
var fondsViewModel = new FondsViewModel();
List<Series> tmpList = new List<Series>();
List<string> colorList = new List<string>();
//var data = fonds.GrafiekData;
List<double> fondsdata = new List<double> { 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 54.4, 54.4, 54.4, 54.4, 54.4 };
List<ColumnSeriesData> fondslist = new List<ColumnSeriesData>();
fondsdata.ForEach(p => fondslist.Add(new ColumnSeriesData { Y = p }));
ColumnSeries Cs = new ColumnSeries
{
Name = "Fonds",
Data = fondslist,
Stack = "ul",
};
tmpList.Add(Cs);
colorList.Add("#CCCCCC");
var chartId = $"chart{Guid.NewGuid().ToString("N")}";
Highcharts myChart = new Highcharts()
{
Colors = colorList,
Chart = new Chart
{
ClassName = "grafiek",
//StyledMode = true,
Height = 135,
Type = ChartType.Column,
Events = new ChartEvents
{
//Redraw = "function(e) {console.log(this)}"
}
},
Title = new Title
{
Text = "Fonds"
},
Credits = new Credits
{
Enabled = false
},
Legend = new Legend
{
Enabled = false
},
XAxis = new List<XAxis>
{
new XAxis
{
GridLineWidth= 0,
Min = 1,
Max = Cs.Data.Count(),
TickAmount = Cs.Data.Count(),
Reversed = true,
StartOnTick = true,
Labels = new XAxisLabels
{
Enabled= true,
//Step=2
}
}
},
YAxis = new List<YAxis>
{
new YAxis
{
TickAmount = 3,
GridLineWidth = 0.5,
MinorGridLineWidth = 0,
AllowDecimals = false,
Title = new YAxisTitle
{
Enabled = false
},
Labels = new YAxisLabels
{
Enabled = true,
Format = "{value}%",
},
StackLabels = new YAxisStackLabels
{
Enabled = false
}
}
},
Tooltip = new Tooltip
{
Enabled = false,
Shared = true,
Shadow = new Shadow
{
Enabled = false
}
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
PointStart = 1,
PointPadding = 0,
GroupPadding = 0.03,
BorderWidth = 0,
},
Series = new PlotOptionsSeries
{
EnableMouseTracking = false,
States = new PlotOptionsSeriesStates
{
Hover = new PlotOptionsSeriesStatesHover
{
Enabled = false
},
},
DataLabels = new PlotOptionsSeriesDataLabels
{
Enabled = false,
Y = -35,
Rotation = 0,
Align = PlotOptionsSeriesDataLabelsAlign.Center,
Inside = true,
}
}
},
Responsive = new Responsive
{
Rules = new List<ResponsiveRules>
{
new ResponsiveRules
{
Condition = new ResponsiveRulesCondition
{
MaxWidth=460,
},
ChartOptions = new
{
XAxis = new List<XAxis>
{
new XAxis
{
Labels = new XAxisLabels
{
Step = 2,
}
}
},
}
},
}
},
Series = tmpList,
};
myChart.ID = chartId;
fondsViewModel.FondsId = chartId;
fondsViewModel.Chart = myChart;
fondsViewModel.FondsNaam = "Some name fonds";
fondsViewModel.LabelFondsBeschrijvingKnop = "Omschrijving";
fondsViewModel.FondsBeschrijvingContent = "Something something";
fondsViewModel.FondsBeschrijvingUrl = "Something.com";
return View(fondsViewModel);
}
And this is my view code:
#model WebApplication3.Controllers.FondsViewModel
#using Highsoft.Web.Mvc.Charts.Rendering
#{
var renderer = new HighchartsRenderer(Model.Chart, "somekey");
}
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="pensioen-bij-row verdeling">
<div class="fondsdetail">
<div id="#Model.FondsId" class="grafiek"></div>
#Html.Raw(renderer.RenderHtml(false))
<button class="fondsbeschrijving">#Model.LabelFondsBeschrijvingKnop</button>
<div class="beschrijving">
#Html.Raw(Model.FondsBeschrijvingContent)
<a class="externe-link" href="#Model.FondsBeschrijvingUrl" target="_blank"><span>#Model.FondsNaam</span></a>
</div>
</div>
</div>
Im using Highsoft.Highcharts 8.0.
Try to use this code:
ChartOptions = new { xAxis = new {
labels = new { step = 2 }
} }
If this wouldn't help could you share a JS code produced by wrapper?
I have one column chart, representing two categories on X-axis - ARRIVALS and DEPARTURES. Then, I have 4 series representing different commodities, one commodity per each category. This will end up in having 8 columns draw on the chart.
What I'm trying to do, is to add a scatter chart, representing one point per each bar ( a total of 8 points), but unfortunately, I only can add one point per category. Can this be implemented?
Here is the code that I used for this (it is MVC .NET):
Highcharts barChartArrivalsDepartures = new Highcharts("ArrivalsDepartures")
.InitChart(new Chart
{
BorderColor = Color.Black,
BorderRadius = 0,
BorderWidth = 2
})
.SetTitle(new Title { Text = "Arrivals and Departures" })
.SetXAxis(new XAxis { Categories = new[] { "Arrivals", "Departures"} })
.SetYAxis(new YAxis
{
Min = 0,
Title = new YAxisTitle { Text = "Count [t]" }
})
.SetLegend(new Legend
{
Layout = Layouts.Vertical,
Align = HorizontalAligns.Left,
VerticalAlign = VerticalAligns.Top,
X = 290,
Y = 0,
Floating = true,
BackgroundColor = new BackColorOrGradient(new Gradient
{
LinearGradient = new[] { 0, 0, 0, 400 },
Stops = new object[,]
{
{ 0, Color.FromArgb(13, 255, 255, 255) },
{ 1, Color.FromArgb(13, 255, 255, 255) }
}
}),
Shadow = true
})
.SetTooltip(new Tooltip { Formatter = #"function() { return ''+ this.x +': '+ this.y +' tones'; }" })
.SetSeries(new[]
{
new Series { Type = ChartTypes.Column, Name = "Coal", Data = new Data(new object[] { 49.9, 71.5 }), PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series { Type = ChartTypes.Column, Name = "Magnetite", Data = new Data(new object[] { 48.9, 38.8 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series { Type = ChartTypes.Column, Name = "Iron Ore", Data = new Data(new object[] { 83.6, 78.8 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series { Type = ChartTypes.Column, Name = "Grain", Data = new Data(new object[] { 42.4, 33.2 }) , PlotOptionsColumn = new PlotOptionsColumn { PointPadding = 0.2, BorderWidth = 0 } },
new Series
{
Type = ChartTypes.Scatter,
Name = "Target Coal",
Color = ColorTranslator.FromHtml("#FF0000"),
//Data = new Data(new object[] { new object[] {40}, new object[] {80}}),
Data = new Data(new object[] { 15, 50} ),
PlotOptionsScatter = new PlotOptionsScatter
{
Marker = new PlotOptionsScatterMarker
{
Symbol = "diamond",
Radius = 3
}
}
}
})
It's not solution in .net but general idea is to calculate x-value for each of scatter points, for example: http://jsfiddle.net/3bQne/206/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
},
xAxis: {
categories: ['+', '-']
},
series: [{
data: [1,2],
id: 'first',
stack: 0
}, {
data: [3,5],
id: 'second',
stack: 0
}, {
data: [[-0.15,1],[0.85,2]],
linkedTo: 'first',
type: 'scatter'
}, {
data: [[0.15,3],[1.15,5]],
linkedTo: 'second',
type: 'scatter'
}]
});
Does anyone have a simple example of populating a Highchart with data from a MS SQL DB using DotNet.Highcarts?
I have the demo working with static data
Highcharts chart = new Highcharts("chart")
.SetCredits(new Credits { Enabled = false })
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
.SetTitle(new Title { Text = "Membership Overview" })
.SetXAxis(new XAxis { Categories = new[] { "Paid Members", "Active Members", "Retained Members", "New Members", "Lapsed Members" } })
.SetYAxis(new YAxis
{
Min = 0,
Title = new YAxisTitle { Text = "Total Members" }
})
.SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +''; }" })
.SetPlotOptions(new PlotOptions { Bar = new PlotOptionsBar { Stacking = Stackings.Normal } })
.SetSeries(new[]
{
new Series { Name = "Total", Data = new Data(new object[] { 441, 441, 22, 30, 610 }) }
});
How can I change the Series to accept data from my DB?
Assuming I need to connect to DB like so:
var newcustomer = db.Customer;
Then do something like this:
new Series
{
Name = "Total",
Data = new Data(newcustomer.Select(x => ............
Any help would be appreciated!
For anyone else having a similar issue...
var paidmembers = (from c in db.Customer
where c.CustomerStatusID == 1
select c).Count();
var activemembers = (from c in db.Customer
where c.CustomerStatusID == 2
select c).Count();
new Series {
Name = "Category",
Data = new Data(new object[] {paidmembers, activemembers})
}
I'd like to make stacked&grouped histograms using HighCharts and ASP.NET MVC3.
I found this example on HighCharts' site: http://www.highcharts.com/demo/column-stacked-and-grouped
I would use JSonResult in my controller.
In particular, in above example, graph series are pre-defined in javascript, while I would dynamically create them with JSON.
With DonNet.Highcharts you can easily create Highcharts only on the server side. There is example with the stacked and grouped column. Here is the server side code:
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Column })
.SetTitle(new Title { Text = "Total fruit consumtion, grouped by gender" })
.SetXAxis(new XAxis { Categories = new[] { "Apples", "Oranges", "Pears", "Grapes", "Bananas" } })
.SetYAxis(new YAxis
{
AllowDecimals = false,
Min = 0,
Title = new YAxisTitle { Text = "Number of fruits" }
})
.SetTooltip(new Tooltip { Formatter = "TooltipFormatter" })
.SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn { Stacking = Stackings.Normal } })
.SetSeries(new[]
{
new Series
{
Name = "John",
Data = new Data(new object[] { 5, 3, 4, 7, 2 }),
Stack = "male"
},
new Series
{
Name = "Joe",
Data = new Data(new object[] { 3, 4, 4, 2, 5 }),
Stack = "male"
},
new Series
{
Name = "Jane",
Data = new Data(new object[] { 2, 5, 6, 2, 1 }),
Stack = "female"
},
new Series
{
Name = "Janet",
Data = new Data(new object[] { 3, 0, 4, 4, 3 }),
Stack = "female"
}
});
You can pass the data as you like.