guide me to display pie-chart and area graph using dynamic retrieval of data from HTML

176 views
Skip to first unread message

cognostek

unread,
Jan 4, 2012, 6:19:34 AM1/4/12
to Google Visualization API
Hi,

I am using jquery mobile to develop mobile sites. I need to display
graph and pie chart for principal and interest on 1 of the page.
We are displaying a form with the details of principal,term (in years)
and interest from index.html file. Using this can we calculate the
principal and interest for graph and pie chart.

I have checked google api but i couldn't find.
Can any 1 help me to resolve this problem as soon as possible.

asgallant

unread,
Jan 4, 2012, 10:01:37 AM1/4/12
to google-visua...@googlegroups.com
Is the data in an HTML element, or are you calculating it in javascript?  If it is in an HTML element, you can use jQuery (or plain vanilla javascript, though I find jQuery easier) to retrieve data from elements and then enter it into a DataTable object.  If you are calculating in javascript, then you can enter that data directly into a DataTable object.  Once you have the data in a DataTable, you can use the table to draw the charts.

If you have some sample code we can look at (or a link to the page) then I can give you some more detailed pointers.

cognostek

unread,
Jan 5, 2012, 12:25:27 AM1/5/12
to google-visua...@googlegroups.com
Thank u so much for the kindly help.

Below is the index.html file, in this file we have to get the dynamic values from index.html page and pass it to javascript file and display pie chart and area graph in next page.

<!DOCTYPE html> 
<html> 
<head> 
<title>test</title> 
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
     </head>
<body>
 <div data-role="page" id="home" data-theme="d"><!-- Home Page Starts -->
       <a href="index.html" rel="external"><img src="images/logo.png"></a>
           <div data-role="header" class="nav-glyphish-example" data-theme="d">
    <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
    <ul> 
        <li> <span class="selected"><a href="#" id="input" data-icon="custom" class="selected">Input</a></span></li>
        <li><a href="#" id="table" data-icon="custom">Table</a></li>
        <li><a href="#" id="graph" data-icon="custom">Graph</a></li>
        <li><a href="#" id="chart" data-icon="custom">Chart</a></li>
        <li><a href="#" id="summary" data-icon="custom">Sum</a></li>
    </ul>
    </div>
</div>
      <div data-role="content" data-theme="d">
   <form name="form1" id="form1" method="">
 <div>
       <fieldset data-role="fieldcontain">
          <label for="loan">Principal :</label>
          <input type="text" name="loan" id="loan" /> 
        </fieldset>
        <fieldset data-role="fieldcontain">
          <label for="rate">Interest :</label>
          <input type="text" name="rate" id="rate" /> 
        </fieldset>
        <fieldset data-role="fieldcontain">
          <label for="year">Term (in years) :</label>
          <select name="year" id="year">
<option value="">Select the Year</option>
<option value="3">3 Years</option>
<option value="5">5 Years</option>
<option value="7">7 Years</option>
<option value="10">10 Years</option>
<option value="15">15 Years</option>
<option value="20">20 Years</option>
<option value="30">30 Years</option>
</select>
 </fieldset>
      <div id="status" class="stat"></div><br/>
        <div align="center"><img src="images/button.jpg"/>
        </div>
        </div>
        </form>
             </div>
              <p align="center"> COPYRIGHT &copy; 2011, ALL RIGHTS RESERVED.</p>
   </div>
     </body>
      </html>

asgallant

unread,
Jan 5, 2012, 9:14:42 AM1/5/12
to google-visua...@googlegroups.com
You can retrieve the form values to calculate the charts in different ways:

1) submit the form to a PHP (or other server-side scripted) page, and retrieve parameters there.
2) submit the form (using the GET method) to an HTML page and use javascript to parse the URL for the parameters (see http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html for retrieving the parameters)
3) do not submit the form.  Use javascript to retrieve form values and build the charts on the same page (hiding or removing the form if necessary).
Reply all
Reply to author
Forward
0 new messages