Highchart данных каждой строки в gridview, чтобы отобразить различные данные при нажатии кнопки открыть модальный

Question

У меня есть gridview в ASP.NET с asp: templatefield , содержащим кнопку для каждой строки.На кнопке у меня есть атрибут data-target, который является модальным.

При привязке строки сетки просмотра я получаю идентификатор строки и вызываю метод SerializedBoxChart () , который помещает вИдентификатор строки и извлекает данные.Тем не менее, похоже, что он проходит по каждой строке, и я получаю данные последней строки в каждой строке сетки.Когда я нажимаю на кнопку, открывается модальное окно с окончательными данными строки.Я пытаюсь назначить данные для каждой строки в зависимости от measureID, и когда вы нажимаете на кнопку, открывается эти данные строк.

Я чувствую, что это связано с конфликтующими идентификаторами контейнера, когда javascript запускает скрипт и помещает его в div, но не знаю, как это исправить.

<asp:TemplateField HeaderText="AvgDaysTaken" SortExpression="AvgDaysTaken">
<ItemTemplate>
<asp:Button type="button" runat="server" id="AvgDaysTaken" class="btn btn-primary" data-toggle="modal" data-target="#myBoxPlot"  Text='<%# Eval("AvgDaysTaken") %>' />
</ItemTemplate>
</asp:TemplateField>

Модальный код, который содержит div с идентификатором контейнера, в который будет помещен график

<div class="container">
   <!-- Modal -->
   <div class="modal fade" id="myBoxPlot" role="dialog">
      <div class="modal-dialog">
         <!-- Modal content-->
         <div class="modal-content">
            <div class="modal-header">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
               <div id="container" >
               </div>
            </div>
            <div class="modal-footer">
               <button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
         </div>
      </div>
   </div>
</div>

Получить данные для блочного графика, используя c #

 public void SerializedBoxChart(int measureid)
{

    string connectionstring = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
    SqlConnection cn = new SqlConnection(connectionstring);
    SqlCommand cmd = new SqlCommand("[dbo].cr_fe_KPI_RPT_Summary", cn);
    cmd.Parameters.AddWithValue("@SubTeamNo", SubTeam);
    cmd.Parameters.AddWithValue("@Month", Month);
    cmd.Parameters.AddWithValue("@Year", Year);
    cmd.Parameters.AddWithValue("@ReportPeriod", ReportPeriod);
    cmd.Parameters.AddWithValue("@controlID", ControlID);
    cmd.Parameters.AddWithValue("@PracticeGroupID", PracticeGroup);
    cmd.Parameters.AddWithValue("@Instructor", SearchInput.Text);
    cmd.Parameters.AddWithValue("@MeasureID", measureid) ;
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    cmd.CommandType = CommandType.StoredProcedure;
    cn.Open();
    SqlDataReader reader = cmd.ExecuteReader();


    var chartValues = new List<string>();
    var chartValues2 = new List<string>();

    if (reader.HasRows)
    {
        while (reader.Read())
        {
            string name = reader.GetString(0);

            if (name != "Total")
            {


                string str = reader["ChartData"].ToString();
                string a = reader["MeasureDesc"].ToString();

                string[] strList = str.Split(',');

                // convert it in json
                dataStr = JsonConvert.SerializeObject(strList, Formatting.None);

                hiddenvariable.Value = dataStr;
                hiddenvariablemeasuredesc.Value = a;

                chartValues.Clear();
            }
        }
    }

    else
    {

    }

    reader.Close(); // close the reader
    cn.Close();



}

JavaScript для создания рамочного сюжета:

function CreateBoxPlot() {


    var hv = $('#hiddenvariable').val();
console.log(hv);
var hvmeasure = $('#hiddenvariablemeasuredesc').val();
console.log(hvmeasure);

var chart;
var titleText = hvmeasure;
var subTitleText = 'Test Chart Subtitle';
var type = 'boxplot';
var data = [JSON.parse(hv).map(item => parseInt(item))]; //Doesnt work in IE

var $container = $('<div>').appendTo(document.body);

$(function () {
    $('#container').highcharts({
        chart: { type: type, inverted: true},
        title: { text: hvmeasure },
        subtitle: { text: subTitleText },
        renderTo: $container[0],
        legend: { enabled: false },
        tooltip: {
            shared: true,
            crosshairs: true
        },
        plotOptions: {
            series: {
                pointWidth: 50
            }
        },

        xAxis: {
            visible: false

        },
        yAxis: {

            visible: true,
            title: {
                text: 'Values'
            },

            plotLines: [{
                value: 80,
                color: 'red',
                width: 2

            }]

        }
    });

    chart = $('#container').highcharts();
    chart.addSeries({ data: data });

 });
}