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

tms2003 · April 21, 2012

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!

April 23, 2012

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!

tms2003 · April 23, 2012

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

Swarnam · April 23, 2012

Hey,

Yes, we are able to change the Caption using FusionWidgets XT (v3.2) (Released on 24th January, 2012)

Can you please elaborate the environment you are working on?

For more information, please refer the link:

http://docs.fusioncharts.com/widgets/Contents/JavaScript/JS_ChangeChartProperties.html

Sign In

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

Recommended Posts

tms2003

Share this post

Link to post

Share on other sites

Guest Sashibhusan

Share this post

Link to post

Share on other sites

tms2003

Share this post

Link to post

Share on other sites

Swarnam

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity