Javascript Input Field

@vicm1969Aug 09.2012

Hi Guys,

I am new to the forum and new to javascript, just had a few questions.

I am going to create a .htm file that will be used for personal use. The project is to create .js graphs using jquery.

My question: I would like to create a form that will allow me to enter the following information:

1.Title of the graph
2.Subtitle
3.Y Axis label
4.X Axis label
5. Number of Bars/Lines/Pie slices needed
6. Name of each Bars/Lines/Pie slices needed
7. Value of each Bars/Lines/Pie slices

Depending on this data, i want my .js file to fetch data from the form, and input it in the graph. I know how to have the data in the .js file, just don’t know the syntax to fetch it from the form. The graph example is below, with pre-filled data. I have highlighted in pink ONE part of the graph, exemplifying the data i would need fetched from the form.

Thanks in advance, and apologize for my newbie skills!

___________________________________________________

$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: ‘container’,
type: ‘bar’
},
title: {
text: ‘Historic World Population by Region’
},
subtitle: {
text: ‘Source: Wikipedia.org’
},
xAxis: {
categories: [‘~~[COLOR=”Magenta”]~~Africa’, ‘America’, ‘Asia’, ‘Europe’, ‘Oceania[/COLOR]‘],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: ‘Population (millions)’,
align: ‘high’
}
},
tooltip: {
formatter: function() {
return ”+
this.series.name +’: ‘+ this.y +’ millions’;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: ‘vertical’,
align: ‘right’,
verticalAlign: ‘top’,
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: ‘#FFFFFF’,
shadow: true
},
credits: {
enabled: false
},
series: [{
name: ‘Year 1800’,
data: [107, 31, 635, 203, 2]
}, {
name: ‘Year 1900’,
data: [133, 156, 947, 408, 6]
}, {
name: ‘Year 2008’,
data: [973, 914, 4054, 732, 34]
}]
});
});

});
</script>
</head>
<body>
<script src=”../../js/highcharts.js”></script>
<script src=”../../js/modules/exporting.js”></script>

</body>

</html>

to post a comment

JavaScript

3 Comments(s) _↴

@MekatekAug 11.2012 — #Hello there when using Highcharts, an easy way to get it to work with forms is to create the chart after filling the form. For example one solution could be as below

[code=html]//Paste in the body
 <form action="" method="" onsubmit="createChart(this)">
 <label>Title of the graph</label>
 <input type="text" name="title" id="title" tabindex="" />
 
 <label>Subtitle</label>
 <input type="text" name="subtitle" id="subtitle" tabindex="" />
 
 <label>X Axis Label</label>
 <input type="text" name="xlabel" id="xlabel" tabindex="" />
 
 <label>Y Axis Label</label>
 <input type="text" name="ylabel" id="ylabel" tabindex="" />
 
 <label>Number of Bars/Lines/Pie slices needed</label>
 <input type="text" name="numbars" id="numbars" tabindex="" />
 
 <label>Name of each Bars/Lines/Pie slices needed</label>
 <input type="text" name="namebars" id="namebars" tabindex="" />
 
 <label>Values of each Bars/Lines/Pie slices</label>
 <input type="text" name="valuesbar" id="valuesbar" tabindex="" />
 
 
 <label>Create</label>
 <input type="submit"  value="Create"/>
 
 </form>
 
 //Paste in js code
 
 //Function called to create the Graph
 // Note: there is no check on this form so the user can type any value.
 
 var chart; // Global ref to the chart
 
 function createChart(form){
 
  var _title = form.title.value; //The title
  var _subtitle = form.subtitle.value; // The subtitle
  var _xlabel = form.xlabel.value; // The x label
  var _ylabel = form.ylabel.value; // The y label
  var _numbars = form.numbars.value; // The nº of bars
  var _namebars = form.namebars.value; // A comma separated name values like this (name1,name2,name,3)
  var _values = form.valuesbar.value; // A comma separated values like this (val1,val2,val3;val1,val2,val3;val1,val2,val3) notice that this will create a multi array
 
 //Create the series array
 var _names = _namebars.split(','); // The array of names for each bar
 var _val = _values.split(';'); // The array of values of each data
 
 var _series = []; // This is the multi array you pass to Highchart
 for(i in _val){
 var name = _names[i]; // Get the name as string
 var vals = _val[i].split(','); //Get the values as array
 
   _series.push([name,vals]); //Add them to the series
 }
 
 
 var _data = {
 'title': _title,
 'subtitle': _subtitle,
 'xlabel': _xlabel,
 'ylabel': _ylabel,
 'numbars': _numbars,
 'names': _names,
 'values': _series
 }
 
 //Call the function to create the chart
 drawChart(_data);
 
 }
 
 //Function to draw the chart
 function drawChart(_data){
 
 chart = new Highcharts.Chart({
 chart: {
 renderTo: 'container',
 type: 'bar'
 },
 title: {
 text: _data.title
 },
 subtitle: {
 text: _data.subtitle
 },
 xAxis: {
 categories: _data.names,
 title: {
 text: _data.xlabel
 }
 },
 yAxis: {
 min: 0,
 title: {
 text: _data.ylabel,
 align: 'high'
 }
 },
 tooltip: {
 formatter: function() {
 return ''+
 this.series.name +': '+ this.y +' millions';
 }
 },
 plotOptions: {
 bar: {
 dataLabels: {
 enabled: true
 }
 }
 },
 legend: {
 layout: 'vertical',
 align: 'right',
 verticalAlign: 'top',
 x: -100,
 y: 100,
 floating: true,
 borderWidth: 1,
 backgroundColor: '#FFFFFF',
 shadow: true
 },
 credits: {
 enabled: false
 },
 series: _data.values
 
  });
 
 
 }
 [/code]

I haven't checked the code so you can feed me back is any problem.

@vicm1969authorAug 11.2012 — #Hey Mekatek,

Thanks for helping me out. So since i am inputting data and then calling the chart function right away, i wouldn't need a database to hold the values correct?

How would i go about making this into a webpage then, simply input the code in the body?

@MekatekAug 12.2012 — #<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="es">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />





<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script src="highcharts/js/highcharts.js" type="text/javascript"></script>

</head>

<body>

<form action="" method="" onsubmit="createChart(this); return false">

<label>Title of the graph</label>

<input type="text" name="title" id="title" tabindex="" />

<label>Subtitle</label>
  <input type="text" name="subtitle" id="subtitle" tabindex="" />
 
  <label>X Axis Label</label>
  <input type="text" name="xlabel" id="xlabel" tabindex="" />
 
  <label>Y Axis Label</label>
  <input type="text" name="ylabel" id="ylabel" tabindex="" />
 
  <label>Name of each Bars/Lines/Pie slices needed</label>
  <input type="text" name="namebars" id="namebars" tabindex="" />
 
  <label>Values of each Bars/Lines/Pie slices</label>
  <input type="text" name="valuesbar" id="valuesbar" tabindex="" />
 
 
  <label>Create</label>
  <input type="submit" onclick=""  value="Create"/>

</form>

<div id="chart1"></div>

<script type="text/javascript">

<!--

// Note: there is no check on this form so the user can type any value.

var chart; // Global ref to the chart

function createChart(form){

var _title = form.title.value; //The title
  var _subtitle = form.subtitle.value; // The subtitle
  var _xlabel = form.xlabel.value; // The x label
  var _ylabel = form.ylabel.value; // The y label
  //var _numbars = form.numbars.value; // This is not necesary, the number of bars is taken  from the values
  var _namebars = form.namebars.value; // A comma separated name values like this (name1,name2,name,3)
  var _values = form.valuesbar.value; // A comma separated values like this (val1,val2,val3;val1,val2,val3;val1,val2,val3) notice that this will create a multi array

//Create the series array

var _names = _namebars.split(','); // The array of names for each bar

var _val = _values.split(','); // The array of values of each data

var _series = []; // This is the multi array you pass to Highchart

for(i in _val){

 var name = _names[i]; // Get the name as string
   var val = parseInt(_val[i]); //Get the values as array[[],[]]
 
   //Create the object
   var _item = {
   'name':  name,
   'color': '#fff000',
   'y': val
   }
 
 
 
   _series.push(_item); //Add them to the series

}

console.log(_series);

var _data = {

'title': _title,

'subtitle': _subtitle,

'xlabel': _xlabel,

'ylabel': _ylabel,

'names': _names,

'values': _series

}

//Call the function to create the chart

drawChart(_data);

}

//Function to draw the chart

function drawChart(_data){

chart = new Highcharts.Chart({

chart: {

renderTo: 'chart1',

type: 'bar'

},

title: {

text: _data.title

},

subtitle: {

text: _data.subtitle

},

xAxis: {

categories: _data.names,

title: {

text: _data.xlabel

}

},

yAxis: {

min: 0,

title: {

text: _data.ylabel,

align: 'high'

}

},

tooltip: {

formatter: function() {

return ''+

this.series.name +': '+ this.y +' millions';

}

},

plotOptions: {

bar: {

dataLabels: {

enabled: true

}

}

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -100,

y: 100,

floating: true,

borderWidth: 1,

backgroundColor: '#FFFFFF',

shadow: true

},

credits: {

enabled: false

},

series: [{ data:_data.values}]

});

}

-->

</script>

</body>

//Paste in js code

</html>

Also in #JavaScript _↴

value of QueryString onBlur problem Firefox form submit() function in FF?

Success!

Help @vicm1969 spread the word by sharing this article on Twitter...

Tweet This

Javascript Input Field

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript Input Field

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴