Solved

google charts async update

Posted on 2013-01-12
11
473 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
Comment Utility
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
Comment Utility
Genius...
Absolute Genius..
Thank you.
0
 
LVL 35

Expert Comment

by:Robert Schutt
Comment Utility
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
 
LVL 35

Expert Comment

by:Robert Schutt
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 35

Expert Comment

by:Robert Schutt
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
I'll give it a try ;-)
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

762 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now