google charts async update

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

LVL 9
Evan CutlerVolunteer Chief Information OfficerAsked:
Who is Participating?
 
Robert SchuttSoftware EngineerCommented:
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
 
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
Genius...
Absolute Genius..
Thank you.
0
 
Robert SchuttSoftware EngineerCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Robert SchuttSoftware EngineerCommented:
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
 
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
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
 
Robert SchuttSoftware EngineerCommented:
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
 
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
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
 
Robert SchuttSoftware EngineerCommented:
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
 
Robert SchuttSoftware EngineerCommented:
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
 
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
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
 
Robert SchuttSoftware EngineerCommented:
I'll give it a try ;-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.