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.

HTML Code:

<!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  so I believe the IE comment should be  -- dashes, not equal = signs.

Thread: Dynamically call up Chart values in HTML

Thread Tools

Search Thread

Dynamically call up Chart values in HTML

IE comment?

Bookmarks

Bookmarks

Posting Permissions