Sign in to follow this  
tms2003

How Can I Modify The Fusioncharts's Caption With Js?

Recommended Posts

Dear Sir:

 

I try to use FusionCharts .The first,I create a chart,then I press butoon try to modify the chart's caption.

My code like this:

 

<head runat="server">
   <title></title>
   <script type="text/javascript" src="../../js/fusionchart/FusionCharts.js"></script>
   <script type="text/javascript">

       var json2 = {
           "chart": {
               "palette": "5",
               "caption": "this is old title",
               "subcaption": "look it's me",
               "datastreamurl": "rndNumber.ashx",
               "refreshinterval": "3",
               "numberprefix": "$",
               "snumberprefix": "$",
               "setadaptiveymin": "1",
               "setadaptivesymin": "1",

               "showrealtimevalue": "1",
               "labeldisplay": "Rotate",
               "slantlabels": "1",
               "numdisplaysets": "100",
               "labelstep": "2",
               "pyaxisminvalue": "0",
               "pyaxismaxvalue": "100",
               "syaxisminvalue": "0",
               "syaxismaxvalue": "100"
           },

           "dataset": [
       {
           "seriesname": "Google",
           "showvalues": "0"
       }
   ],
           "styles": {
               "definition": [
           {
               "type": "font",
               "name": "captionFont",
               "size": "14"
           }
       ]
           }
       };


   </script>
</head>
<body>
   <form id="form1" runat="server">
   <div id="chartContainer">
       FusionCharts will load here!</div>
   <div id="chartGauas">
   </div>
   <script type="text/javascript">

       var chart1 = new FusionCharts(
            { swfUrl: "../../js/fusionchart/RealTimeLineDY.swf",
                width: "600",
                height: "250",
                id: 'sampleChart'
            });





       chart1.setJSONData(json2);
       chart1.render("chartContainer");


       function myclick() {
           // chart1.width = 800;
           json2.chart.caption ='Now!Change!!!';
           chart1.setJSONData(json2);
           chart1.render("chartContainer");
       }




       // -->       
   </script>
   </div>


   <input type="button" value="changeCaption" onclick='myclick();' />

   </form>
</body>
</html>



 

but,I failed!

how can I modifty the caption dymically?

help!

 

 

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Thank you for the post.

 

Could you please try below modified code to update the chart attributes dynamically?

<head runat="server">
<title></title>
<script type="text/javascript" src="../../js/fusionchart/FusionCharts.js"></script>
<script type="text/javascript">

   	var json2 = {
       	"chart": {
           	"palette": "5",
           	"caption": "this is old title",
           	"subcaption": "look it's me",
           	"datastreamurl": "rndNumber.ashx",
           	"refreshinterval": "3",
           	"numberprefix": "$",
           	"snumberprefix": "$",
           	"setadaptiveymin": "1",
           	"setadaptivesymin": "1",

           	"showrealtimevalue": "1",
           	"labeldisplay": "Rotate",
           	"slantlabels": "1",
           	"numdisplaysets": "100",
           	"labelstep": "2",
           	"pyaxisminvalue": "0",
           	"pyaxismaxvalue": "100",
           	"syaxisminvalue": "0",
           	"syaxismaxvalue": "100"
       	},

       	"dataset": [
   	{
       	"seriesname": "Google",
       	"showvalues": "0"
   	}
],
       	"styles": {
           	"definition": [
       	{
           	"type": "font",
           	"name": "captionFont",
           	"size": "14"
       	}
   	]
       	}
   	};


</script>
</head>
<body>
<form id="form1" runat="server">
<div id="chartContainer">FusionCharts will load here!</div>
<div id="chartGauas">
</div>
<script type="text/javascript">
   	var chart1 = new FusionCharts(
        	{ swfUrl: "../../js/fusionchart/RealTimeLineDY.swf",
            	width: "600",
            	height: "250",
            	id: 'sampleChart'
        	});

   	chart1.setJSONData(json2);
   	chart1.render("chartContainer");
  	/* function myclick() {
		// chart1.width = 800;
		json2.chart.caption ='Now!Change!!!';
		chart1.setJSONData(json2);
		chart1.render("chartContainer");
   	}*/

	function myclick() {
		// get chart reference
		var chartReference = FusionCharts( "sampleChart" ); 
		// change palette, palette colors and set glass effect to chart
		chartReference.setChartAttribute( {"caption" : "Now!Change!!!"} );
   	}
   	// -->   	
</script>
</div>
<input type="button" value="changeCaption" onclick='myclick();' />
</form>
</body>
</html>

 

For more information on "Changing Chart Properties", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?JavaScript/JS_ChangeChartProperties.html

 

Hope this helps!

Share this post


Link to post
Share on other sites

Hi,

 

Thank you for the post.

 

Could you please try below modified code to update the chart attributes dynamically?

For more information on "Changing Chart Properties", please follow the link below:

http://docs.fusionch...Properties.html

 

Hope this helps!

 

Hi,thanks you answer!!!I try to this code ,but failed too. my code use:

Current Version:FusionWidgets XT (v3.2) (Released on 24th January, 2012)

 

this is all my code!


<body> 
       <form id="form1" runat="server"> 
       <div id="chartContainer">FusionCharts will load here!</div> 
       <div id="chartGauas"> 
       </div> 
       <script type="text/javascript">
           var chart1 = new FusionCharts(
               { swfUrl: "../../js/fusionchart/RealTimeLineDY.swf",
                   width: "600",
                   height: "250",
                   id: 'sampleChart'
               });

               //chart1.setJSONData(json2);
               chart1.setDataXML('<chart manageResize="1" caption="CPU Usage" bgColor="000000" bgAlpha="100" canvasBorderThickness="1" canvasBorderColor="008040" canvasBgColor="000000" yAxisMaxValue="100" decimals="0" numdivlines="9" numVDivLines="28" numDisplaySets="30" divLineColor="008040" vDivLineColor="008040" divLineAlpha="100" chartLeftMargin="10" baseFontColor="00dd00" showRealTimeValue="0" numberSuffix="%" labelDisplay="rotate" slantLabels="1" toolTipBgColor="000000" toolTipBorderColor="008040" baseFontSize="11" showAlternateHGridColor="0" legendBgColor="000000" legendBorderColor="008040" legendPadding="35" showLabels="1"> <categories> <category label="Start"/> </categories> <dataset color="00dd00" seriesName="Processor A" showValues="0" alpha="100" anchorAlpha="0" lineThickness="2"> <set value="0" /> </dataset> <dataset color="ff5904" seriesName="Processor B" showValues="0" alpha="100" anchorAlpha="0" lineThickness="2"> <set value="0" /> </dataset> </chart>');
           chart1.render("chartContainer");
           /* function myclick() { 
           // chart1.width = 800; 
           json2.chart.caption ='Now!Change!!!'; 
           chart1.setJSONData(json2); 
           chart1.render("chartContainer"); 
           }*/

           function myclick() {
               // get chart reference 
               var chartReference = FusionCharts("sampleChart");
               // change palette, palette colors and set glass effect to chart 
               chartReference.setChartAttribute({ "caption": "Now!Change!!!" });
               chartReference.setChartAttribute( { "palette" : "2"});
              // chart1.render("chartContainer");
           }
           // -->           
       </script> 

       <input type="button" value="changeCaption" onclick='myclick();' /> 


the attach file is end ,file name 1.html in test foler. 

 

Is something wrong about me?

 

 

1.html

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this