You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@struts.apache.org by Emi Lu <em...@encs.concordia.ca> on 2013/02/20 15:39:41 UTC
google chart value setup in struts2 action class and show result
in jsp.javascript function()
Good morning,
The google charts seem very interesting. Does someone know how to set
all values from struts ActionClass.Bean and show results in
jsp.javascript function please?
The values example:
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
https://developers.google.com/chart/interactive/docs/quick_start
Thanks a lot!!
Emi
--
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript"
src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: google chart value setup in struts2 action class and show result
in jsp.javascript function()
Posted by Emi Lu <em...@encs.concordia.ca>.
Thank you Maurizio for the information. I just wonder that would the 2
options work by struts2 + jsp + javascript?
(1) Way1:
(1.1) Struts2.Action
BeanForm.values = retrieve from DB
(1.2) jsp + javascript
in javascript function
... ....
function drawChart()
{
<s:property> ...
<% =%> ... // can be parsed and interpret by javascript .google
function?
}
(2) Way2
if javascript function cannot interpret <% =%>, <s:property ...>
(2.1) Struts2.Action
BeanForm.values = retrieve from DB
(2.2) Struts2.Action
Write results (dynamically append javascript function in .jsp
file which is called by .jsp)
(2.3) return SUCCESS -> result.jsp which called google.func()
Would Way2 work? or there are better ways to use it?
Thanks a lot!
Emi
On 02/20/2013 10:00 AM, Maurizio Cucchiara wrote:
> IIRC, I used s2-json plugin which basically exposed a data structure
> similar to the one requested by google chart.
>
>
> Twitter :http://www.twitter.com/m_cucchiara
> G+ :https://plus.google.com/107903711540963855921
> Linkedin :http://www.linkedin.com/in/mauriziocucchiara
> VisualizeMe: http://vizualize.me/maurizio.cucchiara?r=maurizio.cucchiara
>
> Maurizio Cucchiara
>
>
> On 20 February 2013 15:39, Emi Lu <em...@encs.concordia.ca> wrote:
>
>> Good morning,
>>
>> The google charts seem very interesting. Does someone know how to set all
>> values from struts ActionClass.Bean and show results in jsp.javascript
>> function please?
>>
>> The values example:
>> data.addColumn('string', 'Topping');
>> data.addColumn('number', 'Slices');
>> data.addRows([
>> ['Mushrooms', 3],
>> ['Onions', 1],
>> ['Olives', 1],
>> ['Zucchini', 1],
>> ['Pepperoni', 2]
>> ]);
>>
>> https://developers.google.com/**chart/interactive/docs/quick_**start<https://developers.google.com/chart/interactive/docs/quick_start>
>>
>> Thanks a lot!!
>> Emi
>>
>>
>> --
>>
>> <html>
>> <head>
>> <!--Load the AJAX API-->
>> <script type="text/javascript" src="https://www.google.com/**jsapi<https://www.google.com/jsapi>
>> "></script>
>> <script type="text/javascript">
>>
>> // Load the Visualization API and the piechart package.
>> google.load('visualization', '1.0', {'packages':['corechart']});
>>
>> // Set a callback to run when the Google Visualization API is loaded.
>> google.setOnLoadCallback(**drawChart);
>>
>> // Callback that creates and populates a data table,
>> // instantiates the pie chart, passes in the data and
>> // draws it.
>> function drawChart() {
>>
>> // Create the data table.
>> var data = new google.visualization.**DataTable();
>> data.addColumn('string', 'Topping');
>> data.addColumn('number', 'Slices');
>> data.addRows([
>> ['Mushrooms', 3],
>> ['Onions', 1],
>> ['Olives', 1],
>> ['Zucchini', 1],
>> ['Pepperoni', 2]
>> ]);
>>
>> // Set chart options
>> var options = {'title':'How Much Pizza I Ate Last Night',
>> 'width':400,
>> 'height':300};
>>
>> // Instantiate and draw our chart, passing in some options.
>> var chart = new google.visualization.PieChart(**
>> document.getElementById('**chart_div'));
>> chart.draw(data, options);
>> }
>> </script>
>> </head>
>>
>> <body>
>> <!--Div that will hold the pie chart-->
>> <div id="chart_div"></div>
>> </body>
>> </html>
>>
>> ------------------------------**------------------------------**---------
>> To unsubscribe, e-mail: user-unsubscribe@struts.**apache.org<us...@struts.apache.org>
>> For additional commands, e-mail: user-help@struts.apache.org
>>
>>
>
--
Emi Lu, ENCS, Concordia University, Montreal H3G 1M8
emilu@encs.concordia.ca +1 514 848-2424 x5884
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@struts.apache.org
For additional commands, e-mail: user-help@struts.apache.org
Re: google chart value setup in struts2 action class and show result
in jsp.javascript function()
Posted by Maurizio Cucchiara <mc...@apache.org>.
IIRC, I used s2-json plugin which basically exposed a data structure
similar to the one requested by google chart.
Twitter :http://www.twitter.com/m_cucchiara
G+ :https://plus.google.com/107903711540963855921
Linkedin :http://www.linkedin.com/in/mauriziocucchiara
VisualizeMe: http://vizualize.me/maurizio.cucchiara?r=maurizio.cucchiara
Maurizio Cucchiara
On 20 February 2013 15:39, Emi Lu <em...@encs.concordia.ca> wrote:
> Good morning,
>
> The google charts seem very interesting. Does someone know how to set all
> values from struts ActionClass.Bean and show results in jsp.javascript
> function please?
>
> The values example:
> data.addColumn('string', 'Topping');
> data.addColumn('number', 'Slices');
> data.addRows([
> ['Mushrooms', 3],
> ['Onions', 1],
> ['Olives', 1],
> ['Zucchini', 1],
> ['Pepperoni', 2]
> ]);
>
> https://developers.google.com/**chart/interactive/docs/quick_**start<https://developers.google.com/chart/interactive/docs/quick_start>
>
> Thanks a lot!!
> Emi
>
>
> --
>
> <html>
> <head>
> <!--Load the AJAX API-->
> <script type="text/javascript" src="https://www.google.com/**jsapi<https://www.google.com/jsapi>
> "></script>
> <script type="text/javascript">
>
> // Load the Visualization API and the piechart package.
> google.load('visualization', '1.0', {'packages':['corechart']});
>
> // Set a callback to run when the Google Visualization API is loaded.
> google.setOnLoadCallback(**drawChart);
>
> // Callback that creates and populates a data table,
> // instantiates the pie chart, passes in the data and
> // draws it.
> function drawChart() {
>
> // Create the data table.
> var data = new google.visualization.**DataTable();
> data.addColumn('string', 'Topping');
> data.addColumn('number', 'Slices');
> data.addRows([
> ['Mushrooms', 3],
> ['Onions', 1],
> ['Olives', 1],
> ['Zucchini', 1],
> ['Pepperoni', 2]
> ]);
>
> // Set chart options
> var options = {'title':'How Much Pizza I Ate Last Night',
> 'width':400,
> 'height':300};
>
> // Instantiate and draw our chart, passing in some options.
> var chart = new google.visualization.PieChart(**
> document.getElementById('**chart_div'));
> chart.draw(data, options);
> }
> </script>
> </head>
>
> <body>
> <!--Div that will hold the pie chart-->
> <div id="chart_div"></div>
> </body>
> </html>
>
> ------------------------------**------------------------------**---------
> To unsubscribe, e-mail: user-unsubscribe@struts.**apache.org<us...@struts.apache.org>
> For additional commands, e-mail: user-help@struts.apache.org
>
>