Results 1 to 2 of 2

Thread: Dynamically call up Chart values in HTML

  1. #1
    Join Date
    Aug 2011
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Dynamically call up Chart values in HTML

    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
    Last edited by louisaa; 08-30-2011 at 03:41 PM.

  2. #2
    Join Date
    Oct 2006
    Location
    New York, NY, USA
    Posts
    262
    Thanks
    42
    Thanked 24 Times in 24 Posts

    Default IE comment?

    <!==[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.
    Last edited by auntnini; 09-02-2011 at 08:44 PM. Reason: fix font size

Bookmarks

Posting Permissions

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