हाईचार्ट्स पर समूह डेटा को एक विशेष श्रृंखला में पॉप्युलेट करें

अपने फिडेल को देखकर आप हाईचार्ट्स के लिए अपेक्षित आउटपुट इस प्रकार हैं:

1:श्रेणी डेटा :

• यह तिथियों की एक सरणी होनी चाहिए।
• निरंतर ग्राफ़ देखने के लिए सुनिश्चित करें कि आप डुप्लीकेट हटा दें और उन्हें आरोही/अवरोही क्रम में क्रम दें, जो भी आप चाहते हैं।

"categories":["2019-02-07", "2019-02-08", "2019-02-09", "2019-02-12", "2019-02-13", "2019-02-14"]

2:श्रृंखला डेटा :

• यह ऑब्जेक्ट की एक सरणी होगी, जहां प्रत्येक ऑब्जेक्ट में दो गुण होते हैं name और data ।
• डेटा में n होना चाहिए मूल्यों की संख्या यदि आपकी categories सरणी में n है मान और प्रत्येक एक ही अनुक्रमणिका से मेल खाते हैं।
• चूंकि हमारे पास प्रत्येक कक्षा के लिए प्रत्येक तिथि का डेटा नहीं है, हम वहां 0 जोड़ देंगे।

तो डेटा ऐसा दिखेगा

"series":[
      {
         "name":"class 1",
         "data":[45,0,166,78,0,0]
      },
      {
         "name":"class 2",
         "data":[0,64,0,64,627,0]
      },
      {
         "name":"class 3",
         "data":[0,0,0,0,87,352]
      }
   ]

Final Fiddle जिसे PHP द्वारा नीचे दिए गए कोड का उपयोग करके प्राप्त किया जा सकता है:

$arrDates = [];
$arrClass = [];
$arrData  = [];

while ( $row = $query->fetch(PDO:: FETCH_ASSOC)) {
  $arrDates[] = $row['dates'];
  $arrClass[] = $row['class'];
  $arrData[$row['class'] . ':' . $row['dates']] = $row['marks']; // to identify for which date & class this marks belong to, we can directly search for index.
}

$arrDates = array_unique($arrDates);
sort($arrDates);
$arrClass = array_unique($arrClass);

// Create series data
$arrSeriesData = [];
foreach($arrClass as $strClass){
  $tempArr = ['name' =>  $strClass];
  foreach($arrDates as $strDate){
      $tempArr['data'][] = isset($arrData[$strClass . ':' . $strDate]) ? intval($arrData[$strClass . ':' . $strDate]) : 0;
  }

  $arrSeriesData[] = $tempArr;
}


$response = ['categories' => $arrDates, 'series' => $arrSeriesData];

echo json_encode($response);

Output:
{"categories":["2019-02-07","2019-02-08","2019-02-09","2019-02-12","2019-02-13","2019-02-14"],"series":[{"name":"class 1","data":[45,0,166,78,0,0]},{"name":"class 2","data":[0,64,0,64,627,0]},{"name":"class 3","data":[0,0,0,0,87,352]}]}

उपरोक्त को दर्शाने के लिए अपना जावास्क्रिप्ट कोड अपडेट करें

$(document).ready(function() {
    $(function() {
        $.getJSON('data.php', function(data) {
            // Create the chart
            Highcharts.chart('container', {
                title: {
                    text: 'class Marks'
                },

                xAxis: {
                    categories: data.categories
                },
                series: data.series,

            });
        });
    });
});