CandlestickChart Questions

P

park jae hyun

Member
Licensed User
Longtime User
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title> Google Visualization API Sample </title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script> <script type="text/javascript">
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
// Treat first row as data as well.
], true);

var options = {
legend:'none'
};

var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

google.setOnLoadCallback(drawVisualization);
</script>

</head>
<body>
<div id="chart_div" style="width: 500px; height: 500px;"></div>
</body>
</html>



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]

Calling out from the database, the value is changed.
Please tell me
 
Sort by date Sort by votes
mc73

mc73

Well-Known Member
Licensed User
Longtime User
I'm trying to understand. Are you using a webView in order to show a candlestick chart and you want to populate its data from a database of yours?
If this is the case, you should generate your html string, using a stringBuilder for example, and appending all your data in google.visualization.arrayToDataTable([ ])
 
Upvote 0
mc73

mc73

Well-Known Member
Licensed User
Longtime User
The part of populating data from a db should be done by setting the components of the dataTable.
Now, the code for creating the webView, could be this (using google's example):
B4X: 
'Activity module
Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Dim wv As WebView 
    Dim myHtml As String 
    Dim btn As Button 
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    'Activity.LoadLayout("Layout1")
    wv.Initialize ("wv")
    wv.JavaScriptEnabled =True
    Activity.AddView (wv,0,0,100%x,80%y)
    btn.Initialize ("btn")
    btn.Text ="loadHTML"
    Activity.AddView (btn,30%x,82%y,40%x,15%y)
    
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub btn_click
    
Dim sb As StringBuilder
sb.Initialize 
sb.append("<!--")
sb.append(Chr(10))
sb.append("You are free to copy and use this sample in accordance with the terms of the")
sb.append(Chr(10))
sb.append("Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)")
sb.append(Chr(10))
sb.append("-->")
sb.append(Chr(10))
sb.append("")
sb.append(Chr(10))
sb.append("<!DOCTYPE html PUBLIC " & Chr(34) & "-//W3C//DTD XHTML 1.0 Strict//EN" & Chr(34) & " " & Chr(34) & "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" & Chr(34) & ">")
sb.append(Chr(10))
sb.append("<html xmlns=" & Chr(34) & "http://www.w3.org/1999/xhtml" & Chr(34) & ">")
sb.append(Chr(10))
sb.append("<head>")
sb.append(Chr(10))
sb.append("  <meta http-equiv=" & Chr(34) & "content-type" & Chr(34) & " content=" & Chr(34) & "text/html; charset=utf-8" & Chr(34) & " />")
sb.append(Chr(10))
sb.append("  <title>Google Visualization API Sample</title>")
sb.append(Chr(10))
sb.append("  <script type=" & Chr(34) & "text/javascript" & Chr(34) & " src=" & Chr(34) & "http://www.google.com/jsapi" & Chr(34) & "></script>")
sb.append(Chr(10))
sb.append("  <script type=" & Chr(34) & "text/javascript" & Chr(34) & ">")
sb.append(Chr(10))
sb.append("    google.load('visualization', '1', {packages: ['corechart']});")
sb.append(Chr(10))
sb.append("")
sb.append(Chr(10))
sb.append("    function drawVisualization() {")
sb.append(Chr(10))
sb.append("       // Populate the data table.")
sb.append(Chr(10))
sb.append("        var dataTable = google.visualization.arrayToDataTable([")
sb.append(Chr(10))
sb.append("           ['Mon', 20, 28, 38, 45],")
sb.append(Chr(10))
sb.append("           ['Tue', 31, 38, 55, 66],")
sb.append(Chr(10))
sb.append("           ['Wed', 50, 55, 77, 80],")
sb.append(Chr(10))
sb.append("           ['Thu', 77, 77, 66, 50],")
sb.append(Chr(10))
sb.append("           ['Fri', 68, 66, 22, 15]")
sb.append(Chr(10))
sb.append("        // Treat first row as data as well.")
sb.append(Chr(10))
sb.append("        ], true);")
sb.append(Chr(10))
sb.append("    ")
sb.append(Chr(10))
sb.append("        // Draw the chart.")
sb.append(Chr(10))
sb.append("        var chart = new google.visualization.CandlestickChart(document.getElementById('visualization'));")
sb.append(Chr(10))
sb.append("        chart.draw(dataTable, {legend:'none', width:600, height:400});")
sb.append(Chr(10))
sb.append("    }")
sb.append(Chr(10))
sb.append("    ")
sb.append(Chr(10))
sb.append("")
sb.append(Chr(10))
sb.append("    google.setOnLoadCallback(drawVisualization);")
sb.append(Chr(10))
sb.append("  </script>")
sb.append(Chr(10))
sb.append("</head>")
sb.append(Chr(10))
sb.append("<body style=" & Chr(34) & "font-family: Arial;border: 0 none;" & Chr(34) & ">")
sb.append(Chr(10))
sb.append("<div id=" & Chr(34) & "visualization" & Chr(34) & "></div>")
sb.append(Chr(10))
sb.append("</body>")
sb.append(Chr(10))
sb.append("</html>")
sb.append(Chr(10))
myHtml=sb.ToString
wv.LoadHtml (myHtml)

End Sub

Sub wv_Pagefinished(url As String )

Msgbox("chart loaded","")

End Sub
 
Upvote 0
You must log in or register to reply here.
Top