Special Characters In Tooltip

rodiusd · March 4, 2012

Hi,

we are evaluating FC and came to a sort of bug when trying to create a datapoint tooltext.

As we are lliving in a multilanguage country Belgium, we need several special characters is the text.

For the moment we have troubles displaying the ë, é, è characters. the tooltext string has been converted as follows:

We are setting thetooltext with the php function htmlentities().

<dataset seriesName="1st game">
<set value="213" tooltext="1ste game - 213 pins{br}Interclub 7 "/>
<set value="154" tooltext="1ste game - 154 pins{br}Interclub 1 "/>
<set value="159" tooltext="1ste game - 159 pins{br}Interclub 2 "/>
<set value="193" tooltext="1ste game - 193 pins{br}Interclub 6 "/>
<set value="178" tooltext="1ste game - 178 pins{br}Nationaal Kampioenschap Trio's "/>
<set value="163" tooltext="1ste game - 163 pins{br}Interclub 8 "/>
<set value="111" tooltext="1ste game - 111 pins{br}Liga "/>
<set value="151" tooltext="1ste game - 151 pins{br}Liga "/>
<set value="186" tooltext="1ste game - 186 pins{br}Liga "/>
<set value="116" tooltext="1ste game - 116 pins{br}Liga "/>
<set value="132" tooltext="1ste game - 132 pins{br}Liga "/>
<set value="181" tooltext="1ste game - 181 pins{br}Liga "/>
<set value="179" tooltext="1ste game - 179 pins{br}Liga "/>
<set value="174" tooltext="1ste game - 174 pins{br}Liga "/>
<set value="187" tooltext="1ste game - 187 pins{br}Liga "/>
<set value="149" tooltext="1ste game - 149 pins{br}Beker van België - Beker Armand Colin 1/32 finale"/>
<set value="169" tooltext="1ste game - 169 pins{br}Beker van België - Beker Armand Colin 1/16 finale"/>
<set value="171" tooltext="1ste game - 171 pins{br}Liga "/>
<set value="176" tooltext="1ste game - 176 pins{br}Liga "/>
<set value="161" tooltext="1ste game - 161 pins{br}Liga "/>
<set value="172" tooltext="1ste game - 172 pins{br}Liga "/>
<set value="129" tooltext="1ste game - 129 pins{br}Liga "/>

the apostroph gets correctly displayed but not the other characters.

Any idea to handle this correctly ?

Edited March 4, 2012 by rodiusd

March 5, 2012

Hi,

Thank you for the post.

Could you please try by directly embedding the special characters like: ë, é, è in the tooltip of your XML code?

Ref. Code:

Please note that you can directly embed all the special characters (except &, <, >, ' (apostrophe) and "(quote) ) in the XML data source of your chart.

However, &, <, >, ' (apostrophe) and "(quote) need to be specially HTML encoded when providing the same as a part of the chart data.

Hope this helps.

March 5, 2012

Hi,

Also to use multi-lingual (UTF-8) characters on the charts, you need to use UTF-8 encoded XML.

So the XML file/stream does require a BOM(Byte Order Mark) stamp to be present as the very first 3 Bytes of the file. So do not forget to add BOM in the XML/stream.

For more information on "Using Multi-Lingual text > How to add BOM", please follow the link below:

http://docs.fusioncharts.com/charts/contents/?advanced/special-chars/SpChar.html

Hope this helps.

rodiusd · March 6, 2012

hi,

thanks for the replies, however for the first one, the tooltext is coming from a MySQL db code in UTF-8.

For the second hint the PHP file creating the XML respons is encode with a BOM marker as also the HTML file is encode with the BOM.

The XML respons is also encode with the BOM.

<?php
   include("includes/DBConn.php");
   include("includes/FusionCharts_Gen.php");
   $link = connectToDB();
   $gp = $gt = 0;
   $strParam = pack( "CCC" , 0xEF, 0xBB, 0xBF );
   $uid = (isset($_SESSION['mbr_uid'])) ? $_SESSION['mbr_uid'] : 13; 
   $scope = (isset($_GET['scope'])) ? $_GET['scope'] : 1; 
   .....

   $strParam .= "</chart>";
   mysql_close($link);

   //Set Proper output content-type
   header('Content-type: text/xml');

   //Just write out the XML data
   //NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
   print $strParam;

So i dont know what is going wrong here.

Please advise

Edited March 6, 2012 by rodiusd

March 8, 2012

Hi,

It seems that in your PHP code you are assigning "pack( "CCC" , 0xEF, 0xBB, 0xBF );" to $strParam PHP variable which should be echo as output in the very first line of the code.

Also please mention the charset as UTF-8 in the header part and try.

Please find below your code which I have modified accordingly.

<?php
   echo pack( "CCC" , 0xEF, 0xBB, 0xBF );
   include("includes/DBConn.php");
   include("includes/FusionCharts_Gen.php");
   $link = connectToDB();
   $gp = $gt = 0;
   //$strParam = pack( "CCC" , 0xEF, 0xBB, 0xBF );
   $uid = (isset($_SESSION['mbr_uid'])) ? $_SESSION['mbr_uid'] : 13; 
   $scope = (isset($_GET['scope'])) ? $_GET['scope'] : 1; 
   .....

   $strParam .= "</chart>";
   mysql_close($link);

   //Set Proper output content-type
   header('Content-type: text/xml;charset=UTF-8');

   //Just write out the XML data
   //NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
   print $strParam;

please find the below link which would explain more on this:

http://open-archive..../DataFrench.php

I hope this will help you out !

Edited March 8, 2012 by Sashibhusan

rodiusd · March 8, 2012

Hi,

tryed with your info but got not further.

    echo pack("CCC",0xef,0xbb,0xbf);
   include("includes/DBConn.php");
   include("includes/FusionCharts_Gen.php");
   //echo pack("CCC",0xef,0xbb,0xbf);
   $link = connectToDB();
   $gp = $gt = 0;
   // Get member information
   $strQuery = "SELECT fullname, BBSFAverage FROM members WHERE id = 13";
$result = mysql_query($strQuery) or die(mysql_error());
if ($result) {
       while ($row = mysql_fetch_object($result)) {
           $fullname = $row->fullname;
           $BBSFavg  = $row->BBSFAverage;
       };
   };


$strQuery = "SELECT date_format(g.playdate,'%d %b %Y') as playdate,"
                    ." concat(e.description,' ',ifnull(et.description,' ')) as event,"
                    ." g.game01, g.game02, g.game03, g.game04, g.game05, g.game06, g.game07, g.game08, g.game09, g.game10 "
              ."FROM games g INNER JOIN events e ON g.eventID = e.id LEFT OUTER JOIN events_type et ON e.typeID = et.id "
              ."WHERE (g.memberID = '13' and scopeID = '1')";
$result = mysql_query($strQuery) or die(mysql_error());
if ($result) {
  $categories = "<categories>";
     $datasetg01 = "<dataset seriesName='1st game'>";
     $datasetg02 = "<dataset seriesName='2nd game'>";
     $datasetg03 = "<dataset seriesName='3th game'>";
     $datasetg04 = "<dataset seriesName='4th game'>";
     $datasetg05 = "<dataset seriesName='5th game'>";
     $datasetg06 = "<dataset seriesName='6th game'>";
     $datasetg07 = "<dataset seriesName='7th game'>";
     $datasetg08 = "<dataset seriesName='8th game'>";
     $datasetg09 = "<dataset seriesName='9th game'>";
     $datasetg10 = "<dataset seriesName='10th game'>";
       while ($row = mysql_fetch_object($result)) {
           $categories .= "<category label='".$row->playdate."'/>";
           if ($row->game01 == 0){
             $datasetg01 .= "<set value='?'/>";
           }else{
             $gp += $row->game01; $gt += 1;
             $datasetg01 .= "<set value='".$row->game01."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}1ste game - ".$row->game01." pins' />";
           };
           if ($row->game02 == 0){
             $datasetg02 .= "<set value='?'/>";
           }else{
             $gp += $row->game02; $gt += 1;
             $datasetg02 .= "<set value='".$row->game02."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}2nd game - ".$row->game02." pins' />";
           };
           if ($row->game03 == 0){
             $datasetg03 .= "<set value='?'/>";
           }else{
             $gp += $row->game03; $gt += 1;
             $datasetg03 .= "<set value='".$row->game03."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}3th game - ".$row->game03." pins' />";
           };
           if ($row->game04 == 0){
             $datasetg04 .= "<set value='?'/>";
           }else{
             $gp += $row->game04; $gt += 1;
             $datasetg04 .= "<set value='".$row->game04."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}4th game - ".$row->game04." pins' />";
           };
           if ($row->game05 == 0){
             $datasetg05 .= "<set value='?'/>";
           }else{
             $gp += $row->game05; $gt += 1;
             $datasetg05 .= "<set value='".$row->game05."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}5th game - ".$row->game05." pins' />";
           };
           if ($row->game06 == 0){
             $datasetg06 .= "<set value='?'/>";
           }else{
             $gp += $row->game06; $gt += 1;
             $datasetg06 .= "<set value='".$row->game06."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}6th game - ".$row->game06." pins' />";
           };
       };
   };
   // build XML data

  $strParam  = "<chart caption='".$fullname." - BBSF played games' subCaption='Season 2011-2012' ";
   $strParam .= "yAxisMaxValue= '300' numDivLines='10' maxLabelWidthPercent='5' slantLabels='0' showvalues='0' ";
   $strParam .= "xAxisName='Event date' yAxisName='Pins' showBorder='1' ";
   $strParam .= " >";

   $strParam .= $categories."</categories>";
   $strParam .= $datasetg01."</dataset>";
   $strParam .= $datasetg02."</dataset>";
   $strParam .= $datasetg03."</dataset>";
   $strParam .= $datasetg04."</dataset>";
   $strParam .= $datasetg05."</dataset>";
   $strParam .= $datasetg06."</dataset>";

   $BBSFnew = intval($gp / $gt);
   $strParam .= "<trendlines>";
   $strParam .= "<line startValue='".$BBSFavg."' color='FF0000' displayValue='BBSF Avg.' showOnTop='1' />";
   $strParam .= "<line startValue='".$BBSFnew."' color='00FF00' displayValue='BBSF New' showOnTop='1' />";
   $strParam .= "</trendlines>";

   $strParam .= "</chart>";
   mysql_close($link);

   //Set Proper output content-type
   header('Content-type: text/xml;charset=UTF-8');

   //Just write out the XML data
   //NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
   print  $strParam;

xml result show België with a strange character instead of the ë.

any idea

March 15, 2012

Hi,

Apologize for the inconvenience.

The header should come first before XML data.

So could you please modify the code by putting "header('Content-type: text/xml;charset=UTF-8'); " in the very first line of your PHP code and see if it works?

Ref. Code:

<?php

header ( 'Content-type: text/xml' );

echo pack ( "C3" , 0xef, 0xbb, 0xbf );

// Now write your XML data to output stream

....

?>

Awaiting your response!

Hope this helps.

Edited March 15, 2012 by Sashibhusan

rodiusd · March 16, 2012

hello,

thanks for the addional info.

so added the required header to the start of the php file but without any result.

<?php
   header ( 'Content-type: text/xml' );
   echo pack ( "C3" , 0xef, 0xbb, 0xbf );

   include("includes/DBConn.php");
   include("includes/FusionCharts_Gen.php");
   $link = connectToDB();
   $gp = $gt = 0;

   $uid = (isset($_GET['uid'])) ? $_GET['uid'] : 13; //Default to Rodius Danny
   $scope = (isset($_GET['scope'])) ? $_GET['scope'] : 1; //Default to BBSF

   // Get member information
   $strQuery = "SELECT fullname, BBSFAverage FROM members WHERE id = '".$uid."'";
$result = mysql_query($strQuery) or die(mysql_error());
if ($result) {
       while ($row = mysql_fetch_object($result)) {
           $fullname = $row->fullname;
           $BBSFavg  = $row->BBSFAverage;
       };
   };


$strQuery = "SELECT date_format(g.playdate,'%d %b %Y') as playdate,"
                    ." concat(e.description,' ',ifnull(et.description,' ')) as event,"
                    ." g.game01, g.game02, g.game03, g.game04, g.game05, g.game06, g.game07, g.game08, g.game09, g.game10 "
              ."FROM games g INNER JOIN events e ON g.eventID = e.id LEFT OUTER JOIN events_type et ON e.typeID = et.id "
              ."WHERE (g.memberID = '".$uid."' and scopeID = '".$scope."')"
              ."ORDER BY g.playdate";
$result = mysql_query($strQuery) or die(mysql_error());
if ($result) {
  $categories = "<categories>";
     $datasetg01 = "<dataset seriesName='1st game'>";
     $datasetg02 = "<dataset seriesName='2nd game'>";
     $datasetg03 = "<dataset seriesName='3th game'>";
     $datasetg04 = "<dataset seriesName='4th game'>";
     $datasetg05 = "<dataset seriesName='5th game'>";
     $datasetg06 = "<dataset seriesName='6th game'>";
     $datasetg07 = "<dataset seriesName='7th game'>";
     $datasetg08 = "<dataset seriesName='8th game'>";
     $datasetg09 = "<dataset seriesName='9th game'>";
     $datasetg10 = "<dataset seriesName='10th game'>";
       while ($row = mysql_fetch_object($result)) {
           $categories .= "<category label='".$row->playdate."'/>";
           if ($row->game01 == 0){
             $datasetg01 .= "<set value='?'/>";
           }else{
             $gp += $row->game01; $gt += 1;
             $datasetg01 .= "<set value='".$row->game01."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}1ste game - ".$row->game01." pins' />";
           };
           if ($row->game02 == 0){
             $datasetg02 .= "<set value='?'/>";
           }else{
             $gp += $row->game02; $gt += 1;
             $datasetg02 .= "<set value='".$row->game02."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}2nd game - ".$row->game02." pins' />";
           };
           if ($row->game03 == 0){
             $datasetg03 .= "<set value='?'/>";
           }else{
             $gp += $row->game03; $gt += 1;
             $datasetg03 .= "<set value='".$row->game03."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}3th game - ".$row->game03." pins' />";
           };
           if ($row->game04 == 0){
             $datasetg04 .= "<set value='?'/>";
           }else{
             $gp += $row->game04; $gt += 1;
             $datasetg04 .= "<set value='".$row->game04."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}4th game - ".$row->game04." pins' />";
           };
           if ($row->game05 == 0){
             $datasetg05 .= "<set value='?'/>";
           }else{
             $gp += $row->game05; $gt += 1;
             $datasetg05 .= "<set value='".$row->game05."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}5th game - ".$row->game05." pins' />";
           };
           if ($row->game06 == 0){
             $datasetg06 .= "<set value='?'/>";
           }else{
             $gp += $row->game06; $gt += 1;
             $datasetg06 .= "<set value='".$row->game06."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}6th game - ".$row->game06." pins' />";
           };
           if ($row->game07 == 0){
             $datasetg07 .= "<set value='?'/>";
           }else{
             $gp += $row->game07; $gt += 1;
             $datasetg06 .= "<set value='".$row->game07."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}6th game - ".$row->game07." pins' />";
           };
           if ($row->game08 == 0){
             $datasetg08 .= "<set value='?'/>";
           }else{
             $gp += $row->game08; $gt += 1;
             $datasetg08 .= "<set value='".$row->game08."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}6th game - ".$row->game08." pins' />";
           };
           if ($row->game09 == 0){
             $datasetg09 .= "<set value='?'/>";
           }else{
             $gp += $row->game06; $gt += 1;
             $datasetg09 .= "<set value='".$row->game09."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}6th game - ".$row->game09." pins' />";
           };
           if ($row->game10 == 0){
             $datasetg10 .= "<set value='?'/>";
           }else{
             $gp += $row->game10; $gt += 1;
             $datasetg10 .= "<set value='".$row->game10."' tooltext='".$row->playdate."{br}".clearHMTL($row->event)."{br}6th game - ".$row->game10." pins' />";
           };
       };
   };

   switch ($scope){
       case 1:
           $strParam = "<chart caption='".$fullname." - BBSF played games' subCaption='Season 2011-2012' ";
           break;
       case 2:
           $strParam = "<chart caption='".$fullname." - Club played games' subCaption='Season 2011-2012' ";
           break;
       case 3:
           $strParam = "<chart caption='".$fullname." - Free played games' subCaption='Season 2011-2012' ";
   };
   $strParam .= "yAxisMaxValue= '300' yAxisMinValue='75' numDivLines='10' maxLabelWidthPercent='5' slantLabels='0' showvalues='0' ";
   $strParam .= "labelDisplay='ROTATE' xAxisName='Event date' yAxisName='Pins' showBorder='1' ";
   $strParam .= " >";

   $strParam .= $categories."</categories>";
   $strParam .= $datasetg01."</dataset>";
   $strParam .= $datasetg02."</dataset>";
   $strParam .= $datasetg03."</dataset>";
   $strParam .= $datasetg04."</dataset>";
   $strParam .= $datasetg05."</dataset>";
   $strParam .= $datasetg06."</dataset>";
   $strParam .= $datasetg07."</dataset>";
   $strParam .= $datasetg08."</dataset>";
   $strParam .= $datasetg09."</dataset>";
   $strParam .= $datasetg10."</dataset>";

   $NewAvg = intval($gp / $gt);
   $strParam .= "<trendlines>";
     switch ($scope){
       case 1:
         $strParam .= "<line startValue='".$BBSFavg."' color='00FF00' displayValue='Old Avg.' showOnTop='0' />";
         if($NewAvg > $BBSFavg){
           $strParam .= "<line startValue='".$NewAvg."' color='0000FF' displayValue='New Avg.' showOnTop='0' />";
         }else{
           $strParam .= "<line startValue='".$NewAvg."' color='FF0000' displayValue='New Avg.' showOnTop='0' />";
         };
         break;
       case 2:
         $strParam .= "<line startValue='".$NewAvg."' color='0000FF' displayValue='Year Avg.' showOnTop='0' />";
         break;
       case 3:
         $strParam .= "<line startValue='".$NewAvg."' color='0000FF' displayValue='Year Avg.' showOnTop='0' />";
         break;
   };
   $strParam .= "</trendlines>";

   $strParam .= "</chart>";
   mysql_close($link);
   //var_dump($strParam);
   //Set Proper output content-type
   //header('Content-type: text/xml');

   //Just write out the XML data
   //NOTE THAT THIS PAGE DOESN'T CONTAIN ANY HTML TAG, WHATSOEVER
   print $strParam;

   function clearHMTL($s){
     $s = htmlspecialchars($s,ENT_QUOTES);
     //$s = htmlentities($s);
     //str_replace("ë","e",$s);
     return $s;
   };
?>

Also checked the encoding of th efiles used and they are UTF-8 with BOM

Any idea?

August 28, 2012

Hi,

I am afraid, we are able to query the special characters from MySQL DB and display on the chart successfully, using the above suggested settings.

Could you please create a simple PHP page (with UTF-8 BOM Stamp), and try to echo the special characters, querying from your DB and share the feedback with us?

Awaiting your response !

Special Characters In Tooltip

Recommended Posts

Share this post

Link to post

Share on other sites

Guest Sashibhusan

Share this post

Link to post

Share on other sites

Guest Sashibhusan

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Guest Sashibhusan

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Guest Sashibhusan

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Guest Sashibhusan

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in