.NET Highcharts in MVC - asp.net-mvc

Question

I am new to .NET and using dotnet highcharts in MVC. My task is when clicked on a graph I should display the table with related data based on xaxis value clicked. When clicked on the graph I want to get the x-axis value that is selected and pass this value to the view. How can I do this? Can I get that value from Formatter? How can I add click event to this?
Viewcode:
#model DotNet.Highcharts.Highcharts
#(Model)
Controller code:
public ActionResult CreateSeverityChartVM(string s1, string s2, string s3, string s4, string s5)
{
string select = "";
List<object> series = new List<object>();
series.Add(new DotNet.Highcharts.Options.Point
{
Name = "Severity5",
Y = Convert.ToInt32(s5),
Sliced = true,
Color = ColorTranslator.FromHtml("#FF0000")
});
series.Add(new DotNet.Highcharts.Options.Point
{
Name = "Severity4",
Y = Convert.ToInt32(s4),
Sliced = true,
Color = ColorTranslator.FromHtml("#FF6666")
});
series.Add(new DotNet.Highcharts.Options.Point
{
Name = "Severity3",
Y = Convert.ToInt32(s3),
Sliced = true,
Color = ColorTranslator.FromHtml("#FF3333")
});
series.Add(new DotNet.Highcharts.Options.Point
{
Name = "Severity2",
Y = Convert.ToInt32(s2),
Sliced = true,
Color = ColorTranslator.FromHtml("#FF9999")
});
series.Add(new DotNet.Highcharts.Options.Point
{
Name = "Severity1",
Y = Convert.ToInt32(s1),
Sliced = true,
Color = ColorTranslator.FromHtml("#FFCCCC")
});
string[] myCs = { "Level 5", "Level 4", "Level 3", "Level 2", "Level 1" };
Highcharts chart = new Highcharts("Severities")
.SetTitle(new Title() { Text = "" })
.SetXAxis(new XAxis
{
Categories = myCs
})
.SetPlotOptions(new PlotOptions
{
Column = new PlotOptionsColumn
{
AllowPointSelect = true,
Cursor = Cursors.Pointer,
ShowInLegend = true,
DataLabels = new PlotOptionsColumnDataLabels
{
Color = ColorTranslator.FromHtml("#000000"),
Formatter = "function() { return this.y;}",
},
}
})
.SetSeries(new Series
{
Type = ChartTypes.Column,
Name = "Severity Count",
Data = new Data(series.ToArray())
});
return PartialView("_ChartPartial", chart);
}

Answer 1

You can use chart.events.click event. It fires when clicking on the plot background. Information on the clicked spot can be found through event.xAxis and event.yAxis. Check the demo in pure js.
Code:
// create the chart
Highcharts.chart('container', {
chart: {
events: {
click: function(event) {
var label = this.renderer.label(
'x: ' + Highcharts.numberFormat(event.xAxis[0].value, 2) + ', y: ' + Highcharts.numberFormat(event.yAxis[0].value, 2),
event.xAxis[0].axis.toPixels(event.xAxis[0].value),
event.yAxis[0].axis.toPixels(event.yAxis[0].value)
)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function() {
label.fadeOut();
}, 1000);
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
Demo:
https://jsfiddle.net/BlackLabel/dbqpou4v/
JS API reference:
https://api.highcharts.com/highcharts/chart.events.click
.NET API reference:
http://dotnet.highcharts.com/Help/Highcharts/html/class_highsoft_1_1_web_1_1_mvc_1_1_charts_1_1_chart_events.html#a87a3128090852777824e4118123a2579

Answer 2

We should add click in SetPlotOptions. when we click on graph it is calling showdetails function. showdetails is a java function defined in the view(index).It worked for me.
.SetPlotOptions(new PlotOptions
{
Column = new PlotOptionsColumn
{
AllowPointSelect = true,
Cursor = Cursors.Pointer,
ShowInLegend = true,
DataLabels = new PlotOptionsColumnDataLabels
{
Color = ColorTranslator.FromHtml("#000000"),
Formatter = "function() { return this.y;}"
},
Point = new PlotOptionsColumnPoint() { Events = new PlotOptionsColumnPointEvents() { Click = "function(e) { showDetails(this.name); }" } }
}
})