[visualization-api] Beginner needs help with Scatter Charts

[Alina Theisen]

Hi, 
I'm a complete beginner when it comes to programming but my supervisor has 
asked me to create an online tool for our laboratory group to help analyse 
the data we produce.
After many hours of online tutorials on HTML/CSS/Javascript I managed to 
make a basic website with a few functions which work alright.
However, I would also like to use the Google Scatter Charts to show a user 
input XY data point on a plot which apart from this single data point 
always has the same data.
The way I tried to do it was like this, with this in the HTML part to 
collect the user input:

<form>
Molecular weight :<input type="number" id="moleWeight" title="Mw in 
daltons"/><br />
Delta Z:<input type="number" id="deltaz" title="The number of charge states 
observed"/><br /><br />
<div id="submit" onclick="drawChart()">Submit</div>
</form>

<div id="my_div"></div> 
<div id="firstpng"></div>


And this script to draw the chart with the input on it:

<script>

function drawChart() {

var data = new google.visualization.DataTable();

var mweight = document.getElementById("moleWeight").value;
var deltaz = document.getElementById("deltaz").value;

data.addColumn('number', 'Molecular Weight');
data.addColumn('number', 'Ordered structure'); 
data.addColumn({type:'string', role:'tooltip'});
data.addColumn('number', 'Disordered structure');
data.addColumn({type:'string', role:'tooltip'});
data.addColumn('number', 'Query protein');
data.addColumn({type:'string', role:'tooltip'});

data.addRows([
    //ordered   
    [2846, 3, 'Melittin', null, null, null, null],
    [4328, 4, 'Human beta-defensin 2', null, null, null, null],
    [8111, 5, 'Lymphotactin 1-72', null, null, null, null],
    [12229, 4, 'Cytochrome c', null, null, null, null],
    [15743, 4, 'Haemoglobin-alpha holo monomer', null, null, null, null],
    [44200, 4, 'Ovalbumin reduced conformation 1', null, null, null, null],
    [44200, 3, 'Ovalbumin reduced conformation 2', null, null, null, null],
    [44287, 2, 'Ovalbumin intact conformation 1', null, null, null, null],
    [44287, 3, 'Ovalbumin intact conformation 2', null, null, null, null],
    [55000, 3, 'TTR tetramer', null, null, null, null],
    [64000, 3, 'Avidin tetramer', null,null, null, null],
    [66430, 4, 'BSA', null, null, null, null],
    [102000, 4, 'Concanavalin A tetramer', null, null, null, null],
    [128000, 5, 'SAP pentamer', null, null, null, null],
    // disordered
    [8556, null, null, 8, 'Ubiquitin denatured', null, null],
    [10175, null, null,  6, 'Lymphotactin', null, null],
    [11162, null, null, 9, 'N-terminal p53', null, null],
    [14460, null, null, 16, 'Alpha-synuclein', null, null],
    [14790, null, null, 11, 'N-terminal MDM2', null, null],
    [15126, null, null, 16,'Haemoglobin-alpha apo monomer', null, null],
    [15876, null, null, 10, 'Haemoglobin-beta apo monomer', null, null],
    [23944, null, null, 20, 'Beta-casein', null, null],
    [24615, null, null, 9, 'p53 DNA binding domain', null, null],
    [24615, null, null, 25, 'p53 DNA binding domain pH 1.5', null, null],
    
    // user input protein --> DOES NOT WORK THIS WAY
    [mweight, null, null, null, null, deltaz, 'Query']
    ]); 
    
          
        var options = {
          title: 'Molecular Weight vs. \u0394Z',
          hAxis: {title: 'Molecular Weight in da', minValue: 0},
          vAxis: {title: '\u0394Z', minValue: 0},
          series: {
          0:{color: '#5AA8E8'},
          1:{color: '#9932CC'},
          2:{color: '#29FF50'}
          },
          height: 500,
          width: 800,
        };


 var my_chart = new 
google.visualization.ScatterChart(document.getElementById('my_div'));
        my_chart.draw(data, options);
        
        document.getElementById('firstpng').outerHTML = '<a href="' + 
my_chart.getImageURI() + '">Printable version</a>'; 
        }
        
</script>


Now the problem seems to be the use of variables in the array bit for the 
input data point, at least I think I narrowed it down to that since 
commenting out this single line makes the whole thing work. 
Unfortunately, I cannot think of any way of making this work, and this is 
why I'm asking here hoping that more experienced people will know how to 
get around this.
Thank you very much in advance!
Alina

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.