Sign in to follow this  
Gayathri

Adding image in tooltext

Recommended Posts

Hi

 

I want to add image in tool text for MScolumn3D fusion charts.

 

Can some one help me in this issue.

 

I tried to append something like this,

 

retVal +="tooltext=\'City\:"+query_result.getValueAt(i, 3)+"\nFacility\ :" +query_result.getValueAt(i, 2)+"\nFacility Type\ :" +query_result.getValueAt(i, 5)+"\nDrinking Water Consumption :" +query_result.getValueAt(i, 1)+"Litres"+"\nDate :" +query_result.getValueAt(i, 0)+"\nDay :" +query_result.getValueAt(i, 4)+"{imageurl}nav-arrow-down.png"+"\'";

 

Im getting this image path displayed in that tooltext instead of the image.

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Please note that FusionCharts XT MSColumn3D chart will take the "toolText" attribute values as string only.

 

However, if you are willing to add image into it, as a work around, you could provide the HTML <img> tag in encoded format, as string to the toolText value.

 

Ref. XML code snippet:

<set label='Feb' value='910000' toolText="<img src='http://recruitmentexchange.com/partner_logos/fusionchart_logo.jpg' />" />

But, please note that this will only work for JavaScript mode of rendering the latest FusionCharts XT charts.

 

Please find the attached screen shot of the same for your reference.

 

post-23588-0-86146800-1395295308_thumb.png

Share this post


Link to post
Share on other sites

Hi Sashibushan,

 

Still now i m having that issue :(

 

retVal +="tooltext=\'City\:"+query_result.getValueAt(i, 3)+"\nFacility\ :" +query_result.getValueAt(i, 2)+"\nFacility Type\ :" +query_result.getValueAt(i, 5)+"\nDrinking Water Consumption :" +query_result.getValueAt(i, 1)+"Litres"+"\nDate :" +query_result.getValueAt(i, 0)+"\nDay :" +query_result.getValueAt(i, 4)+"<img src='http://recruitmentexchange.com/partner_logos/fusionchart_logo.jpg"+"\'";

 

 

I am getting an error like invalid data :(  :( .

 

 

Can plz help me on this..

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

It seems, in your code, the closing ">" is missing for HTML <img> tag.

 

Could you please provide the generated XML string which is provide to the FusionCharts object instance for plotting, so that we could figure out the exact issue?

 

For more details on troubleshooting "Invalid Data" error message, please visit the link: http://docs.fusioncharts.com/charts/contents/Debug/Basic.html

 

Looking forward to your valuable response.

Share this post


Link to post
Share on other sites

Hi 

 

No that's copying mistake sorry :( , i added that & gt tag also in my code..

 

retVal +="tooltext=\'City\:"+query_result.getValueAt(i, 3)+"\nFacility\ :" +query_result.getValueAt(i, 2)+"\nFacility Type\ :" +query_result.getValueAt(i, 5)+"\nDrinking Water Consumption :" +query_result.getValueAt(i, 1)+"Litres"+"\nDate :" +query_result.getValueAt(i, 0)+"\nDay :" +query_result.getValueAt(i, 4)+"<img src='http://recruitmentex...logo.jpg'/>"+"\'";
 
 
Please find below my xml source,
 
<chart caption='Drinking Water Consumption (Litres)'  canvasBgColor='FFFFFF' canvasBaseColor='FFFFFF' lineThickness='4.5' baseFontColor='000000' showBorder='1' bgColor='FFFFFF' bordercolor='000000'  palette="2" animation="1" formatNumberScale="0" labelDisplay="Rotate" showValues="1" slantLabels='1' rotateValues='1'  placeValuesInside='1' >
<categories><category label='2014-03-14' />
<category label='2014-03-14' />
<category label='2014-03-14' />
<category label='2014-03-14' />
<category label='2014-03-14' />
<category label='2014-03-14' />
<category label='2014-03-07' />
<category label='2014-03-07' />
<category label='2014-03-07' />
<category label='2014-03-07' />
<category label='2014-03-07' />
<category label='2014-03-07' />
<category label='2014-02-28' />
<category label='2014-02-28' />
<category label='2014-02-28' />
<category label='2014-02-28' />
<category label='2014-02-28' />
<category label='2014-02-28' />
<category label='2014-02-28' />
<category label='2014-02-28' />
<category label='2014-02-28' />
</categories><dataset seriesname="Drinking Water Consumption" color="0099FF"><set value='530000.00'tooltext='City:Chennai
Facility :CHN - Tidel Park
Facility Type :Multi Tenant
Drinking Water Consumption :530000.00Litres
Date :2014-03-14
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='0.00'tooltext='City:Chennai
Facility :CHN - Techno Campus
Facility Type :Owned
Drinking Water Consumption :0.00Litres
Date :2014-03-14
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='80000.00'tooltext='City:Chennai
Facility :CHN - IITM Research Park
Facility Type :Multi Tenant
Drinking Water Consumption :80000.00Litres
Date :2014-03-14
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='1400000.00'tooltext='City:Chennai
Facility :CHN - Perungudi
Facility Type :Leased
Drinking Water Consumption :1400000.00Litres
Date :2014-03-14
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='610000.00'tooltext='City:Chennai
Facility :CHN - CCO
Facility Type :Multi Tenant
Drinking Water Consumption :610000.00Litres
Date :2014-03-14
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='4800000.00'tooltext='City:Chennai
Facility :CHN - Siruseri - SEZ
Facility Type :Owned
Drinking Water Consumption :4800000.00Litres
Date :2014-03-14
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='1400000.00'tooltext='City:Chennai
Facility :CHN - Perungudi
Facility Type :Leased
Drinking Water Consumption :1400000.00Litres
Date :2014-03-07
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='6240000.00'tooltext='City:Chennai
Facility :CHN - Siruseri - SEZ
Facility Type :Owned
Drinking Water Consumption :6240000.00Litres
Date :2014-03-07
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='0.00'tooltext='City:Chennai
Facility :CHN - Navalur
Facility Type :Leased
Drinking Water Consumption :0.00Litres
Date :2014-03-07
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='0.00'tooltext='City:Chennai
Facility :CHN - Techno Campus
Facility Type :Owned
Drinking Water Consumption :0.00Litres
Date :2014-03-07
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='0.00'tooltext='City:Chennai
Facility :CHN - DLF Infocity - SEZ
Facility Type :Multi Tenant
Drinking Water Consumption :0.00Litres
Date :2014-03-07
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='1060000.00'tooltext='City:Chennai
Facility :CHN - ASV SunTech Park
Facility Type :Multi Tenant
Drinking Water Consumption :1060000.00Litres
Date :2014-03-07
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='18840000.00'tooltext='City:Chennai
Facility :CHN - MEPZ - SEZ
Facility Type :Owned
Drinking Water Consumption :18840000.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='0.00'tooltext='City:Chennai
Facility :CHN - DLF Infocity - SEZ
Facility Type :Multi Tenant
Drinking Water Consumption :0.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='0.00'tooltext='City:Chennai
Facility :CHN - Navalur
Facility Type :Leased
Drinking Water Consumption :0.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='5220000.00'tooltext='City:Chennai
Facility :CHN - Siruseri - SEZ
Facility Type :Owned
Drinking Water Consumption :5220000.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='85000.00'tooltext='City:Chennai
Facility :CHN - IITM Research Park
Facility Type :Multi Tenant
Drinking Water Consumption :85000.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='1400000.00'tooltext='City:Chennai
Facility :CHN - Perungudi
Facility Type :Leased
Drinking Water Consumption :1400000.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='520000.00'tooltext='City:Chennai
Facility :CHN - Tidel Park
Facility Type :Multi Tenant
Drinking Water Consumption :520000.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='0.00'tooltext='City:Chennai
Facility :CHN - Techno Campus
Facility Type :Owned
Drinking Water Consumption :0.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
<set value='610000.00'tooltext='City:Chennai
Facility :CHN - CCO
Facility Type :Multi Tenant
Drinking Water Consumption :610000.00Litres
Date :2014-02-28
Day :Friday   <img src='http://recruitmentex...logo.jpg/>' />
</dataset><styles><definition><style type="font" name="CaptionFont" size="15" color="000000" bold="1" /><style type="font" name="SubCaptionFont" bold="1" color="000000" /></definition><application><apply toObject="caption" styles="CaptionFont" /><apply toObject="SubCaption" styles="SubCaptionFont" /></application></styles></chart> />
</dataset><styles><definition><style type="font" name="CaptionFont" size="15" color="000000" bold="1" /><style type="font" name="SubCaptionFont" bold="1" color="000000" /></definition><application><apply toObject="caption" styles="CaptionFont" /><apply toObject="SubCaption" styles="SubCaptionFont" /></application></styles></chart>
 
 
But now also im getting an error :(  :(  like invalid data..
 
 
Please help me on this as soon as possible please.

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

It seems the XML data provided to the chart is malformed and because of this the "Invalid data" error message shown.

 

For the first set element of series name "Drinking Water Consumption", I have changed the XML string from:

<set value='530000.00'tooltext='City:Chennai
Facility :CHN - Tidel Park
Facility Type :Multi Tenant
Drinking Water Consumption :530000.00Litres
Date :2014-03-14
Day :Friday   <img src='http://recruitmentex....logo.jpg/>' /> 

to

 <set value='530000.00' tooltext='City:Chennai{br}Facility :CHN - Tidel Park{br}Facility Type :Multi Tenant{br}Drinking Water Consumption :530000.00Litres{br}Date :2014-03-14{br}Day :Friday{br}<img src="http://recruitmentexchange.com/partner_logos/fusionchart_logo.jpg" />' />

and removed rest of all the set elements and categories (just to check the issue), and it works great from my end. Please find the attached screen shot of the same, for your reference.

 

So, could you please make changes in the XML data string accordingly and try once again?

 

Also, please note that the above mentioned suggestion (providing HTML encoded image as tooltip) will work only for JavaScript mode of rendering the chart and not for Flash charts.

 

Hope this helps!

 

post-23588-0-34801400-1395638154_thumb.png

Share this post


Link to post
Share on other sites

Hi

 

I tried using the above mentioned code but also im getting error :(  :(  like ,

 

"Error Loading Data"

 

But im getting the XML source correctly. It something similar to this,

 

<set value='530000.00' tooltext='City:Chennai{br}Facility :CHN - Tidel Park{br}Facility Type :Multi Tenant{br}Drinking Water Consumption :530000.00Litres{br}Date :2014-03-14{br}Day :Friday{br}<img src="http://recruitmentexchange.com/partner_logos/fusionchart_logo.jpg" />' />

 

And for your information im using javascript mode only.

 

Please help me to solve this issue.

Share this post


Link to post
Share on other sites
Guest Sashibhusan

Hi,

 

Please find the scaled down sample showing the single data plot with custom tooltip (with image) in MSColumn3D chart rendered using Trial version of FusionCharts XT v3.3.1 sr3.

 

Please try the working sample at your end and make changes in your chart XML file accordingly.

 

Hope this helps!

CustomTooltip_Sample.zip

Share this post


Link to post
Share on other sites

Hi 

 

    I want to have the title of the fusion chart to be dynamic according to the value selected in filter..

 

For example i will be having the year filter if im selecting 2014 the chart title needs to be Data for 2014

if im changing to 2013 it needs to bt Data for 2013

 

 
Can any one help on that??

Share this post


Link to post
Share on other sites

Hi Gayathri,

 

While changing the filter, new data which is being populated based on the selection, try passing the caption attribute along with generated data.

 

For more information, please refer to: http://docs.fusioncharts.com/charts/contents/JavaScript/JS_ChangeData.html

 

However, if you would like to change the caption of the rendered chart and the data remains same, try using setChartAttribute()

 

Ref.Code:

myChart.setChartAttribute( "caption" , "Data for 2014" );

For more information, please refer to: http://docs.fusioncharts.com/charts/contents/JavaScript/JS_ChangeChartProperties.html

 

Hope this helps.

Share this post


Link to post
Share on other sites

Hi Swarnam,

 

     Thanks for ur reply.. This is useful for me..

 

But still im confused how to pass the selected filter to that caption attribute.

 

The links which u gave to refer has separate xml for changing the caption bt i will be having nly one xml where the chart caption needs to be the selected year in that filter...

 

 

Please help me in this asap. :)

Share this post


Link to post
Share on other sites

Hi,

 

You may use JavaScript code to get the selected value.

 

Ref. Code:

<select id="dropDown">
<option value="1">option 1</option>
<option value="2" selected="selected">option 2</option>
<option value="3">option 3</option>
</select>

Running this code:

var e = document.getElementById("dropDown");
var selectedOption= e.options[e.selectedIndex].value;

.value will return 2. If what you actually want is 'option 2', then do this:

var e = document.getElementById("dropDown");
var selectedText= e.options[e.selectedIndex].text;

Pass this to myChart.setChartAttribute( "caption" , selectedText);

 

Hope this helps!

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