CandlestickChart Questions

park jae hyun · Dec 19, 2012

<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

mc73 · Dec 19, 2012

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([ ])

park jae hyun · Dec 20, 2012

help me

Databases ===> Display
I do not know.

Example, a sample please.

mc73 · Dec 20, 2012

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

park jae hyun · Dec 21, 2012

Thank you very much.

Thank you very much.
Thank you very much.
Thank you very much.

CandlestickChart Questions

park jae hyun

Member

mc73

Well-Known Member

park jae hyun

Member

mc73

Well-Known Member

park jae hyun

Member

Similar Threads