Wie man ein Live-Diagramm aus einer anderen Quelle in HTML einbettet

401
Rossco

Ich arbeite an einem Beispiel, um zu versuchen, dem Management hier eine bessere Art der Arbeit zu zeigen. Bitte haben Sie Verständnis dafür, dass ich 100% iger Anfänger bin. Ich weiß nicht, wie man schreibt, aber ich versuche es trotzdem, da dies unsere Arbeitsweise verbessern könnte. und ich bin immer zur Verbesserung. Ein Teil des Problems, das wir haben, sind verfügbare Daten, z. B. Wallboards für Ticketvolumen, Verfügbarkeit von Ingenieuren, internationale Uhren für verschiedene Ziele usw. Was wir derzeit haben, ist ein Durcheinander, und die Lösung, die wir suchen, ist wahrscheinlich schlechter.

Ich habe angefangen, eine sehr einfache Seite als Demo zu erstellen, möchte aber einen aktuellen Live-Satz von Diagrammen aus einer internen Quelle einbetten. Damit meine ich, dass wir über einen internen Server verfügen, den wir derzeit verwenden, um Kreisdiagramme und Statistiken zu den für diesen Tag erstellten / geschlossenen Zahlen anzuzeigen. Ich habe die URL für die besagte Seite, aber wie kann ich die Diagramme in diese Seite oder die Seite selbst einbetten und überschüssigen Speicherplatz ausschneiden.

Die Seite selbst

Das Folgende ist das, was ich bisher gemacht habe. Es zerbricht die Seite in fünf für jeden Benutzer. Ich werde mich darum kümmern, wie ich die Felder zu einem späteren Zeitpunkt einfacher aktualisieren kann (es wäre schön, eine Art von Feed zu erstellen.) unsere Systeme sind aber hier sehr zweifelhaft eingesperrt. Es gibt die Uhren, die wir brauchen, und Platz für Technikerkarten und Verfügbarkeit.

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; }  /* Create four equal columns that floats next to each other */ .column { float: left; width: 20%; padding: 10px; }  /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } </style> </head> <body>  <div style="text-align: center;"> <h2>Systems Team Status</h2>  <div class="row"> <div class="column" style="background-color:#F5F5F5;"> <h2>Ian</h2> <p><b>Availability</b></p> <br /> <p>No outstanding tickets</p> <br /> <div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/timezone/australia--sydney"><span style="color:gray;">Current local time in</span><br />Australia/Sydney</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Australia%2FSydney" width="100%" height="90" frameborder="0" seamless></iframe> </div> </div> <div class="column" style="background-color:#FFFF;"> <h2>Jon</h2> <p><b>Availability</b></p> <br /> <p>No outstanding tickets</p> <br /> <div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/de"><span style="color:gray;">Current local time in</span><br />Germany</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Europe%2FBerlin" width="100%" height="90" frameborder="0" seamless></iframe> </div> </div> <div class="column" style="background-color:#F5F5F5;"> <h2>Janet</h2> <p><b>Availability</b></p> <br /> <p>No outstanding tickets</p> <br /> <div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/5128581"><span style="color:gray;">Current local time in</span><br />New York City, United States</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=America%2FNew_York" width="100%" height="90" frameborder="0" seamless></iframe> </div> </div> <div class="column" style="background-color:#FFFF;"> <h2>Sonali</h2> <p><b>Availability</b></p> <br /> <p>No outstanding tickets</p> <br /> <div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/country/in"><span style="color:gray;">Current local time in</span><br />India</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FKolkata" width="100%" height="90" frameborder="0" seamless></iframe> </div> </div> <div class="column" style="background-color:#F5F5F5;"> <h2>Ross</h2> <p><b>Availability</b></p> <br /> <p>No outstanding tickets</p> <br /> <div style="text-align:center;padding:1em 0;"> <h4><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/en/city/1850147"><span style="color:gray;">Current local time in</span><br />Tokyo, Japan</a></h4> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=en&size=small&timezone=Asia%2FTokyo" width="100%" height="90" frameborder="0" seamless></iframe> </div> </div> <div style="HEIGHT:45%;WIDTH:100%; COLSPAN="5; text-align:bottom" style="border-width:0px;border-top:1pt solid Black"><IMG SRC="Q:\Department\eBusiness\Systems\Test\logo.png;"></div> </div> </body> </html> 

Ich bin mir bewusst, dass die Auflösung zu hoch sein wird, wenn man mich auf einen halben Bildschirm drückt, aber ich wollte die Auflösung für den Moment reduzieren, wenn möglich. Dies ist nur eine Demo, und wenn sie das Wesentliche verstehen, wird es den Leuten viel besser gehen als ich, um Code / Code zu schreiben (hoffentlich entweder das oder ich werde aufgefordert, damit zu laufen, hoffentlich nicht!).

Sie werden meinen Versuch bemerken, am Ende ein Bild auf die Seite zu setzen. Dies war nur um zu sehen, ob ich etwas zur Anzeige bekommen konnte, aber stattdessen bekomme ich eine kleine viereckige Box mit 5px X 5px und einem Kreuz. Das war kein gutes Zeichen dafür, dass die Charts auftauchten, also nachfragen mussten.

Ich habe die vorherigen Fragen durchgesehen, sehe aber nichts, was zur Rechnung passt. Eine Google-Suche war auch keine große Hilfe.

Jeder Rat wird sehr geschätzt. Bitte zerlegen Sie die Dinge wie gesagt Ich bin kein Programmierer, aber ich bin froh, Dinge auszuprobieren und zu sehen, ob ich sie zum Laufen bringen kann.

**** EDIT **** Nach dem Posting ging ich weiter zu Google. Ich hatte schon vorher einen iframe ausprobiert, aber cleraly hatte nicht die richtige Syntax. Ich habe jetzt:

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> 

Es ist fast perfekt, aber wenn Sie auf Vollbild eingestellt sind, sollten alle Anzeigen für meinen Zweck funktionieren. Habe ich es am besten gemacht, ist jetzt die Frage? Wie kann ich das Bild auch skalieren?

0

1 Antwort auf die Frage

0
Rossco

<iframe src="SOURCE OF CHARTS.com" style="border:none;width:100%; height:800px;"></iframe> funktioniert.

Ich habe festgestellt, dass die Seite eingerichtet wurde, wenn ich sie skaliere, um Leerzeichen zu lassen, also herumzuspielen. Aber jetzt sieht es ganz gut aus.