Been trying to get this to work with no luck. I looked through various post and havent got a straight answer.
What im trying to do is place a google gauge in a cwebhtmlbox. The intent is too get all of google charts working with my webapp and create a pkg.
Read where Harm showed how to do this, so I'm hoping someone is using it.
Here is the code...
Code:
// Web View
Use cWebView.pkg
Use cWebPanel.pkg
Use cWebHtmlBox.pkg
Use HTML.dd
Object oDashboardTest is a cWebView
Set piWidth to 700
Set pbServerOnShow to True
Object oHTML_DD is a HTML_DataDictionary
End_Object
Object oWebMainPanel is a cWebPanel
Set piColumnCount to 12
Object oWebHtmlBox1 is a cWebHtmlBox
Set piColumnSpan to 0
Set piHeight to 200
End_Object
End_Object
Procedure OnShow
Forward Send OnShow
Send Clear of oHTML_DD
Move 1 to HTML.Recnum
Send Find of oHTML_DD EQ 0
WebSet psHtml of oWebHtmlBox1 to HTML.HTML
End_Procedure
End_Object
//HTML
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script defer async type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 120px;"></div>
<button onclick="OnChange('Test',50)">Click me</button>
</body>
//JS
google.charts.load('current', {'packages':['gauge']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(p1,p2) {
var Title = p1
var Value = p2
var data = google.visualization.arrayToDataTable([
['Label', 'Value'],
[Title, Value],
]);
var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
function OnChange(Title,Value){
drawChart(Title,Value);
}
I do get the button to show, so i know im passing the proper data to the property string. I cant get the gauge to show and I have the test.js in the apphtml folder. When I inspect the object, all of the code is there. So confused :| Plz Help!