Сформировать таблицу динамически с использованием данных JSon

Question

Json возвращает данные, как:

[{"id_":1,"mobile_id":4,"mobile_name":"Nokia","order_quantity":2,"orders_date":"2015-01-01T00:00:00" 
},{"id_":2,"mobile_id":1,"mobile_name":"Moto G","order_quantity":6,"orders_date":"2015-01-05T00:00:00" 
},{"id_":3,"mobile_id":2,"mobile_name":"IPhone","order_quantity":3,"orders_date":"2015-01-06T00:00:00"] 

мне удалось сгенерировать диаграмму динамически, но используя жестко закодированные данные, как показано ниже:

Updated

$.ajax({ 
     url: "api/test/getdata", 
     type: "GET", 
     dataType: "JSON", 
     success: function (data) { 
      //Test(data); 
      ////make chart 
      // prepare jqxChart settings 
      var settings = { 
       title: "Fitness & exercise weekly scorecard", 
       description: "Time spent in vigorous exercise", 
       padding: { left: 5, top: 5, right: 5, bottom: 5 }, 
       titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, 
       source: data,//returned from ajax. 
       categoryAxis: 
        { 
         dataField: 'orders_date', 
         showGridLines: false 
        }, 
       colorScheme: 'scheme01', 
       seriesGroups: 
        [ 
         { 
          type: 'spline', 
          columnsGapPercent: 10, 
          seriesGapPercent: 0, 
          valueAxis: 
          { 
           minValue: 0, 
           maxValue: 100, 
           unitInterval: 10, 
           description: 'Time in minutes', 


          }, 
          series: [ 
            { dataField: 'mobile_name', dataField: 'price' }, 

          ] 
         }, 
         { 
          type: 'column', 
          seriesGapPercentage: 5, 
          valueAxis: 
           { 


            displayValueAxis: false, 

           }, 
          series: [ 
            { dataField: 'Moto G', displayText: 'Moto G' }, 
            { dataField: 'Iphone', displayText: 'Iphone' }, 

          ] 
         } 
        ] 
      }; 

      // select the chartContainer DIV element and render the chart. 
      $('#chartContainer').jqxChart(settings); 
     } 
    }); 

Но я бы как использовать данные json, которые возвращаются из ajax-вызова вместо использования жестко кодированных данных. Таким образом, вызов ajax успешно возвращает данные, как показано выше, но как они могут отображаться на диаграмме?

после обновления кода в соответствии с ответом Кирилловской картографическую выглядеть:

Так как показать Iphone, Nokia, и Moto G в отдельных строках и каждый телефон с его ценой, например, в IPhone линии показывают только Iphone цена и Nokia в серой линии с собственной ценой. Кроме того, дата заказа должна быть в кратком формате.

Answer 1

Делает это, как этого

$.ajax({ 
     url: "api/test/getdata", 
     type: "GET", 
     dataType: "JSON", 
     success: function (data) { 
      Test(data); 
      //make chart 
      // prepare jqxChart settings 
      makeMyChart(data); 
    }); 
    function makeMyChart(data){ 
     var settings = { 
     title: "Fitness & exercise weekly scorecard", 
     description: "Time spent in vigorous exercise", 
     padding: { 
      left: 5, 
      top: 5, 
      right: 5, 
      bottom: 5 
     }, 
     titlePadding: { 
      left: 90, 
      top: 0, 
      right: 0, 
      bottom: 10 
     }, 
     source: data, //returned from ajax. 
     categoryAxis: { 
      dataField: 'Date', 
      showGridLines: false 
     }, 
     colorScheme: 'scheme01', 
     seriesGroups: [{ 
      type: 'spline', 
      columnsGapPercent: 30, 
      seriesGapPercent: 0, 
      valueAxis: { 
       minValue: 0, 
       maxValue: 100, 
       unitInterval: 10, 
       description: 'Time in minutes' 
      }, 
      series: [{ 
       dataField: 'jhr', 
       displayText: 'jhr' 
      }, { 
       dataField: 'png', 
       displayText: 'png' 
      }, { 
       dataField: 'ked', 
       displayText: 'ked' 
      }] 
     }] 
    }; 

    // select the chartContainer DIV element and render the chart. 
    $('#chartContainer').jqxChart(settings); 
    } 
    } 

Надеется, что это помогает!