I'm using dotnet library provided by Codeplex to draw Highcharts plots on an asp.net web form. Although I managed to plot several types of charts successfully, I have difficulty in plotting the 3D scatter plot. It has some additional functionality for rotating the plot by tracking the mouse.
Anybody tried this 3D scatter plot on .Net platform before? How do you use the js code that cannot be put inside the var chart = new Highcharts.Chart(...) block?
On the project web site is a package with samples. In those demos you can find 3d column. After editing it's code to change series type and data format I got a working 3d scatter chart. The code I used:
public ActionResult ThreeDColumn()
{
Highcharts chart = new Highcharts("chart")
.InitChart(new Chart
{
Type = ChartTypes.Scatter,
Margin = new[] { 75 },
Options3d = new ChartOptions3d
{
Enabled = true,
Alpha = 15,
Beta = 15,
Depth = 50,
ViewDistance = 25
}
})
.SetTitle(new Title { Text = "Chart rotation demo" })
.SetSubtitle(new Subtitle { Text = "Test options by dragging the sliders below" })
.SetLegend(new Legend { Enabled = false })
.SetSeries(new Series { Data = new Data(new object[,] { { 0, 0, 0 }, { 1, 1, 1 }, { 2, 2, 2 } }) });
return View(chart);
}
The file is DemoController.cs in project's Controllers directory.
In case you need to create the same Highcharts chart as a one in Highcharts demo page you might get some problems. The code in the DotNet.Highcharts is from 2014 and runs on old Highcharts version. Newer code is used in an unrelated and official Highcharts product that is still being developed - http://dotnet.highcharts.com/ so you could try that.
Related
I'd like to get some datalabels showing inside segments of a doughnut chart where there is suitable space to do so.
I know I can use negative distance values on the the data labels config options, but I wonder how I can achieve this dynamically based on the values\size of the segments.
Is such a technique achievable? Can I have a mix of data labels outside of the segments connected with lines (connectors) and others inside the actual segments?
My starting point so far based off the official highcharts example pie chart code: https://jsfiddle.net/parky12/tbnjypse/1/
You can for example use chart.load event and change distance, x or y properties for an individual point. For example:
events: {
load: function() {
this.series[0].points.forEach(point => {
if (point.y > 5) {
point.update({
dataLabels: {
distance: -50
}
// avoid redraw after each update
}, false);
}
});
this.redraw();
}
}
Live demo: https://jsfiddle.net/BlackLabel/Lco29fdj/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update
I am using the render event to alter the positioning of of my x-axis labels on a highchart. It works great - centering labels between ticks on a datetime x-axis and removing the last label.
When I export the chart - with the same setup - the function is called (see centerTimelineLabels below), but it cannot access the rendered x-axis labels. Please see the images below showing the different x-axis labels in the DOM and as an exported PNG.
jsfiddle here: https://jsfiddle.net/SirMunchington/36xcbr7m/52/
Specifically, this.container inside of the function, is an empty wrapper on export... no children.
Is there a way to access and manipulate the x-axis labels in a highchart when exporting?
exporting: {
chartOptions: { // specific options for the exported image
chart: {
backgroundColor: '#ffffff',
events: {
render: centerTimelineLabels
}
}
},
...
var centerTimelineLabels = function() {
var labels = $('.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
$(labels).css('margin-left',
(parseInt($(labels.get(1)).css('left')) - (parseInt($(labels.get(0)).css('left')) + parseInt($(labels.get(1)).width()))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
CORRECT X-AXIS VIA WEB
INCORRECT X-AXIS VIA EXPORT
Thank you for the demo.
Try to use this config - notice that the render event triggers after each chart redraw:
"events": {
render() {
let chart = this,
xAxis = chart.xAxis[0],
ticks = xAxis.ticks,
firstTick = ticks[xAxis.tickPositions[0]],
secondTick = ticks[xAxis.tickPositions[1]],
ticksDistance = secondTick.mark.getBBox().x - firstTick.mark.getBBox().x;
for (let i in ticks) {
let tick = ticks[i];
if (!tick.isLast) {
tick.label.translate(ticksDistance / 2, 0)
}
}
}
}
Demo: https://jsfiddle.net/BlackLabel/o06r1yfw/
To hide the last label set the xAxis.showLastLabel property to false.
API: https://api.highcharts.com/highcharts/xAxis.showLastLabel
I have a population pyramid using the rCharts-highChart library implementation presented in here. I am trying to add a layer of bubble chart over the population pyramid. I have partial success in implementing it. The image below shows the chart I achieved.
enter image description here
I am not able to control some attributes of the bubble chart. I want datalabels to be displayed on the the bubble chart. However, the dataLabels are activated for the bar chart only. I want the dataLabels to be displayed on the bubble chart also. The code I use is below.
n1 <- hPlot(x = 'Agec',
y = 'Category',
type = 'bar',
group = 'HbA1c_levels',
plotBorderWidth = 1,
data = MyD.melt)
# Adding a series of bubble chart
n1$series(type = 'bubble',
data = (as.numeric(as.character(MyD$low)))
n1$series(type = 'bubble',
data = (as.numeric(as.character(MyD$high))))
n1$plotOptions(series = list(stacking = 'normal', pointPadding = 0, borderWidth = 0, dataLabels = list(enabled = TRUE)))
#dataLabels gets activated only for bar chart as shown in the figure
Further, the bubblechart is able to read the 'Y axis' when I specify a particular column from the dataframe as shown in the above code. I would want it to read the "X,Y,Z,name" attributes from a list or dataframe and then plot the bubbles. Any idea how it can be done?
I'm using DotNet.HighCharts and am very pleased with what it enables me to do so far. However, I cannot get it to position labels on the inside of a donut / pie chart. It appears that the distance attribute is not available for the DataLabels. Does anyone have a workround?
Alternatively, does anone know how to write text onto the top of a chart at a specific position (relative to the container of course)?
It's possible to use Distance property in the DataLabels:
DataLabels = new PlotOptionsPieDataLabels
{
Formatter = "function() { return this.y > 5 ? this.point.name : null; }",
Color = Color.White,
Distance = -30
}
Also you can see how is used in the sample project. Download from here: http://dotnethighcharts.codeplex.com/releases
Is it possible to specify what color each section of the pie looks like? Also, is it possible to display the legend on the side?
For ex: in the chart below, can I some specify that , “Pass“ shows up as green, Fail as red and unknown as grey?
public ActionResult GetRainfallChart()
{
var key = new Chart(width: 600, height: 400).AddSeries(
chartType: "pie",
legend: "Test pass",
xValue: new[] { "Pass", "Fail", "Unknown" },
yValues: new[] { "50", "30", "20" })
.Write();
return null;
}
If its not possible with the "chart" control that comes in System.Web.Helpers assembly, then can someone point me how to do this with asp.net control for webforms in a MVC project
You can set the color on the series. There's a Color property.
For example:
// Set color for the whole series
Chart.Series[0].Color = Color.Green;
// Set color of a single data point
Chart.Series[0].Points[5].Color = Color.Red;
For more info on colours, see this blog entry:
Setting Microsoft Chart Series Colors
Unfortunately, Chart doesnt have a "Series" property that is exposed. FYI, I'm talking about the "Chart" class present in the System.web.Helpers assembly that can be used in asp.net mvc app and its not same as the "chart" that comes in the System.data.visualization assembly that comes with asp.net web forms app
to show a legend...
chart.Legends.Add(new Legend("Default") { Docking = Docking.Right });
You can specify range of colors that you want in .SeriesColors Property of Chart,
.SeriesColors(new string[] { "#952F91", "#00A9AA", "#EA7EB8" /*...range of colors */ })