Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Customizing your Chart > Time for action — adding a logo and link to the cha...

Time for action — adding a logo and link to the chart

Time for action — adding a logo and link to the chart Create a copy of ChartBackground.html and ChartBackground.xml, and rename them to PersonalizedChart.html and PersonalizedChart.xml respectively.Get a logo that you think works well for Harry's SuperMart and place it under CustomizingCharts as logo.jpg. You could also have the logo in GIF/PNG/SWF format. The logo has to reside on the same subdomain as the chart files. In case you can't find a suitable logo, pick up this H sign from http://www.flickr.com/photos/hansdorsch/2759771921/sizes/o/in/photostream/ shared under the Creative Commons license.Add the following attributes to the<chart> element: logoURL='logo.jpg' logoPosition='TL' logoScale='10' logoAlpha='60' logoLink='http://www.harryssupermart.com'.Also add aboutMenuItemLabel='About Harry&apos;s SuperMart' aboutMenuItemLink='http://www.harryssupermart.com'.Open the page in a browser to check out the new personalized chart. Right-click on it to see the about menu item showing About Harry's SuperMart. What just happened? logoURL takes in the relative URL of the logo to be loaded at runtime. Then we specified the position of the logo as TL, that is, top-left corner of the chart. The other positions you can pick from are TR (top-right), BL (bottom-left), BR (bottom-right), and CC (center of the chart). The logo was pretty big in size, so we reduced it using the logoScale attribute. Also, to make sure that the logo did not distract from the chart itself while keeping the branding in place, we reduced its opacity using logoAlpha. We also linked the logo to Harry's SuperMart's website using the logoLink attribute. To customize the about menu item, we just needed to use the aboutMenuItemLabel and aboutMenuItemLink attributes, the first of which sets the label that you see on the menu (and replaces the default About FusionCharts label) and the second one, the link itself.

  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint