Гистограмма от ответа JSON

Question

У меня есть вызов Ajax, который получает список данных, как показано ниже.

[{"fiscal_year": "2014", "fiscal_week": "W28", "sales": "155347721.76"}, {"fiscal_year": "2014", "fiscal_week": "W28", "sales": "155347721.76"}, {"fiscal_year": "2014", "fiscal_week": "W29", "sales": "152642118.72"}, {"fiscal_year": "2014", "fiscal_week": "W30", "sales": "143687644.80"}, {"fiscal_year": "2014", "fiscal_week": "W31", "sales": "137338356.96"}, {"fiscal_year": "2014", "fiscal_week": "W32", "sales": "122727175.20"}, {"fiscal_year": "2014", "fiscal_week": "W33", "sales": "127129784.88"}, {"fiscal_year": "2014", "fiscal_week": "W34", "sales": "141020740.56"}, {"fiscal_year": "2015", "fiscal_week": "W28", "sales": "129989653.20"}, {"fiscal_year": "2015", "fiscal_week": "W29", "sales": "117462039.90"}, {"fiscal_year": "2015", "fiscal_week": "W30", "sales": "104150499.90"}, {"fiscal_year": "2015", "fiscal_week": "W31", "sales": "100001437.80"}, {"fiscal_year": "2015", "fiscal_week": "W32", "sales": "100007812.20"}, {"fiscal_year": "2015", "fiscal_week": "W33", "sales": "97044039.90"}, {"fiscal_year": "2015", "fiscal_week": "W34", "sales": "103385198.40"}]; 

А также код демонстрации, который помогает отображать данные на графиках.

var userId = $('.user_id').val(); 
           $.ajax({ 
            url : '<?php echo site_url('document/getChartData'); ?>', 
            type : 'get', 
            data: {userid: userId}, 
            dataType: 'json', 
            success: function(data){ 

              var lineChartData = { 
                labels: ["w28", "w29", "w30", "w31", "w32", "w33", "w34"], 
                datasets: [ 
                 { 
                  label: "My First dataset", 
                  fillColor: "rgba(38, 185, 154, 0.21)", //rgba(220,220,220,0.2) 
                  strokeColor: "rgba(38, 185, 154, 0.7)", //rgba(220,220,220,1) 
                  pointColor: "rgba(38, 185, 154, 0.7)", //rgba(220,220,220,1) 
                  pointStrokeColor: "#fff", 
                  pointHighlightFill: "#fff", 
                  pointHighlightStroke: "rgba(220,220,220,1)", 
                  data: [29912892, 19912892, 15912892, 30912892, 1112892, 23912892, 23912892] 
                 }, 
                 { 
                  label: "My Second dataset", 
                  fillColor: "rgba(3, 88, 106, 0.2)", //rgba(151,187,205,0.2) 
                  strokeColor: "rgba(3, 88, 106, 0.70)", //rgba(151,187,205,1) 
                  pointColor: "rgba(3, 88, 106, 0.70)", //rgba(151,187,205,1) 
                  pointStrokeColor: "#fff", 
                  pointHighlightFill: "#fff", 
                  pointHighlightStroke: "rgba(151,187,205,1)", 
                  data: [155347721, 152642118, 143687644, 137338356, 122727175, 127129784, 141020740] 
                 } 
                ] 

              } 


              new Chart(document.getElementById("lineChart").getContext("2d")).Line(lineChartData, { 
               responsive: true, 
               tooltipFillColor: "rgba(51, 51, 51, 0.55)" 
              }); 

            } 
           }); 

Нужна помощь в построении этого графика, используя JQuery.

Заранее благодарен!

Answer 1

Вы Try This

Ajax вызов

$(function() { 
     $.ajax({ 
       url: '<?php echo site_url('document/getChartData'); ?>', 
       type: 'GET', 
       datatype: "html", 
       success: function (data) { 
       lineChart(data); // call the line chart function and pass the ajax data. 
       }, 
       error: function (e) { 
       console.log(e.message); 
       } 
       }); 
      }); 

Line Chart Функция

function lineChart(data){ 
      var salesChartCanvas = $("#lineChart").get(0).getContext("2d"); 
      var salesChartData = { 
      labels: [], 
      datasets: [ 
       { 
       label: "My Second dataset", 
       fillColor: "rgba(151,187,205,0.2)", 
       strokeColor: "rgba(151,187,205,1)", 
       pointColor: "rgba(151,187,205,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(151,187,205,1)", 
       data: [] 
       } 
      ] 
      }; 

     var salesChartOptions = { 
       scaleShowGridLines : true, 
       scaleGridLineColor : "rgba(0,0,0,.05)", 
       scaleGridLineWidth : 1, 
       scaleShowHorizontalLines: true, 
       scaleShowVerticalLines: true, 
       bezierCurve : true, 
       bezierCurveTension : 0.4, 
       pointDot : true, 
       pointDotRadius : 4, 
       pointDotStrokeWidth : 1, 
       pointHitDetectionRadius : 20, 
       datasetStroke : true, 
       datasetStrokeWidth : 2, 
       datasetFill : true, 
       legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>" 
      }; 

      var salesChart = new Chart(salesChartCanvas).Line(salesChartData,salesChartOptions); 
      for(var i=0; i<data.length; i++){ 
       salesChart.addData([data[i].fiscal_week], data[i].sales); 
      } 
} 

Try This Его работы F ine