Google Charts in WebGadget führt zu Script Fehler

Paddy1988 · Beitrag von **Paddy1988** » 15.12.2016 15:55

Hallo zusammen,

ich möchte gerne Google Charts ins WebGadget integrieren, habe auch was aus dem Forum gefunden. Leider kommt ein Scriptfehler und es wird kein Chart angezeigt.
Hat es jemand schon hinbekommen ohne Scriptfehler

Das einzige was funktioniert ist das Chart per URL zu übergeben, ich möchte aber eine HTML Datei übergeben

funktioniert:

Code: Alles auswählen

If OpenWindow(0, #PB_Ignore, #PB_Ignore, 350, 200, "Google-Chart") And CreateGadgetList(WindowID(0))
  WebGadget(0, 10, 10, 330, 180, "http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|world")
  Repeat
  Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf

html Datei als Link übergeben funktioniert nicht:

Code: Alles auswählen

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Hat jemand eine Idee, oder hat es jemand schon lauffähig hinbekommen?

Vielen Dank vorab

.

__________________________________________________
Code-Tags hinzugefügt
15.12.2016
RSBasic

Beitrag von **NicTheQuick** » 15.12.2016 16:09

Ist das eine Alternative für dich?

Code: Alles auswählen

If OpenWindow(0, #PB_Ignore, #PB_Ignore, 350, 200, "Google-Chart")
	WebGadget(0, 10, 10, 330, 180, "")
	SetGadgetItemText(0, #PB_Web_HtmlCode, "<img src='http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|world'/>")
	Repeat
	Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf

Funktioniert allerdings nur auf Windows, wegen "SetGadgetItemText()".

Paddy1988 · Beitrag von **Paddy1988** » 15.12.2016 16:17

Wenn die gleichen Funktionen wie bei der HTML Datei gehen würden wäre es eine Alternative, man ist sehr eingeschränkt wenn man die Parameter per URL übergibt, es fehlen einige Funktionen und man kann die Charts nicht so umfangreich gestalten.

Dieser Code hier aus dem englischen Forum funktioniert auch nicht...

Define.s HTML
HTML + ~"<html>" + #CRLF$
HTML + ~" <head>" + #CRLF$
HTML + ~" " + #CRLF$
HTML + ~" <script type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"></script>" + #CRLF$
HTML + ~" <script type=\"text/javascript\">" + #CRLF$
HTML + ~"" + #CRLF$
HTML + ~" // Load the Visualization API and the corechart package." + #CRLF$
HTML + ~" google.charts.load('current', {'packages':['corechart']});" + #CRLF$
HTML + ~"" + #CRLF$
HTML + ~" // Set a callback to run when the Google Visualization API is loaded." + #CRLF$
HTML + ~" google.charts.setOnLoadCallback(drawChart);" + #CRLF$
HTML + ~"" + #CRLF$
HTML + ~" // Callback that creates and populates a data table," + #CRLF$
HTML + ~" // instantiates the pie chart, passes in the data and" + #CRLF$
HTML + ~" // draws it." + #CRLF$
HTML + ~" function drawChart() {" + #CRLF$
HTML + ~"" + #CRLF$
HTML + ~" // Create the data table." + #CRLF$
HTML + ~" var data = new google.visualization.DataTable();" + #CRLF$
HTML + ~" data.addColumn('string', 'Topping');" + #CRLF$
HTML + ~" data.addColumn('number', 'Slices');" + #CRLF$
HTML + ~" data.addRows([" + #CRLF$
HTML + ~" ['Mushrooms', 3]," + #CRLF$
HTML + ~" ['Onions', 1]," + #CRLF$
HTML + ~" ['Olives', 1]," + #CRLF$
HTML + ~" ['Zucchini', 1]," + #CRLF$
HTML + ~" ['Pepperoni', 2]" + #CRLF$
HTML + ~" ]);" + #CRLF$
HTML + ~"" + #CRLF$
HTML + ~" // Set chart options" + #CRLF$
HTML + ~" var options = {'title':'How Much Pizza I Ate Last Night'," + #CRLF$
HTML + ~" 'width':400," + #CRLF$
HTML + ~" 'height':300};" + #CRLF$
HTML + ~"" + #CRLF$
HTML + ~" // Instantiate and draw our chart, passing in some options." + #CRLF$
HTML + ~" var chart = new google.visualization.PieChart(document.getElementById('chart_div'));" + #CRLF$
HTML + ~" chart.draw(data, options);" + #CRLF$
HTML + ~" }" + #CRLF$
HTML + ~" </script>" + #CRLF$
HTML + ~" </head>" + #CRLF$
HTML + ~"" + #CRLF$
HTML + ~" <body scroll = 'no' oncontextmenu = 'javascript:return false;'>" + #CRLF$
HTML + ~" " + #CRLF$
HTML + ~" <div id=\"chart_div\"></div>" + #CRLF$
HTML + ~" </body>" + #CRLF$
HTML + ~"</html>"
Debug HTML
If OpenWindow(0, 0, 0, 600, 300, "WebGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
WebGadget(0, 10, 10, 580, 280, "")
SetGadgetItemText(0, #PB_Web_HtmlCode, HTML)
Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf

Notfalls überge ich die Parameter per URL aber schön ist das nicht gerade.

Beitrag von **Kiffi** » 15.12.2016 16:21

Paddy1988 hat geschrieben:Dieser Code hier aus dem englischen Forum funktioniert auch nicht...

bei mir schon (PB5.50; Win7)

Grüße ... Peter

Paddy1988 · Beitrag von **Paddy1988** » 15.12.2016 16:41

Bei dir funktioniert der?
Ich habe auch PureBasic 5.50 x64 drauf, aber Windows 8, dann liegt es vielleicht daran.
Ich werde es mal auf Windows 7 versuchen heute Abend.

danke

.

DarkSoul · Beitrag von **DarkSoul** » 15.12.2016 19:06

Dein HTML hat ein paar kleine Fehler und funktioniert bei mir im Browser schon net richtig.

Wenn die Chart fertig ist, bevor der dafür vorgesehene <div> verfügbar ist, kommt es halt zu Fehlern.

Habe ihn ein wenig ergänzt:

Code: Alles auswählen

<!DOCTYPE html>
<html>
  <head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <!-- auf deine Bedürfnisse anpassen -->
	<meta charset="utf-8"> 
	<title>Blablabla</title>
	<style type="text/css">
	  html, body {
		border: 0;
		margin: 0;
		padding: 0;
	  }
	  #piechart {
		width: 900px; 
	    height: 500px;
	  }
	</style>
	<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      function drawChart() {
		var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }  
		
	  function init() {
		if (google) {
		  google.charts.load('current', {'packages':['corechart']});
		  google.charts.setOnLoadCallback(drawChart);
		} else {
		  alert("google kaputt! xD");  //-- Fehlerfall dass die Google-Lib nicht geladen wurde! Z.B. wenn der Computer offline ist.
		}
	  }
	  
	  window.addEventListener("load", function() { init(); }, false);
	</script>
  </head>
  <body>
    <div id="piechart"></div>
  </body>
</html>

Wenn das funktioniert, sollte noch ein "Wird geladen..."-Drehrad rein, das solange gezeigt wird, bis die Google-Lib geladen ist und das Diagramm gerendert worden ist.

PureBoard

Google Charts in WebGadget führt zu Script Fehler

Google Charts in WebGadget führt zu Script Fehler

Re: Google Charts in WebGadget führt zu Script Fehler

Re: Google Charts in WebGadget führt zu Script Fehler

Re: Google Charts in WebGadget führt zu Script Fehler

Re: Google Charts in WebGadget führt zu Script Fehler

Re: Google Charts in WebGadget führt zu Script Fehler