Hallo Zusammen,
ich bekomme das Highchart-Widget bei mir nicht zum laufen.
Ich habe zwei Ftui definiert. Eines für Tablets und eines für Smartphones.
define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
define TABLETUI-Mobile HTTPSRV fmui/ ./www/mobile Mobile-UI
Folgender Error bekomme ich Chrome (F12) angezeigt bei beiden.
Uncaught TypeError: elem.data(...).split is not a function widget_highchart.js:76
refresh @ widget_highchart.js:76(anonymous function)
@ widget_highchart.js:256each
@ jquery.min.js:2each
@ jquery.min.js:2update
@ widget_highchart.js:255(anonymous function)
@ fhem-tablet-ui.js:749j
@ jquery.min.js:2fireWith
@ jquery.min.js:2(anonymous function)
@ jquery.min.js:2j
@ jquery.min.js:2fireWith
@ jquery.min.js:2e.(anonymous function)
@ jquery.min.js:2script.onload
@ fhem-tablet-ui.js:784
Ich hatte schon mal einen ähnlichen Fehler bei den "normalen" Charts da hat
<script src="js/fhem-tablet-ui.js"></script>
gefehlt.
Mein Header sieht wie folgt aus:
.
.
.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="71">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="1"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<meta name='toast' content='0'>
<link rel="stylesheet" href="lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="lib/font-awesome.min.css" />
<link rel="stylesheet" href="lib/jquery.toast.min.css" />
<!-- define your personal style here, it wont be overwritten -->
<!-- link rel="stylesheet" href="css/fhem-green-ui.css" / -->
<!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->
<!-- Charts Theme CSS -->
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/styles.css"/>
<script src="../pgm2/jquery.min.js"></script>
<script src="../pgm2/jquery-ui.min.js"></script>
<script src="lib/jquery.toast.min.js"></script>
<script src="lib/jquery.gridster.min.js"></script>
<script src="lib/jquery.knob.mod.min.js"></script>
<script src="lib/jquery.circlemenu.js"></script>
<script src="lib/powerange.min.js"></script>
<script src="lib/fa-multi-button.min.js"></script>
<script src="js/fhem-tablet-ui.js"></script>
Mein Code für das Highchart
<header>System</header>
<div id="ram-container"
data-type="highchart"
data-height="140"
data-device="sysmon"
data-logdevice="logdb"
data-logfile="HISTORY"
data-columnspec='["sysmon:ram_used_avg","sysmon:ram_used","sysmon:ram_total"]'
data-linenames='["average","used","total"]'
data-style='["ftui l2dot","ftui l4fill","ftui l0fill"]'
data-minvalue="0"
data-maxvalue="1024"
data-title="Speichernutzung"
data-xunit="Heute"
data-yunit="RAM"
data-legend='["average","used","total"]'
data-crosshair="true"
data-showlegend="true"
</div>
Was mache ich falsch ? Hoffe ihr könnt mir helfen :-)
Grüße vom Wiesel
Hallo,
hast du denn hierzu schon eine Lösung? Ich kämpfe auch schon seit längerem mit dem Highchart.
Die Beispiele aus dem Wiki laufen bei mir nicht.
Glaub auch das Problem gefunden zu haben.
Die Abfrage der Daten aus der Konsole sieht so aus.
http://xxx.xxx.xxx/fhem/fhem/?cmd=get+FileLog_Zaehler+-+-+2016-12-20_00%3A00%3A00+2016-121_00%3A00%3A00+4%3ASpannungL1&XHR=1&_=1482228275400
Aber da ist ein fhem zuviel. Wenn ich ein fhem entferne auf
http://xxx.xxx.xxx/fhem/?cmd=get+FileLog_Zaehler+-+-+2016-12-20_00%3A00%3A00+2016-121_00%3A00%3A00+4%3ASpannungL1&XHR=1&_=1482228275400
funktioniert der Request.
Ich habe auch ein simplechart zum testen in der selben html, und das funktioniert.
Hier die DIVs
<li data-row="1" data-col="1" data-sizex="1" data-sizey="5" data-template="menu.html" class="semitransparent"></li>
<li data-row="1" data-col="2" data-sizex="9" data-sizey="2" class="semitransparent">
<header>Charts</header>
<div data-type="simplechart"
data-device="Zaehler"
data-logdevice="FileLog_Zaehler"
data-columnspec="4:SpannungL1:"
data-linenames="U1"
data-linetypes="line"
data-minvalue="220"
data-maxvalue="235"
data-height="230"
data-title="Spannungsverlauf"
data-xunit="Heute"
data-yunit="V">
</div>
</li>
<li data-row="3" data-col="2" data-sizex="9" data-sizey="3" class="semitransparent">
<div id="load-container"
data-type="highchart"
data-device="Zaehler"
data-logdevice="FileLog_Zaehler"
data-columnspec="4:SpannungL1"
data-linenames="U1"
data-minvalue="220"
data-maxvalue="235"
data-yticks="5"
data-title="Spannungsverlauf"
data-xunit="Heute"
data-yunit="V"
data-legend="0">
</div></li>
Nun die Frage...... was mache ich falsch???? :o
Okay jetzt wirds Spannend.
Ich habe in der Datei widget_highchart.js in der Zeile 109 das zusätzliche FHEM eintfernt.
von
[code]
$.ajax({
url: $('meta[name="fhemweb_url"]').attr('content') || '../fhem/',
async: true,
cache: false,
[/code]
zu
$.ajax({
url: $('meta[name="fhemweb_url"]').attr('content') || '../',
async: true,
cache: false,
Nun wird der Graph angezeigt.
Fehler im Code?
Danke und Gruß
Stumpf
Besser so, wie im Simplechart verwenden. Also die globale Definition benutzen.
$.ajax({
url: ftui.config.fhem_dir,
Alles klar.
Funktioniert auch mit der Globalen Definition.
Vielleicht gleich noch ein Frage.
Was kann es sein wenn die minvalue bzw. maxvalue Werte nicht richtig angenommen werden?
<div id="highchart-spannung" class=""
data-type="highchart"
data-device="Zaehler"
data-logdevice="FileLog_Zaehler"
data-columnspec="4:SpannungL1\x3a 4:SpannungL2\x3a 4:SpannungL3\x3a"
data-linetypes="line,line,line"
data-linenames="U1,U2,U3"
data-minvalue="220"
data-maxvalue="250"
data-title="Spannungsverlauf"
data-xunit="Heute"
data-yunit="Volt"
data-tooltip="{series.name} <b>{point.y:,.0f}</b> Volt">
Auch die Größe (height) konnte ich nur über das CSS ändern.
Vielen Dank auch für deine Tolle Arbeit!
Zitat von: Stumpf am 20 Dezember 2016, 15:36:14
Vielleicht gleich noch ein Frage.
Was kann es sein wenn die minvalue bzw. maxvalue Werte nicht richtig angenommen werden?
Sorry, da kann ich nicht helfen. Sooo tief hänge ich mich nicht in den fremden Code, denn ich hoffe immer, die ursprünglichen Ersteller bleiben an der Pflege ihrer Widgets dran.
Abend Zusammen,
habe gar nicht bemerkt, dass hier noch etwas dazu geschrieben wurde ;D
Also merkwürdigerweise bekomme ich jetzt keine Fehlermeldung mehr zum Highchart obwohl ich nichts geändert habe außer updates gemacht. Leider wird mir immer noch nichts angezeigt.
Output Console
Load widget : highchart
fhem-tablet-ui.js:1283 Try to init plugin: highchart
fhem-tablet-ui.js:1283 init widget: name=highchart area=div#content3
fhem-tablet-ui.js:1283 Loaded plugin: highchart
Ich werde die Tage mal ein einfaches Beispiel mit einem Filelog ausprobieren. Bei mir wird alles über ne mysql-Datenbank geloggt.
Vielleicht habe ich einfach einen Fehler in der Syntax vom Widget.
Danke trotzdem, dass Ihr euch meinem Probelm angenommen habt :-)
Ich wünsche erholsame Feiertage.
Grüße
Wiesel