PDA

View Full Version : Dynamically call up Chart values in HTML



louisaa
08-30-2011, 02:27 PM
Hi All,

I have three charts Chart1, Chart2 and Chart3, developed using JQuery.

The values are stored in a JSON and its working fine, Unfortunately I have not been able to dynamically change the values using an input form within the HTML page.




<!doctype html>
<html>
<head>

<!==[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]==>
<script language="javascript" type="text/javascript" src="New Folder/dist/jquery.js"></script>
<script language="javascript" type="text/javascript" src="New Folder/dist/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" >
<link rel="stylesheet" type="text/css" href="New Folder/dist/examples/examples.css">
<script language="javascript" type="text/javascript" src="New Folder/dist/plugins/jqplot.funnelRenderer.js"></script>

<script language="javascript" type="text/javascript" src="jqplot.pieRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.pieRenderer.lineLabels.js"></script>
<script language="javascript" type="text/javascript" src="New Folder/dist/plugins/jqplot.barRenderer.js"></script>



<script language="javascript" type="text/javascript" src="data.json"></script>
<script language="javascript" type="text/javascript" src="New Folder/dist/plugins/jqplot.categoryAxisRenderer.js"></script>


<script type="text/javascript" src="New Folder/dist/examples/funnelTest.js"></script>
<style type="text/css">
#code {
font: 10pt "Andale Mono", Monaco, "Courier New", sans-serif ;
white-space: pre;
}


</style>
<script type="text/javascript">



$(document).ready(function() {


//this.gt
//$.jqplot.config.enablePlugins = true;
$.jqplot.config.enablePlugins = true;

//line1 = [['BPPPM',3],['TS',7],['COUNTRY',9],['HPSS',6],['WW-SPDS',5],['GA',4]];
plot1 = $.jqplot('chart1',[line1], {
title: ' Pie Chart',




seriesDefaults:{
renderer:$.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
lineLabels: true,
lineLabelsLineColor: '#777',
showLabel: true
}
},
legend:{
show:true,
location: 'e',
placement: 'inside'
}
});



// line11 = [['Country',4],['BPPPM',3],['TS',5],['GA',8],['WW-SPDS',2],['HPSS',7]];
//line2 = [5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5,5,-5];

plot2 = $.jqplot('chart2', [line1], {
title:' Bar Chart',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions:{
barWidth:25,
barPadding:-25,
barMargin:5,
//barDirection: 'horizontal',
varyBarColor: true
},
shadow:false
},
legend: {show:false,
location: 'ne'},
//placement: 'inside'

axes:{
yaxis:{
min:0, tickOptions: {
formatString: '%.0f',
showGridLine: false,
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: true,
showLabel: true
},
showTicks: true
}
},
xaxis:{
show: true,
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
show: true,
showLabel: true
},
showTicks: true
}
}
});


$.jqplot.config.enablePlugins = true;
$('#code').load('funnelTest.js');
$('#code').dialog({
height: 'auto',
width: 900,
modal: true,
autoOpen: false,
resizable: true,
draggable: true,
show: 'fold'
//Placement: 'outside'
});


});


</script>

<script type="text/javascript">

function gt(){
var f = formValues.li1.value;
var g = formValues.li2.value;
var h = formValues.li3.value;
var i = formValues.li4.value;
var j = formValues.li5.value;
var k = formValues.li6.value;

//document.write(f);
//document.write(g);
//document.write(h);
//document.write(i);
//document.write(j);
//document.write(k);


line2 =[];
//var a = [f,g,h,i,j,k];
//document.write(a);

//line2 = [f,g,h,i,j,k];
//document.write(line2);





}

</script>

<style type="text/css">
div [id] {

width:500px;
height:300px;
float:right;
margin:25px;
}

</style>
</head>

<body>


<form id="formValues" action="" method="post">

<input name="" id="li1" value="">
<input name="" id="li2" value="">
<input name="" id="li3" value="">
<input name="" id="li4" value="">
<input name="" id="li5" value="">
<input name="" id="li6" value="">
<input type="button" value="click to change values" onclick="gt()">

</form>




<table>
<tr>
<td>
<div id="chart1"></div>
</td>
<td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</td>

<td>
<div id="chart2"></div>
</td>
</tr>

<tr>
<td>
<span id="info1"></span>
</td>
</tr>
<tr >
<td>
<div id="chart4">Tap to view Values</div>
</td>
</tr>

</table>
</body>

</html>




Thanks for your assistance

auntnini
08-30-2011, 09:43 PM
<!==[if IE]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]==>


This is not relevant to your query, but in HTML it is <!-- comment --> so I believe the IE comment should be <!-- [if IE]>...<![endif]--> -- dashes, not equal = signs.