Gestapelte Balkendiagramm von JSON-Datei - scheint einen Wert zu ignorieren

Question

Ziemlich neu zu diesem Zeug, so dass jede Hilfe sehr geschätzt wird. Zum Auftakt mit, hier ist meine JSON-Datei des Inhalts:

[ 
    { 
    "drg": "NONSPECIFIC CEREBROVASCULAR DISORDERS W MCC", 
    "approved": 124, 
    "denied": 38 
    }, 
    { 
    "drg": "SEIZURES WO MCC", 
    "approved": 138, 
    "denied": 26 
    }, 
    { 
    "drg": "CHRONIC OBSTRUCTIVE PULMONARY DISEASE W CC", 
    "approved": 352, 
    "denied": 61 
    }, 
    { 
    "drg": "CHEST PAIN", 
    "approved": 246, 
    "denied": 44 
    }, 
    { 
    "drg": "TRANSIENT ISCHEMIA", 
    "approved": 205, 
    "denied": 37 
    }, 
    { 
    "drg": "OTHER DISORDERS OF NERVOUS SYSTEM W CC", 
    "approved": 133, 
    "denied": 23 
    }, 
    { 
    "drg": "DIABETES W MCC", 
    "approved": 151, 
    "denied": 27 
    }, 
    { 
    "drg": "CARDIAC ARRHYTHMIA CONDUCTION DISORDERS W CC", 
    "approved": 336, 
    "denied": 55 
    }, 
    { 
    "drg": "HYPERTENSION WO MCC", 
    "approved": 177, 
    "denied": 29 
    }, 
    { 
    "drg": "POISONING TOXIC EFFECTS OF DRUGS WO MCC", 
    "approved": 144, 
    "denied": 24 
    } 
] 

Meine gestapeltes Balkendiagramm, das mit einer CSV-Datei gut funktioniert, hält ignoriert den Wert „verweigert“. Ich vermute, dass das Problem etwas mit meiner Formatierung des Abschnitts "processed_json.push()" meines Codes zu tun hat. Es macht den genehmigten Wert auf sich selbst gestapelt. Hier ist die Skript-Datei:

<script> 
    $(document).ready(function() { 
     var processed_json = new Array(); 
     $.getJSON('/dashboard-test-data/denied-percentage-2015-chart.json', function(data) { 
      for (i = 0; i < data.length; i++) { 
       processed_json.push([data[i].drg, data[i].approved, data[i].denied]); 
      } 
      $('#denied-percentage-2015-chart').highcharts({ 
       chart: { 
        type: 'bar' 
       }, 
       credits: { 
        text: 'Vortext Analytics', 
        href: 'http://www.vortextanalytics.com' 
       }, 
       title: { 
        text: 'Top 10 DRG by Denial Percentage 2015' 
       }, 
       xAxis: { 
        type: 'category', 
       }, 
       navigation: { 
        menuStyle: { 
         border: '1px solid #ddd', 
         boxShadow: 'none', 
        }, 
        menuItemStyle: { 
         padding: '5px 1.5rem', 
        }, 
        menuItemHoverStyle: { 
         backgroundColor: '#f7f7f9', 
         color: '#666' 
        }, 
        buttonOptions: { 
         height: 40, 
         width: 46, 
         symbolX: 23, 
         symbolY: 22, 
         x: 10, 
         y: -15, 
         symbolSize: 13, 
        } 
       }, 
       yAxis: { 
        min: 0, 
        title: { 
         text: 'Total Records' 
        }, 
        stackLabels: { 
         enabled: true, 
         style: { 
          fontWeight: 'bold', 
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
         }, 
         formatter: function() { 
          return (this.axis.series[1].yData[this.x]/this.total * 100).toPrecision(2) + '%'; 
         } 
        } 
       }, 
       legend: { 
        align: 'left', 
        x: 0, 
        verticalAlign: 'bottom', 
        y: 22, 
        floating: true, 
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
        borderColor: '#CCC', 
        borderWidth: 1, 
        shadow: false, 
        reversed: true, 
       }, 
       tooltip: { 
        shared: true, 
        pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: {point.y:,0f} of {point.stackTotal:,0f} <b>({point.percentage:.1f}%)</b><br />', 
       }, 
       plotOptions: { 
        series: { 
         stacking: 'normal', 
         dataLabels: { 
          enabled: true, 
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
          style: { 
           textOutline: 'none', 
           fontWeight: 'normal', 
           fontSize: '9px' 
          } 
         }, 
         pointWidth: 20, 
        } 
       }, 
       series: [{ 
        name: 'approved', 
        color: '#55B4E4', 
        data: processed_json, 
       }, { 
        name: 'denied', 
        color: '#005079', 
        data: processed_json, 
       }], 
      }); 
     }); 
    }); 
</script> 

Hier ist, was das Endprodukt (Screen Grab von meiner csv-Version) produzieren sollte: Correct

Und hier ist, was ich aus der JSON-Datei bekommen: incorrect

Jede Hilfe oder Anleitung wird sehr geschätzt. Vielen Dank.

Answer 1

Werfen Sie einen Blick auf Highchart stacked bar chart example. Für jede Serie enthält data das Array mit Werten für diese Serie.

series: [{ 
    name: 'John', 
    data: [5, 3, 4, 7, 2] 
}, { 
    name: 'Jane', 
    data: [2, 2, 3, 2, 1] 
}, { 
    name: 'Joe', 
    data: [3, 4, 4, 2, 5] 
}] 

In Ihrem Fall statt der Schaffung der processed_json Array von Objekten, sollten Sie separate Arrays erstellen jede Serie Werte enthält.

Ändern Sie die Schleife auf diese Weise:

 var xAxis = [] 
      , approvedCount = [] 
      , deniedCount = [] 

     for (i = 0; i < data.length; i++) { 
      xAxis.push(data[i].drg); 
      approvedCount.push(data[i].approved); 
      deniedCount.push(data[i].denied); 

Dann der Diagramm Instanziierung entsprechend anpassen:

// (...) 
xAxis: { 
    categories: xAxis 
}, 
// (...) 
      series: [{ 
       name: 'approved', 
       color: '#55B4E4', 
       data: approvedCount, 
      }, { 
       name: 'denied', 
       color: '#005079', 
       data: deniedCount, 
      }], 
// (...)