Solved

google charts async update

Posted on 2013-01-12
11
481 Views
Last Modified: 2013-01-13
Greetings,
I have a table of range inputs...it's part of a form.  The inputs work fine.
I pull the data from the database and use that as the starting values for the range inputs.
This works great.

I also have a google chart that pulls from the same table output and publishes a google pie chart from it.  That works fine as well.  Both codes provided below...

What I want to do  is update the chart from the range inputs if one value changes without having to save back to the database.  can this be done client-side vice server-side?  I want the user to see what the effect of the change is before hitting submit.

code1 table of range values:
			<table>
				<tr>
					<td>Patient Satisfaction</td>
					<td><input id="SA_PTSatisfaction" type="range" min="0" max="10" step="1" name="SA_PTSatisfaction" value="{{ $stats->attributes['sa_ptsatisfaction'] }}" /></td>
				</tr>
				<tr>
					<td>Medical Knowledge</td>
					<td><input id="SA_MedKnowledge" type="range" min="0" max="10" step="1" name="SA_MedKnowledge" value="{{ $stats->attributes['sa_medknowledge'] }}" /></td>
				</tr>
				<tr>
					<td>ER Procedural Skills</td>
					<td><input id="SA_ERProcSkills" type="range" min="0" max="10" step="1" name="SA_ERProcSkills" value="{{ $stats->attributes['sa_erprocskills'] }}" /></td>
				</tr>
				<tr>
					<td>Self Learning Skills</td>
					<td><input id="SA_SlfLrngSkills" type="range" min="0" max="10" step="1" name="SA_SlfLrngSkills" value="{{ $stats->attributes['sa_slflrngskills'] }}" /></td>
				</tr>
				<tr>
					<td>Nurse Relationship Skills</td>
					<td><input id="SA_NrsRltnshpSkls" type="range" min="0" max="10" step="1" name="SA_NrsRltnshpSkls" value="{{ $stats->attributes['sa_nrsrltnshpskls'] }}" /></td>
				</tr>
				<tr>
					<td>Speed</td>
					<td><input id="SA_Speed" type="range" min="0" max="10" step="1" name="SA_Speed" value="{{ $stats->attributes['sa_speed'] }}" /></td>
				</tr>
				<tr>
					<td>Compassion</td>
					<td><input id="SA_Compassion" type="range" min="0" max="10" step="1" name="SA_Compassion" value="{{ $stats->attributes['sa_compassion'] }}" /></td>
				</tr>
				<tr>
					<td>EMR Utilization Skills</td>
					<td><input id="SA_EMR" type="range" min="0" max="10" step="1" name="SA_EMR" value="{{ $stats->attributes['sa_emr'] }}" /></td>
				</tr>
				<tr>
					<td>Profession Teamwork Skills</td>
					<td><input id="SA_ProfTmWrkSkills" type="range" min="0" max="10" step="1" name="SA_ProfTmWrkSkills" value="{{ $stats->attributes['sa_proftmwrkskills'] }}" /></td>
				</tr>
			</table>

Open in new window


code2 google chart with default values:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Qual', 'Stat'],
      ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],
      ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],
      ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],
      ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
      ['Speed',    {{ $stats->attributes['sa_speed'] }}],
      ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],
      ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],
      ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

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

Open in new window

0
Comment
Question by:Evan Cutler
  • 7
  • 4
11 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 38771254
If you add an onchange event to each of your inputs like this
onchange="adjustChart('Patient Satisfaction', this.value);"

Open in new window

and change the javascript like this:
<script type="text/javascript">
  var data, options, chart;
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    data = google.visualization.arrayToDataTable([
      ['Qual', 'Stat'],
      ['Patient Satisfaction',     {{ $stats->attributes['sa_ptsatisfaction'] }}],
      ['Medical Knowledge',      {{ $stats->attributes['sa_medknowledge'] }}],
      ['ER Procedural Skills',  {{ $stats->attributes['sa_erprocskills'] }}],
      ['Nurse Relationship Skills', {{ $stats->attributes['sa_nrsrltnshpskls'] }}],
      ['Speed',    {{ $stats->attributes['sa_speed'] }}],
      ['Compassion',    {{ $stats->attributes['sa_compassion'] }}],
      ['EMR Utilization Skills',    {{ $stats->attributes['sa_emr'] }}],
      ['Profession Teamwork Skills',    {{ $stats->attributes['sa_proftmwrkskills'] }}]
    ]);

    options = {
      title: 'My Daily Activities'
    };

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

  function adjustChart(nm, vl) {
    for (var r=0; r<data.D.length; r++) {
      if (data.D[r].c[0].v == nm) {
        data.D[r].c[1].v = parseInt(vl);
        break;
      }
    }
    chart.draw(data, options);
  }
</script>

Open in new window

it should work nicely.

Note that I used the developer tools to look at 'data', there may be a better way using the actual API.
0
 
LVL 9

Author Closing Comment

by:Evan Cutler
ID: 38771276
Genius...
Absolute Genius..
Thank you.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38771282
Well, I wouldn't say that ;-)

But thanks and you're welcome.

Note that I found a problem which is why I was looking into using the API after all. When you hover over the chart, the original value is still shown.
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38771305
Maybe you didn't experience that problem, but a better way to do the updates seems:
    var rws = data.getFilteredRows([{column: 0, value: nm}]);
    if (rws.length == 1) {
      data.setValue(rws[0], 1, parseInt(vl));
    }

Open in new window

instead of the for loop accessing the DataTable's internal properties.
0
 
LVL 9

Author Comment

by:Evan Cutler
ID: 38771315
This works great!!
The numbers update as well...
since I got ya...

I have a div that set to 500px x 500px...it resolves to that size.
why would the graph only show 200px by 400px?
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38771330
No problem, I was doing some further testing for myself anyway ;-)

By the way I found that 'Self Learning Skills' was missing from the pie chart.

The sizing, well there seems to be a very big margin inside the chart area. Maybe that can be brought back with an API call but for me it seemed fine when I gave it a bit more width maybe 700px? Then the pie is bigger and the labels have enough room.
0
 
LVL 9

Author Comment

by:Evan Cutler
ID: 38771335
Yeah, I picked up on the self learning skills as well... thanks.

Nope...I increased the div to 900px by 900px...
it sticks to 400x200 until I do something.
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38771345
until I do something
not sure what that means?

also, try replacing this:
    options = {
      title: 'My Daily Activities'
      ,chartArea:{left:0,top:0,width:"100%",height:"100%"}
    };

Open in new window

0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38771353
I gave my div a border to make clear where it is positioned. Maybe the size of your div is being influenced by other markup/styles?
capture
0
 
LVL 9

Author Comment

by:Evan Cutler
ID: 38772083
it's possible, but I can't find it...the DIV shows 500px x 500px, but the svg rect shows 400x200.  I do not have any css to influence anything by 400 by 200...i did a program wide search.

Thank you for your help....I put this into another question so I can give you more points if you can help me figure this out.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_27993644.html
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 38772253
I'll give it a try ;-)
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Understanding mobile browsers 9 64
jqury 17 30
Index on a Table 6 12
how can i get the string decoded ? 2 11
These days socially coordinated efforts have turned into a critical requirement for enterprises.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question