2016-03-21 12 views
0

Ich frage mich, ob jemand sehen könnte, warum mein Code für High-Charts nicht funktioniert? Ich habe versucht, es seit Ewigkeiten zu reparieren, und ich kann es nicht zur Arbeit bringen. Ich schaute auf diese Frage Populate JSON object to highchart bar chart für Hilfe, aber kann meinen Code nicht zum Funktionieren bringen.High Charts - Daten aus Array auffüllen

<?php 
    include('../connection.php'); 
    $selectCategory = "SELECT CategoryName, COUNT(fkDiaryCategory) as count 
    FROM `tbldiary`, tbldiarycategories where pkCategory=fkDiaryCategory group by fkDiaryCategory"; 

    $catResult = mysqli_query($conn,$selectCategory); 

    $tableRows = array(); 
    $i=0; 
    while($dataRow = mysqli_fetch_array($catResult, MYSQLI_ASSOC)){ 
    $tableRows[$i]['CategoryName']=$dataRow['CategoryName']; 
    $tableRows[$i]['count']=$dataRow['count']; 
    $i++; 
    }; 
    $data = (json_encode($tableRows)); 
    ?> 
    <script> 

    var data = '<?php echo $data ?>'; 
    console.log(data); 
    $(function() { 
     // Populate series 
     var processed_json = new Array(); 
     for (i = 0; i < data.length; i++) { 
      processed_json.push([parseInt(data[i].count),data[i].CategoryName]); 
     } 

    $(document).ready(function() { 
     // draw chart 
     var options={ 
      chart: { 

       renderTo: 'container',     
       type: "column" 
      }, 
      title: { 
       text: "Diary Entries by Category" 
      }, 
      xAxis: { 
       categories: data.CategoryName, 
       title: { 
        text: "CategoryName" 
       } 
      }, 
      yAxis: { 
       min:0, 
       title: { 
        text: "Total" 
       } 
      }, 
      series: data 
     }; 

     var chart = new Highcharts.Chart(options); 
     }); 
    }); 
</script> 
    <div id="container" style="height: 300px"></div> 
</body> 
</html> 

mein Dozent half bei der while-Schleife der processed_json Array bevölkert, und ich bin nicht 100% sicher, ob dies erforderlich ist, aber ich habe es in nur einhüllen. Danke im Voraus!

Edited hinzufügen:

Die Daten, die ich in wie folgt aussieht bin setzen, wenn Sie do console.log [{ "Kategoriename": "Home Sorgen des Lebens", "count": "2"}, { "CategoryName": "Sozialleben", "count": "2"}, {"CategoryName": "Prüfungsstress", "count": "1"}, {"CategoryName": "Universitätslebensstress", " count ":" 1 "}, {" Kategoriename ":" Stress am Arbeitsplatz“, "count": "1"}]

+0

$ data = json_encode ($ TableRows); Überprüfen Sie jetzt –

+0

@SRK Ich nehme an, Sie sprechen über zwei Zeilen oben, wo die

1

Wenn Ihre Daten so sind, wie Sie in Kommentaren gepostet haben, analysieren Sie Daten für Serien und nicht für Serien. Wenn Sie für jeden Punkt einen Namen festlegen, erzwingt die Einstellung category type für xAxis, dass das Diagramm die Namen der Punkte als Kategorien verwendet.

Beispiel: http://jsfiddle.net/7nLz2b8d/1/

var data = [{ 
    "CategoryName": "Home life worries", 
    "count": "2" 
}, { 
    "CategoryName": "Social life worries", 
    "count": "2" 
}, { 
    "CategoryName": "Exam stress", 
    "count": "1" 
}, { 
    "CategoryName": "University life stress", 
    "count": "1" 
}, { 
    "CategoryName": "Work stress", 
    "count": "1" 
}]; 

$(function() { 
    // Populate series 
    var processed_json = [], 
     len = data.length; 

    for (i = 0; i < len; i++) { 
    processed_json.push([data[i].CategoryName, parseInt(data[i].count)]); 
    } 

    $(document).ready(function() { 
    // draw chart 
    var options = { 
     chart: { 
     renderTo: 'container', 
     type: "column" 
     }, 
     title: { 
     text: "Diary Entries by Category" 
     }, 
     xAxis: { 
     type: 'category', 
     title: { 
      text: "CategoryName" 
     } 
     }, 
     yAxis: { 
     min: 0, 
     title: { 
      text: "Total" 
     } 
     }, 
     series: [{ 
     data: processed_json 
     }] 
    }; 

    var chart = new Highcharts.Chart(options); 

    }); 
}); 
+0

Das funktioniert !!! Vielen Dank! Obwohl, wissen Sie, ob es eine Möglichkeit gibt, es zu ändern, so dass, anstatt die var Dateninformation hart zu kodieren, ich es gerade von der Datenbank kommen lassen kann, so dass es dynamisch ist? Ist das sinnvoll? – Anon

+0

@Anon Laden Sie Ihre Daten, anstatt sie hart zu codieren, bevor Sie sie analysieren und Ihr Diagramm erstellen. Weitere Informationen zum Arbeiten mit Daten finden Sie in HC Docs: http://www.highcharts.com/docs/working-with-data/custom-preprocessing –

Verwandte Themen