Solved

google charts async update

Posted on 2013-01-12
11
500 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

623 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