Hi Alina, You were very close. Your problem was that the input in text boxes is a string, and not a number, so you need to use parseFloat to convert the strings into floating point numbers. I pasted your code into a jsfiddle and made the correction, and everything seems to work. Here is the fiddle: http://jsfiddle.net/bpazndy0/
Hopefully you can continue from there. Let us know if you have any other questions. On Mon Nov 24 2014 at 5:31:13 AM Alina Theisen <[email protected]> wrote: > 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 [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- 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 [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
