[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpgrid
/
zpgrid
/
demo
/
[
Home
]
File: chart.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" Click the 'Refresh Chart' button after any filtering operation to see the updated chart. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Grid Widget - Charts Integration Example</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type="text/javascript" src="../src/zpgrid.js"></script> <script type="text/javascript" src="demo.js"></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> <link href="../themes/layout.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../../zpslider/src/slider.js"></script> <script type="text/javascript" src="chart.js"></script> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Charts Integration Example</div> <div class='leftCol'> <h3> Controls</h3> <form onsubmit="return filter(this)"><br/> <fieldset> Filter Rate Period<div id="filterOutRate"></div> </fieldset> <fieldset> <p>Range of Dates</p> <center> <div id="rangeOfDatesScale"></div> <div id="rangeOfDates" style="white-space: nowrap"></div> </center> </fieldset> <fieldset> <p>Range of Minutes</p> <center> <div id="rangeOfMinutesScale"></div> <div id="rangeOfMinutes"></div> </center> </fieldset> <fieldset> Filter Minutes<div id="filterOutMinutes"></div> </fieldset> <fieldset> <p>Find Value</p> <p><input type="checkbox" name="isRegExp"/> Use regular expression</p> <p>Search: <input type="text" name="textFilter" size="6"/> <input type="button" name="buttonText" value="Go" onclick="filter(this.form)"/></p> </fieldset> <fieldset> <p>Reset all filters</p> <input type="button" value="Reset" onclick="resetControls(this.form)"/></p> </fieldset> </form> </div> <div id="2"></div> <div id="1"></div> <div id="3"></div> <div id="4"></div> <div id="5"></div> <div id="scroll" style="margin-left : 300px;"> </div> <div class='mainCol'> This example shows how to integrate a chart into a grid. <div class='zpCalDemoText'> <ul> <li>Click the "Refresh Chart" button after any filtering operation to see the updated chart.</li> </ul> </div> <div id="chart"> </div> <div id="gridContainer"> <table id="gridSource"> <tbody> <tr> <td width="35" class="zpGridTypeInt">Item</td> <td width="60" class="zpGridTypeDate">Date</td> <td width="46" class="zpGridTypeTime">Time</td> <td width="70">Rate Period</td> <td width="87">Phone Number</td> <td width="47" class="zpGridTypeInt">Minutes</td> <td width="80" class="zpGridTypeFloat">Total Charges</td> </tr> <tr> <td>1</td> <td>11/08/2006</td> <td>09:30AM</td> <td>P</td> <td>(911)504-7207</td> <td>1</td> <td>.50</td> </tr> <tr> <td>2</td> <td>11/08/2006</td> <td>10:39AM</td> <td>P</td> <td>(910)525-7522</td> <td>3</td> <td>1.50</td> </tr> <tr> <td>3</td> <td>11/08/2006</td> <td>12:11PM</td> <td>P</td> <td>(981)483-3140</td> <td>5</td> <td>.70</td> </tr> <tr> <td>4</td> <td>11/08/2006</td> <td>03:41PM</td> <td>P</td> <td>(910)504-8168</td> <td>2</td> <td>.20</td> </tr> <tr> <td>5</td> <td>11/09/2006</td> <td>09:50AM</td> <td>P</td> <td>(910)642-8345</td> <td>1</td> <td>.10</td> </tr> <tr> <td>6</td> <td>11/09/2006</td> <td>02:49PM</td> <td>P</td> <td>(000)000-0086</td> <td>1</td> <td>1.23</td> </tr> <tr> <td>7</td> <td>11/09/2006</td> <td>03:05PM</td> <td>P</td> <td>(910)504-8168</td> <td>6</td> <td>.40</td> </tr> <tr> <td>8</td> <td>11/09/2006</td> <td>03:53PM</td> <td>P</td> <td>(910)873-0894</td> <td>5</td> <td>2.00</td> </tr> <tr> <td>9</td> <td>11/10/2006</td> <td>11:35AM</td> <td>P</td> <td>(910)525-7522</td> <td>5</td> <td>1.00</td> </tr> <tr> <td>10</td> <td>11/10/2006</td> <td>09:41PM</td> <td>O</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>11</td> <td>11/10/2006</td> <td>09:42PM</td> <td>O</td> <td>(910)292-6349</td> <td>2</td> <td>.10</td> </tr> <tr> <td>12</td> <td>11/11/2006</td> <td>11:14AM</td> <td>P</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>13</td> <td>11/12/2006</td> <td>04:24PM</td> <td>W</td> <td>(926)485-8854</td> <td>1</td> <td>.10</td> </tr> <tr> <td>14</td> <td>11/12/2006</td> <td>04:36PM</td> <td>W</td> <td>(926)485-8854</td> <td>1</td> <td>.10</td> </tr> <tr> <td>15</td> <td>11/13/2006</td> <td>02:46PM</td> <td>W</td> <td>(910)776-3005</td> <td>1</td> <td>.10</td> </tr> <tr> <td>16</td> <td>11/14/2006</td> <td>10:45AM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>17</td> <td>11/14/2006</td> <td>11:27AM</td> <td>P</td> <td>(910)504-2167</td> <td>1</td> <td>.10</td> </tr> <tr> <td>18</td> <td>11/14/2006</td> <td>01:25PM</td> <td>P</td> <td>(910)525-7522</td> <td>4</td> <td>.10</td> </tr> <tr> <td>19</td> <td>11/14/2006</td> <td>06:41PM</td> <td>P</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>20</td> <td>11/15/2006</td> <td>01:19PM</td> <td>P</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>21</td> <td>11/15/2006</td> <td>01:26PM</td> <td>P</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>22</td> <td>11/15/2006</td> <td>01:27PM</td> <td>P</td> <td>(910)717-4984</td> <td>3</td> <td>.10</td> </tr> <tr> <td>23</td> <td>11/15/2006</td> <td>03:21PM</td> <td>P</td> <td>(910)504-8168</td> <td>2</td> <td>.10</td> </tr> <tr> <td>24</td> <td>11/15/2006</td> <td>04:52PM</td> <td>P</td> <td>(910)525-7522</td> <td>3</td> <td>.10</td> </tr> <tr> <td>25</td> <td>11/15/2006</td> <td>05:54PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>26</td> <td>11/15/2006</td> <td>05:55PM</td> <td>P</td> <td>(910)504-2167</td> <td>1</td> <td>.10</td> </tr> <tr> <td>27</td> <td>11/15/2006</td> <td>05:58PM</td> <td>P</td> <td>(910)527-0883</td> <td>1</td> <td>.10</td> </tr> <tr> <td>28</td> <td>11/15/2006</td> <td>05:59PM</td> <td>P</td> <td>(910)710-1325</td> <td>1</td> <td>.10</td> </tr> <tr> <td>29</td> <td>11/15/2006</td> <td>06:00PM</td> <td>P</td> <td>(910)710-1325</td> <td>2</td> <td>.10</td> </tr> <tr> <td>30</td> <td>11/16/2006</td> <td>09:41AM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>31</td> <td>11/16/2006</td> <td>10:44AM</td> <td>P</td> <td>(866)522-7941</td> <td>1</td> <td>.10</td> </tr> <tr> <td>32</td> <td>11/16/2006</td> <td>04:08PM</td> <td>P</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>33</td> <td>11/16/2006</td> <td>06:49PM</td> <td>P</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>34</td> <td>11/17/2006</td> <td>02:42PM</td> <td>P</td> <td>(910)525-7522</td> <td>9</td> <td>.10</td> </tr> <tr> <td>35</td> <td>11/17/2006</td> <td>02:55PM</td> <td>P</td> <td>(910)525-7522</td> <td>3</td> <td>.10</td> </tr> <tr> <td>36</td> <td>11/17/2006</td> <td>03:04PM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>37</td> <td>11/17/2006</td> <td>03:17PM</td> <td>P</td> <td>(910)504-8168</td> <td>1</td> <td>.10</td> </tr> <tr> <td>38</td> <td>11/17/2006</td> <td>05:45PM</td> <td>P</td> <td>(910)776-3005</td> <td>1</td> <td>.10</td> </tr> <tr> <td>39</td> <td>11/17/2006</td> <td>05:56PM</td> <td>P</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>40</td> <td>11/18/2006</td> <td>09:03AM</td> <td>P</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>41</td> <td>11/18/2006</td> <td>09:15AM</td> <td>P</td> <td>(973)785-3080</td> <td>1</td> <td>.10</td> </tr> <tr> <td>42</td> <td>11/18/2006</td> <td>09:24AM</td> <td>P</td> <td>(913)960-1457</td> <td>1</td> <td>.10</td> </tr> <tr> <td>43</td> <td>11/18/2006</td> <td>11:45AM</td> <td>P</td> <td>(925)791-2200</td> <td>9</td> <td>.10</td> </tr> <tr> <td>44</td> <td>11/18/2006</td> <td>12:12PM</td> <td>P</td> <td>(925)791-2200</td> <td>1</td> <td>.10</td> </tr> <tr> <td>45</td> <td>11/18/2006</td> <td>02:40PM</td> <td>P</td> <td>(910)717-4984</td> <td>1</td> <td>.10</td> </tr> <tr> <td>46</td> <td>11/18/2006</td> <td>03:01PM</td> <td>P</td> <td>(866)522-7941</td> <td>5</td> <td>.10</td> </tr> <tr> <td>47</td> <td>11/19/2006</td> <td>04:14PM</td> <td>W</td> <td>(910)504-7207</td> <td>3</td> <td>.10</td> </tr> <tr> <td>48</td> <td>11/20/2006</td> <td>11:31AM</td> <td>W</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>49</td> <td>11/20/2006</td> <td>11:32AM</td> <td>W</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>50</td> <td>11/20/2006</td> <td>11:35AM</td> <td>W</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>51</td> <td>11/20/2006</td> <td>11:50AM</td> <td>W</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>52</td> <td>11/20/2006</td> <td>12:11PM</td> <td>W</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>53</td> <td>11/20/2006</td> <td>12:53PM</td> <td>W</td> <td>(910)504-8168</td> <td>2</td> <td>.10</td> </tr> <tr> <td>54</td> <td>11/20/2006</td> <td>05:49PM</td> <td>W</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>55</td> <td>11/20/2006</td> <td>05:53PM</td> <td>W</td> <td>(910)504-8168</td> <td>1</td> <td>.10</td> </tr> <tr> <td>56</td> <td>11/21/2006</td> <td>12:20PM</td> <td>P</td> <td>(910)642-1714</td> <td>1</td> <td>.10</td> </tr> <tr> <td>57</td> <td>11/21/2006</td> <td>01:43PM</td> <td>P</td> <td>(910)717-4984</td> <td>2</td> <td>.10</td> </tr> <tr> <td>58</td> <td>11/21/2006</td> <td>05:46PM</td> <td>P</td> <td>(910)559-6688</td> <td>1</td> <td>.10</td> </tr> <tr> <td>59</td> <td>11/22/2006</td> <td>09:49AM</td> <td>P</td> <td>(000)000-0086</td> <td>2</td> <td>.10</td> </tr> <tr> <td>60</td> <td>11/23/2006</td> <td>12:58PM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>61</td> <td>11/23/2006</td> <td>02:02PM</td> <td>P</td> <td>(866)522-7941</td> <td>1</td> <td>.10</td> </tr> <tr> <td>62</td> <td>11/23/2006</td> <td>02:22PM</td> <td>P</td> <td>(911)852-6217</td> <td>1</td> <td>.10</td> </tr> <tr> <td>63</td> <td>11/23/2006</td> <td>02:43PM</td> <td>P</td> <td>(910)776-3005</td> <td>2</td> <td>.10</td> </tr> <tr> <td>64</td> <td>11/23/2006</td> <td>02:57PM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>65</td> <td>11/23/2006</td> <td>03:36PM</td> <td>P</td> <td>(866)522-7941</td> <td>3</td> <td>.10</td> </tr> <tr> <td>66</td> <td>11/23/2006</td> <td>03:45PM</td> <td>P</td> <td>(866)522-7941</td> <td>9</td> <td>.10</td> </tr> <tr> <td>67</td> <td>11/25/2006</td> <td>02:12PM</td> <td>P</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>68</td> <td>11/28/2006</td> <td>12:01PM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>69</td> <td>11/28/2006</td> <td>03:26PM</td> <td>P</td> <td>(866)522-7941</td> <td>5</td> <td>.10</td> </tr> <tr> <td>70</td> <td>11/28/2006</td> <td>05:05PM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>71</td> <td>11/28/2006</td> <td>06:16PM</td> <td>P</td> <td>(910)504-8168</td> <td>2</td> <td>.10</td> </tr> <tr> <td>72</td> <td>11/29/2006</td> <td>10:30AM</td> <td>P</td> <td>(911)374-9561</td> <td>5</td> <td>.10</td> </tr> <tr> <td>73</td> <td>11/29/2006</td> <td>10:42AM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>74</td> <td>11/29/2006</td> <td>04:32PM</td> <td>P</td> <td>(910)642-8345</td> <td>1</td> <td>.10</td> </tr> <tr> <td>75</td> <td>11/30/2006</td> <td>12:00PM</td> <td>P</td> <td>(930)426-3661</td> <td>1</td> <td>.10</td> </tr> <tr> <td>76</td> <td>11/30/2006</td> <td>12:07PM</td> <td>P</td> <td>(930)426-3661</td> <td>3</td> <td>.10</td> </tr> <tr> <td>77</td> <td>11/30/2006</td> <td>12:12PM</td> <td>P</td> <td>(930)587-0557</td> <td>2</td> <td>.10</td> </tr> <tr> <td>78</td> <td>11/30/2006</td> <td>02:10PM</td> <td>P</td> <td>(930)386-2557</td> <td>4</td> <td>.10</td> </tr> <tr> <td>79</td> <td>11/30/2006</td> <td>03:24PM</td> <td>P</td> <td>(910)525-7522</td> <td>2</td> <td>.10</td> </tr> <tr> <td>80</td> <td>12/01/2006</td> <td>09:52AM</td> <td>P</td> <td>(910)525-7522</td> <td>4</td> <td>.10</td> </tr> <tr> <td>81</td> <td>12/01/2006</td> <td>09:57AM</td> <td>P</td> <td>(866)522-7941</td> <td>4</td> <td>.10</td> </tr> <tr> <td>82</td> <td>12/01/2006</td> <td>11:59AM</td> <td>P</td> <td>(910)528-6402</td> <td>1</td> <td>.10</td> </tr> <tr> <td>83</td> <td>12/01/2006</td> <td>12:00PM</td> <td>P</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>84</td> <td>12/01/2006</td> <td>12:03PM</td> <td>P</td> <td>(910)528-6402</td> <td>1</td> <td>.10</td> </tr> <tr> <td>85</td> <td>12/01/2006</td> <td>12:51PM</td> <td>P</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>86</td> <td>12/01/2006</td> <td>03:11PM</td> <td>P</td> <td>(866)522-7941</td> <td>2</td> <td>.10</td> </tr> <tr> <td>87</td> <td>12/01/2006</td> <td>05:08PM</td> <td>P</td> <td>(866)522-7941</td> <td>2</td> <td>.10</td> </tr> <tr> <td>88</td> <td>12/02/2006</td> <td>09:49AM</td> <td>P</td> <td>(910)504-7204</td> <td>1</td> <td>.10</td> </tr> <tr> <td>89</td> <td>12/02/2006</td> <td>09:49AM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>90</td> <td>12/02/2006</td> <td>10:15AM</td> <td>P</td> <td>(910)525-7522</td> <td>3</td> <td>.10</td> </tr> <tr> <td>91</td> <td>12/02/2006</td> <td>02:02PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>92</td> <td>12/02/2006</td> <td>02:19PM</td> <td>P</td> <td>(910)504-2167</td> <td>1</td> <td>.10</td> </tr> <tr> <td>93</td> <td>12/02/2006</td> <td>03:43PM</td> <td>P</td> <td>(934)846-5561</td> <td>4</td> <td>.10</td> </tr> <tr> <td>94</td> <td>12/02/2006</td> <td>04:46PM</td> <td>P</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>95</td> <td>12/02/2006</td> <td>05:06PM</td> <td>P</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>96</td> <td>12/02/2006</td> <td>05:07PM</td> <td>P</td> <td>(910)710-1325</td> <td>3</td> <td>.10</td> </tr> <tr> <td>97</td> <td>12/02/2006</td> <td>06:04PM</td> <td>P</td> <td>(910)710-1325</td> <td>2</td> <td>.10</td> </tr> <tr> <td>98</td> <td>12/02/2006</td> <td>06:06PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>99</td> <td>12/02/2006</td> <td>06:10PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>100</td> <td>12/02/2006</td> <td>06:16PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>101</td> <td>12/02/2006</td> <td>06:30PM</td> <td>P</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>102</td> <td>12/02/2006</td> <td>06:32PM</td> <td>P</td> <td>(910)220-0883</td> <td>2</td> <td>.10</td> </tr> <tr> <td>103</td> <td>12/02/2006</td> <td>06:37PM</td> <td>P</td> <td>(910)220-0883</td> <td>1</td> <td>.10</td> </tr> <tr> <td>104</td> <td>12/02/2006</td> <td>06:40PM</td> <td>P</td> <td>(930)400-2929</td> <td>2</td> <td>.10</td> </tr> <tr> <td>105</td> <td>12/02/2006</td> <td>06:45PM</td> <td>P</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>106</td> <td>12/02/2006</td> <td>07:10PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>107</td> <td>12/02/2006</td> <td>07:15PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>108</td> <td>12/02/2006</td> <td>07:18PM</td> <td>P</td> <td>(930)400-2929</td> <td>1</td> <td>.10</td> </tr> <tr> <td>109</td> <td>12/02/2006</td> <td>07:20PM</td> <td>P</td> <td>(910)220-0883</td> <td>2</td> <td>.10</td> </tr> <tr> <td>110</td> <td>12/02/2006</td> <td>07:24PM</td> <td>P</td> <td>(930)400-2929</td> <td>3</td> <td>.10</td> </tr> <tr> <td>111</td> <td>12/02/2006</td> <td>07:40PM</td> <td>P</td> <td>(930)400-2929</td> <td>1</td> <td>.10</td> </tr> <tr> <td>112</td> <td>12/02/2006</td> <td>07:47PM</td> <td>P</td> <td>(930)400-2929</td> <td>2</td> <td>.10</td> </tr> <tr> <td>113</td> <td>12/03/2006</td> <td>09:12AM</td> <td>W</td> <td>(910)710-1325</td> <td>3</td> <td>.10</td> </tr> <tr> <td>114</td> <td>12/03/2006</td> <td>09:29AM</td> <td>W</td> <td>(930)400-2929</td> <td>1</td> <td>.10</td> </tr> <tr> <td>115</td> <td>12/03/2006</td> <td>12:25PM</td> <td>W</td> <td>(910)504-2167</td> <td>1</td> <td>.10</td> </tr> <tr> <td>116</td> <td>12/03/2006</td> <td>01:06PM</td> <td>W</td> <td>(910)504-2167</td> <td>1</td> <td>.10</td> </tr> <tr> <td>117</td> <td>12/03/2006</td> <td>01:33PM</td> <td>W</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>118</td> <td>12/03/2006</td> <td>04:06PM</td> <td>W</td> <td>(930)400-2929</td> <td>2</td> <td>.10</td> </tr> <tr> <td>119</td> <td>12/03/2006</td> <td>04:08PM</td> <td>W</td> <td>(910)710-1325</td> <td>1</td> <td>.10</td> </tr> <tr> <td>120</td> <td>12/03/2006</td> <td>04:11PM</td> <td>W</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>121</td> <td>12/03/2006</td> <td>04:21PM</td> <td>W</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>122</td> <td>12/03/2006</td> <td>04:22PM</td> <td>W</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>123</td> <td>12/03/2006</td> <td>04:22PM</td> <td>W</td> <td>(930)386-2628</td> <td>1</td> <td>.10</td> </tr> <tr> <td>124</td> <td>12/03/2006</td> <td>04:23PM</td> <td>W</td> <td>(930)386-2628</td> <td>1</td> <td>.10</td> </tr> <tr> <td>125</td> <td>12/03/2006</td> <td>04:55PM</td> <td>W</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>126</td> <td>12/03/2006</td> <td>05:06PM</td> <td>W</td> <td>(930)386-2628</td> <td>2</td> <td>.10</td> </tr> <tr> <td>127</td> <td>12/03/2006</td> <td>06:15PM</td> <td>W</td> <td>(930)386-2628</td> <td>2</td> <td>.10</td> </tr> <tr> <td>128</td> <td>12/03/2006</td> <td>06:21PM</td> <td>W</td> <td>(930)386-2628</td> <td>3</td> <td>.10</td> </tr> <tr> <td>129</td> <td>12/04/2006</td> <td>11:36AM</td> <td>W</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>130</td> <td>12/04/2006</td> <td>01:20PM</td> <td>W</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>131</td> <td>12/05/2006</td> <td>12:10PM</td> <td>P</td> <td>(866)522-7941</td> <td>4</td> <td>.10</td> </tr> <tr> <td>132</td> <td>12/05/2006</td> <td>12:47PM</td> <td>P</td> <td>(910)504-7207</td> <td>1</td> <td>.10</td> </tr> <tr> <td>133</td> <td>12/05/2006</td> <td>02:09PM</td> <td>P</td> <td>(910)525-7522</td> <td>5</td> <td>.10</td> </tr> <tr> <td>134</td> <td>12/05/2006</td> <td>02:11PM</td> <td>P</td> <td>(910)504-7207</td> <td>2</td> <td>.10</td> </tr> <tr> <td>135</td> <td>12/06/2006</td> <td>04:45PM</td> <td>P</td> <td>(910)504-8168</td> <td>6</td> <td>.10</td> </tr> <tr> <td>136</td> <td>12/06/2006</td> <td>06:48PM</td> <td>P</td> <td>(000)000-0086</td> <td>1</td> <td>.10</td> </tr> <tr> <td>137</td> <td>12/06/2006</td> <td>06:49PM</td> <td>P</td> <td>(910)504-8168</td> <td>2</td> <td>.10</td> </tr> <tr> <td>138</td> <td>12/06/2006</td> <td>06:50PM</td> <td>P</td> <td>(910)525-7522</td> <td>1</td> <td>.10</td> </tr> <tr> <td>139</td> <td>12/07/2006</td> <td>05:53PM</td> <td>P</td> <td>(910)527-4777</td> <td>2</td> <td>.10</td> </tr> </tbody> </table> </div> </div> <script type="text/javascript"> /* * Initialize the grid */ var objGrid = new Zapatec.Grid({ // Use HTML table with id "gridSource" as grid data source source: 'gridSource', sourceType: 'html', // Use "winxp" theme theme: 'winxp', // Put the grid into element with id "gridContainer" container: 'gridContainer', // Call onRowClick function when row is clicked callbackRowOnClick: onRowClick, // Initially sort ascending by first column sortColumn: 0, // Display 10 rows per page rowsPerPage: 10, // Display filter out forms filterOut: [ // Filter Rate Period { // Use column number 3 (first column number is 0) column: 3, // Put checkboxes into element with id "filterOutRate" container: 'filterOutRate', // This will press "Filter" button for you if you changed range of items // or minutes and forgot to press it onclick: 'filter(this.form)' }, // Filter Minutes { // Use column number 5 (first column number is 0) column: 5, // Sort descending sortDesc: true, // Put checkboxes into element with id "filterOutMinutes" container: 'filterOutMinutes', // This will press "Filter" button for you if you changed range of items // or minutes and forgot to press it onclick: 'filter(this.form)' } ], // Event listeners eventListeners: { 'gridInitialized': onGridInit, 'gridModified': onGridInit, 'gridMovedColumn': onGridMovedColumn } }); /* * Draws chart. */ function drawChart(strXML) { var arrObject = []; arrObject.push('<OBJECT id="Charts_1" \ classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" \ codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" \ WIDTH="450" HEIGHT="300" id="FC_2_3_Column3D" ALIGN="">'); arrObject.push( '<PARAM NAME=movie VALUE="../fusioncharts/FC_2_3_Column3D.swf">'); arrObject.push( '<PARAM NAME=FlashVars VALUE="&chartWidth=450&chartHeight=300&dataXML='); arrObject.push(strXML); arrObject.push('">'); arrObject.push('<PARAM NAME=quality VALUE=high>'); arrObject.push('<PARAM NAME=bgcolor VALUE=#FFFFFF>'); arrObject.push('<EMBED NAME="Charts_1" \ FlashVars="&chartWidth=450&chartHeight=300&dataXML='); arrObject.push(strXML); arrObject.push('" src="../fusioncharts/FC_2_3_Column3D.swf" \ quality=high bgcolor=#FFFFFF WIDTH="450" HEIGHT="300" \ NAME="FC_2_3_Column3D" ALIGN="" TYPE="application/x-shockwave-flash" \ PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>'); arrObject.push('</OBJECT>'); arrObject.push('<form><input type="button" value="Refresh Chart" \ onclick="totalChargesChart()" /></form><br />'); document.getElementById('chart').innerHTML = arrObject.join(''); } /* * Forms XML source for chart and calls drawChart function. */ function totalChargesChart() { var numChargesO = 0; var numChargesP = 0; var numChargesW = 0; var arrFilteredRows = objGrid.getFilteredRows(); for (var iRow = 0; iRow < arrFilteredRows.length; iRow++) { var objRow = arrFilteredRows[iRow]; var strRatePeriod = objGrid.getCellValueString(objGrid.getCellByRow(objRow, 3)); var numCharges = objGrid.getCellValueCompare(objGrid.getCellByRow(objRow, 6)); switch (strRatePeriod) { case 'O': numChargesO += numCharges; break; case 'P': numChargesP += numCharges; break; case 'W': numChargesW += numCharges; break; } } var arrXml = []; if (numChargesO || numChargesP || numChargesW) { arrXml.push("<graph xaxisname='Rate Period' yaxisname='Total Charges' \ caption='Total Charges' subCaption='' numberPrefix='$' \ decimalPrecision='2'>"); arrXml.push("<set name='O' value='"); arrXml.push(numChargesO); arrXml.push("' color='0099FF'/>"); arrXml.push("<set name='P' value='"); arrXml.push(numChargesP); arrXml.push("' color='FF9933'/>"); arrXml.push("<set name='W' value='"); arrXml.push(numChargesW); arrXml.push("' color='FF66CC'/>"); arrXml.push("</graph>"); } drawChart(arrXml.join('')); } /* * Check if Flash 6 or higher is available and SWF file exists and call * totalChargesChart function */ checkFlash('FC_2_3_Column3D.swf', totalChargesChart); totalChargesChart(); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>