anchor.diff:                  }
               }
           };
  -
  -	for (var p in data.perspectiveItems) {
  -		for (var o in data.perspectiveItems[p].objectives) {
  -			var objectiveItem = data.perspectiveItems[p].objectives[o];
  -			for (var k in objectiveItem.kpis) {
  -				
  -				var kpi = objectiveItem.kpis[k];
  -				var divChartId = "BSC_PROG003D0009Q_kpi_container_" + kpi.id;
  -				
  -				var maxVal = kpi.target;
  -				if (kpi.score > maxVal) {
  -					maxVal = kpi.score;
  -				}
  -				maxVal = parseInt(maxVal+'', 10);
  -				
  -				BSC_PROG003D0009Q_setSpeedGaugeChart(gaugeOptions, divChartId, kpi.name, maxVal, kpi.score);				
  -				
  -			}
  -		}
  -	}
  -	
  -	
  -}
  -
  -
  -function BSC_PROG003D0009Q_setSpeedGaugeChart(gaugeOptions, chartId, textTitle, maxVal, score) {
  -    // The speed gauge
  -    $( '#'+chartId ).highcharts(Highcharts.merge(gaugeOptions, {
  -        yAxis: {
  -            min: 0,
  -            max: maxVal,
  -            title: {
  -                text: textTitle
  -            }
  -        },
  -
  -        credits: {
  -            enabled: false
  -        },
  -
  -        series: [{
  -            name: textTitle,
  -            data: [ parseFloat( BSC_PROG003D0009Q_parseScore(score) ) ],
  -            dataLabels: {
  -                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
  -                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
  -                       '<span style="font-size:12px;color:silver">Score</span></div>'
  -            },
  -            tooltip: {
  -                valueSuffix: ' Score'
  -            }
  -        }]
  -
  -    }));		
  -}
  -
  -
  -function BSC_PROG003D0009Q_showChartForKpiDateRange(data) {
  -	
  -	if ( null == data.categories || data.categories.length < 2 ) {
  +    
  +    for (var p in vision.perspectives) {
  +    	var perspective = vision.perspectives[p];
  +    	
  +    	for (var o in perspective.objectives) {
  +    		var objective = perspective.objectives[o];
  +    		
  +    		var divChartId = "BSC_PROG003D0009Q_objectives_container_" + objective.objId;
  +    		
  +    		var maxVal = objective.target;
  +    		if (objective.score > maxVal) {
  +    			maxVal = objective.score;
  +    		}
  +    		
  +    	    $( '#'+divChartId ).highcharts(Highcharts.merge(gaugeOptions, {
  +    	        yAxis: {
  +    	            min: 0,
  +    	            max: maxVal,
  +    	            title: {
  +    	                text: objective.name
  +    	            }
  +    	        },
  +
  +    	        credits: {
  +    	            enabled: false
  +    	        },
  +
  +    	        series: [{
  +    	            name: objective.name,
  +    	            data: [ parseFloat( BSC_PROG003D0009Q_parseScore(objective.score) ) ],
  +    	            dataLabels: {
  +    	                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
  +    	                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
  +    	                       '<span style="font-size:12px;color:silver">Score</span></div>'
  +    	            },
  +    	            tooltip: {
  +    	                valueSuffix: ' Score'
  +    	            }
  +    	        }]
  +
  +    	    }));
  +    	    
  +    		
  +    	}
  +	    
  +    }  
  +	
  +	
  +}
  +
  +
  +function BSC_PROG003D0009Q_showChartForObjectivesDateRange(data) {
  +	
  +	if ( null == data.objectiveCategories || data.objectiveCategories.length < 2 ) {
   		return;
   	}
   	
  -	dojo.byId("BSC_PROG003D0009Q_kpi_daterange_alert_title").innerHTML = '<span class="isa_info"><b>Trend</b></span>';
  -	
  -    $('#BSC_PROG003D0009Q_kpi_daterange_container').highcharts({
  +    $('#BSC_PROG003D0009Q_objectives_daterange_container').highcharts({
           title: {
  -            text: 'Trend',
  +            text: data.objectiveTitle + ' trend',
               x: -20 //center
           },
           subtitle: {
  -            text: 'KPI Score',
  +            text: 'Frequency : ' + data.displayFrequency + '  date range : ' + data.displayDateRange1 + ' ~ ' + data.displayDateRange2,
               x: -20
           },
           xAxis: {
  -            categories: data.categories
  +            categories: data.objectiveCategories
           },
           yAxis: {
               title: {
  
positive.code: 											showLabel:false,
  											onClick:function(){  
  												BSC_PROG003D0009Q_query();
  											}"><s:property value="getText('BSC_PROG003D0006Q_btnQuery')"/></button>										
  									
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_visionOid"></gs:inputfieldNoticeMsgLabel>
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_frequency"></gs:inputfieldNoticeMsgLabel>
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_startYearDate"></gs:inputfieldNoticeMsgLabel>
  									<!-- 
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_endYearDate"></gs:inputfieldNoticeMsgLabel>
  									-->
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_startDate"></gs:inputfieldNoticeMsgLabel>
  									<!--  
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_endDate"></gs:inputfieldNoticeMsgLabel>
  									-->
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_measureDataOrganizationOid"></gs:inputfieldNoticeMsgLabel>
  									<gs:inputfieldNoticeMsgLabel id="BSC_PROG003D0009Q_measureDataEmployeeOid"></gs:inputfieldNoticeMsgLabel>
  											
  								</td>
  							</tr>
  							<tr valign="top">
  								<td width="100%" align="left" height="25px">	
  								
  									<s:property value="getText('BSC_PROG003D0006Q_visionOid')"/>
  									<gs:select name="BSC_PROG003D0009Q_visionOid" dataSource="visionMap" id="BSC_PROG003D0009Q_visionOid"></gs:select>
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_visionOid'">
  					    				Select vision.
  									</div>  									
  						    		&nbsp;		    			
  					    																	
  									<s:property value="getText('BSC_PROG003D0006Q_frequency')"/>
  									<gs:select name="BSC_PROG003D0009Q_frequency" dataSource="frequencyMap" id="BSC_PROG003D0009Q_frequency" value="6" width="140" onChange="BSC_PROG003D0009Q_setFrequencyValue();"></gs:select>
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_frequency'">
  					    				Select frequency.
  									</div> 										
  									&nbsp;
  																	
  								</td>											
  							</tr>	
  							<tr valign="top">
  								<td width="100%" align="left" height="25px">
  								
  							    	<s:property value="getText('BSC_PROG003D0006Q_startYearDate')"/>
  							    	<input id="BSC_PROG003D0009Q_startYearDate" name="BSC_PROG003D0009Q_startYearDate" data-dojo-type="dojox.form.YearTextBox" 
  							    		maxlength="4"  type="text" data-dojo-props='style:"width: 80px;" ' />
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_startYearDate'">
  					    				Select start year.
  									</div>									    				
  							    	&nbsp;
  							    	<s:property value="getText('BSC_PROG003D0006Q_endYearDate')"/>
  							    	<input id="BSC_PROG003D0009Q_endYearDate" name="BSC_PROG003D0009Q_endYearDate" data-dojo-type="dojox.form.YearTextBox" 
  							    		maxlength="4"  type="text" data-dojo-props='style:"width: 80px;" ' />
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_endYearDate'">
  					    				Select end year.
  									</div>																		    									    							
  							    	&nbsp;&nbsp;		
  									<s:property value="getText('BSC_PROG003D0006Q_startDate')"/>
  									<input id="BSC_PROG003D0009Q_startDate" type="text" name="BSC_PROG003D0009Q_startDate" data-dojo-type="dijit.form.DateTextBox"
  										maxlength="10" 
  										constraints="{datePattern:'yyyy/MM/dd', selector:'date' }" style="width:120px;" readonly />
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_startDate'">
  					    				Select start date.
  									</div>												
  									&nbsp;						
  									<s:property value="getText('BSC_PROG003D0006Q_endDate')"/>
  									<input id="BSC_PROG003D0009Q_endDate" type="text" name="BSC_PROG003D0009Q_endDate" data-dojo-type="dijit.form.DateTextBox"
  										maxlength="10" 
  										constraints="{datePattern:'yyyy/MM/dd', selector:'date' }" style="width:120px;" readonly />																	    									    	
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_endDate'">
  					    				Select end date.
  									</div>									    										    														    										
  								</td>
  							</tr>															
  							<tr valign="top">
  								<td width="100%" align="left" height="25px">							
  									<s:property value="getText('BSC_PROG003D0006Q_dataFor')"/>
  									<gs:select name="BSC_PROG003D0009Q_dataFor" dataSource="{ \"all\":\"All\", \"organization\":\"${action.getText('BSC_PROG003D0006Q_measureDataOrganizationOid')}\", \"employee\":\"${action.getText('BSC_PROG003D0006Q_measureDataEmployeeOid')}\" }" id="BSC_PROG003D0009Q_dataFor" onChange="BSC_PROG003D0009Q_setDataForValue();" width="140"></gs:select>
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_dataFor'">
  					    				Select measure data type.
  									</div>											
  									&nbsp;&nbsp;
  									<s:property value="getText('BSC_PROG003D0006Q_measureDataOrganizationOid')"/>
  									<gs:filteringSelect name="BSC_PROG003D0009Q_measureDataOrganizationOid" dataSource="measureDataOrganizationMap" id="BSC_PROG003D0009Q_measureDataOrganizationOid" onChange="BSC_PROG003D0009Q_setMeasureDataOrgaValue();" readonly="Y" value="all"></gs:filteringSelect>
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_measureDataOrganizationOid'">
  					    				Select measure data organization/department.
  									</div>											
  									&nbsp;&nbsp;
  									<s:property value="getText('BSC_PROG003D0006Q_measureDataEmployeeOid')"/>
  									<gs:filteringSelect name="BSC_PROG003D0009Q_measureDataEmployeeOid" dataSource="measureDataEmployeeMap" id="BSC_PROG003D0009Q_measureDataEmployeeOid" onChange="BSC_PROG003D0009Q_setMeasureDataEmplValue();" readonly="Y" value="all"></gs:filteringSelect>
  									<div data-dojo-type="dijit/Tooltip" data-dojo-props="connectId:'BSC_PROG003D0009Q_measureDataEmployeeOid'">
  					    				Select measure data personal/Employee.
  									</div>										
  								</td>
  							</tr>								
  							
  														
  						</table>										
  					
  					</div>
  				</div>
  			</td>
  		</tr>
  	</table>	
  	
  	<br/>
  	<br/>
  	
  	<div id="BSC_PROG003D0009Q_perspectives_alert_title"></div>
  	<div id="BSC_PROG003D0009Q_perspectives_container"></div>
  	
  	<br/>
  	<br/>
  	
  <table border="0">
  <tr>
  <td>	
  	<div id="BSC_PROG003D0009Q_objectives_alert_title"></div>
  	<div id="BSC_PROG003D0009Q_objectives_container"></div>	
  </td>
  </tr>
  </table>	
  	
  	<br/>
  	<br/>
  	
  <table border="0">
  <tr>
  <td>	
  	<div id="BSC_PROG003D0009Q_kpis_alert_title"></div>
  	<div id="BSC_PROG003D0009Q_kpis_container"></div>			
  </td>
  </tr>
  </table>	
  	
  	<br/>
  	<br/>
  	
  	<div id="BSC_PROG003D0009Q_kpi_daterange_alert_title"></div>
  	<div id="BSC_PROG003D0009Q_kpi_daterange_container"></div>			
  
  	<br/>
  	<br/>
  			
  <script type="text/javascript">${programId}_page_message();</script>	
  </body>
  </html>
  
  	
negative.code: 		refreshEnable="Y" 		 
  		refreshJsMethod="${programId}_TabRefresh();" 		
  		></gs:toolBar>
  	<jsp:include page="../header.jsp"></jsp:include>		
  
  
  	<table border="0" width="100%" >
  		<tr valign="top">
  			<td width="100%" align="center" height="35%">
  				<div data-dojo-type="dijit.TitlePane" data-dojo-props="title: '<s:property value="getText('BSC_PROG003D0009Q_options')" escapeJavaScript="true"/>' " >						
  					<div dojoType="dijit.layout.ContentPane" region="left" splitter="false" style="width:99%;height:145px">
  					
  						<table border="0" width="100%" >
  