Q&A Highcharts V2.0

nee,

die hab ich versuchsweise selbst mal eingefügt, damit tut sich aber nichts… hab sie dann wieder auskommentiert

hardlog

PS: Habs selbst lösen können:

$serie['dataLabels']['formatter'] 
   = "@function() {return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';}@";

für die zweite Frage bzgl. des Farbverlaufes in dem pie kann ich aber weiterhin Hilfe gebrauchen:
Laut Reference von Highcharts lautet der javascript-code (?) wie im Screenshot zu sehen. Ich weiß nur nicht wo ich den nun wieder hin kopieren muss, sofern das in IPS überhaupt realisierbar ist? :confused:

hardlog

Hallo Hardlog,

hab eben mal die highcharts v 2.02 durchsucht. hab da nix gefunden was radialize, radialGradient heisst. Vermute mit der aktuellen Version ist das nicht möglich.
Wäre ein Fall für khc.

PS: in der 2.03 aus der Library auch nix gefunden.

Hallo,

nett ist, das ich ein highchart als „popup“ aufrufen kann. Hab ich die Möglichkeit ein in der html-box dargestelltes chart mittels eines mouseclicks darauf (onclick…) dann in ein popup aufzurufen (um es größer darstellen zu können)?

grüße
hardlog

Hallo Zusammen,

die Werte fangen erst bei 12 an, aber die Y Achse beginnt trotz auskommentierter Zeile „$CfgDaten[‚yAxis‘][0][‚min‘] = 10;“ immer bei „0“. Bei Negativwerten funktioniert das dynamische Setzen des Min Wertes der Y Achse einwandfrei. Ebenso funktioniert das statische Setzen auf min=10.

Kann ich da was übersehen haben :confused:

Hallo Udo,
sind die Werte alles Temperaturen? Hast Du evtl. noch andere Y-Einheiten? Config?

Hallo,

stehe gerade mal wieder auf dem berühmten Schlauch.
Ich will auf der 2. y-Achse [1] die rel. Luftfeuchte einer meiner Sensoren darstellen. Vorzugsweise in vordefiniertem Fenster von 40-100%. Im Highchart-config-script hab ich es wie folgt definiert:

	$CfgDaten['yAxis'][1]['title']['text'] = "rel. Lufteuchte [%]";
	$CfgDaten['yAxis'][1]['Unit'] = "";
   $CfgDaten['yAxis'][1]['opposite'] = true;
	$CfgDaten['yAxis'][1]['min'] = 40;
	$CfgDaten['yAxis'][1]['max'] = 100; 

Die passende Serie lautet in selbem Script:

 	$serie = array();
	$serie['name'] = "rel. Luftfeuchtigkeit";
	$serie['Id'] = 17565 /*[Hardware\1-wire\USB Modul 2\Sensor Keller\Luftfeuchte]*/ ;
   $serie['Unit'] = "%rF";
	$serie['ReplaceValues'] =false;
	$serie['type'] = "line";
	$serie['step'] = false;              
	$serie['yAxis'] = 1;
	$serie['shadow'] = true;
	$serie['color']="red";
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$CfgDaten['series'][] = $serie;

Im Chart setzt sich die Software mal wieder über mich hinweg und zeichnet den Graph wie folgt:
relFeuchte.JPG

Hat jemand nen Tip?

Gruß Hardlog

jetzt gehts. Nach Hinzufügen folgender Zeile wird die Achse dargestellt wie ich es wollte.

$CfgDaten['yAxis'][1]['tickInterval'] = 10;

vestehen tue ich es aber noch nicht ganz… Hauptsache es geht.

hardlog

Hallo,

ich stelle mittels Balkenchart meine verbrauchten kWh über die Zeit dar. Nun würde ich gerne neben jeden Balken den entsprechenden des Vorjahres legen (nicht darüber), das mit den [‚Offset‘] bzgl. der Zeit ist klar, nur das nebeneinander bekomme ich nicht hin…
vergleich.jpg

hardlog

Hallo,

nach dem Update von Highcharts bekomme ich keine „Column“ mehr angezeigt, bei „spline“ funktioniert es noch wie vorher.

Hat schon jemand die Version 3.0.7 am laufen?

Gruß
Frank

Hallo zusammen,

bin heute über ein Phänomen gestolpert, das ich zwar replizieren kann, aber keine Lösung dafür gefunden habe.
Hole Daten aus MySQL und stelle diese mit HC dar. Unter den MySQL-Feldern ist auch ein Textfeld (Bemerkung) mit Text welches ich nur in den ToolTipps anzeige. Das funktioniert so weit auch.

So, und jetzt kommts:
wenn aber das besagte Textfeld am ersten (die anderen sind egal) im Zeitraum festgelegten, anzuzeigenden Tag nicht NULL ist, dann wird mir der komplette Chart nicht angezeigt.

Hatte erst den Verdacht, dass es an den Tooltipps liegt. Aber auch wenn ich die komplett raus nehme gehts nicht.

Hat irgend wer schon mal so was gehabt oder einen Tipp für mich?

<?php
    // ConfigScript für $version = "2.02"; $versionDate = "20.05.2012";

    // bei der Konfiguration unbedingt auf die Groß/Kleinschreibung achten
    // es wurde versucht folgende Namensgebeung in der Konfiguration zu verwenden
    // Parameter mit kleinen Anfangsbuchstaben = Parameter welche von Highcharts übnernommen wurden. Siehe dazu: http://www.highcharts.com/ref/
    // Parameter mit großen Anfangsbuchstaben = für das IPS-Highcharts-Script eingeführte Parameter

    Global $CfgDaten; // damit kann der Script auch von anderen Scripten aufgerufen werden und bereits mit CfgDaten vorkonfiguriert werden

    // IPS Variablen ID´s
    $CfgDaten['ContentVarableId']= 54335 /*[System\Pingdom Analysis\Eigene\HC\Chart PingDomDaten]*/ ;  // ID der String Variable in welche die Daten geschrieben werden (-1 oder überhaupt nicht angeben wenn die Content Variable das übergordnete Element ist)
    $CfgDaten['HighChartScriptId']= 37577 /*[HighCharts\Highcharts_V2.02.ips]*/ ;  //"altes" eigenes // ID des Highcharts Scripts
    //$CfgDaten['HighChartScriptId']= 47643 /*[Program\IPSLibrary\app\modules\Charts\IPSHighcharts\IPSHighcharts]*/ ;  //neues 203 aus der Librarys

    // Highcharts oder Highstock (default = Highcharts
    $CfgDaten['Ips']['ChartType'] = 'Highcharts';

    // Zeitraum welcher dargestellt werden soll (kann durch die Zeitvorgaben in den Serien verändert werden)
     // Zeitraum via Selector im WF nach: http://www.ip-symcon.de/forum/f53/highcharts-multigraph-17625/index3.html#post126538
     $ZeitRaum = getvalue(29323 /*[System\Pingdom Analysis\Eigene\HC\Downtimes\Zeitraum\Zeitraum]*/ );

    Switch ($ZeitRaum) {
       Case 0:
       Case 1:
          $AggType = 0;
          Break;
       Case 7:
       Case 30:
          $AggType = 1;
          Break;
       Case 365:
        Case 90:
       Case 180:
          $AggType = 3;
          Break;
        Default:
        $AggType = 0;
    };
    If ($ZeitRaum == 0) {$ZeitRaum = (8/24);};
    $EndPunkt = GetValue(41200 /*[System\Pingdom Analysis\Eigene\HC\Downtimes\Zeitraum\Endpunkt]*/ );
    //echo $EndPunkt."
";
    $CfgDaten["EndTime"] = time() + 60 * 60 * 24 * $ZeitRaum * $EndPunkt;
    $CfgDaten["StartTime"] = $CfgDaten["EndTime"] - 60 * 60 * 24 * $ZeitRaum; //604800 = 1 Woche
     //Print_r($CfgDaten["EndTime"]." - ".$CfgDaten["StartTime"]."
");

    $SQLStart = "'".date("Y-m-d H:i:s",$CfgDaten["StartTime"])."'";
    $SQLEnd = "'".date("Y-m-d H:i:s",$CfgDaten["EndTime"])."'";
    //Print_r($SQLStart." - ".$SQLEnd);

If ($CfgDaten["EndTime"]>time())
    {echo "Zeitauswahl liegt zumindest mit einem Datum in der Zukunft. Bitte wählen Sie einen Zeitraum in der Vergangenheit.";
    exit();}

    // damit wird die Art des Aufrufes festgelegt
    $CfgDaten['RunMode'] = "script";     // file, script, popup

    // MySQL DB-Daten:
    $MySQLConn=mysql_connect($MySQLIP.$MySQLPort, $MySQLAdmin, $MySQLAdminPW);
    $db = $IPS_DB;
    $SQLTable1 = $TBL_Sys_PingDomSumPerformance;
    //$SQLTable2 = $TBL_Wetter_Internet; // Stundenwerte
    $db_selected = mysql_select_db($db, $MySQLConn);
//------------------------------------------------------------------------------
// MySQL Daten holen
        $sql_Ergebnis = mysql_query("SELECT DateX, uptime, downtime, avgresponse, Bemerkung
                                                FROM " . $SQLTable1 ."
                                                WHERE DateX >= ".$SQLStart." AND DateX <= ".$SQLEnd."
                                                ORDER BY DateX;")
                                                OR die("'".$sql_Ergebnis."':".mysql_error());
      //$data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC); // wenn die Zeile aktiviert wird, beginnt der TimeStamp einen Tag später. ?? warum?? nicht gelöst.
            $i = 0;
                while($data = mysql_fetch_array($sql_Ergebnis, MYSQL_ASSOC))
                {
                       $SommerZeit = "";
                       $SommerZeit= date("I",strtotime($data['DateX']));
                            //echo $SommerZeit."
";
                        if ($SommerZeit==1)
                            {$SommerZeit = 60;}
                            //else {$Sommerzeit = 120;}
//                     $DataForDownTime[]        = array("Value"=>strtotime($data['DownTime'])+7200, "TimeStamp"=>strtotime($data['DateX']), "TimeStampHuman"=>$data['DateX']);
//                     $DataForDownTime[]        = array("Value"=>mktime(0,($data['sum(DownTime)']/100)+60,0,0,0,0), "ValueHuman"=>($data['sum(DownTime)']/100), "TimeStamp"=>strtotime($data['date']), "TimeStampHuman"=>$data['date']);
//                     $DataForDownTime[]        = array("Value"=>strtotime(date('Y-m-d H:i:s',strtotime($data['downtime']))), "ValueHuman1"=>$data['downtime'], "ValueHuman"=>date('Y-m-d H:i:s',strtotime($data['downtime'])), "TimeStamp"=>strtotime($data['date']), "TimeStampHuman"=>$data['date']);
                     $DataForDownTime[]        = array("Value"=>round(substr($data['downtime'],0,2)*1+substr($data['downtime'],3,2)/60 ,2), "ValueHuman"=>substr($data['downtime'],0,5), "Bemerkung"=>$data['Bemerkung'], "TimeStamp"=>strtotime($data['DateX']), "TimeStampHuman"=>$data['DateX']);
                     $DataForDownTimeBemerkung[]    = array("Value"=>$data['Bemerkung'], "ValueHuman"=>$data['Bemerkung'], "TimeStamp"=>strtotime($data['DateX']));
//                     $DataForUpTime[]            = array("Value"=>86400 - strtotime($data['downtime']) - 7200,                        "ValueHuman"=>date('Y-m-d H:i:s',strtotime('2013-05-24') - strtotime(date('H:i:s',strtotime($data['downtime'])))-3600), "TimeStamp"=>strtotime($data['date']), "TimeStampHuman"=>$data['date']);
                     $DataForUpTimeProz[]    = array("Value"=>round(100 -(100*(substr($data['downtime'],0,2)*60
                                                                        +substr($data['downtime'],3,2))/1440), 2),
                                               "ValueHuman"=>round(100 -(100*(substr($data['downtime'],0,2)*60
                                                                        +substr($data['downtime'],3,2))/1440), 2),
                                                               "TimeStamp"=>strtotime($data['DateX']),
                                                              "TimeStampHuman"=>$data['DateX']);
                     }
            $i++;
//print_r($DataForDownTime);
//print_r($DataForUpTime);
//print_r($DataForUpTimeProz);
//print_r($DataForDownTimeText);
/*print_r("Datum ".$DataForDownTime[18]['TimeStampHuman']."
".
            "DownTime ValueHuman1 ".$DataForDownTime[18]['ValueHuman1']."
".
            "DownTime Value ".$DataForDownTime[18]['Value']."
");
*/
//print_r("DownH-M ".(substr($DataForDownTime[18]['ValueHuman1'],0,2)*60)."
");
#print_r("DownM-M ".(substr($DataForDownTime[18]['ValueHuman1'],3,2))."
");
/*print_r("DownMin ".(round(100 -(100*(substr($DataForDownTime[18]['ValueHuman1'],0,2)*60
                            +substr($DataForDownTime[18]['ValueHuman1'],3,2))/1440), 2))."
");
*/
//print_r("Datum ".$DataForUpTime[6]['TimeStampHuman']."
UPTime ValueHuman ".$DataForUpTime[6]['ValueHuman']."
UPTime Value ".$DataForUpTime[6]['Value']."
");

//print_r($DataForDownTimeBemerkung);

//------------------------------------------------------------------------------
//MySQL Verbindung beenden
mysql_close($MySQLConn);

//print_r(mysql_num_rows($sql_Ergebnis));

if (mysql_num_rows($sql_Ergebnis)>1000)
    {echo "Im gewählten Zeitraum sind zu viele Daten. Bitte wählen Sie einen kleineren Zeitraum.";
    exit();}

if (empty($DataForDownTime) or empty($DataForDownTime))
    {echo "Zeitauswahl ausserhalb des geloggten Bereichs. Bitte wählen Sie einen zeitnaheren Bereich.";
    exit();}

    // **************************************************************************************
    // *** PlotOptions *** http://www.highcharts.com/ref/#plotoptions
    // **************************************************************************************
        $CfgDaten['plotOptions']['series']['lineWidth'] = 2;
        $CfgDaten['plotOptions']['series']['states']['hover']['lineWidth'] = 2;
        $CfgDaten['plotOptions']['series']['marker']['symbol'] = 'circle';
        $CfgDaten['plotOptions']['series']['marker']['enabled'] = true;
        $CfgDaten['plotOptions']['series']['marker']['states']['hover']['radius'] = 5;
        $CfgDaten['plotOptions']['series']['marker']['states']['hover']['lineWidth'] = 2;
        $CfgDaten['plotOptions']['series']['marker']['states']['hover']['enabled'] = true;


    // Serienübergreifende Einstellung für das Laden von Werten
    $CfgDaten['AggregatedValues']['HourValues'] = -1;      // ist der Zeitraum größer als X Tage werden Stundenwerte geladen
    $CfgDaten['AggregatedValues']['DayValues'] = -1;       // ist der Zeitraum größer als X Tage werden Tageswerte geladen
    $CfgDaten['AggregatedValues']['WeekValues'] = -1;      // ist der Zeitraum größer als X Tage werden Wochenwerte geladen
    $CfgDaten['AggregatedValues']['MonthValues'] = -1;      // ist der Zeitraum größer als X Tage werden Monatswerte geladen
    $CfgDaten['AggregatedValues']['YearValues'] = -1;          // ist der Zeitraum größer als X Tage werden Jahreswerte geladen
    $CfgDaten['AggregatedValues']['NoLoggedValues'] = 1000;     // ist der Zeitraum größer als X Tage werden keine Boolean Werte mehr geladen, diese werden zuvor immer als Einzelwerte geladen    $CfgDaten['AggregatedValues']['MixedMode'] = false;     // alle Zeitraumbedingungen werden kombiniert
    $CfgDaten['AggregatedValues']['MixedMode'] = true;

    // **************************************************************************************
    // *** Highcharts Options ***
    // **************************************************************************************
    // Ab hier werden die Bereiche des Highchart-Objektes parametriert.
    // Dieser Bereich wurde (soweit möglich) identisch der Originalstruktur gehalten.
    // Informationen über die Parametrierung findet man unter http://www.highcharts.com/ref/

    // **************************************************************************************
    // *** chart *** http://www.highcharts.com/ref/#chart
    // **************************************************************************************
    // $CfgDaten['chart']['zoomType'] = "'x'";            //default: $CfgDaten['chart']['zoomType'] = "'xy'";

    // **************************************************************************************
    // *** credits *** siehe http://www.highcharts.com/ref/#credits
    // **************************************************************************************
    // $CfgDaten['credits']['text'] = "used by IPS";
    // $CfgDaten['credits']['href'] = "http://www.ip-symcon.de/forum/f53/highcharts-multigraph-v1-0-a-17625/#post120721";

    // **************************************************************************************
    // *** title *** siehe http://www.highcharts.com/ref/#title
    // **************************************************************************************
//        $CfgDaten['title']['text'] = "Temperaturen Speicher";

    // **************************************************************************************
    // *** subtitle *** siehe http://www.highcharts.com/ref/#subtitle
    // **************************************************************************************
        $CfgDaten['subtitle']['text'] = "Zeitraum: %STARTTIME% - %ENDTIME%";
        $CfgDaten['subtitle']['Ips']['DateTimeFormat'] = "D d.m.Y H:i";

    // **************************************************************************************
    // *** yAxis *** http://www.highcharts.com/ref/#yAxis
    // **************************************************************************************
        $CfgDaten['yAxis'][0]['title']['text'] = Null;
    //    $CfgDaten['yAxis'][0]['Unit'] = "Std";
       $CfgDaten['yAxis'][0]['labels']="";
        $CfgDaten['yAxis'][0]['max'] = 24;
        $CfgDaten['yAxis'][0]['showLastLabel '] = false;
         $CfgDaten['yAxis'][0]['showFirstLabel '] = false;
         $CfgDaten['yAxis'][0]['endOnTick '] = false;

        $CfgDaten['yAxis'][1]['title']['text'] = "UpTime";
        $CfgDaten['yAxis'][1]['labels']['formatter'] = "@function() {return this.value + ' %'}@";
        $CfgDaten['yAxis'][1]['showLastLabel '] = true;
         $CfgDaten['yAxis'][1]['showFirstLabel '] = false;
         $CfgDaten['yAxis'][1]['endOnTick '] = true;
        $CfgDaten['yAxis'][1]['max'] = 100;
        
    // **************************************************************************************
    // *** series *** http://www.highcharts.com/ref/#series
    // **************************************************************************************

    $serie = array();
    $serie['name'] = "Online";
    $serie['visible'] = true;
    $serie['Unit'] = "%";
//    $serie['RoundValue'] = 1;
    $serie['type'] = "spline";
    $serie['color']= 'green';
    $serie['lineColor'] = 'green';
    $serie['marker']['enabled'] = false;
    $serie['yAxis'] = 1;
   $serie['Data'] = $DataForUpTimeProz;
    $CfgDaten['series'][] = $serie;

    $serie = array();
    $serie['name'] = "Down";
    $serie['visible'] = true    ;
    $serie['Unit'] = "Std";
//    $serie['RoundValue'] = 1;
    $serie['type'] = "spline";
    $serie['color']= 'red';
    $serie['lineColor'] = 'red';
    $serie['marker']['enabled'] = false;
    $serie['yAxis'] = 0;
   $serie['Data'] = $DataForDownTime;
    $CfgDaten['series'][] = $serie;
    
    $serie = array();
    $serie['name'] = "Bemerkung";
    $serie['visible'] = true    ;
    $serie['showInLegend'] = false;
    $serie['Unit'] = "";
    $serie['type'] = "spline";
    $serie['color']= 'blue';
    $serie['lineColor'] = 'blue';
    $serie['marker']['enabled'] = false;
    $serie['yAxis'] = 0;
   $serie['Data'] = $DataForDownTimeBemerkung;
    $CfgDaten['series'][] = $serie;

    // **************************************************************************
    // *** xAxis *** http://www.highcharts.com/ref/#xAxis
    // **************************************************************************
        $CfgDaten['xAxis']['lineWidth'] = 0; //sind die horizontalen Begrenzungslinien oben und unten.
        $CfgDaten['xAxis']['tickLength'] = 0; // ist die Länge der senkrechten Linien von der unteren horizontalen begrenzungslinie bis zur Beschriftung (label)
        $CfgDaten['xAxis']['startOnTick'] = true;
        $CfgDaten['xAxis']['showFirstLabel'] = true;
        $CfgDaten['xAxis']['dateTimeLabelFormats']['day'] =    '%d. %b';
        //$CfgDaten['xAxis']['tickInterval'] = 24*3600*1000; // 1Tag x 24 Std. x 3600 sek x 1000ms

    // **************************************************************************************
    // *** tooltip *** http://www.highcharts.com/ref/#tooltip
    // **************************************************************************************
        $CfgDaten['tooltip']['useHTML']    = true;
       $CfgDaten['tooltip']['shared']    = true;
       $CfgDaten['tooltip']['crosshairs'][]    = array('width' =>1,'color' =>'grey','dashStyle'=>'dashdot' );
        $CfgDaten['tooltip']['formatter'] = "@function() {
            var s;
            var s = '<b>' + Highcharts.dateFormat('%a %d.%m.%Y', this.x) + '</b>';
            s += '<table cellspacing=\"0\" cellpadding=\"0\" cellpadding=\"0\">';
            $.each(this.points, function(i, point)
            {var unit = {
                '".@$CfgDaten['series'][0]['name']."': '"." ".@$CfgDaten['series'][0]['Unit']."',
                '".@$CfgDaten['series'][1]['name']."': '"." ".@$CfgDaten['series'][1]['Unit']."',
                '".@$CfgDaten['series'][2]['name']."': '"." ".@$CfgDaten['series'][2]['Unit']."',

            }[point.series.name];
            var colorX = {
                '".@$CfgDaten['series'][0]['name']."': '".@$CfgDaten['series'][0]['lineColor']."',
                '".@$CfgDaten['series'][1]['name']."': '".@$CfgDaten['series'][1]['lineColor']."',
                '".@$CfgDaten['series'][2]['name']."': '".@$CfgDaten['series'][2]['lineColor']."',
            }[point.series.name];
        s += '<td align=".'right'." colspan= 0><span style=color:' + colorX + '>' + this.series.name + ': </span></td>
                <td align=".'right'."><b><span style=color:' + colorX + '>' + ' '  + this.point.ValueHuman + ' ' +'</b></span></td>
                <td><b><span style=color:' + colorX + '>' + ' ' + unit + '</b></span></td>';
      s += '</tr>';
        });
        s += '</table>';
        return s;
        }@";


    // Highcharts-Theme
    //    $CfgDaten['HighChart']['Theme']="grid.js";   // von Highcharts mitgeliefert: dark-green.js, dark-blue.js, gray.js, grid.js
    $CfgDaten['HighChart']['Theme']="ips.js";   // IPS-Theme muss per Hand in in Themes kopiert werden....

    // Abmessungen des erzeugten Charts
    $CfgDaten['HighChart']['Width'] = 0;             // in px,  0 = 100%
    $CfgDaten['HighChart']['Height'] = 300;         // in px

    // -------------------------------------------------------------------------------------------------------------------------------------
    // und jetzt los ......
    $s = IPS_GetScript($CfgDaten['HighChartScriptId']);     // Id des Highcharts-Scripts
    include($s['ScriptFile']);

      // hier werden die CfgDaten geprüft und bei Bedarf vervollständigt
    $CfgDaten = CheckCfgDaten($CfgDaten);

    // abhängig von der Art des Aufrufs -> json String für Highcharts erzeugen
    if (isset($CfgDaten['RunMode'])
        && ($CfgDaten['RunMode'] == "script" || $CfgDaten['RunMode'] == "popup"))
    {
        // Variante1: Übergabe der ScriptId. Daten werden beim Aufruf der PHP Seite erzeugt und direkt übergeben. Dadurch kann eine autom. Aktualisierung der Anzeige erfolgen
        if ($IPS_SENDER != "WebInterface")
        {
            WriteContentWithScriptId ($CfgDaten, $IPS_SELF);             // und jetzt noch die ContentTextbox
            return;                                                   // Ende, weil durch die Zuweisung des Script sowieso nochmals aufgerufen wird
        }

        $sConfig = CreateConfigString($CfgDaten);                     // erzeugen und zurückgeben des Config Strings
    }
    else
    {
        //Variante2: Übergabe des Textfiles. Daten werden in tmp-File gespeichert. Eine automatische Aktualisierung beim Anzeigen der Content-Textbox erfolgt nicht
        $sConfig = CreateConfigString($CfgDaten);                     // erzeugen und zurückgeben des Config Strings

        $tmpFilename = CreateConfigFile($sConfig, $IPS_SELF);         // und ab damit ins tmp-Files
        if ($IPS_SENDER != "WebInterface")
        {
            WriteContentWithFilename ($CfgDaten, $tmpFilename);       // und jetzt noch die ContentTextbox
        }
    }

?>

Hallo,

kann ich, wie im Demo auf der highcharts-HP (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/area-fillcolor-gradient/)´, Farbverläufe in der Fläche erzeugen?

Mein Versuch:

$CfgDaten['plotOptions']['area']['fillColor']['linearGradient'] = array("x1"=>"0","y1"=> "0","x2"=> "0", "y2"=>"300");
$CfgDaten['plotOptions']['area']['fillColor']['stops'] = ???????? was muss hier hin?????

wie muss ich nun den optionsteil „stops“ in php eingeben?

Hier der entsprechende Teil aus dem Demo:

        plotOptions: {
            series: {
                fillColor: {
                    linearGradient: [0, 0, 0, 300],
                    stops: [
                        [0, 'rgb(69, 114, 167)'],
                        [1, 'rgba(2,0,0,0)']
                    ]
                }
            }
        },

hardlog

Hallo,

ich tue mich auch noch schwer beim eintragen von Einzelwerten in einen Chart:

Ich will beispielhaft einen einzelnen Punkt „jetzt“ bei „20°C“ auf der entsprechenden y-Achse (0) anzeigen:

	$serie = array();
   $serie['name'] = "Beispiel";
   $serie['data'] = array("TimeStamp"=>time(), "y"=>20);
   $serie['Unit'] = "°C";
	$serie['ReplaceValues'] =false;
	$serie['type'] = "spline";
	$serie['yAxis'] = 0;
	$serie['shadow'] = true;
	$serie['color']="#FFFF00"; // gelb
	$serie['states']['hover']['lineWidth'] = 2;
	$serie['marker']['enabled'] = false;
	$serie['marker']['states']['hover']['enabled'] = true;
	$serie['marker']['states']['hover']['symbol'] = 'circle';
	$serie['marker']['states']['hover']['radius'] = 4;
	$serie['marker']['states']['hover']['lineWidth'] = 1;
	$CfgDaten['series'][] = $serie;

… sehen tue ich leider nichts.

hardlog

Hallo hardlog,

folgendes hab ich bei 1007 in seiner Plugwise-Config-HC gefunden:

    $CfgDaten['plotOptions']['areaspline']['fillColor']['linearGradient'] = array(0, 0, 0, 400); // Winkel,,,,
    $CfgDaten['plotOptions']['areaspline']['fillColor']['stops'] = array(array(0,'rgba(255,0,0,0.5)'),array(1,'rgba(0,0,255,1)'));

Farben und Winkel verändert siehts bei mir in einem Test-Chart dann so aus.

Zwischenablage-1.png

Super, so gehts!!!

Danke.

Vielleicht auch nen Tipp bzgl. der Einzelwerte???

hardlog

Hallo zusammen,

kann man bei Highchart in der x-Achse nur Monate anzeigen?
Wenn Ja, dann hätte ich gern gewusst wie.

Danke

Hallo zusammen,

kann man bei Highchart in der x-Achse nur Monate anzeigen?

Ernst gemeinte Antwort:
Wenn Du diese simple Frage nicht anhand der gefühlten hundert Bilder hier im Forum selbst beantworten kannst, dann würde ich die Finger von HC lassen. HC ist dann garantiert nix für Dich. Bleib bei den IPS Graphen :rolleyes:

Gehen wir doch einfach mal auf die erste Seite.

Hallo Boui,

ich verwende zur Zeit HC, habe es mir eingerichtet und es funktioniert genial. Mein Nächstes Ziel ist mein Stromverbrauch Monatlich an zu zeigen. Das heisst ich will in der X-Achse nur Jan bis. Dez. haben. Ich habe zwar schon Bilder gesehen, aber es wäre schön zu wissen, wie man sowas macht. Im Moment konnte ich nur mit der Y-Achse was machen, nicht mit der X-Achse, deshalb die Frage.

Da es unterschiedliche Implementierungen von HighCharts gibt, liest Du am besten mal in Deinem Config-File nach. Die sind immer gut beschrieben.

Oder Du nimmst ein Rundumsorglospaket. Ist garantiert besser für Dich umzusetzen. :wink:

Hallo,

ich bin schon seit ein paar Stunden auf der Suche, wie ich meine „column“-Darstellung breiter machen kann.
Kann mir Jemand ein Tipp geben?
mit

$CfgDaten['plotOptions']['column']['borderWidth']  = 4;

kann ich nur die Linie aussen breiter machen, habe aber nichts gefunden wie ich die Kolumne/Säule breiter machen kann.

Hier meine Config

$serie = array();
	$serie['name'] = "Gas-Verbr.";
	$serie['Id'] = 29641  /*[Keller\Heizraum\GAS\Zählerstand Gas]*/ ;
	$serie['Unit'] = "m³";
	$serie['type'] = "column";
	$serie['yAxis'] = 2;
	$CfgDaten['series'][] = $serie;
	$CfgDaten['plotOptions']['column']['color']  = "#ff8a00";
        $CfgDaten['plotOptions']['column']['borderWidth']  = 1;

Bildschirmfoto 2013-12-05 um 23.50.39.png