Chart und Symbole

Wolfgang Hochweller · 21 September 2020, 17:24:54

Wonach muss ich sehen, wenn hier keine Symbole kommen ( mit Linien geht es, die Datenpunkte sind da ) :


                                    <header>Stromverbrauch/Tag</header>
                                    <div data-type="chart" 
                                        data-device='["TibberVerbrauch"]'
                                        data-logdevice="FileLog_TibberVerbrauch"
                                        data-logfile="-"
                                        data-columnspec="4:data_viewer_homes_01_consumption_nodes_01_consumption"
                                        data-minvalue="0"
                                        data-maxvalue="200"
                                        data-xticks="auto"
                                        data-yticks="auto"
                                        data-daysago_start="7d"
                                        data-ptype="fa-cog"
                                        data-style="ftui l0sym"
                                        data-uaxis='["primary"]'
                                        data-legend='["Verbrauch"]'
                                        data-showlegend="true"
                                        data-legendpos='["top","right"]'
                                        data-legend_horiz="false" 
                                        data-height="320px"
                                        data-width="450px"
                                        data-ytext="Verbrauch/Tag(kWh)">
                                    </div>

eki · 22 September 2020, 08:15:27

Die Definition sieht soweit gut aus, bei einem Test damit bei mir werden Symbole angezeigt. Kannst Du mal das ganze HTML File hier posten. Ist font awesome richtig installiert und ist folgende Zeile im HTML?

Code Auswählen

<link rel="stylesheet" href="./lib/font-awesome.min.css" />

Wolfgang Hochweller · 22 September 2020, 22:48:32

Den Font benutze ich mit Erfolg auch an anderer Stelle.

Hier ist mal die komplette Seite :

Code Auswählen


<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.5.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="./lib/font-awesome.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" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>


    <!-- Remove this line to enable for usage with WebViewControl
    <script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
    <script src="../pgm2/cordova-2.3.0.js" defer></script>
    <script src="../pgm2/webviewcontrol.js" defer></script>
    <!-- End for WebViewControl -->

    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="page" id="strom">
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizex="15" data-sizey="13">
                <header>Jetzt Verbrauch / Produktion</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div>
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="act_pow_pos"
                                data-fix="0"
                                data-color="red" data-hide-on="0"
                                data-unit="W" class="inline grande bold">
                            </div>
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="act_pow_neg"
                                data-fix="0"
                                data-color="green" data-hide-on="0"
                                data-unit="W" class="inline grande bold">
                            </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div data-type="label" data-device="Inverter"
                                data-get="Leistung_PV" data-limits='[0,500,2500]' data-colors='["red","white","green"]'
                                data-unit="W" data-fix="0" class=" grande bold">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="volt_L1" data-factor=".1"
                                data-unit="V" data-fix="1" class=" tall bold">
                            </div>
                        </div>
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="curr_L1" data-factor=".1"
                                data-unit="A" data-fix="1" class=" tall bold">
                            </div>
                        </div>
                    </div>
                        
                    <div class="row">
                        <div class="cell">
                            <div data-type="popup"
                                data-height="350px"
                                data-width="500px">
                                <div data-type="symbol"
                                    class="big left-narrow-2x"
                                    data-icon="fa-chart-line">
                                </div>
                                <div class="dialog">
                                    <header>Stromverbrauch</header>
                                    <div data-type="chart" 
                                        data-device='["MQTT2_ams"]'
                                        data-logdevice="logdb"
                                        data-logfile="HISTORY"
                                        data-columnspec='["MQTT2_ams:act_pow_pos","MQTT2_ams:act_pow_neg"]'
                                        data-minvalue="0"
                                        data-maxvalue="10000"
                                        data-minvalue_sec="0"
                                        data-maxvalue_sec="3000"
                                        data-xticks="auto"
                                        data-yticks="auto"
                                        data-daysago_start="7d"
                                        data-ptype='["steps","steps"]'
                                        data-style='["ftui l0","ftui l2"]'
                                        data-uaxis='["primary","secondary"]'
                                        data-legend='["Verbrauch","Einspeisung"]'
                                        data-showlegend="true"
                                        data-legendpos='["top","right"]'
                                        data-legend_horiz="false" 
                                        data-height="320px"
                                        data-width="450px"
                                        data-ytext="Verbrauch(W)"
                                        data-ytext_sec="Einspeisung(W)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="cell">
                            <div data-type="popup"
                                data-height="350px"
                                data-width="500px">
                                <div data-type="symbol"
                                    class="big left-narrow-2x"
                                    data-icon="fa-chart-line">
                                </div>
                                <div class="dialog">
                                    <header>Stromproduktion</header>
                                    <div data-type="chart" 
                                        data-device="Inverter"
                                        data-logdevice="logdb"
                                        data-logfile="HISTORY"
                                        data-columnspec="Inverter:Leistung_PV"
                                        data-minvalue="0"
                                        data-maxvalue="3000"
                                        data-xticks="auto"
                                        data-yticks="auto"
                                        data-daysago_start="7d"
                                        data-ptype='["steps"]'
                                        data-style='["ftui l0"]'
                                        data-uaxis='["primary"]'
                                        data-legend='["Leistung"]'
                                        data-showlegend="true"
                                        data-legendpos='["top","right"]'
                                        data-legend_horiz="true" 
                                        data-height="320px"
                                        data-width="450px"
                                        data-ytext="Leistung(W)">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                
            </li>
            <li data-row="14" data-col="1" data-sizex="15" data-sizey="13">
                <header>Verbrauch-Netz / Produktion</header>
                <div class="sheet">
                     <div class="row">
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="diffVerbrauch"
                                data-fix="1" data-factor=".01"
                                data-color="red"
                                data-unit="kWh" class="inline grande bold">
                            </div>
                            <div>Letzte Stunde Verbrauch</div>
                        </div>

                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="diffEinspeisung" data-factor=".01"
                                data-limits='[0,10,200]' data-colors='["red","white","green"]'
                                data-unit="kWh" data-fix="1" class=" grande bold">
                            </div>
                            <div>Letzte Stunde Einspeisung</div>
                        </div>
                    </div>               
                    <div class="row">
                        <div class="cell">
                            <div data-type="label" data-device="TibberVerbrauch"
                                data-get="data_viewer_homes_01_consumption_nodes_01_consumption"
                                data-fix="0"
                                data-color="red" 
                                data-unit="kWh" class="inline grande bold">
                            </div>
                            <div>Verbrauch Gestern</div>
                        </div>
                        <div class="cell">
                            <div data-type="label" data-device="TibberVerbrauchMonat"
                                data-get="data_viewer_homes_01_consumption_nodes_01_consumption"
                                data-fix="0"
                                data-color="red" 
                                data-unit="kWh" class="inline grande bold">
                            </div>
                            <div>Verbrauch Letzter Monat</div>
                        </div>
                    </div>
                </div>
            </li>
            
            <li data-row="1" data-col="14" data-sizex="9" data-sizey="5">
                <header>Hardware</header>
                <div class="sheet">
                    <div class="row">            
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="obis_list_version"
                                class="bigger bold">
                            </div>
                            <div>Zaehlerversion</div>
                        </div>
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="meter_model" 
                                class="bigger bold">
                            </div>
                            <div>Zaehlertyp</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="6" data-col="14" data-sizex="9" data-sizey="4">
                <header>Hardware</header>
                <div class="sheet">
                    <div class="row">            
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="meter_ID" 
                                class="bigger bold">
                            </div>
                            <div>Zaehlernummer</div>
                        </div>
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="date_time"
                                class="bigger bold">
                            </div>
                            <div>Zaehlerzeit</div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="10" data-col="14" data-sizex="9" data-sizey="4">
            <header>Zaehlerstaende</header>
                <div class="sheet">
                    <div class="row">            
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="act_energy_pos" data-color="red"
                                data-unit="" data-fix="0" class="bigger bold">
                            </div>
                            <div>Verbrauch</div>
                        </div>
                        <div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="act_energy_neg" data-color="green"
                                data-unit="" data-fix="0" class="bigger bold">
                            </div>
                            <div>Einspeisung</div>
                        </div>
                    </div>
                </div>
            </li>

            <li data-row="14" data-col="14" data-sizex="9" data-sizey="13">
                <header>Verbrauch / Produktion</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
                            <div data-type="popup"
                                data-height="350px"
                                data-width="500px">
                                <div data-type="symbol"
                                    class="big"
                                    data-icon="fa-chart-line">
                                </div>
                                <div>Stunden</div>
                                <div class="dialog">
                                    <div data-type="chart" 
                                        data-device="MQTT2_ams"
                                        data-logdevice="logdb"
                                        data-logfile="HISTORY"
                                        data-columnspec="MQTT2_ams:Verbrauch"
                                        data-minvalue="0"
                                        data-maxvalue="5000"
                                        data-xticks="auto"
                                        data-yticks="auto"
                                        data-daysago_start="2d"
                                        data-ptype='["steps"]'
                                        data-style='["ftui l0"]'
                                        data-uaxis='["primary"]'
                                        data-legend='["Verbrauch"]'
                                        data-showlegend="true"
                                        data-legendpos='["top","right"]'
                                        data-legend_horiz="false" 
                                        data-height="320px"
                                        data-width="450px"
                                        data-ytext="Verbrauch/Stunde(Wh)">
                                    </div>
                                    <header>Stromverbrauch/Stunde</header>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div data-type="popup"
                                data-height="700px"
                                data-width="1000px">
                                <div data-type="symbol"
                                    class="big"
                                    data-icon="fa-chart-line">
                                </div>
                                <div>Stunden</div>
                                <div class="dialog">
                                    <header>Produktion/Stunde</header>
                                    <iframe src="http://10.0.0.195/page.yield.day.html" width="1000" height="700"></iframe>
                                </div>
                            </div>
                        </div>
                                             
                    </div>
                    <div class="row">
                        <div class="cell">
                            <div data-type="popup"
                                data-height="350px"
                                data-width="500px">
                                <div data-type="symbol"
                                    class="big"
                                    data-icon="fa-chart-line">
                                </div>
                                <div>Tage</div>
                                <div class="dialog">
                                    <header>Stromverbrauch/Tag</header>
                                    <div data-type="chart" 
                                        data-device='["TibberVerbrauch"]'
                                        data-logdevice="FileLog_TibberVerbrauch"
                                        data-logfile="-"
                                        data-columnspec="4:data_viewer_homes_01_consumption_nodes_01_consumption"
                                        data-minvalue="0"
                                        data-maxvalue="200"
                                        data-xticks="auto"
                                        data-yticks="auto"
                                        data-daysago_start="7d"
                                        data-ptype="fa-cog"
                                        data-style="ftui l0sym"
                                        data-uaxis='["primary"]'
                                        data-legend='["Verbrauch"]'
                                        data-showlegend="true"
                                        data-legendpos='["top","right"]'
                                        data-legend_horiz="false" 
                                        data-height="320px"
                                        data-width="450px"
                                        data-ytext="Verbrauch/Tag(kWh)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div data-type="popup"
                                data-height="700px"
                                data-width="1000px">
                                <div data-type="symbol"
                                    class="big"
                                    data-icon="fa-chart-line">
                                </div>
                                <div>Tage</div>
                                <div class="dialog">
                                    <header>Produktion/Tag</header>
                                    <iframe src="http://10.0.0.195/page.yield.month.html" width="1000" height="700"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell">
                            <div data-type="popup"
                                data-height="350px"
                                data-width="500px">
                                <div data-type="symbol"
                                    class="big"
                                    data-icon="fa-chart-line">
                                </div>
                                <div>Monate</div>
                                <div class="dialog">
                                    <div data-type="chart" 
                                        data-device="TibberVerbrauchMonat"
                                        data-logdevice="FileLog_TibberVerbrauchMonat"
                                        data-logfile="-"
                                        data-columnspec="4:data_viewer_homes_01_consumption_nodes_01_consumption"
                                        data-minvalue="0"
                                        data-maxvalue="1500"
                                        data-xticks="auto"
                                        data-yticks="auto"
                                        data-daysago_start="7d"
                                        data-ptype="fa-cog"
                                        data-style="ftui l0sym"
                                        data-uaxis='["primary"]'
                                        data-legend='["Verbrauch"]'
                                        data-showlegend="true"
                                        data-legendpos='["top","right"]'
                                        data-legend_horiz="false" 
                                        data-height="320px"
                                        data-width="450px"
                                        data-ytext="Verbrauch/Monat(kWh)">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="cell">
                            <div data-type="popup"
                                data-height="700px"
                                data-width="1000px">
                                <div data-type="symbol"
                                    class="big"
                                    data-icon="fa-chart-line">
                                </div>
                                <div>Monate</div>
                                <div class="dialog">
                                    <header>Produktion/Monat</header>
                                    <iframe src="http://10.0.0.195/page.yield.year.html" width="1000" height="700"></iframe>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>            
          
        </ul>
    </div>
    </div>
</body>

</html>

eki · 23 September 2020, 08:57:44

Welche FTUI Version benutzt Du? Welche Version des chart_widgets (ganz oben in den jeweiligen files nachschauen).

Wolfgang Hochweller · 23 September 2020, 11:12:03

Chart ist 2.10.0
FTUI ist 2.7.15

/* FTUI Plugin
* Copyright (c) 2015-2017 Kurt Eckert
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*/
/* Version 2.10.0
/* Compatible FTUI Version >= 2.7.2

/* global ftui:true, Modul_widget:true, Powerange:true */

/* FHEM tablet ui */
/**
* UI builder framework for FHEM
*
* Version: 2.7.15
*
* Copyright (c) 2015-2019 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
* https://github.com/knowthelist/fhem-tablet-ui
*/

/* global Framework7:true, jQuery:true, Dom7:true */

eki · 23 September 2020, 12:50:14

Hmm... das sieht eigentlich genauso aus, wie bei mir, und bei mir sind die Symbole dargestellt. Kannst Du noch mal das ftui_chart.css File zur Sicherheit hier posten. Ist denn gar nichts zu sehen, oder komische Symbole.
Falls Du Dich mit den Debug Tools des Browsers auskennst, könntest Du auch mal das generierte HTML hier posten (also im Chart mit der rechten Maustaste auf "Inspect Element" oder "Element untersuchen" gehen und dann die Inhalte des Reiters "Inspector" hier posten (alles vorher aufklappen bzw. "Edit as HTML" und dann den Inhalt posten).

Wolfgang Hochweller · 23 September 2020, 15:12:42

Hier ist die .css Datei vom 14.6 :

Code Auswählen


/* import needed for availability of FHEM plot stlyes in the HTML files */
@import "../../pgm2/svg_style.css";

/* start of styles for chart widget */

/* Definition of the chart background area */
.chart-background {
	fill:url(#gr_bgftui);
	fill-opacity: 1;
}
/* Definition of the axes generally*/
.text.axes {
	fill: #888;
	font-size: 10px;
}
/* Definition of the axes generally*/
.text.axes.major {
	font-size: 10px;
	font-weight: bold;
	fill: #aaa;
}
/* Definition of specialities for x-axis */
.xaxis {
	stroke-width: 1px;
}
/* Definition of specialities for y-axis */
.yaxis {
	stroke-width: 1px;
}
/* Definition of the gridlines generally */
.gridlines {
	stroke: #888;
}
/* Definition of specialities for x-axis */
.xticks {
	stroke-width: 1px;
	stroke-dasharray:1px,2px;
}
/* Definition of specialities for y-axis */
.yticks {
	stroke-width: 1px;
}
/* Definition for crosshair cursor */
.crosshair {
	stroke: #bababa;
	background: #fff;
	stroke-width: 1px;
	fill: #bababa;
	font-size: 9px;
}
/* Definition of size etc. for the buttons */
.buttons {
	font-size: 24px;
	fill: #555;
	font-weight: 900;
	font-family: 'Font Awesome 5 Free';
}
/* Definition for activated texts ('legend' and 'cursor') */
.caption.active {
	fill: #AA6900
}
/* Definition for caption texts ('legend' and 'cursor') */
.caption {
	font-size: 11px;
	font-weight: bold;
	fill-opacity: 1;
}
/* Definition for pulldown menus */
.pulldownmenu {
	background: #555;
}
.pdentry {
	margin: 4px;
}
.pdentry.line {
	margin: 0px;
	border-bottom-style: solid;
	border-bottom-color: #888;
	border-bottom-width: 2px;
}
.pdentry.mouseover {
	background: #AA6900
}
/* Definition for legend window */
.legend {
	stroke: #baabba;
	font-size: 11px;
	stroke-width: 0;
	fill: #aaa;
	fill-opacity: 0.7;
}
.text.legend {
	fill-opacity: 1;
}
 
.fullsize {
    height: calc(100% - 2em) !important;
}

/* Definition for styles to be used for graphs (as alternative to the standard FHEM plot styles */
.ftui.l0		{ stroke:#DDA400; stroke-width:2px; fill:none; }
.ftui.l1		{ stroke:#BBBBBB; stroke-width:2px; fill:none; }
.ftui.l2		{ stroke:#CC0000; stroke-width:2px; fill:none; }
.ftui.l3		{ stroke:#CCCC00; stroke-width:2px; fill:none; }
.ftui.l4		{ stroke:#33CC33; stroke-width:2px; fill:none; }
.ftui.l5		{ stroke:#33CCCC; stroke-width:2px; fill:none; }
.ftui.l6		{ stroke:#3333CC; stroke-width:2px; fill:none; }

/* Normal lines */
.ftui.l0sym		{ stroke:#DDA400; stroke-width:12px; fill:none; }
.ftui.l1sym		{ stroke:#BBBBBB; stroke-width:12px; fill:none; }
.ftui.l2sym		{ stroke:#CC0000; stroke-width:12px; fill:none; }
.ftui.l3sym		{ stroke:#CCCC00; stroke-width:12px; fill:none; }
.ftui.l4sym		{ stroke:#33CC33; stroke-width:12px; fill:none; }
.ftui.l5sym		{ stroke:#33CCCC; stroke-width:12px; fill:none; }
.ftui.l6sym		{ stroke:#3333CC; stroke-width:12px; fill:none; }

/* Dashed lines */
.ftui.l0dash	{ stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l1dash	{ stroke:#BBBBBB; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l2dash	{ stroke:#CC0000; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l3dash	{ stroke:#CCCC00; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l4dash	{ stroke:#33CC33; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l5dash	{ stroke:#33CCCC; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l6dash	{ stroke:#3333CC; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }

/* Dotted lines */
.ftui.l0dot		{ stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l1dot		{ stroke:#BBBBBB; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l2dot		{ stroke:#CC0000; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l3dot		{ stroke:#CCCC00; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l4dot		{ stroke:#33CC33; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l5dot		{ stroke:#33CCCC; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l6dot		{ stroke:#3333CC; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }

/* Filled graphs */
.ftui.l0fill	{ stroke:#DDA400; fill:url(#gr_ftui0); stroke-width:2px; fill-opacity:0.8 }
.ftui.l1fill	{ stroke:#BBBBBB; fill:url(#gr_ftui1); stroke-width:2px; fill-opacity:0.8 }
.ftui.l2fill	{ stroke:#CC0000; fill:url(#gr_ftui2); stroke-width:2px; fill-opacity:0.8 }
.ftui.l3fill	{ stroke:#CCCC00; fill:url(#gr_ftui3); stroke-width:2px; fill-opacity:0.8 }
.ftui.l4fill	{ stroke:#33CC33; fill:url(#gr_ftui4); stroke-width:2px; fill-opacity:0.8 }
.ftui.l5fill	{ stroke:#33CCCC; fill:url(#gr_ftui5); stroke-width:2px; fill-opacity:0.8 }
.ftui.l6fill	{ stroke:#3333CC; fill:url(#gr_ftui6); stroke-width:2px; fill-opacity:0.8 }

/* additional settings for the text (mainly for legend window) */
text.ftui.l0, text.ftui.l0sym, text.ftui.l0dot, text.ftui.l0dash, text.ftui.l0fill { stroke:none; fill:#DDA400; } 
text.ftui.l1, text.ftui.l1sym, text.ftui.l1dot, text.ftui.l1dash, text.ftui.l1fill { stroke:none; fill:#BBBBBB; } 
text.ftui.l2, text.ftui.l2sym, text.ftui.l2dot, text.ftui.l2dash, text.ftui.l2fill { stroke:none; fill:#CC0000; }
text.ftui.l3, text.ftui.l3sym, text.ftui.l3dot, text.ftui.l3dash, text.ftui.l3fill { stroke:none; fill:#CCCC00; }
text.ftui.l4, text.ftui.l4sym, text.ftui.l4dot, text.ftui.l4dash, text.ftui.l4fill { stroke:none; fill:#33CC33; }
text.ftui.l5, text.ftui.l5sym, text.ftui.l5dot, text.ftui.l5dash, text.ftui.l5fill { stroke:none; fill:#33CCCC; }
text.ftui.l6, text.ftui.l6sym, text.ftui.l6dot, text.ftui.l6dash, text.ftui.l6fill { stroke:none; fill:#3333CC; }
/* additional settings for the tspan (mainly for legend window) */
tspan.ftui.l0, tspan.ftui.l0sym, tspan.ftui.l0dot, tspan.ftui.l0dash, tspan.ftui.l0fill { stroke:none; fill:#DDA400; } 
tspan.ftui.l1, tspan.ftui.l1sym, tspan.ftui.l1dot, tspan.ftui.l1dash, tspan.ftui.l1fill { stroke:none; fill:#BBBBBB; } 
tspan.ftui.l2, tspan.ftui.l2sym, tspan.ftui.l2dot, tspan.ftui.l2dash, tspan.ftui.l2fill { stroke:none; fill:#CC0000; }
tspan.ftui.l3, tspan.ftui.l3sym, tspan.ftui.l3dot, tspan.ftui.l3dash, tspan.ftui.l3fill { stroke:none; fill:#CCCC00; }
tspan.ftui.l4, tspan.ftui.l4sym, tspan.ftui.l4dot, tspan.ftui.l4dash, tspan.ftui.l4fill { stroke:none; fill:#33CC33; }
tspan.ftui.l5, tspan.ftui.l5sym, tspan.ftui.l5dot, tspan.ftui.l5dash, tspan.ftui.l5fill { stroke:none; fill:#33CCCC; }
tspan.ftui.l6, tspan.ftui.l6sym, tspan.ftui.l6dot, tspan.ftui.l6dash, tspan.ftui.l6fill { stroke:none; fill:#3333CC; }

/* end of styles for chart widget */

In Chrome sehe ich nichts, in Firefox siehe das angehaengte Image.
Ich 'meine', ich hätte in Chrome auch einmal obskure Zeichen gesehen, aber andere als die in Firefox.

Außerdem holt der Rechner richtig tief Luft, wenn ich ein Chart mit Symbolen aufrufe.
Sehe ich mir dann den Sourcecode an und versuche ein 'Inspect', steigt der Memoryverbrauch langsam aber sicher in schwindelnde, ungesunde Hoehen.

Probiere ich nachher noch mal.

Wolfgang Hochweller · 23 September 2020, 15:18:29

Hier das html des Chart-Popups :

Code Auswählen



<div data-type="chart" data-device="[&quot;TibberVerbrauch&quot;]" data-logdevice="FileLog_TibberVerbrauch" data-logfile="-" data-columnspec="4:data_viewer_homes_01_consumption_nodes_01_consumption" data-minvalue="0" data-maxvalue="200" data-xticks="auto" data-yticks="auto" data-daysago_start="7d" data-ptype="fa-cog" data-style="ftui l0sym" data-uaxis="[&quot;primary&quot;]" data-legend="[&quot;Verbrauch&quot;]" data-showlegend="true" data-legendpos="[&quot;top&quot;,&quot;right&quot;]" data-legend_horiz="false" data-height="320px" data-width="450px" data-ytext="Verbrauch/Tag(kWh)" class="" style="position: relative;">
                                    <object style="display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;" type="text/html" data="about:blank"></object><svg class="basesvg13" style="overflow: visible; width: 450px; height: 320px;"><g id="classesContainer" stroke="grey"></g><svg class="legend" x="0px" width="450px" height="320px" y="0px"><text class="caption legendbutton active" x="148.8px" y="14" dy="0.4em" style="text-anchor:end">Legend</text><text class="caption cursorbutton inactive" x="156px" y="14" dy="0.4em" text-anchor="begin">Cursor</text></svg><g class="buttons"><text class="buttons" x="48px" y="14px" dy="0.4em" text-anchor="middle" style="" onclick="widget_chart.scaleTime(evt, $(&quot;svg.basesvg13&quot;).parent(), 0.5)"></text><text class="buttons" x="84px" y="14px" dy="0.4em" text-anchor="middle" style=""></text><text class="buttons shiftminus" x="12px" y="14px" dy="0.4em" text-anchor="middle" style=""></text><text class="buttons shiftplus" x="438px" y="14px" dy="0.4em" text-anchor="middle" style=""></text></g><g id="baseforDDD" style="overflow: inherit; z-index: 200; -webkit-transform: translate(0px, 0px) scale(1, 1)"><defs><clipPath id="clipingRect13"><path d="M30.56280048076923,0 L30.56280048076923,1000000 450,1000000 450,0 30.56280048076923,0 Z" style=""></path><path d="M30.56280048076923,0 L30.56280048076923,1000000 450,1000000 450,0 30.56280048076923,0 Z" style=""></path></clipPath></defs><defs><clipPath id="clipingRectXAxis13"><path d="M-5.3290705182007514e-14,0 L-5.3290705182007514e-14,1000000 450,1000000 450,0 -5.3290705182007514e-14,0 Z" style=""></path><path d="M-5.3290705182007514e-14,0 L-5.3290705182007514e-14,1000000 450,1000000 450,0 -5.3290705182007514e-14,0 Z" style=""></path></clipPath></defs><defs><clipPath id="clipingRectGraphs13"><path d="M30.56280048076923,30 L30.56280048076923,309 450,309 450,30 30.56280048076923,30 Z" style=""></path><path d="M30.56280048076923,30 L30.56280048076923,309 450,309 450,30 30.56280048076923,30 Z" style=""></path></clipPath></defs><defs><clipPath id="clipingRectCursor13"><path d="M-1000000,30 L-1000000,309 1000000,309 1000000,30 -1000000,30 Z" style=""></path><path d="M-1000000,30 L-1000000,309 1000000,309 1000000,30 -1000000,30 Z" style=""></path></clipPath></defs><rect class="chart-background" x="30.56280048076923px" width="419.4371995192308px" preserveAspectRatio="none" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px NaNpx;fill: url(#gr_bgftui)" height="87.1875%" y="9.375%"></rect><g class="chart-gridlines" x="30.56280048076923px" width="419.4371995192308px" preserveAspectRatio="none" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px NaNpx" height="279px" y="30px"><g class="gridlines" stroke="rgb(238, 238, 238)"><line class="yticks primary-0" x1="30.56280048076923px" y1="30.000000000000032px" x2="450px" y2="30.000000000000032px" style="stroke-width: 1px;"></line><line class="yticks primary-0" x1="30.56280048076923px" y1="85.80000000000001px" x2="450px" y2="85.80000000000001px" style="stroke-width: 1px;"></line><line class="yticks primary-0" x1="30.56280048076923px" y1="141.60000000000002px" x2="450px" y2="141.60000000000002px" style="stroke-width: 1px;"></line><line class="yticks primary-0" x1="30.56280048076923px" y1="197.40000000000003px" x2="450px" y2="197.40000000000003px" style="stroke-width: 1px;"></line><line class="yticks primary-0" x1="30.56280048076923px" y1="253.20000000000002px" x2="450px" y2="253.20000000000002px" style="stroke-width: 1px;"></line><line class="yticks primary-0" x1="30.56280048076923px" y1="309px" x2="450px" y2="309px" style="stroke-width: 1px;"></line><line class="xaxis" x1="30.56280048076923px" y1="310px" x2="450px" y2="310px" style="stroke-width:1px; stroke-dasharray:undefined"></line><line class="yaxis primary-0" x1="31.56280048076923px" y1="30px" x2="31.56280048076923px" y2="309px" style="stroke-width:1px; stroke-dasharray:undefined"></line><g style="clip-path: url(#clipingRect13);"><line class="xticks" x1="30.5625px" y1="309px" x2="30.5625px" y2="309px"></line><line class="xticks" x1="240.2814002403846px" y1="309px" x2="240.2814002403846px" y2="30px" style="stroke-width:1px; stroke-dasharray:1px,2px"></line></g></g></g><g class="chart-left-gridlines" x="0px" y="0px" width="419.4371995192308px" preserveAspectRatio="none" style="overflow:inherit; -webkit-transform:scale(1,1) translate(0px,0px)"></g><g class="chart-bottom-gridlines" x="0px" y="0px" width="419.4371995192308px" preserveAspectRatio="none" style="overflow:inherit; -webkit-transform:scale(1,1) translate(0px,0px)"></g><svg class="chart-primsec" style="clip-path: url(#clipingRectGraphs13); overflow: inherit;"><g class="chart-parent" x="30.56280048076923px" width="419.4371995192308px" preserveAspectRatio="none" style=""><g class="graph-parent" style="transform: translate(0,0) scale(1,1);"><polyline points=""></polyline><path d=""></path></g></g><g class="chart-parent" x="30.56280048076923px" width="419.4371995192308px" preserveAspectRatio="none" style="; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px 0px" AI="0" height="279px" y="30px"><g class="graph-parent" style="transform: translate(0,0) scale(1,1);"><polyline points=""></polyline><path d=""></path><g class="ftui l0sym" id="primary-graph-13-0-symbol" animstate="hide" min="309" max="30" xrange="450" x0polar="NaN" y0polar="309"><text style="stroke-width: 0px;fill: rgb(221, 164, 0);font-size:12px;text-anchor:middle;font-family:&quot;Font Awesome 5 Free&quot;" min="0" x="133.49239796695548" y="255.154395" transform="translate(133.49239796695548 255.154395) scale(1,1) translate(-133.49239796695548 -255.154395)"></text><text style="stroke-width: 0px;fill: rgb(221, 164, 0);font-size:12px;text-anchor:middle;font-family:&quot;Font Awesome 5 Free&quot;" min="0" x="259.46919573922446" y="246.49284" transform="translate(259.46919573922446 246.49284) scale(1,1) translate(-259.46919573922446 -246.49284)"></text><text style="stroke-width: 0px;fill: rgb(221, 164, 0);font-size:12px;text-anchor:middle;font-family:&quot;Font Awesome 5 Free&quot;" min="0" x="318.99869410849027" y="252.802425" transform="translate(318.99869410849027 252.802425) scale(1,1) translate(-318.99869410849027 -252.802425)"></text></g></g></g></svg><g class="lentries" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px NaNpx" x="0%" y="0px"><rect class="legend lback" x="393.84375000000006px" y="30px" height="26px" width="56.15625px" style="position: relative;"></rect><text class="legend ftui l0sym" x="445.00000000000006px" y="48.5px" text-anchor="end" igraph="0" style="stroke-width:0px;fill-opacity:1;" opacity="1"><tspan>Verbrauch</tspan></text></g><g class="text axes"><g class="text yaxis_primary-0" style="-webkit-transition:ease; -webkit-transition-duration:0.5s; -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(0px); -webkit-transform-origin: 30.56280048076923px 279px 0px"><text class="text axes yaxis" x="11" y="169.5" transform="rotate(-90 11,169.5)" text-anchor="middle"><tspan>Verbrauch/Tag(kWh)</tspan></text><text class="text axes yaxis" x="28.56280048076923px" y="314" text-anchor="end"><tspan>0</tspan></text><text class="text axes yaxis" x="28.56280048076923px" y="258.2" text-anchor="end"><tspan>40</tspan></text><text class="text axes yaxis" x="28.56280048076923px" y="202.40000000000003" text-anchor="end"><tspan>80</tspan></text><text class="text axes yaxis" x="28.56280048076923px" y="146.60000000000002" text-anchor="end"><tspan>120</tspan></text><text class="text axes yaxis" x="28.56280048076923px" y="90.80000000000001" text-anchor="end"><tspan>160</tspan></text><text class="text axes yaxis" x="28.56280048076923px" y="35.00000000000003" text-anchor="end"><tspan>200</tspan></text></g><g style="clip-path: url(#clipingRectXAxis13);"><g class="text xaxis" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px 0px"><text class="text axes xaxis major" x="30.56280048076923px" y="320" text-anchor="middle"><tspan>16.09</tspan></text><text class="text axes xaxis" x="240.2814002403846px" y="320" text-anchor="middle"><tspan>20.09</tspan></text><text class="text axes xaxis major" x="450px" y="320" text-anchor="middle"><tspan>24.09</tspan></text></g></g></g><g class="crosshair container" pointer-events="none" style="overflow: inherit;"><line class="crosshair" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px 0px"></line><g class="crosshair" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px 0px"><text class="crosshair" filter="url(#filterbackground)" style="z-index: 10001; stroke-width: 0px; display: none;" text-anchor="end"><tspan class="crosshairValue"> </tspan></text></g><g class="crosshair" style="-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transform-origin: 30.56280048076923px 279px 0px"><text class="crosshair" filter="url(#filterbackground)" style="z-index: 10001; stroke-width: 0px; display: none;" text-anchor="end"><tspan class="crosshairValue"> </tspan></text></g></g></g></svg></div>

Wolfgang Hochweller · 24 September 2020, 10:25:12

Hier noch eine Ergänzung.
Mit den Daten, die ich gestern für 'Chart Zeitachse aus Readings aufbauen' geschickt habe, sieht man noch andere Sachen :
- Mit der Einstellung 'lines' oder 'ibars' sieht es normal aus, mit 'bars' wird es chaotisch, sprich, Linien kreuz und quer, ( andere habe ich nicht probiert )
- mit 'ftui l0sym' sieht man keine Symbole, im Cursor ist nur noch der allererste Wert an der richtigen Stelle, die anderen sind nicht sichtbar.
- der Cursor verschwindet vollständig an Datumsgrenzen

eki · 24 September 2020, 11:01:15

In Deinem Beispiel sind die Einträge "rückwärts" sortiert. Ist das auch im Logfile so? Das Chart geht nämlich von aufsteigend sortierten Einträgen aus. Das könnte der Grund für das "Strickmuster" bei den "bars" sein.
Es gibt einen Parameter data-dosort, wenn Du den auf "true" setzt, werden die Input Daten nach dem Zeitstempel sortiert, das ist aber bisher nicht wirklich durchgetestet. Versuche es mal damit. Besser wäre allerdings, das Logfile entsprechend "richtig" zu machen.

Bei den Symbolen sieht es so aus, als ob die Symbole schon eingetragen werden (die komischen Zeichen im Plot), aber die Umsetzung in font awesome SVGs scheint nicht richtg zu klappen.

eki · 24 September 2020, 11:43:41

kannst Du das mit den Symbolen mal mit der angehängten Version des Charts probieren?

Wolfgang Hochweller · 24 September 2020, 18:45:58

Das mit der Reihenfolge war mein Fehler, sorry.

do-sort hilft da schon.

Deine Version des Charts funktioniert einwandfrei, lauter schöne Symbole !