Adding image in tooltext

[Gayathri]

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.

[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.

 

[Gayathri]

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..

[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.

[Gayathri]

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.

[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!

 

[Gayathri]

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.

[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

[Gayathri]

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??

[Swarnam]

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.

[Gayathri]

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.

[Bindhu]

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!