Re: [visualization-api] Using html select to change what data is plotted on google chart

["Dr. Bernd Krämer"]

Hi Daniel,

I thought I had an elegant solution with a selection in the query part of the draw function (see attached) but no chart appears on screen. My programming experience is quite rusty, I must admit.

Thanks

Bernd

[Daniel LaLiberte]

Hi Bernd,

You have a syntax error on line 8 - your quoted "2014" is missing a quote.  Then, your dataCap function, having the same name as the dataCap variable, is a problem since the function will replace the variable value.   Change it to a different name, like changeDataCap().  Like so:

var dataCap = "2014";

function changeDataCap(){

    dataCap = document.getElementById("selectedYear").value;

    alert('dataCap: ' + dataCap);

    drawChart();

}

...

<select id="selectedYear" onchange="changeDataCap()">

...

Bernd




--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlaliberte@Google.com   5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

[Bernd]

Great, thanks, Daniel.

Bernd

Am Mittwoch, 4. Februar 2015 05:30:27 UTC+1 schrieb Daniel LaLiberte:

Hi Bernd,

You have a syntax error on line 8 - your quoted "2014" is missing a quote.  Then, your dataCap function, having the same name as the dataCap variable, is a problem since the function will replace the variable value.   Change it to a different name, like changeDataCap().  Like so:

var dataCap = "2014";

function changeDataCap(){

    dataCap = document.getElementById("selectedYear").value;

    alert('dataCap: ' + dataCap);

    drawChart();

}

...

<select id="selectedYear" onchange="changeDataCap()">

...

On Tue, Feb 3, 2015 at 4:26 PM, "Dr. Bernd Krämer" <bernd.j...@googlemail.com> wrote:

Hi Daniel,

I thought I had an elegant solution with a selection in the query part of the draw function (see attached) but no chart appears on screen. My programming experience is quite rusty, I must admit.

Thanks

Bernd




--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte  - 978-394-1058

dlali...@Google.com   5CC, Cambridge MA

daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA

[Tong Sun]

I want to know it as well. Thanks Daniel. 

Question, 

On Tuesday, February 3, 2015 at 11:30:27 PM UTC-5, Daniel LaLiberte wrote:

Hi Bernd,

You have a syntax error on line 8 - your quoted "2014" is missing a quote.  Then, your dataCap function, having the same name as the dataCap variable, is a problem since the function will replace the variable value.   Change it to a different name, like changeDataCap().  Like so:

var dataCap = "2014";

function changeDataCap(){

    dataCap = document.getElementById("selectedYear").value;

    alert('dataCap: ' + dataCap);

    drawChart();

}

I tried it and it works. However, when I comment out that 'alert' prompt line, the chart stops being updated. Why is that? Is there any easy fix without a popping alert window every time? 

Thanks

[Daniel LaLiberte]

Tong,

Your case might be a little different, depending on what your drawChart function does.  The alert will allow other asynchronous processes to continue while it waits for the user to respond. That might be enough of a clue to figure it out.  If not, post a link to your page, or copy/paste your code here.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.

[Tong Sun]

Here it goes, Thanks for your help!

```

<html>

<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load("visualization", "1.1", {packages:["corechart"]});

google.setOnLoadCallback(drawChart);

var dataCap ="2014";

function dataCap(){

    dataCap = document.getElementById("selectedYear").value;

    drawChart();

}

function changeDataCap(){

    dataCap = document.getElementById("selectedYear").value;

    alert('dataCap: ' + dataCap);

    drawChart();

}

function drawChart() {

if (dataCap == "2012") {

        var query = new google.visualization.Query(

  'https://docs.google.com/spreadsheets/d/1kBZYgsclc4QNvwIKhVWzLbVcXQMaGRS1cYNib3wQ_jM/edit?usp=sharing');  

  query.send(handleQueryResponse);

  };

  if (dataCap == "2013") {

  var query = new google.visualization.Query(

  'https://docs.google.com/spreadsheets/d/19ffnmpK2yWdr09szg65OiL_a3pXVCcDoTbiZ7gOU8uk/edit?usp=sharing');

  query.send(handleQueryResponse);

  };

  if (dataCap == "2014") {

  var query = new google.visualization.Query(

  'https://docs.google.com/spreadsheets/d/17mPmD7pFJ386xRerGIQcAUT0uVYRC57KnPgk40pQedw/edit?pli=1#gid=0');  

  query.send(handleQueryResponse);

    };    

}

function handleQueryResponse(response) {

  if (response.isError()) {

    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

    return;

  }       

  var data = response.getDataTable();

  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));

  var options = {

       width:1400,

        height:500,

        hAxis: {

        slantedText:true,

        slantedTextAngle:70

    },     

};

  chart.draw(data,  options)

}

</script>

<title>ICSOC Statistics</title>

</head>

<body>

<select id="selectedYear" onchange="dataCap()">

      <option value="2014">ICSOC 2014, Paris</option>

      <option value="2013">ICSOC 2013, Berlin</option>

      <option value="2012">ICSOC 2012, Shanghai</option>

</select>

<div id="columnchart"></div>

</body>

</html>

```

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/ixgrUl0NX-8/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Daniel LaLiberte]

You still have the old dataCap function, which overrides your dataCap variable.  Here is a fixed version: http://jsfiddle.net/dlaliberte/4w0bxLx0/

[Tong Sun]

On Thu, Feb 5, 2015 at 12:07 PM, 'Daniel LaLiberte' via Google Visualization API <google-visua...@googlegroups.com> wrote:

You still have the old dataCap function, which overrides your dataCap variable.  Here is a fixed version: http://jsfiddle.net/dlaliberte/4w0bxLx0/

Brilliant! Thanks a lot for the explain and sample!