Test Adapter flexcharts - Stapeldiagramme und mehr
-
Ich schon wieder, mir ist es jetzt gelungen in Flexchart eine Timeline mit den Wetterkonditionen darzustellen, siehe :
Diese zeigt zu jeder Stunde anhand des farbigen Rectangle die Wetterkondition.
Jetzt wollte ich als i-Tüpfelchen noch ein Icon anzeigen lassen, aber ich sehe nur das kleine 'grüne' Viereck in der Mitte (wahrscheinlich ein Platzhalter weil das Icon nicht gefunden wird.Frage ist jetzt, geht das mit dem Flexchart Adapter überhaupt? In welchem Format muß das Icon vorliegen? Wo sollte es sich befinden (Speicherort) ?
Zum Nachvollziehen, das Script welches ich verwende:
// ==================================================================================== // KONFIGURATION UND BASE64-PLATZHALTER // ==================================================================================== const SOURCE_ID = '0_userdata.0.weather.meteosource_cond'; const TARGET_ID = '0_userdata.0.Flexcharts.weatherIcon'; interface WeatherEntry { time: string; summary: string; } // 🚨 WICHTIG: ERSETZEN SIE DIESE PLATZHALTER mit den Base64-Strings IHRER SVG-Dateien. // (Beispiel: data:image/svg+xml;base64,PHN2ZyB... DIES MUSS KORREKT SEIN!) const BASE64_CLOUDY = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0xMi4wMSA2YzIuNjEgMCA0Ljg5IDEuODYgNS40IDQuNDNsLjMgMS41bDEuNTIuMTFjMS41Ni4xMSAyLjc4IDEuNDEgMi43OCAyLjk2YzAgMS42NS0xLjM1IDMtMyAzaC0xM2MtMi4yMSAwLTQtMS43OS00LTRjMC0yLjA1IDEuNTMtMy43NiAzLjU2LTMuOTdsMS4wNy0uMTFsLjUtLjk1QTUuNDU3IDUuNDU3IDAgMCAxIDEyLjAxIDZtMC0yQzkuMTIgNCA2LjYgNS42NCA1LjM1IDguMDRDMi4zNSA4LjM2LjAxIDEwLjkxLjAxIDE0YzAgMy4zMSAyLjY5IDYgNiA2aDEzYzIuNzYgMCA1LTIuMjQgNS01YzAtMi42NC0yLjA1LTQuNzgtNC42NC00Ljk2QzE4LjY4IDYuNTkgMTUuNjUgNCAxMi4wMSA0eiIvPjwvc3ZnPg=="; const BASE64_SUNNY = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik02Ljc2IDQuODRsLTEuOC0xLjc5bC0xLjQxIDEuNDFsMS43OSAxLjc5ek0xIDEwLjVoM3YySDF6TTExIC41NWgyVjMuNWgtMnptOC4wNCAyLjQ5NWwxLjQwOCAxLjQwN2wtMS43OSAxLjc5bC0xLjQwNy0xLjQwOHptLTEuOCAxNS4xMTVsMS43OSAxLjhsMS40MS0xLjQxbC0xLjgtMS43OXpNMjAgMTAuNWgzdjJoLTN6bS04LTVjLTMuMzEgMC02IDIuNjktNiA2czIuNjkgNiA2IDZzNi0yLjY5IDYtNnMtMi42OS02LTYtNnptMCAxMGMtMi4yMSAwLTQtMS43OS00LTRzMS43OS00IDQtNHM0IDEuNzkgNCA0cy0xLjc5IDQtNCA0em0tMSA0aDJ2Mi45NWgtMnptLTcuNDUtLjk2bDEuNDEgMS40MWwxLjc5LTEuOGwtMS40MS0xLjQxeiIvPjwvc3ZnPg=="; const BASE64_UNKNOWN = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjYuNDU4MzM4bW0iIGhlaWdodD0iMjYuNDU4MzI2bW0iIHZpZXdCb3g9IjAgMCA3NS4wMDAxNiA3NS4wMDAwNzEiIGlkPSJzdmcxNjUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnMgaWQ9ImRlZnMxNjUiIC8+PGcgaWQ9ImxheWVyMSIgc3R5bGU9Im9wYWNpdHk6MSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwOC43NTExNCwtMTczMi41MDI5KSI+PGcgaWQ9ImczNDIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0wLjAzOTU4MjUyLDkuMTIyNjU3NCkiPjxwYXRoIGlkPSJwYXRoMzM3LTIiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6Mi4xMjQxNztzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGQ9Im0gNzQ4Ljg3MzQzLDE3NTEuOTU1MSBjIC03LjQyODUzLDAgLTEzLjQ1MDQ5LDYuMDI4OCAtMTMuNDUwMzEsMTMuNDY1NiAwLjAxLDAuODU5NSAwLjEwMTE3LDEuNzE2MyAwLjI3MzgyLDIuNTU4NCAtMC40NDA4OCwtMC4wNiAtMC44ODUzNCwtMC4wOTIgLTEuMzMwMzgsLTAuMDkyIC01LjQ2ODYzLC0xMGUtNSAtOS45MDE4NCw0LjQzODEgLTkuOTAxNzMsOS45MTI4IC0xLjFlLTQsNS40NzQ3IDQuNDMzMSw5LjkxMjggOS45MDE3Myw5LjkxMjcgNy4wNjk1MywxMGUtNSAyNy44MzYzNywtMC4xMDU4IDM0LjA4OTA3LC0wLjEgNi45NzYyNCwyZS00IDEyLjYzMTY4LC01LjY2MTQgMTIuNjMxNjIsLTEyLjY0NTQgMS4xZS00LC02Ljk4MzkgLTUuNjU1MzUsLTEyLjY0NTYgLTEyLjYzMTYyLC0xMi42NDU1IC0yLjE4Mjg1LDAgLTQuMzI3ODgsMC41NzA2IC02LjIyNTkzLDEuNjQ5OSAtMC43Mzg0LC02LjgyOTggLTYuNDk0MTYsLTEyLjAwODEgLTEzLjM1NjI3LC0xMi4wMTYzIHoiIC8+PGcgaWQ9ImcyMzAtNSIgdHJhbnNmb3JtPSJtYXRyaXgoMC4wODg1OTEyMiwwLDAsMC4wODg1OTEyMiw3MTAuNDMyMjQsMTczMi45ODU3KSIgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yO2ZpbGwtb3BhY2l0eToxIj48cGF0aCBkPSJNIDM1Ni41NzY0OSwxODcuODg3ODYgQyAzMzcuNjU3OSwxMzkuMTk1MjcgMjkwLjM2NjUsMTA0LjY2ODU3IDIzNSwxMDQuNjA1NDcgYyAtNzIuMDE1NjMsMCAtMTMwLjM5NDUzLDU4LjM3ODkgLTEzMC4zOTQ1MywxMzAuMzk0NTMgMCw3Mi4wMTU2MiA1OC4zNzg5LDEzMC4zOTQ1MyAxMzAuMzk0NTMsMTMwLjM5NDUzIiBpZD0icGF0aDEtNDE5LTgiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOmN1cnJlbnRDb2xvcjtzdHJva2Utd2lkdGg6MjMuOTc3MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSIgLz48cGF0aCBkPSJNIDI0NSw2MSBWIDEwIEMgMjQ1LDQuNDc2NTYyIDI0MC41MjM0NCwwIDIzNSwwIDIyOS40NzY1NiwwIDIyNSw0LjQ3NjU2MiAyMjUsMTAgdiA1MSBjIDAsNS41MjM0MzggNC40NzY1NiwxMCAxMCwxMCA1LjUyMzQ0LDAgMTAsLTQuNDc2NTYyIDEwLC0xMCB6IG0gMCwwIiBpZD0icGF0aDItNjk4LTMiIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvcjtmaWxsLW9wYWNpdHk6MSIgLz48cGF0aCBkPSJtIDcxLDIzNSBjIDAsLTUuNTIzNDQgLTQuNDc2NTYyLC0xMCAtMTAsLTEwIEggMTAgYyAtNS41MjM0MzgsMCAtMTAsNC40NzY1NiAtMTAsMTAgMCw1LjUyMzQ0IDQuNDc2NTYyLDEwIDEwLDEwIGggNTEgYyA1LjUyMzQzOCwwIDEwLC00LjQ3NjU2IDEwLC0xMCB6IG0gMCwwIiBpZD0icGF0aDUtMTItMyIgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yO2ZpbGwtb3BhY2l0eToxIiAvPjxwYXRoIGQ9Ik0gMzY1LjI1NzgxLDExOC44ODI4MSA0MDAuNzMwNDcsODMuNDEwMTU2IEMgNDA0LjYwOTM3LDc5LjUgNDA0LjU5Mzc1LDczLjE5MTQwNiA0MDAuNjk5MjIsNjkuMzAwNzgxIDM5Ni44MDg1OSw2NS40MDYyNSAzOTAuNSw2NS4zOTA2MjUgMzg2LjU4OTg0LDY5LjI2OTUzMSBsIC0zNS40NzI2NSwzNS40NzI2NTkgYyAtMi41NDI5NywyLjUxOTUzIC0zLjU0Njg4LDYuMjEwOTQgLTIuNjI1LDkuNjc1NzggMC45MjU3OCwzLjQ2MDk0IDMuNjI4OSw2LjE2NDA2IDcuMDg5ODQsNy4wODk4NCAzLjQ2NDg0LDAuOTIxODggNy4xNTYyNSwtMC4wODIgOS42NzU3OCwtMi42MjUgeiBtIDAsMCIgaWQ9InBhdGg2LTUwLTciIHN0eWxlPSJmaWxsOmN1cnJlbnRDb2xvcjtmaWxsLW9wYWNpdHk6MSIgLz48cGF0aCBkPSJtIDEwNC43NDIxOSwzNTEuMTE3MTkgLTM1LjQ3MjY1OSwzNS40NzI2NSBjIC0yLjU0Njg3NSwyLjUyMzQ0IC0zLjU0Njg3NSw2LjIxNDg1IC0yLjYyNSw5LjY3NTc4IDAuOTIxODc1LDMuNDYwOTQgMy42Mjg5MDcsNi4xNjc5NyA3LjA4OTg0NCw3LjA4OTg1IDMuNDYwOTM3LDAuOTIxODcgNy4xNTIzNDQsLTAuMDc4MSA5LjY3NTc4MSwtMi42MjUgbCAzNS40NzI2NTQsLTM1LjQ3MjY2IGMgMi41NDI5NywtMi41MTk1MyAzLjU0Njg4LC02LjIxMDkzIDIuNjI1LC05LjY3NTc4IC0wLjkyNTc4LC0zLjQ2MDk0IC0zLjYyODksLTYuMTY0MDYgLTcuMDg5ODQsLTcuMDg5ODQgLTMuNDY0ODQsLTAuOTIxODggLTcuMTU2MjUsMC4wODIgLTkuNjc1NzgsMi42MjUgeiBtIDAsMCIgaWQ9InBhdGg3LTgtOSIgc3R5bGU9ImZpbGw6Y3VycmVudENvbG9yO2ZpbGwtb3BhY2l0eToxIiAvPjxwYXRoIGQ9Im0gMTA0Ljc0MjE5LDExOC44ODI4MSBjIDIuNTE5NTMsMi41NDI5NyA2LjIxMDk0LDMuNTQ2ODggOS42NzU3OCwyLjYyNSAzLjQ2MDk0LC0wLjkyNTc4IDYuMTY0MDYsLTMuNjI4OSA3LjA4OTg0LC03LjA4OTg0IDAuOTIxODgsLTMuNDY0ODQgLTAuMDgyLC03LjE1NjI1IC0yLjYyNSwtOS42NzU3OCBMIDgzLjQxMDE1Niw2OS4yNjk1MzEgQyA3OS41LDY1LjM5MDYyNSA3My4xOTE0MDYsNjUuNDA2MjUgNjkuMzAwNzgxLDY5LjMwMDc4MSA2NS40MDYyNSw3My4xOTE0MDYgNjUuMzkwNjI1LDc5LjUgNjkuMjY5NTMxLDgzLjQxMDE1NiBaIG0gMCwwIiBpZD0icGF0aDktOS05IiBzdHlsZT0iZmlsbDpjdXJyZW50Q29sb3I7ZmlsbC1vcGFjaXR5OjEiIC8+PC9nPjwvZz48ZyBpZD0iZzM0NCIgc3R5bGU9ImRpc3BsYXk6aW5saW5lO29wYWNpdHk6MTtmaWxsOiM4MDAwMDAwMDtmaWxsLW9wYWNpdHk6MC4yMjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zLjYxNzY2OGUtNiw1LjYwMTY1NjhlLTUpIj48cGF0aCBkPSJtIDcwOC43NTExNCwxNzMyLjUwMjggdiA3NS4wMDAxIGggNzUuMDAwMTMgdiAtNzUuMDAwMSB6IiBzdHlsZT0iZGlzcGxheTppbmxpbmU7ZmlsbDojODAwMDAwMDA7ZmlsbC1vcGFjaXR5OjAuMjI1O3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDowLjc1MzM3NjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjEiIGlkPSJwYXRoMTU0LTUtNy05LTIyLTAtOS0wLTUiIC8+PC9nPjwvZz48c3R5bGUgdHlwZT0idGV4dC9jc3MiIGlkPSJzdHlsZTEiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MntmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qze2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDV7ZmlsbDojRkZGRkZGO30uc3Q2e3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q3e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDh7ZmlsbDpub25lO30uc3Q5e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fTwvc3R5bGU+PHN0eWxlIHR5cGU9InRleHQvY3NzIiBpZD0ic3R5bGUxLTUiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qxe2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0MntmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjI7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Qze2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9LnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjM7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDV7ZmlsbDojRkZGRkZGO30uc3Q2e3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q3e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MjtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDh7ZmlsbDpub25lO30uc3Q5e2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2Utd2lkdGg6MDtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7fTwvc3R5bGU+PC9zdmc+Cg=="; // Definition der Wetter-Kategorien und Farben const CATEGORIES = ['Timeline']; const WEATHER_TYPES = [ { name: 'Light rain', color: '#81b0e9' }, { name: 'Rain', color: '#6baeff' }, { name: 'Rain shower', color: '#7eb0ed' }, { name: 'Possible rain', color: '#97b2d3' }, { name: 'Cloudy', color: '#8795ab' }, { name: 'Overcast', color: '#e1e4ea' }, { name: 'Partly clody', color: '#d5dae2' }, { name: 'Mostly clody', color: '#b4bdcb' }, { name: 'Partly sunny', color: '#e1d570' }, { name: 'Mostly sunny', color: '#ffee52' }, { name: 'Sunny', color: '#FFA500' }, { name: 'Clear', color: '#4682B4' }, { name: 'Mostly clear', color: '#edf3f8' }, { name: 'Default', color: '#5B9DD9' } ]; // Mapping der Wetter-Summaries zu den BASE64-Strings const WEATHER_ICONS: { [key: string]: string } = { 'light rain': BASE64_CLOUDY, 'Cloudy': BASE64_CLOUDY, 'partly sunny': BASE64_SUNNY, 'mostly sunny': BASE64_SUNNY, 'Sunny': BASE64_SUNNY, 'clear': BASE64_SUNNY, 'default': BASE64_UNKNOWN }; // ==================================================================================== // HILFSFUNKTIONEN // ==================================================================================== function getCategoryColor(summary: string | null | undefined): string { if (!summary || typeof summary !== 'string' || summary.length === 0) { return '#5B9DD9'; } const lowerSummary = summary.toLowerCase(); const type = WEATHER_TYPES.find(t => t.name.toLowerCase() === lowerSummary); return type ? type.color : WEATHER_TYPES.find(t => t.name === 'Default').color; } /** * Holt den Base64-String für eine Wetter-Summary. */ function getWeatherIconPath(summary: string | null | undefined): string { if (!summary || typeof summary !== 'string' || summary.length === 0) { return WEATHER_ICONS['default']; } const lowerSummary = summary.toLowerCase(); return WEATHER_ICONS[lowerSummary] || WEATHER_ICONS['default']; } /** * Erstellt ein separates 1-Stunden-Segment für jeden Eintrag (lückenfrei). */ function transformDataToScatterGantt(rawData: WeatherEntry[]): any[] { if (rawData.length === 0) return []; const validData = rawData.filter(item => { return item && item.time && item.summary && !isNaN(new Date(item.time).getTime()); }); if (validData.length === 0) return []; const scatterData = []; const oneHourInMs = 60 * 60 * 1000; for (const entry of validData) { const currentSummary = entry.summary; const startTime = new Date(entry.time).getTime(); const segmentEndTime = startTime + oneHourInMs; const uniqueName = `${currentSummary}_${startTime}`; scatterData.push({ name: uniqueName, // [Start-Timestamp, Y-Kategorie (0), End-Timestamp, Summary] value: [startTime, 0, segmentEndTime, currentSummary], itemStyle: { color: getCategoryColor(currentSummary) } }); } return scatterData; } // ==================================================================================== // ECHARTS GENERIERUNG (Zwei Scatter-Serien) // ==================================================================================== function createEChartOptions(scatterGanttData: any[], minTime: string, maxTime: string): string { const minTimeMs = new Date(minTime).getTime(); const maxTimeMs = new Date(maxTime).getTime(); // 1. Daten für die Timeline (Rechtecke und Text) const dataForTimeline = scatterGanttData.map(item => ({ name: item.name, value: [item.value[0], item.value[1], item.value[2], item.value[3]], itemStyle: item.itemStyle, label: { show: true, // Zeigt NUR den Text an (kein Bild/Emoji) formatter: function(params: any) { return params.value[3]; }, position: 'inside', color: '#000', fontWeight: 'bold' } })); // 2. Daten für die Icons (Symbol-Serie) const dataForIcons = scatterGanttData.map(item => ({ name: item.name + '_icon', // Icon-Symbol soll am Anfang des Rechtecks (StartTime) positioniert werden value: [item.value[0], item.value[1]], // [Start-Timestamp, 0] symbol: getWeatherIconPath(item.value[3]), // Fügt das Base64-Icon als Symbol hinzu symbolSize: [20, 20], // Größe des Icons (anpassen) itemStyle: { opacity: 1 // Muss sichtbar sein }, label: { show: false // Kein Label für diese Serie } })); const options = { backgroundColor: '#111217', title: { text: 'Wetter-Timeline', left: 'center', textStyle: { fontSize: 14 } }, tooltip: { // ... Tooltip bleibt gleich wie in der letzten Base64-Version formatter: function (params: any) { if (params.seriesType !== 'scatter' || params.seriesName === 'Icons') return; const summary = params.value[3]; const startTime = new Date(params.value[0]).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }); const endTime = new Date(params.value[2]).toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' }); const iconPath = getWeatherIconPath(summary); return `<div><img src="${iconPath}" style="width:20px; height:20px; vertical-align:middle; margin-right:5px;"><b>${summary}</b></div>${startTime} – ${endTime}`; } }, grid: { left: '3%', right: '4%', top: '20%', bottom: '5%', containLabel: true, height: '100' }, xAxis: { type: 'time', min: minTimeMs, max: maxTimeMs, axisLabel: { formatter: '{HH}:{mm}' } }, yAxis: { type: 'category', data: CATEGORIES, show: true }, series: [ // Serie 1: Die eigentliche Timeline (Rechtecke und Text) { name: 'Wetterereignisse', type: 'scatter', symbol: 'rect', symbolSize: [60, 40], data: dataForTimeline }, // Serie 2: Die Icons (überlagert die Timeline) { name: 'Icons', type: 'scatter', symbolSize: [0, 0], // Macht den Punkt unsichtbar data: dataForIcons } ] }; return JSON.stringify(options); } // ... (HAUPT-SKRIPT-AUSFÜHRUNG MIT SCHEDULER bleibt gleich) ... function updateWeatherTimeline(): void { const state = getState(SOURCE_ID); if (!state || !state.val) { log(`FEHLER: Quelldatenpunkt ${SOURCE_ID} ist leer oder ungültig.`, 'warn'); return; } const parsedData = state.val as WeatherEntry[]; if (!Array.isArray(parsedData) || parsedData.length === 0) { log(`FEHLER: Daten in ${SOURCE_ID} sind kein Array oder leer.`, 'error'); return; } try { const scatterGanttData = transformDataToScatterGantt(parsedData); const minTime = parsedData[0].time; const lastData = scatterGanttData[scatterGanttData.length - 1]; const maxTime = new Date(lastData.value[2]).toISOString(); const optionsJson = createEChartOptions(scatterGanttData, minTime, maxTime); setState(TARGET_ID, optionsJson, true); log(`ECharts-Timeline erfolgreich unter ${TARGET_ID} gespeichert.`); } catch (e) { log(`Fehler bei der Transformation oder Speicherung der Daten: ${e}`, 'error'); } } schedule('0 * * * *', updateWeatherTimeline); updateWeatherTimeline();und wer es nachstellen will, das Liste (array) wo die Daten hermommen:
[{"time":"2025-11-22T13:00:00","summary":"Mostly cloudy"},{"time":"2025-11-22T14:00:00","summary":"Mostly cloudy"},{"time":"2025-11-22T15:00:00","summary":"Mostly cloudy"},{"time":"2025-11-22T16:00:00","summary":"Partly sunny"},{"time":"2025-11-22T17:00:00","summary":"Clear"},{"time":"2025-11-22T18:00:00","summary":"Clear"},{"time":"2025-11-22T19:00:00","summary":"Mostly clear"},{"time":"2025-11-22T20:00:00","summary":"Clear"},{"time":"2025-11-22T21:00:00","summary":"Partly clear"},{"time":"2025-11-22T22:00:00","summary":"Partly clear"},{"time":"2025-11-22T23:00:00","summary":"Mostly clear"},{"time":"2025-11-23T00:00:00","summary":"Mostly clear"},{"time":"2025-11-23T01:00:00","summary":"Overcast"},{"time":"2025-11-23T02:00:00","summary":"Overcast"},{"time":"2025-11-23T03:00:00","summary":"Overcast"},{"time":"2025-11-23T04:00:00","summary":"Overcast"},{"time":"2025-11-23T05:00:00","summary":"Overcast"},{"time":"2025-11-23T06:00:00","summary":"Snow shower"},{"time":"2025-11-23T07:00:00","summary":"Light snow"},{"time":"2025-11-23T08:00:00","summary":"Overcast"},{"time":"2025-11-23T09:00:00","summary":"Overcast"},{"time":"2025-11-23T10:00:00","summary":"Overcast"},{"time":"2025-11-23T11:00:00","summary":"Overcast"},{"time":"2025-11-23T12:00:00","summary":"Overcast"}]Vielleicht hat ja einer ein Idee, oder findet den Fehler
@icebear ECharts scheint Deine Symbol-Definition nicht zu verstehen. Wenn ich alle Systemdefinitionen durch eine Beispieldefinition von ECharts ersetze, sehe ich dieses Chart:
Ich habe diese Symboldefinition verwendet:
"symbol": "image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7", -
@icebear ECharts scheint Deine Symbol-Definition nicht zu verstehen. Wenn ich alle Systemdefinitionen durch eine Beispieldefinition von ECharts ersetze, sehe ich dieses Chart:
Ich habe diese Symboldefinition verwendet:
"symbol": "image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7",Danke für deinen Hinweis, jetzt funktioniert es.
Ich hatte allerdings noch ein anderes Problem, die Bezeichner der Wetterkonditionen enthielten 'Leerzeichen' also z.B. 'Light rain' oder 'Partly cloudy' deshalb ist er immer auf das 'Default Icon' gefallen.
Aber nun geht es wie man sieht, also nochmals vielen Dank an deinen Hinweis
-
Danke für deinen Hinweis, jetzt funktioniert es.
Ich hatte allerdings noch ein anderes Problem, die Bezeichner der Wetterkonditionen enthielten 'Leerzeichen' also z.B. 'Light rain' oder 'Partly cloudy' deshalb ist er immer auf das 'Default Icon' gefallen.
Aber nun geht es wie man sieht, also nochmals vielen Dank an deinen Hinweis
ist ja echt Wahnsinn, was mit dem Adapter alles funktioniert, ich muss mich damit unbedingt näher beschäftigen.
Ich bin gerade dabei von VIS auf VIS 2 umzusteigen, unter VIS habe ich das JSON Chart Widget vom Material Design Widgets Adapter benutzt. Damit konnte man echt coole Charts kreieren.
Jetzt suche ich natürlich nach einer Alternative und bin auf diesen Adapter gestoßen.
Ich möchte z.B. dieses Chart nachbauen
Die Daten kommen aus einen Wetter-Adapter, den Chart lasse ich mir einmal kurz nach Mitternacht erstellen. Bei der Temperatur ist ein Farbverlauf hinterlegt, der je nach Temperatur von dunkelblau bis dunkelrot geht.
Ist sowas mit dem Adapter möglich und wenn ja wie?
Ich muss dazusagen dass ich mich mit Javascript nicht wirklich auskennen und das obere Beispiel auch nur kopiert habe.
Gruß
Oliver -
ist ja echt Wahnsinn, was mit dem Adapter alles funktioniert, ich muss mich damit unbedingt näher beschäftigen.
Ich bin gerade dabei von VIS auf VIS 2 umzusteigen, unter VIS habe ich das JSON Chart Widget vom Material Design Widgets Adapter benutzt. Damit konnte man echt coole Charts kreieren.
Jetzt suche ich natürlich nach einer Alternative und bin auf diesen Adapter gestoßen.
Ich möchte z.B. dieses Chart nachbauen
Die Daten kommen aus einen Wetter-Adapter, den Chart lasse ich mir einmal kurz nach Mitternacht erstellen. Bei der Temperatur ist ein Farbverlauf hinterlegt, der je nach Temperatur von dunkelblau bis dunkelrot geht.
Ist sowas mit dem Adapter möglich und wenn ja wie?
Ich muss dazusagen dass ich mich mit Javascript nicht wirklich auskennen und das obere Beispiel auch nur kopiert habe.
@Oli Ich sehe keinen Grund, warum das mit Flexcharts nicht gehe sollte. Ein wenig Javascript dürfte aber schon notwendig sein.
Bitte die Quelldaten und die aktuelle Chart-Definition (JSON) bereitstellen. Vielleicht kann ich daraus eine prototypische Umsetzung basteln. Ich kenne allerdings das "JSON Chart Widget" nicht. -
@Oli Ich sehe keinen Grund, warum das mit Flexcharts nicht gehe sollte. Ein wenig Javascript dürfte aber schon notwendig sein.
Bitte die Quelldaten und die aktuelle Chart-Definition (JSON) bereitstellen. Vielleicht kann ich daraus eine prototypische Umsetzung basteln. Ich kenne allerdings das "JSON Chart Widget" nicht.@jrbwh
erst einmal danke für deine UnterstützungHier ist die JSON des Charts
Die Quelldaten kommen aus dem Bright Sky Adapter aus folgenden Datenpunkten
Niederschlagsmenge: brightsky.0.hourly.00.precipitation Niederschlagswahrscheinlichkeit: brightsky.0.hourly.00.precipitation_probability Temperatur: brightsky.0.hourly.00.temperaturehourly.00. ist immer die aktuelle Stunde, darum lasse ich den Chart einmal am Tag um kurz nach Mitternacht anlegen.
Die Datenpunkte werden von hourly.00. bis hourly.24 aufgeführt.
Falls du noch andere Informationen benötigst, dann bitte einfach melden.
Gruß
Oliver -
@jrbwh
erst einmal danke für deine UnterstützungHier ist die JSON des Charts
Die Quelldaten kommen aus dem Bright Sky Adapter aus folgenden Datenpunkten
Niederschlagsmenge: brightsky.0.hourly.00.precipitation Niederschlagswahrscheinlichkeit: brightsky.0.hourly.00.precipitation_probability Temperatur: brightsky.0.hourly.00.temperaturehourly.00. ist immer die aktuelle Stunde, darum lasse ich den Chart einmal am Tag um kurz nach Mitternacht anlegen.
Die Datenpunkte werden von hourly.00. bis hourly.24 aufgeführt.
Falls du noch andere Informationen benötigst, dann bitte einfach melden.
@Oli Sorry, hat jetzt etwas gedauert, bis ich mir das anschauen konnte. Ich habe Deine Chart-Definition in Gemini rein geworfen, mit der Aufforderung aus dem jsonchart ein Apache EChart zu machen. Das Ergebnis hat auf Anhieb funktioniert, hatte aber noch ein paar Unstimmigkeiten. Nach ein wenig Nacharbeit ist jetzt folgendes Skript entstanden, dass direkt mit Flexcharts funktioniert:
// Chart-Definition für Apache ECharts: var option = { // Titel und Tooltip Konfiguration title: { text: 'Wetterdaten (Flexcharts)', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }, // Benutzerdefinierte Formatierung für Tooltips (fügt Einheiten hinzu) formatter: function (params) { let tooltipContent = params[0].name + '<br/>'; params.forEach(function(item) { let unit = ''; // Bestimmung der Einheit basierend auf dem Seriennamen if (item.seriesName === 'Temperatur') unit = ' °C'; else if (item.seriesName === 'Niederschlagswahrscheinlichkeit') unit = ' %'; else if (item.seriesName === 'Niederschlag') unit = ' mm'; tooltipContent += item.marker + item.seriesName + ': ' + item.value + unit + '<br/>'; }); return tooltipContent; } }, legend: { data: ['Temperatur', 'Niederschlagswahrscheinlichkeit', 'Niederschlag'], bottom: 10 }, grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true }, // X-Achse verwendet die axisLabels aus dem Quell-JSON xAxis: { type: 'category', boundaryGap: false, data: ["1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h", "9h", "10h", "11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h", "22h", "23h", "24h"] }, // Y-Achsen Konfiguration (ECharts unterstützt mehrere Y-Achsen) yAxis: [ { // Y-Achse Links (Standard) für Niederschlagswahrscheinlichkeit type: 'value', name: 'Wk.keit (%)', min: 0, // min/max werden aus jsonchart übernommen, aber hier vereinfacht max: 100, position: 'left', axisLabel: { // ECharts fügt automatisch die richtige Einheit hinzu, indem es die Serie zuordnet (in diesem Beispiel nur visuell demonstriert) }, axisLine: { show: true }, axisTick: { show: true }, splitLine: { show: false } // Gitterlinien ausgeblendet wie im Original }, { // Y-Achse Rechts für Niederschlag type: 'value', name: 'Niederschlag (mm)', min: 0, max: 10, position: 'right', axisLine: { show: true }, axisTick: { show: true }, splitLine: { show: false } }, { // 3. Y-Achse Temperatur - nicht sichtbar type: 'value', show: false, name: 'Temperatur (°C)' //min: 0, //max: 10 } ], // Serien (Graphen) Konfiguration series: [ { // Graph 1: Temperatur name: 'Temperatur', type: 'line', // "line" smooth: 0.3, // "line_Tension": 0.3 data: [], itemStyle: { color: 'gray' }, // "color": "gray" yAxisIndex: 2, // Zugeordnet zur 3. Y-Achse // Bereichsfärbung (UseFillColor/Gradient): // Diese spezifische Farbverlaufskonfiguration ist in ECharts komplexer zu mappen, // da ECharts Farbverläufe meist relativ zur Achse oder global definiert. areaStyle: { opacity: 0.6, // Um das genaue jsonchart Farbverlaufschema zu replizieren, // müsste man eine komplexe 'linearGradient' Funktion verwenden, // die auf den Datenwerten basiert, was über diese einfache Konvertierung hinausgeht. // Hier nur eine einfache Füllung: color: 'rgba(128, 128, 128, 0.3)' }, label: { show: 'auto', // "datalabel_show": "auto" position: 'top', color: 'black', // "datalabel_color": "black" statt "white" // Die spezifischen Hintergrundfarben pro Datenpunkt sind komplex und werden hier weggelassen. } }, { // Graph 2: Niederschlagswahrscheinlichkeit name: 'Niederschlagswahrscheinlichkeit', type: 'line', data: [], itemStyle: { color: '#0d47a1' }, yAxisIndex: 0, // Zugeordnet zur linken Y-Achse areaStyle: { // "line_UseFillColor": true color: '#0d47a166' }, label: { show: false } // "datalabel_show": false }, { // Graph 3: Niederschlag (Barren-Diagramm) name: 'Niederschlag', type: 'bar', // "type": "bar" data: [], itemStyle: { color: '#6dd600' }, yAxisIndex: 1, // Zugeordnet zur rechten Y-Achse label: { show: false } // "datalabel_show": false } ] }; var strify = require('javascript-stringify'); onMessage('wetter', (httpParams, callback) => { // Aktuelle Vorhersagedaten im Chart speichern: option.series[0].data = [1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 4, 5, 6, 7, 6, 5, 4, 3, 2, 2, 1, 1]; // Temperatur option.series[1].data = [5, 13, 27, 34, 40, 34, 31, 28, 24, 22, 18, 14, 12, 9, 15, 25, 30, 34, 41, 49, 57, 63, 64, 62]; // Niederschlagswahrscheinlichkeit option.series[2].data = [0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0, 0, 0, 0, 0, 0, 0.1, 0.1, 0.2, 0.2, 0.3, 0.3, 0.3, 0.3]; // Niederschlag // Chart zurückliefern: callback(strify.stringify(option)); });Es sind im Moment nur Demo-Daten drin. Du hast ja sicherlich bereits ein Skript, um die Daten aus der Objektstruktur von Bright Sky zu extrahieren. Da musst Du die Zeilen
option.series[0].data =usw. entsprechend anpassen.Um das in Flexcharts darszustellen gehst Du so vor:
- Flexcharts-Adapter installieren, falls noch nicht passiert
- Das npm-Modul
javascript-stringifyinstallieren, wie im Readme beschrieben - Skript mit obigem Inhalt anlegen und starten
- Im Browser folgende Adresse aufrufen (localhost passend durch Deinen ioBroker-Rechner ersetzen):
http://localhost:8082/flexcharts/echarts.html?source=script&message=wetter
Nun sollte dieses Chart erscheinen:
Da gibt es noch einiges Verbesserungspotenzial, aber als Grundgerüst sollte das funktionieren.
-
@Oli Sorry, hat jetzt etwas gedauert, bis ich mir das anschauen konnte. Ich habe Deine Chart-Definition in Gemini rein geworfen, mit der Aufforderung aus dem jsonchart ein Apache EChart zu machen. Das Ergebnis hat auf Anhieb funktioniert, hatte aber noch ein paar Unstimmigkeiten. Nach ein wenig Nacharbeit ist jetzt folgendes Skript entstanden, dass direkt mit Flexcharts funktioniert:
// Chart-Definition für Apache ECharts: var option = { // Titel und Tooltip Konfiguration title: { text: 'Wetterdaten (Flexcharts)', left: 'center' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } }, // Benutzerdefinierte Formatierung für Tooltips (fügt Einheiten hinzu) formatter: function (params) { let tooltipContent = params[0].name + '<br/>'; params.forEach(function(item) { let unit = ''; // Bestimmung der Einheit basierend auf dem Seriennamen if (item.seriesName === 'Temperatur') unit = ' °C'; else if (item.seriesName === 'Niederschlagswahrscheinlichkeit') unit = ' %'; else if (item.seriesName === 'Niederschlag') unit = ' mm'; tooltipContent += item.marker + item.seriesName + ': ' + item.value + unit + '<br/>'; }); return tooltipContent; } }, legend: { data: ['Temperatur', 'Niederschlagswahrscheinlichkeit', 'Niederschlag'], bottom: 10 }, grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true }, // X-Achse verwendet die axisLabels aus dem Quell-JSON xAxis: { type: 'category', boundaryGap: false, data: ["1h", "2h", "3h", "4h", "5h", "6h", "7h", "8h", "9h", "10h", "11h", "12h", "13h", "14h", "15h", "16h", "17h", "18h", "19h", "20h", "21h", "22h", "23h", "24h"] }, // Y-Achsen Konfiguration (ECharts unterstützt mehrere Y-Achsen) yAxis: [ { // Y-Achse Links (Standard) für Niederschlagswahrscheinlichkeit type: 'value', name: 'Wk.keit (%)', min: 0, // min/max werden aus jsonchart übernommen, aber hier vereinfacht max: 100, position: 'left', axisLabel: { // ECharts fügt automatisch die richtige Einheit hinzu, indem es die Serie zuordnet (in diesem Beispiel nur visuell demonstriert) }, axisLine: { show: true }, axisTick: { show: true }, splitLine: { show: false } // Gitterlinien ausgeblendet wie im Original }, { // Y-Achse Rechts für Niederschlag type: 'value', name: 'Niederschlag (mm)', min: 0, max: 10, position: 'right', axisLine: { show: true }, axisTick: { show: true }, splitLine: { show: false } }, { // 3. Y-Achse Temperatur - nicht sichtbar type: 'value', show: false, name: 'Temperatur (°C)' //min: 0, //max: 10 } ], // Serien (Graphen) Konfiguration series: [ { // Graph 1: Temperatur name: 'Temperatur', type: 'line', // "line" smooth: 0.3, // "line_Tension": 0.3 data: [], itemStyle: { color: 'gray' }, // "color": "gray" yAxisIndex: 2, // Zugeordnet zur 3. Y-Achse // Bereichsfärbung (UseFillColor/Gradient): // Diese spezifische Farbverlaufskonfiguration ist in ECharts komplexer zu mappen, // da ECharts Farbverläufe meist relativ zur Achse oder global definiert. areaStyle: { opacity: 0.6, // Um das genaue jsonchart Farbverlaufschema zu replizieren, // müsste man eine komplexe 'linearGradient' Funktion verwenden, // die auf den Datenwerten basiert, was über diese einfache Konvertierung hinausgeht. // Hier nur eine einfache Füllung: color: 'rgba(128, 128, 128, 0.3)' }, label: { show: 'auto', // "datalabel_show": "auto" position: 'top', color: 'black', // "datalabel_color": "black" statt "white" // Die spezifischen Hintergrundfarben pro Datenpunkt sind komplex und werden hier weggelassen. } }, { // Graph 2: Niederschlagswahrscheinlichkeit name: 'Niederschlagswahrscheinlichkeit', type: 'line', data: [], itemStyle: { color: '#0d47a1' }, yAxisIndex: 0, // Zugeordnet zur linken Y-Achse areaStyle: { // "line_UseFillColor": true color: '#0d47a166' }, label: { show: false } // "datalabel_show": false }, { // Graph 3: Niederschlag (Barren-Diagramm) name: 'Niederschlag', type: 'bar', // "type": "bar" data: [], itemStyle: { color: '#6dd600' }, yAxisIndex: 1, // Zugeordnet zur rechten Y-Achse label: { show: false } // "datalabel_show": false } ] }; var strify = require('javascript-stringify'); onMessage('wetter', (httpParams, callback) => { // Aktuelle Vorhersagedaten im Chart speichern: option.series[0].data = [1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 4, 5, 6, 7, 6, 5, 4, 3, 2, 2, 1, 1]; // Temperatur option.series[1].data = [5, 13, 27, 34, 40, 34, 31, 28, 24, 22, 18, 14, 12, 9, 15, 25, 30, 34, 41, 49, 57, 63, 64, 62]; // Niederschlagswahrscheinlichkeit option.series[2].data = [0, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0.1, 0, 0, 0, 0, 0, 0, 0.1, 0.1, 0.2, 0.2, 0.3, 0.3, 0.3, 0.3]; // Niederschlag // Chart zurückliefern: callback(strify.stringify(option)); });Es sind im Moment nur Demo-Daten drin. Du hast ja sicherlich bereits ein Skript, um die Daten aus der Objektstruktur von Bright Sky zu extrahieren. Da musst Du die Zeilen
option.series[0].data =usw. entsprechend anpassen.Um das in Flexcharts darszustellen gehst Du so vor:
- Flexcharts-Adapter installieren, falls noch nicht passiert
- Das npm-Modul
javascript-stringifyinstallieren, wie im Readme beschrieben - Skript mit obigem Inhalt anlegen und starten
- Im Browser folgende Adresse aufrufen (localhost passend durch Deinen ioBroker-Rechner ersetzen):
http://localhost:8082/flexcharts/echarts.html?source=script&message=wetter
Nun sollte dieses Chart erscheinen:
Da gibt es noch einiges Verbesserungspotenzial, aber als Grundgerüst sollte das funktionieren.
@jrbwh
erstmal vielen herzlichen Dank, für das Script, aber leider wird mir die JSON nicht in den entsprechenden Datenpunkt geschriebenAdapter ist installiert Version 0.0.6
npm-Modul wurde installiert
Datenpunkt wurde angelegt{ "common": { "name": "wetter", "desc": "Manuell erzeugt", "role": "state", "type": "json", "read": true, "write": true, "def": "" }, "type": "state", "native": {}, "_id": "0_userdata.0.echarts.wetter", "acl": { "object": 1636, "state": 1636, "owner": "system.user.admin", "ownerGroup": "system.group.administrator" }, "from": "system.adapter.admin.0", "user": "system.user.admin", "ts": 1765882489492 }Hast du eine Idee woran das liegen kann?
Gruß
Oliver -
@jrbwh
erstmal vielen herzlichen Dank, für das Script, aber leider wird mir die JSON nicht in den entsprechenden Datenpunkt geschriebenAdapter ist installiert Version 0.0.6
npm-Modul wurde installiert
Datenpunkt wurde angelegt{ "common": { "name": "wetter", "desc": "Manuell erzeugt", "role": "state", "type": "json", "read": true, "write": true, "def": "" }, "type": "state", "native": {}, "_id": "0_userdata.0.echarts.wetter", "acl": { "object": 1636, "state": 1636, "owner": "system.user.admin", "ownerGroup": "system.group.administrator" }, "from": "system.adapter.admin.0", "user": "system.user.admin", "ts": 1765882489492 }Hast du eine Idee woran das liegen kann?
@Oli Was für einen Datenpunkt meinst Du? Du musst im Javascript-Adapter ein neues Skript anlegen, Typ "JavaScript" und das von mir gepostete Skript reinkopieren, speichern und starten. Wie das Skript heißt, ist vollkommen egal.
Der Aufruf
http://localhost:8082/flexcharts/echarts.html?source=script&message=wetterim Browser sendet dann die Message "wetter", das Skript reagiert darauf und liefert das Chart zurück. -
@Oli Was für einen Datenpunkt meinst Du? Du musst im Javascript-Adapter ein neues Skript anlegen, Typ "JavaScript" und das von mir gepostete Skript reinkopieren, speichern und starten. Wie das Skript heißt, ist vollkommen egal.
Der Aufruf
http://localhost:8082/flexcharts/echarts.html?source=script&message=wetterim Browser sendet dann die Message "wetter", das Skript reagiert darauf und liefert das Chart zurück.@jrbwh ´
Sorry jetzt habe ich es auch geschnallt, ich dachte ich benötige noch einen Datenpunkt, wie von dir im ersten Post geschrieben "Definition und Daten des Charts hat man im State 0_userdata.0.echarts.chart1 gespeichert"Und kaum macht man es richtig funktioniert es auch. Danke nochmals
-
H Homoran verschob dieses Thema von Tester am
-
H Homoran verschob dieses Thema von ...nicht in offiziellem Repo am
-
Hallo,
Ich habe schon ein paar Diagramme erstellt (soweit nur stacked bar history Diagramme - das was in den anderen Adaptern bzw. auch Grafana nicht nach meinen Wünschen ging).
Ein Thema geistert mir im Kopf rum:Wenn ich das richtig verstanden habe, wird beim Refresh immer der ganze Chart bzw. die ganze Website neu geladen, korrekt? Damit können die Apache eCharts Animationen bei Änderung von Werten nicht richtig ausgeführt werden wie z.b. in https://echarts.apache.org/handbook/en/how-to/data/dynamic-data, weil es immer ein "neuer" Chart ist und nicht neue Werte.
Wäre das nicht irgendwie möglich, beim Update nur die "option" zu verändern und nicht die ganze Seite zu laden? (würde btw. sehr gut zur neuen SSE Funktion passen)
UlliJ hat ja sowas in der Art weiter oben beschrieben - Daten über socket.io nachlesen.Und zweitens, könnte man Daten neu lesen aufgrund einer Aktion/Event im Chart? z.b. links/rechts scrollen (datazoom), hier könnte man bei einem History Diagramm dann weitere Daten "nachladen".
lg Karl
-
Hallo,
Ich habe schon ein paar Diagramme erstellt (soweit nur stacked bar history Diagramme - das was in den anderen Adaptern bzw. auch Grafana nicht nach meinen Wünschen ging).
Ein Thema geistert mir im Kopf rum:Wenn ich das richtig verstanden habe, wird beim Refresh immer der ganze Chart bzw. die ganze Website neu geladen, korrekt? Damit können die Apache eCharts Animationen bei Änderung von Werten nicht richtig ausgeführt werden wie z.b. in https://echarts.apache.org/handbook/en/how-to/data/dynamic-data, weil es immer ein "neuer" Chart ist und nicht neue Werte.
Wäre das nicht irgendwie möglich, beim Update nur die "option" zu verändern und nicht die ganze Seite zu laden? (würde btw. sehr gut zur neuen SSE Funktion passen)
UlliJ hat ja sowas in der Art weiter oben beschrieben - Daten über socket.io nachlesen.Und zweitens, könnte man Daten neu lesen aufgrund einer Aktion/Event im Chart? z.b. links/rechts scrollen (datazoom), hier könnte man bei einem History Diagramm dann weitere Daten "nachladen".
lg Karl
@karlpe Hallo Karl, Dein erster Punkt ist gut nachvollziehbar. Ich habe mir angeschaut, wie aufwändig das ist und war überrascht, dass es relativ einfach umsetzbar ist.
Ich habe es inzwischen implementiert. Das bisherige Verfahren wird dadurch ersetzt, Änderungen im http-Aufruf sind nicht notwendig. Das Update des Charts funktioniert jetzt ohne Reload.Die Version ist in Git verfügbar. Vor dem Release möchte ich noch ein paar Tests machen. Wenn Du magst, kannst Du es aber jetzt schon ausprobieren:
iob stop flexcharts iob url https://github.com/MyHomeMyData/ioBroker.flexcharts iob start flexchartsDie Versionsnummer bleibt dabei unverändert, aber Du solltest den Unterschied beim Chart-Update deutlich sehen.
Deine zweite Idee ist deutlich anspruchsvoller. Das würde einen erheblichen Umbau bedeuten. Das würde ich im Moment zurückstellen und schauen, ob es in diese Richtung noch mehr Interesse gibt.
Viele Grüße
Jürgen
Hey! Du scheinst an dieser Unterhaltung interessiert zu sein, hast aber noch kein Konto.
Hast du es satt, bei jedem Besuch durch die gleichen Beiträge zu scrollen? Wenn du dich für ein Konto anmeldest, kommst du immer genau dorthin zurück, wo du zuvor warst, und kannst dich über neue Antworten benachrichtigen lassen (entweder per E-Mail oder Push-Benachrichtigung). Du kannst auch Lesezeichen speichern und Beiträge positiv bewerten, um anderen Community-Mitgliedern deine Wertschätzung zu zeigen.
Mit deinem Input könnte dieser Beitrag noch besser werden 💗
Registrieren AnmeldenSupport us
404
Online32.8k
Benutzer82.9k
Themen1.3m
Beiträge