![]() ![]() Changing Colors: Our charts can blend seamlessly with your web site by changing colors to match your color scheme. To change the colors used in the chart we will add a few new PARAM tags to our code. Step 1: Open the MyFirstChart.html file again using Notepad. Step 2: Add the following lines of code between the <APPLET> and </APPLET> tags: <PARAM NAME="Color_Background" VALUE="#EEE2B5"> <PARAM NAME="Color_Bar" VALUE="#784AB1"> <PARAM NAME="Color_Text" VALUE="#296240"> <PARAM NAME="Color_Grid" VALUE="#296240"> <PARAM NAME="Color_Active" VALUE="#FFFFFF"> If you look at each line you can see that each PARAM tag has a NAME and a VALUE pair. This is the method that we use to enter data and settings into the chart. The 5 new PARAM tags changes the color according to its NAME (e.g. Color_Background) to the color specified in VALUE (e.g. #EEE2B5). The color is a normal hex color code that is also used for HTML. ![]() The code should now look like this: <HTML><BODY> <!-- Start HanengCharts Code --> <APPLET CODE="HanengCharts.class" ARCHIVE="HanengCharts3.jar" WIDTH=400 HEIGHT=350> <PARAM NAME="LicenseKey" VALUE="DEMO-DTKTG2s3R8xNVzNVFxN"> <PARAM NAME="ChartType" VALUE="3DBar"> <PARAM NAME="Title" VALUE="Units Sold"> <PARAM NAME="Color_Background" VALUE="#EEE2B5"> <PARAM NAME="Color_Bar" VALUE="#784AB1"> <PARAM NAME="Color_Text" VALUE="#296240"> <PARAM NAME="Color_Grid" VALUE="#296240"> <PARAM NAME="Color_Active" VALUE="#FFFFFF"> <PARAM NAME="Text_1" VALUE="Coca Cola"> <PARAM NAME="Text_2" VALUE="Pepsi"> <PARAM NAME="Text_3" VALUE="Sprite"> <PARAM NAME="Text_4" VALUE="Fanta"> <PARAM NAME="Value_1" VALUE="1000"> <PARAM NAME="Value_2" VALUE="750"> <PARAM NAME="Value_3" VALUE="500"> <PARAM NAME="Value_4" VALUE="250"> </APPLET> <!-- End HanengCharts Code --> </BODY></HTML> Step 3: Save the changes and upload the MyFirstChart.html file to your web server overwriting the old file. Step 4: View the MyFirstChart.html on your web server again. It should now look like this: See the change? Now move your mouse over a bar to see the new Color_Active color. |