Wie erstellt man Diagramme mit jQuery?

Question

Iam wirklich neu in jQuery oder so etwas. Ich verwende die adminlte2-Vorlage als meine Projekt-Dashboards und verwende Codeigniter als mein Framework. Ich möchte Diagramme basierend darauf verwenden.

$(function() { 
    var donutData = [ 
    {label: "Series1", data: 30, color: "#1a5dad"}, 
    {label: "Series2", data: 20, color: "#2b6cbc"}, 
    {label: "Series3", data: 50, color: "#3c7bcb"}, 
    {label: "Series4", data: 50, color: "#4d8ada"} 
]; 
$.plot("#donut-chart", donutData, { 
    series: { 
    pie: { 
     show: true, 
     radius: 1, 
     innerRadius: 0.5, 
     label: { 
     show: true, 
     radius: 2/3, 
     formatter: labelFormatter, 
     threshold: 0.1 
     } 

    } 
    }, 
    legend: { 
    show: false 
    } 
}); 
/* 
* END DONUT CHART 
*/ 

Die Aufgabe ist nur, wie Etikett und Daten in diesem Code in Variable ändern? Ich habe bereits die Variable für Label: $ row ['productSubgroup'] und für Daten: $ row ['counts']. Und ich kann es einfach nicht eingeben ... Hoffe, dass jemand hilft.

Answer 1

Unter Berücksichtigung Ihrer Situation der Code wie folgt sein:

Controller:

$chart_data = array(); 
foreach ($result as $row) { 
    $chart_data[] = array(
            'label' => $row['productSubgroup'], 
            'data' => $row['count'], 
            'color' => dechex(rand(0x000000, 0xFFFFFF)) //Random Hex color code 
           ); 
} 
$data['chart_data'] = json_encode($chart_data); 

Erläuterung: Dieser Code wird Label erhalten und von Ihrem Datenspeicher zählen. $result hat Ihre Daten. Wir bereiten Array für Diagramm vor und speichern es in $data['chart_data'], es ist im Json-Format. Sie müssen $ Daten an die View-Datei übergeben.

JS:

$(function() { 
    var donutData = <?php echo $chart_data; ?>; 
    $.plot("#donut-chart", donutData, { 
     series: { 
     pie: { 
      show: true, 
      radius: 1, 
      innerRadius: 0.5, 
      label: { 
      show: true, 
      radius: 2/3, 
      formatter: labelFormatter, 
      threshold: 0.1 
      } 

     } 
     }, 
     legend: { 
     show: false 
     } 
    }); 
/* 
* END DONUT CHART 
*/ 
}); 

Erläuterung: $chart_data die Diagrammdetails hält. Wir speichern diese PHP-Variablen in donutData.

Versuchen Sie dies und lassen Sie mich wissen, wenn es ein Problem gibt.

Happy Coding!