Swiftchart      to create your own chart graph
  Home | Examples | Parameters | Products | Contact us | Site map | FAQ Quick links : Get evaluation | Order
  Charts | CSV | JavaScript | Drill down | Popup label | JSP/Servlet Bar Graph | Line Graph

JavaScript control of applet parameters (since version v1_30)

All Swiftchart applet parameters can be controlled by JavaScript. This allows one to manipulate the chart on the client side rather than having to call the server for changing parameters.


The function to set a parameter value is:

setParam(<param_name>,<value>)

Once one or more parameters are set, the chart applet has to be refreshed, using the following function:

repaint()


Example 1 screen shot: change chart type

JavaScript example 1


Example 1: HTML source code

<HTML>
<BODY>
<FORM name="ex1">
Choose a chart type:<BR>
<A HREF="javascript:document.app1.setParam('chart_type','pie3d'); document.app1.repaint()">
Pie chart 3D</A>
 |  <A HREF="javascript:document.app1.setParam('chart_type','line'); document.app1.repaint()">
Line chart</A>
 |  <A HREF="javascript:document.app1.setParam('chart_type','stackedbar3d'); document.app1.repaint()">
stacked bar chart 3D</A>
 |  <A HREF="javascript:document.app1.setParam('chart_type','horbar'); document.app1.repaint()">
Horizontal bar chart</A>
 |  <A HREF="javascript:document.app1.setParam('chart_type','bar3d'); document.app1.repaint()">
Bar chart 3D</A>
<BR>
<BR>
<applet name="app1" code="swiftchart.class" width="500" height=300">
<param name="chart_type" value="bar3d">
<param name="grid_line_hor" value="Y">
<param name="grid_line_hor_color" value="999999">
<param name="grid_line_hor_type" value="0">
<param name="grid_line_ver" value="Y">
<param name="grid_line_ver_color" value="999999">
<param name="grid_line_ver_type" value="0">
<param name="applet_bg" value="FFFFFF">
<param name="chart_bg" value="FFFFFF">
<param name="title_text" value="JavaScript example 1">
<param name="title_font_color" value="000000">
<param name="title_font_size" value="16">
<param name="title_font_style" value="BOLD">
<param name="legend_position" value="right">
<param name="legend_font_color" value="000000">
<param name="legend_bg" value="FFFFFF">
<param name="legend_border" value="FFFFFF">
<param name="legend_font_size" value="12">
<param name="data_value" value="INSIDE">
<param name="data_value_font_color" value="000000">
<param name="data_value_font_size" value="10">
<param name="data_value_pct" value="Y">
<param name="data_value_digits" value="0">
<param name="x_value" value="India,China,Brazil,Indonesia">
<param name="s1_value" value="34,39,43,37">
<param name="s1_label" value="Rice">
<param name="s1_line_marker_type" value="7">
<param name="s2_value" value="20,18,15,22">
<param name="s2_label" value="Potatoes">
<param name="s2_line_marker_type" value="8">
<param name="s3_value" value="51,62,53,46">
<param name="s3_label" value="Wheat">
</APPLET>
</FORM>
</BODY>
</HTML>

Example 2 screen shot: change chart legend and data value position

JavaScript example 2

Example 2: HTML source code

<FORM name="ex2">
<table border=0>
<tr>
<td>
legend position </td>
<td>
<select name="sel1" OnChange=javascript:document.app2.setParam('legend_position', document.ex2.sel1[document.ex2.sel1.selectedIndex].value)>
<option value="right">
Right <option value="left">
Left <option value="top">
Top <option value="bottom">
Bottom </select>
</td>
</tr>
<tr>
<td>
Data value position </td>
<td>
<select name="sel2" OnChange=javascript:document.app2.setParam('data_value', document.ex2.sel2[document.ex2.sel2.selectedIndex].value)>
<option value="inside">
Inside <option value="outside">
Outside <option value="none">
Do not show data values </select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" name="but1" value="Apply changes" OnClick="javascript:document.app2.repaint()">
</td>
</tr>
</table>
<applet name="app2" code="swiftchart.class" width="500" height=300">
<param name="chart_type" value="bar3d">
<param name="grid_line_hor" value="Y">
<param name="grid_line_hor_color" value="999999">
<param name="grid_line_hor_type" value="0">
<param name="grid_line_ver" value="Y">
<param name="grid_line_ver_color" value="999999">
<param name="grid_line_ver_type" value="0">
<param name="applet_bg" value="FFFFFF">
<param name="chart_bg" value="FFFFFF">
<param name="title_text" value="JavaScript example 2">
<param name="title_font_color" value="000000">
<param name="title_font_size" value="16">
<param name="title_font_style" value="BOLD">
<param name="legend_position" value="right">
<param name="legend_font_color" value="000000">
<param name="legend_bg" value="FFFFFF">
<param name="legend_border" value="FFFFFF">
<param name="legend_font_size" value="12">
<param name="data_value" value="INSIDE">
<param name="data_value_font_color" value="000000">
<param name="data_value_font_size" value="10">
<param name="x_value" value="India,China,Brazil,Indonesia">
<param name="s1_value" value="34,39,43,37">
<param name="s1_label" value="Rice">
<param name="s1_line_marker_type" value="7">
<param name="s2_value" value="20,18,12,22">
<param name="s2_label" value="Potatoes">
<param name="s2_line_marker_type" value="8">
<param name="s3_value" value="51,62,53,46">
<param name="s3_label" value="Wheat">
</APPLET>
</FORM>

Example 3 screen shot: change chart serie values

JavaScript example 3

Example 3: HTML source code

<HTML>
<BODY>
<FORM name="ex3">
Choose a year:<BR>
<A HREF="javascript:document.app3.setParam('s1_value','15,18,19,14,13,21,22,28,26,29,22,18'); document.app3.repaint()">
1999</A>
 |  <A HREF="javascript:document.app3.setParam('s1_value','45,36,35,48,46,37,29,38,46,51,55,43'); document.app3.repaint()">
2000</A>
 |  <A HREF="javascript:document.app3.setParam('s1_value','47,56,55,68,66,57,59,48,56,64,69,76'); document.app3.repaint()">
2001</A>
 |  <A HREF="javascript:document.app3.setParam('s1_value','65,76,75,78,86,77,69,68,66,71,75,83'); document.app3.repaint()">
2002</A>
<BR>
<BR>
<applet name="app3" code="swiftchart.class" width="500" height=300">
<param name="chart_type" value="line">
<param name="y_min" value="0">
<param name="y_max" value="100">
<param name="y_unit" value="10">
<param name="grid_line_hor" value="Y">
<param name="grid_line_hor_color" value="999999">
<param name="grid_line_hor_type" value="0">
<param name="grid_line_ver" value="Y">
<param name="grid_line_ver_color" value="999999">
<param name="grid_line_ver_type" value="0">
<param name="applet_bg" value="FFFFFF">
<param name="chart_bg" value="FFFFFF">
<param name="title_text" value="JavaScript example 3">
<param name="title_font_color" value="000000">
<param name="title_font_size" value="16">
<param name="title_font_style" value="BOLD">
<param name="legend_position" value="none">
<param name="legend_font_size" value="12">
<param name="data_value" value="OUTSIDE">
<param name="data_value_font_color" value="990000">
<param name="data_value_font_size" value="12">
<param name="data_value_font_style" value="bold">
<param name="data_value_pct" value="Y">
<param name="data_value_digits" value="0">
<param name="x_value" value="Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec">
<param name="s1_value" value="65,76,75,78,86,77,69,68,66,71,75,83">
<param name="s1_line_marker_type" value="8">
</APPLET>
</FORM>
</BODY>
</HTML>