dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript Input Field

  1. #1
    Join Date
    Aug 2012
    Posts
    2

    Javascript Input Field

    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: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    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>

    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>
    </html>

  2. #2
    Join Date
    Aug 2012
    Posts
    15

    Posible solution

    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

    HTML Code:
    //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
    	
    	});
    
    
    }
    I haven't checked the code so you can feed me back is any problem.

  3. #3
    Join Date
    Aug 2012
    Posts
    2
    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?

  4. #4
    Join Date
    Aug 2012
    Posts
    15

    Working example (copy-paste)

    <!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" />

    <!--YOU CAN ADD YOUR STYLESHEETS HERE-->

    <!--YOU NEED TO LOAD JQUERY AND HIGHCHARTS HERE-->
    <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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles