Создание графика в ASP.NET с помощью Morris.js с помощью AJAX и обработчика http

Question

Привет, я пытаюсь научиться создавать линейный граф в asp.net с использованием плагина morris.js. Я могу отображать только одну метку и одно значение из таблицы, но я могу отображать значения в графе, когда я использую метку как DateTime.Now.AddDays (i) .ToString («yyy-MM-dd») чем граф работает отлично, и значения отображаются для каждой даты, но мне нужно использовать ярлыки из таблицы.

 GraphData graphData; 
     GraphDataList graphDataList = new GraphDataList(); 
     graphDataList.ListOfGraphData = new List<GraphData>(); 
     String InsertQuery = "Select name, value from graph1"; 

     try 
     { 
      conn.Open(); 
      Random random = new Random(); 
      SqlCommand cmd = new SqlCommand(InsertQuery, conn); 
      SqlDataAdapter sa = new SqlDataAdapter(InsertQuery, conn); 

      DataSet ds = new DataSet(); 
      // sa.Fill(ds, "graph"); 
      int index = 0; 
      SqlDataReader da = cmd.ExecuteReader(); 

      while (da.Read()) 
      { 

       label.Add(da.GetString(0)); 

       value.Add(da.GetString(1)); 
      } 
      while (index < label.Count) 
      { 
       graphData = new GraphData(); 
       graphData.label =   DateTime.Now.AddDays(index).ToString("yyyy-MM-dd"); 
       //graphData.value = Convert.ToString(random.Next(index, 10000)); 
       // graphData.label = label[index]; 
       graphData.value = value[index]; 
       graphDataList.ListOfGraphData.Add(graphData); 
       index++; 

      } 
        conn.Close(); 

Answer 1

Убедитесь, что Javascript выглядит следующим образом:

 Morris.Line({ 
      element: 'area-example', 
      data: Graph(), 
      xkey: 'label', 
      ykeys: ['value'], 
      labels: ['value'] 
     }); 

    function Graph() { 
     var data = ""; 

     $.ajax({ 
      type: 'GET', 
      url: "http://localhost:60539/GraphHandler.ashx", 
      dataType: 'json', 
      async: false, 
      contentType: "application/json; charset=utf-8", 
      data: { 'GraphName': 'line' }, 
      success: function (result) { 
       data = result; 
      }, 
      error: function (xhr, status, error) { 
       alert(error); 
      } 
     }); 

     return data; 
    } 

В ASPX файле добавить: <div id="area-example"></div>

element параметром является имя идентификатор div тега data: функции, которые возвращают значение JSON xkey и ykey имя значения JSON, в вашем примере: "label" и "value".