Solved

google charts async update

Posted on 2013-01-12
11
487 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
3 proven steps to speed up Magento powered sites. The article focus is on optimizing time to first byte (TTFB), full page caching and configuring server for optimal performance.
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…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

763 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