HighCharts eine weitere Variable hinzufügen

Question

Ich habe ein Skript, das Daten aus einer MySql-Datentabelle aufruft und in einem HighCharts-Diagramm verwendet. Ich habe das funktioniert gut, aber ich möchte eine weitere Variable (Feld) aus der Datentabelle namens "UniqueID" hinzufügen.

Skript Nr. 1;

$categories = array(); 
$categories['name'] = 'Room'; 

$rows1 = array(); 
$rows1['name'] = 'Temp C'; 

$uniqueid = array(); 
$uniqueid['name'] = 'UniqueID'; 

while($row_AvgWaterTemp = mysql_fetch_assoc($AvgWaterTemp)) { 
    $categories['data'][] = $row_AvgWaterTemp['Room']; 
    $rows1['data'][] = $row_AvgWaterTemp['SeqID1306']; 
    $uniqueid['data'][] = $row_AvgWaterTemp['UniqueID']; // NEW FIELD 
} 
$result = array(); 

array_push($result,$categories); 
array_push($result,$rows1); 
array_push($result,$uniqueid); // NEW FIELD 

Ich habe auch ein Skript, das Script No 1 aufruft und erzeugt das Diagramm:

Script No 2

$(function() { 

var categories=[]; 
    var data =[]; 

var chart; 
$(document).ready(function() { 

    $.getJSON("../charts/chart.php", function(json) { 
    $.each(json,function(i,el) { 
     if (el.name=="Room") 
     categories = el.data; 
     else data.push(el); 
     }); 


     $('#container1').highcharts({ 
      chart: { 
       renderTo: 'container', 
       type: 'line', 
       zoomType: 'x', 
       marginTop: 40, 
       marginRight: 30, 
       marginBottom: 50, 
       plotBackgroundColor: '#FCFFC5' 
      }, 
      title: { 
       text: 'Room hot water temperatures ', 
       x: -20, //center 
       style: { 
       fontFamily: 'Tahoma', 
       color: '#000000', 
       fontWeight: 'bold', 
       fontSize: '10px' 
       } 
      }, 
      subtitle: { 
       text: 'Zoom: hold cursor over chart, hold left mouse button and drag, release button', 
       x: -20 
      }, 
      xAxis: { 
       categories: categories, 

        labels: { 
         enabled: false 
        } 
      }, 

      yAxis: { 



       plotLines: [{ 
       value: '<?php echo $row_Rooms['Hotmax'];?>', 
       color: '#FF0000', 
       width: 1, 
       zIndex: 10, 
       label: { 
          text: 'Maximum <?php echo $row_Rooms['Hotmax'];?> °C', 
          align: 'center', 
          x: -10, 
          y: -5, 
           style: { 
            color: '#FF0000' 
           } 
          } 
       }, { 
       value: '<?php echo $row_Rooms['HotMin'];?>', 
       color: '#0000CC', 
       width: 1, 
       zIndex: 10, 
       label: { 
          text: 'Minimum <?php echo $row_Rooms['HotMin'];?> °C', 
          align: 'center', 
          x: -10, 
          y: 20, 
           style: { 
            color: '#0000CC' 
           } 
          } 
       }], 



       showFirstLabel: false, 
       lineColor:'#999', 
       lineWidth:0.2, 
       tickColor:'#666', 
       tickWidth:1, 
       tickLength:2, 
       tickInterval: 10, 
       gridLineColor:'#ddd', 
       title: { 
        text: 'Temperature °C', 
        style: { 
       fontFamily: 'Tahoma', 
       color: '#000000', 
       fontWeight: 'bold', 
       fontSize: '10px' 
       } 
       }, 


       }, 

       legend: { 
        enabled: false, 
       itemStyle: { 
        font: '11px Trebuchet MS, Verdana, sans-serif', 
        color: '#000000' 
       }, 
       itemHoverStyle: { 
       color: '#000000' 
       }, 
       itemHiddenStyle: { 
       color: '#444' 
       } 

       }, 

       colors: [ 
       '#009900', 

      ], 

       plotOptions: { 
        style: { textShadow: false }, 
        column: { 
         color:'#ff00ff' 
        }, 



       series: { 

        cursor: 'pointer', 
        point: { 
        events: { 
        click: function() { 
         window.top.location.href = "../chart_click_hot_water.php?room=" + this.category; 

        } 
       } 
       }, 



        lineWidth: 1, 
        dataLabels: { 
        enabled: false, 
        rotation: 0, 
        color: '#000000', 
        align: 'center', 
        //format: '{point.y:.1f}', // one decimal 
        y: 0, // 10 pixels down from the top 
        style: { 
         textShadow: false, 
         fontSize: '10px', 
         fontFamily: 'Verdana, sans-serif' 
         } 
        } 
       } 

      }, 

      tooltip: { 

       enabled: true, 
       crosshairs: [false, true], 
       positioner: function() { 
        return { x: 5, y: -5 }; 
       }, 
       shadow: false, 
       borderWidth: 0, 
       backgroundColor: 'rgba(255,255,255,0.8)', 
       formatter: function() { 
        return 'Room: <b>' + this.x + 
       '</b> is <b>' + this.y + ' °C</b>'; 
       } 
      }, 



      credits: { 
       enabled: false 
      }, 


      series: data 
     }); 
    }); 

}); 

}); 

Meine Fragen ist, wie kann ich das neue Feld "uniqueid" umfassen und verwenden Sie in der Klick-Funktion:

click: function() { 
     window.top.location.href ="../chart_click_hot_water.php?uniqueid=" + this.category; 
} 

Derzeit habe ich die "QuickInfos" anzeigen The Room No a nd die Wassertemperatur, aber wenn ich das zusätzliche Feld in Skript Nr. 1 einfüge, zeigt ToolTips nur den Raum an und zeigt für die Wassertemperatur "undefined" an.

Ist es möglich, das zusätzliche Feld aus der Datentabelle aufzurufen und in meiner Klickfunktion zu verwenden, wenn ja, wie mache ich das?

Vielen Dank im Voraus für Ihre Hilfe und Zeit.

Prost.

UPDATE:

Ich habe folgende

$.getJSON("../charts/imaint_water_avg_temp_chart.php", function(json) { 
    $.each(json,function(i,el) { 
     if (el.name=="Room") 
     categories = el.data; 
     else if (el.name=="UniqueID") { 
     uniqueid = el.data; 
     } else data.push(el); 
     }); 

dann console.log (uniqueid "UniqueID"); Ich sehe die UniqueIDs im Protokoll.

Dann habe ich:

series: { 
cursor: 'pointer', 
point: { 
    events: { 
    click: function() { 
     window.top.location.href = "../imaint_chart_click_hot_water.php?room=" + this.uniqueid; 
} 
} 
}, 

aber das Zimmer = nicht belegt ist immer?.

Haben Sie oder jemand anderes eine Ahnung, wo ich falsch liege? Danke

Answer 1

Mit this.index erhalten Sie die Indexnummer Ihrer Daten, die Sie verwenden können, um die UniqueID über uniqueid[this.index] zu erhalten.

Tipp: zusätzliche Datenfelder haben, würde ich Ihnen empfehlen, die Daten als list of objects with named values darzustellen. Es könnte mehr Struktur und Lesbarkeit geben.

Ihre Daten könnte wie folgt aussehen:

[{ 
    uniqueid: 'GLAZH03431464336298', 
    room: '343', 
    y:'50' 
    },{ 
    uniqueid: 'GLAZH04051465483111', 
    room: '405', 
    y:'50' 
    }] 

Und Sie könnten Ihre Intuition folgen und this.uniqueid oder this.room usw. verwenden

Beispiel mit einer Liste von Objekten mit dem Namen Wert

Die PHP-Skript könnte wie folgt aussehen (nicht getestet):

$data = array(); 
while($row_AvgWaterTemp = mysql_fetch_row($AvWaterTemp)){ 
    $temp = array(
     "uniqueid" => $row_AvgWaterTemp['UniqueID'], 
     "room" => $row_AvgWaterTemp['Room'], 
     "y" => $row_AvgWaterTemp['SeqID1306'] 
    ); 
    array_push($data,$temp); 
} 
$result = array(); 

array_push($result,$data); 
echo json_encode($result); // Printing it out as json 

Ihr alter anfänglicher JS-Code gleich sein würde.

Viel Glück!