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!
___________________________________________________
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.
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?
<!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="" />
// 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
}
Reply With Quote
Bookmarks