Use Hidden field in syncfusion column chart series

Question

I am using syncfusion in ASP.NET MVC for my application to display chart and I done it well.

Now I have to set hidden field for every chart that generated on every axes and want to get that hidden field's value on click function call of chart.

Controller:

public ActionResult SyncfusionChart()
        {
    List<ChartData> data = new List<ChartData>();
                data.Add(new ChartData("Jan", 35, 1));
                data.Add(new ChartData("Feb", 28, 2));
                data.Add(new ChartData("Mar", 34, 3));
                data.Add(new ChartData("Apr", 32, 4));
                data.Add(new ChartData("May", 40, 5));
                data.Add(new ChartData("Jun", 32, 6));
                data.Add(new ChartData("Jul", 35, 7));
                data.Add(new ChartData("Aug", 55, 8));
                data.Add(new ChartData("Sep", 38, 9));
                data.Add(new ChartData("Oct", 30, 10));
                data.Add(new ChartData("Nov", 25, 11));
                data.Add(new ChartData("Dec", 32, 12));
}
    public class ChartData
        {
            public string Month;
            public double Sales;
            public int id;
            public ChartData(string month, double sales, int id)
            {
                this.Month = month;
                this.Sales = sales;
                this.id = id;
            }
        }

CSHTML:

<div>
    @(Html.EJ().Chart("chartContainer")
        .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Rep Code")))
        .PrimaryYAxis(pr => pr.Range(ra => ra.Max(500).Min(0).Interval(50)).Title(tl => tl.Text("Sum (Price)")))
        .CommonSeriesOptions(cr => cr.Type(SeriesType.Column).EnableAnimation(true))
        .Title(t => t.Text("Report Demo"))
        .Series(sr =>
        {
            sr.DataSource(ViewBag.ChartData)
            .Type(SeriesType.Column)
            .XName("Month").YName("Sales")
            .Name("Months")
            .Add();
        })
    )
</div>

<script type="text/javascript">

    $(function () {
        $("#chartContainer").ejChart({
            pointRegionClick: "mousemove"
        });
    });

    function mousemove(sender) {
        series = sender.model.series[sender.data.region.SeriesIndex];
        var X = series.points[sender.data.region.Region.PointIndex].x;
        var Y = series.points[sender.data.region.Region.PointIndex].y;
        alert("X:" + X + "  Y:" + Y);
    }
</script>

Answer 1

Thanks for using Syncfusion product.

We have analyzed your query. Your requirement can be achieved as workaround and we have prepared a sample. In the controller, we have passed the hidden field data to viewbag and obtained the dataSource in the pointRegionClick event. Kindly find the code snippet below.

//Assigning dataSource to viewbag
List<ChartData> data = new List<ChartData>();
        data.Add(new ChartData("Jan", 35,100));
        data.Add(new ChartData("Feb", 28,200));
        data.Add(new ChartData("Mar", 34, 300));
        data.Add(new ChartData("Apr", 32, 400));
        data.Add(new ChartData("May", 40, 500));
        data.Add(new ChartData("Jun", 32, 600));
        data.Add(new ChartData("Jul", 35, 700));
        data.Add(new ChartData("Aug", 55, 800));
        data.Add(new ChartData("Sep", 38, 900));
        data.Add(new ChartData("Oct", 30, 300));
        data.Add(new ChartData("Nov", 25, 700));
        data.Add(new ChartData("Dec", 32, 200));
        ViewBag.ChartData = data;
@(Html.EJ().Chart("chartContainer")
   //... 
   .PointRegionClick("mousemove")
)
function mousemove(sender) {
    var dataSource = @Html.Raw(Json.Encode(ViewBag.ChartData));
    series = sender.model.series[sender.data.region.SeriesIndex];
    var X = series.points[sender.data.region.Region.PointIndex].x;
    var Y = series.points[sender.data.region.Region.PointIndex].y;
    var hiddenField = dataSource[sender.data.region.Region.PointIndex].
                      HiddenField;
    alert("X:" + X + "  Y:" + Y + " HiddenField: "+ hiddenField);
}

The code snippet(@Html.Raw(Json.Encode(ViewBag.ChartData))) is used to convert the chart data as Json in the script.

For your reference we have attached the sample. Kindly find the Sample Link

Thanks, Dharani.