path: root/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-chart-wizard.html

<style>
table tbody td {
    border: none;
}

table tbody tr {
    border: none;
}

table{
    border: none;
    margin-bottom:0px;
}

#RangeTable{
	margin-top: 5px;
	border: 1px solid black;
}
</style>

<div id="page-content">
<h1 class="heading-page">Report Chart Configuration</h1>

<div ng-show="showLoader" class="span loader-container">
	<i class="icon-primary-spinner" role="img"
		aria-label="Please wait while we load your content"></i>
</div>


<div ng-hide="showLoader">
<div>
<table>
	<thead>
	    <tr>
	        <th width="30%">Chart Type</th>
	        <th></th>
	    </tr>
	</thead>
	
    <tbody>
        <tr>
            <td>
				<select name="chartType" b2b-dropdown ng-model="reportRunJson.chartType">
					<option b2b-dropdown-list option-repeat="d in chartTypeOptions" value="{{d.value}}">{{d.text}}</option>
	            </select>
            </td>
            <td></td>
        </tr>
    </tbody>
</table>

<table>	
	<thead>
	    <tr>
	        <th width="50px">Width (px)</th>
	        <th>Height (px)</th>
	    </tr>
	</thead>
    <tbody>
        <tr>
            <td>
            <input type="text" name="displayName" ng-model="reportRunJson.width" style="width:100px;">
            </td>
            <td>
            <input type="text" name="displayName" ng-model="reportRunJson.height" style="width:100px;">
            </td>
        </tr>
    </tbody>
</table>

<table>	
	<thead>
	    <tr>
	        <th width="50px">Title</th>
	    </tr>
	</thead>
    <tbody>
        <tr>
    		<fieldset role="radiogroup" radio-group-accessibility>
            <td>
            <label for="optionsRadiosShowTitleTrue" class="radio">
                <input type="radio" ng-model="reportRunJson.showTitle" id="optionsRadiosShowTitleTrue" name="optionsRadiosShowTitleTrue" value="true">
                <i class="skin"></i>
                <span>Show</span>
            </label>            
            </td>
            <td>
            <label for="optionsRadiosShowTitleFalse" class="radio">
                <input type="radio" ng-model="reportRunJson.showTitle" id="optionsRadiosShowTitleFalse" name="optionsRadiosShowTitleFalse" value="false">
                <i class="skin"></i>
                <span>Hide</span>
            </label>            
            </td>
            </fieldset>
        </tr>
        
    </tbody>
</table>

<table>	
	<thead>
	    <tr>
	        <th width="30%">Domain Axis</th>
	        <th  width="30%">Category</th>
	        <th  width="40%"></th>
	    </tr>
	</thead>
    <tbody>
        <tr>
            <td>
				<select name="chartType" b2b-dropdown ng-model="reportRunJson.domainAxis">
					<option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
	            </select>
            </td>
            <td>
				<select name="chartType" b2b-dropdown ng-model="reportRunJson.categoryAxis">
					<option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
	            </select>
            </td>
        </tr>
    </tbody>
</table>


	<div id="RangeTable">

<table ng-repeat="rangeReport in reportRunJson.rangeAxisList">
	<thead>
	    <tr>
	        <th width="18%">Range Axis</th>
	        <th  width="15%">Y Axis</th>
	        <th  width="15%">Chart Title</th>
	        <th  width="22%">Color</th>
	        <th  width="25%">Line Type</th>
	        <th></th>	        
	    </tr>
	</thead>
    <tbody>
        <tr>
            <td>
				<select name="chartType" b2b-dropdown ng-model="rangeReport.rangeAxisLabelJSON.value" placeholder-text="Select" ng-disabled="rangeReport.removed=='true'">
					<option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
				</select>
            </td>
            <td>
            	<input type="text" name="displayName" ng-model="rangeReport.rangeYAxis" ng-disabled="rangeReport.removed=='true'" style="width:100px;">
            </td>
            <td>
            	<input type="text" name="displayName" ng-model="rangeReport.rangeChartGroup" ng-disabled="rangeReport.removed=='true'" style="width:150px;">
            </td>
            <td>
				<select name="chartType" b2b-dropdown ng-model="rangeReport.rangeColor" ng-disabled="rangeReport.removed=='true'">
					<option b2b-dropdown-list option-repeat="d in rangeColors" value="{{d.value}}">{{d.title}}</option>
				</select>
            </td>
            <td>
				<select name="lineType" b2b-dropdown ng-model="rangeReport.rangeLineType" ng-disabled="rangeReport.removed=='true'">
					<option b2b-dropdown-list option-repeat="d in lineTypes"  value="{{d.value}}">{{d.title}}</option>
				</select>
            </td>
            <td>
            	<button ng-show="$index==0" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" ng-click="addRangeAxisRow()">Add</button>
            	<span ng-hide="$index==0">
            		<button ng-if="rangeReport.removed!='true'" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" ng-click="removeRangeAxisRow($index)">Remove</button>
            		<button ng-if="rangeReport.removed=='true'" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" disabled="disabled">Removed</button>
            	</span>
            </td>
        </tr>
      
    </tbody>
</table>
</div>

</div>
             
<div ng-show=false style="min-height:500px" data-ng-init="init()">
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Chart Type</label><BR>
		<div class="form-field" att-select="chartTypes" ng-model="reportRunJson.chartTypeJSON" placeholder="Select an Option" show-input-filter="true" ng-change="actionClicked()"></div>
	</div>
	
	
	<div class="fn-ebz-container" style="position:relative; top: -8px;">
		<label class="fn-ebz-text-label">Animate</label><BR>
			<div><input type="checkbox" ng-model="reportRunJson.animation" att-checkbox data-ng-value="true"></div>
	</div>
	<BR>
	
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Width (Px)</label><BR>
		<input type="text"  name="chartWidth"  maxlength=4  only-digits ng-model="reportRunJson.width" style="width:80px"/>
	</div> 
	
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Height (Px)</label><BR>
		<input type="text" name="chartHeight" maxlength=4  only-digits ng-model="reportRunJson.height" style="width:80px"/>
	</div>
	<BR>
	
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Title</label><BR>
		<span><input  name="tle" type="radio" ng-model="reportRunJson.showTitle"  data-ng-value="true"/>Show</span>
		<span><input name="tle" type="radio" ng-model="reportRunJson.showTitle" data-ng-value="false"/>Hide</span>
	</div>
	<BR>
	

	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Domain Axis</label><BR>
		<div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.domainAxisJSON" placeholder="Select an Option" show-input-filter="true"></div>
	</div>  
	
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Category</label><BR>
		<div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.categoryAxis" placeholder="" show-input-filter="true"></div>
	</div>
	<BR>

<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">	
<div ng-repeat="rangeReport in reportRunJson.rangeAxisList">	
	<div style="margin-left:5px">
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Range Axis</label><BR>
		<div class="form-field" att-select="reportRunJson.chartColumnJSONList" 
			ng-model="rangeReport.rangeAxisLabelJSON" placeholder="Select an Option" show-input-filter="true"></div>
	</div>
	
	
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Y Axis</label><BR>
		<input id="yaxs" type="text" name="yAxis" maxlength=50 ng-model=rangeReport.rangeYAxis style="width:100px"/>
	</div>
	
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Chart Title</label><BR>
		<input type="text" name="chartTitle"  maxlength=50 ng-model="rangeReport.rangeChartGroup" style="width:200px"/>
	</div>
	
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Color</label><BR>
		<div class="form-field" att-select="rangeColors" ng-model="rangeReport.rangeColorJSON" placeholder="Select an Option" show-input-filter="true"></div>
	</div>
	
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Line Type</label><BR>
		<div class="form-field" att-select="lineTypes" ng-model="rangeReport.rangeLineTypeJSON" placeholder="Select an Option" show-input-filter="true"></div>
	</div>
	
	<div class="fn-ebz-container" ng-show="reportRunJson.chartTypeJSON.value=='FlexTimeChart' || 
			reportRunJson.chartTypeJSON.value=='AnnotationChart'" style="position:relative; top: -8px;">
		<label class="fn-ebz-text-label">Area</label><BR>
		<input type="checkbox" ng-model="rangeReport.showAsArea" att-checkbox data-ng-value="true">
	</div>
	
	<div class="fn-ebz-container" style="position:relative; top: 25px;">
	<a href="javascript:void(0)" ng-show="{{$index==0}}" style="float: right;" att-button btn-type="secondary" size="small" att-accessibility-click="13,32" 
			ng-click="addRangeAxisRow(rangeReport);" >Add</a>
	<a href="javascript:void(0)" ng-show="{{$index>0}}" style="float: right;" att-button btn-type="secondary" size="small" att-accessibility-click="13,32" ng-click="removeRangeAxisRow($index);" >
			Remove</a>
	  </div>
	  </div>
	 </div>
	</div>
	<BR>
	
<accordion close-others="true" css="att-accordion--no-box">
	<accordion-group id="additionalOptions" heading="Additional Options"  child-length="10">
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Primary Axis Label</label><BR>
		<input type="text" name="prAxis" maxlength=50 ng-model="reportRunJson.primaryAxisLabel" style="width:210px"/>
	</div>
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Secondary Axis Label</label><BR>
		<input type="text" name="secAxis" maxlength=75 ng-model="reportRunJson.secondaryAxisLabel"  style="width:210px"/>
	</div>
	<BR>
	<div class="fn-ebz-container" >
		<label class="fn-ebz-text-label">Range Axis Minimum Range</label><BR>
		<input type="text" name="rAxisMinRange" only-digits ng-model="reportRunJson.minRange" style="width:210px"/>
	</div>
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Maximum Range</label><BR>
		<input type="text" name="rAxisMaxRange" only-digits ng-model="reportRunJson.maxRange"  ng-maxLength="35" style="width:210px"/>
	</div><BR>
	</accordion-group>
</accordion>
	
	
	

<div ng-show="reportRunJson.chartType=='BarChart3D'">
  
  	<accordion close-others="true" css="att-accordion--no-box">
	<accordion-group id="accBar" heading="Bar Chart Options"  child-length="10">
  				
	
	<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
		<div class="fn-ebz-container" style="position:relative;margin:10px;" >
			<label class="fn-ebz-text-label">Orientation</label><BR>
			<span><input  name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation"  data-ng-value="true"/>Vertical</span>
			<span><input name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" data-ng-value="false"/>Horizontal</span>
		</div>
	
	<div class="fn-ebz-container" style="position:relative;margin:10px;">
		<label class="fn-ebz-text-label">Stacked</label><BR>
		<span><input  name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart"  data-ng-value="true"/>Yes</span>
		<span><input name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" data-ng-value="false"/>No</span>
	</div>
	
	<div class="fn-ebz-container" style="position:relative;margin:10px;">
		<label class="fn-ebz-text-label">Show Controls</label><BR>
		<span><input  name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls"  data-ng-value="true"/>Yes</span>
		<span><input name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" data-ng-value="false"/>No</span>
	</div>
	
	<div class="fn-ebz-container" style="position:relative;margin:10px;">
		<label class="fn-ebz-text-label">XAxis Date Type</label><BR>
		<span><input  name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType"  data-ng-value="true"/>Yes</span>
		<span><input name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" data-ng-value="false"/>No</span>
	</div>
	
	<div class="fn-ebz-container" style="position:relative;margin:10px;">
		<label class="fn-ebz-text-label">Display less XAxis tickers</label><BR>
		<span><input  name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"  data-ng-value="true"/>Yes</span>
		<span><input name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" data-ng-value="false"/>No</span>
	</div><BR>
	
	<div class="fn-ebz-container" style="position:relative;margin:10px;">
		<label class="fn-ebz-text-label">Is Time Axis?</label><BR>
		<span><input  name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis"  data-ng-value="true"/>Yes</span>
		<span><input name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" data-ng-value="false"/>No</span>
	</div>
	
	<div class="fn-ebz-container" style="position:relative;margin:10px;">
		<label class="fn-ebz-text-label">Log Scale (Y Axis)</label><BR>
		<span><input type="checkbox" ng-model="reportRunJson.barChartOptions.yAxisLogScale" att-checkbox data-ng-value="true"></span>
		
	</div>
 </div>

  </accordion-group>
</accordion>
</div>
	{{reportRunJson.chartType}}
	<div ng-show="reportRunJson.chartType=='TimeSeriesChart'">
	 <accordion close-others="true" css="att-accordion--no-box">
		<accordion-group id="accTimeChart"  heading="Time Series Chart Options"  child-length="10">
		
		<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
			<div style="margin-left:5px">
			<div class="fn-ebz-container">
				<label class="fn-ebz-text-label">Render as</label><BR>
				<span><input  name="renderAs" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"  value="line"/>Line</span>
				<span><input name="orient" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" value="area"/>Area</span>
			</div>
	
		<div class="fn-ebz-container" style="position:relative;margin:10px;">
			<label class="fn-ebz-text-label">X Axis Label</label><BR>
			<span><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" att-checkbox data-ng-value="true"></span>
		</div><BR>
		
		<div class="fn-ebz-container" style="position:relative;bottom:10px;">
			<label class="fn-ebz-text-label">X Axis <br>Tickers</label><BR>
			<span style="position:relative;top:10px;"><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" att-checkbox data-ng-value="true"></span>
		</div>
		
		<div class="fn-ebz-container" style="position:relative;margin:20px;">
			<label class="fn-ebz-text-label">Is Time Axis?</label><BR>
			<span><input  name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis"  data-ng-value="true"/>Yes</span>
			<span><input name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" data-ng-value="false"/>No</span>
		</div>
		
		<div class="fn-ebz-container" style="position:relative;margin:10px;">
			<label class="fn-ebz-text-label">Multi Series?</label><BR>
			<span><input  name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries"  data-ng-value="true"/>Yes</span>
			<span><input name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" data-ng-value="false"/>No</span>
		</div>
		 </div>
		</div>
	
	 </accordion-group>
	</accordion>
	
	</div>
	
	<div>		
		
		<accordion close-others="true" css="att-accordion--no-box">
		<accordion-group id="accFlexTimeChart"  heading="Flex Time Series Chart Options"  child-length="10">
		
		<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
			<div style="margin-left:5px">
		<div class="fn-ebz-container">
			<label class="fn-ebz-text-label">Zoom-In Window</label><BR>
			<span><input type="text" name="zWindow" only-digits maxlength=3 ng-model="reportRunJson.flexTimeSeriesChartOptions.zoomIn"></span>
		</div>
		
		<div class="fn-ebz-container" style="position:relative;margin:10px;">
			<label class="fn-ebz-text-label">Time Axis Type</label><BR>
			<span><input  name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"  value="weekly"/>Weekly</span>
			<span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="daily"/>Daily</span>
			<span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="hourly"/>Hourly</span>
			<span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="30min"/>30 Min</span>
		</div>
	  </div>
	 </div>
		</accordion-group>
	</accordion>
	
	</div>	
	
	
	
	
	
	
	 
	
	<accordion close-others="true" css="att-accordion--no-box">
	<accordion-group id="accCommonOptions"  heading="Common Options"  child-length="10">
	
	<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
	<div style="margin-left:5px">
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Legend Angle</label><BR>
		<span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up45"/>up 45&deg;</span>
		<span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up90"/>up 90&deg;</span>
 	    <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down45"/>down 45&deg;</span>
 	    <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down90"/>down 90&deg;</span>
 	    <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="standard"/>Standard</span>
	</div>
	
	<div class="fn-ebz-container" style="position:relative;margin:15px;">
		<label class="fn-ebz-text-label">Legend Position</label><BR>
		<span><input  name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition"  value="top"/>Top</span>
		<span><input name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" value="bottom"/>Bottom</span>
	</div><BR>
	
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Legend</label><BR>
		<span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="false"/>Yes</span>
		<span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="true"/>No</span>
	</div>
	
	<div class="fn-ebz-container" style="position:relative;margin:10px;">
		<label class="fn-ebz-text-label">Animation</label><BR>
		<span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="true" />Yes</span>
		<span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="false"/>No</span>
	</div><BR>
	
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Top Margin</label><BR>
		<input type="text" name="reportRunJson.commonChartOptions.topMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.topMargin" style="width:210px"/>
	</div>
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Bottom Margin</label><BR>
		<input type="text" name="reportRunJson.commonChartOptions.bottomMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.bottomMargin"  style="width:210px"/>
	</div>
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Left Margin</label><BR>
		<input type="text" name="reportRunJson.commonChartOptions.leftMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.leftMargin" style="width:210px"/>
	</div>
	<div class="fn-ebz-container">
		<label class="fn-ebz-text-label">Right Margin</label><BR>
		<input type="text" name="reportRunJson.commonChartOptions.rightMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.rightMargin" style="width:210px">
	  </div><BR>
	 </div>
	</div>
 </accordion-group>
</accordion>
	<br/><br/>
	<a href="javascript:void(0)" att-button btn-type="primary" att-accessibility-click="13,32" ng-click="saveChartData();">Save</a>
	<a href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y" att-button btn-type="primary" att-accessibility-click="13,32">Run</a>
</div>

<div>
    <b2b-expanders class="mpc-expanders" is-open="additionalOptionOpen">            
        <b2b-expander-heading>
            <div class="row">    
                <div class="span6">
                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !additionalOptionOpen, 'b2b-toggle-header-inactive': additionalOptionOpen } ">Additional Options</div>
                    <p class="p-small">
                    </p>                    
                </div>
                <div style="position: absolute;right: 250px;" class="span1">
                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
                </div>  
            </div>    
        </b2b-expander-heading>               
        <b2b-expander-body>                   
            <div>	 
				<div id="RangeTable">
				<table>
					<thead>
					    <tr>
					        <th width="30%">Primary Axis Label</th>
					        <th  width="30%">Secondary Axis Label</th>
					        <th></th>	        
					    </tr>
					</thead>
				    <tbody>
				        <tr>
				            <td>
				            	<input type="text" name="primaryAxisLabel" ng-model="reportRunJson.primaryAxisLabel" style="width:200px;">
				            </td>
				            <td>
				            	<input type="text" name="secondaryAxisLabel" ng-model="reportRunJson.secondaryAxisLabel" style="width:200px;">
				            </td>
				        </tr>
				    </tbody>
				</table>
				<table>
					<thead>
					    <tr>
					        <th width="30%">Range Axis Minimum Range</th>
					        <th  width="30%">Maximum Range</th>
					        <th></th>
					    </tr>
					</thead>
				    <tbody>
				        <tr>
				            <td>
				            	<input type="text" name="minRange" ng-model="reportRunJson.minRange" style="width:200px;">
				            </td>
				            <td>
				            	<input type="text" name="maxRange" ng-model="reportRunJson.maxRange" style="width:200px;">
				            </td>
				        </tr>
				    </tbody>
				</table>
				</div>            	
			</div>
        </b2b-expander-body>     
    </b2b-expanders>

	<!-- BAR CHART OPTION SECTION STARTS HERE -->
    <b2b-expanders ng-show="reportRunJson.chartType=='BarChart3D'" class="mpc-expanders" is-open="barChartOptionOpen">            
        <b2b-expander-heading>
            <div class="row">    
                <div class="span6">
                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !barChartOptionOpen, 'b2b-toggle-header-inactive': barChartOptionOpen } ">Bar Chart Options</div>
                    <p class="p-small">
                    </p>                    
                </div>
                <div style="position: absolute;right: 250px;" class="span1">
                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
                </div>
            </div>    
        </b2b-expander-heading>               
        <b2b-expander-body>                   
            <div>	 
				<div id="RangeTable">
				<table>
					<thead>
					    <tr>
					        <th width="25%">Orientation</th>
					        <th  width="18%">Stacked</th>
					        <th  width="18%">Show Controls</th>
					        <th  width="18%">XAxis Date Type</th>
					        <th  width="21%">Display less XAxis tickers</th>					        
					        <th></th>	        
					    </tr>
					</thead>
				    <tbody>
				        <tr>
				            <td>
						            <label for="optionsOrientationVertical" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" id="optionsOrientationVertical" name="optionsOrientationVertical" value="true">
						                <i class="skin"></i>
						                <span>Vertical</span>
						            </label>            
						            <label for="optionsOrientationHorizontal" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" id="optionsOrientationHorizontal" name="optionsOrientationHorizontal" value="false">
						                <i class="skin"></i>
						                <span>Horizontal</span>
						            </label>            
				            </td>
   				            
				            <td>
						            <label for="optionsStackedYes" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" id="optionsStackedYes" name="optionsStackedYes" value="true">
						                <i class="skin"></i>
						                <span>Yes</span>
						            </label>            
						            <label for="optionsStackedNo" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" id="optionsStackedNo" name="optionsStackedNo" value="false">
						                <i class="skin"></i>
						                <span>No</span>
						            </label>  				            
				            </td>
				            <td>
						            <label for="optionsShowControlYes" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" id="optionsShowControlYes" name="optionsShowControlYes" value="true">
						                <i class="skin"></i>
						                <span>Yes</span>
						            </label>            
						            <label for="optionsShowControlNo" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" id="optionsShowControlNo" name="optionsShowControlNo" value="false">
						                <i class="skin"></i>
						                <span>No</span>
						            </label>  				            
				            </td>
				            <td>
						            <label for="optionsXAxisDateTypeYes" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" id="optionsXAxisDateTypeYes" name="optionsXAxisDateTypeYes" value="true">
						                <i class="skin"></i>
						                <span>Yes</span>
						            </label>            
						            <label for="optionsXAxisDateTypeNo" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" id="optionsXAxisDateTypeNo" name="optionsXAxisDateTypeNo" value="false">
						                <i class="skin"></i>
						                <span>No</span>
						            </label>  				            
				            </td>				            
				            <td>
						            <label for="optionsMinimizeXAxisTickersYes" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" id="optionsMinimizeXAxisTickersYes" name="optionsMinimizeXAxisTickersYes" value="true">
						                <i class="skin"></i>
						                <span>Yes</span>
						            </label>            
						            <label for="optionsMinimizeXAxisTickersNo" class="radio">
						                <input type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" id="optionsMinimizeXAxisTickersNo" name="optionsMinimizeXAxisTickersNo" value="false">
						                <i class="skin"></i>
						                <span>No</span>
						            </label>  				            
				            </td>				            
				        </tr>
				    </tbody>
				</table>
				<table>
					<thead>
					    <tr>
					        <th width="25%">Is Time Axis?</th>
					        <th  width="25%">Log Scale (Y Axis)</th>
					        <th></th>
					    </tr>
					</thead>
				    <tbody>
				        <tr>
				            <td>
					            <label for="optionsTimeAxisYes" class="radio">
					                <input type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" id="optionsTimeAxisYes" name="optionsTimeAxisYes" value="true">
					                <i class="skin"></i>
					                <span>Yes</span>
					            </label>            
					            <label for="optionsTimeAxisNo" class="radio">
					                <input type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" id="optionsTimeAxisNo" name="optionsTimeAxisNo" value="false">
					                <i class="skin"></i>
					                <span>No</span>
					            </label>  				            
				            </td>
				            <td>
				                <label for="logScaleYAxisCheckBox" class="checkbox">
				                    <input id="logScaleYAxisCheckBox" type="checkbox" ng-model="reportRunJson.barChartOptions.yAxisLogScale" /><i class="skin"></i><span></span>
				                </label>            				            
				            </td>
				        </tr>
				    </tbody>
				</table>
				</div>            	
			</div>
        </b2b-expander-body>     
    </b2b-expanders>
	<!-- BAR CHART OPTION SECTION ENDS HERE -->

	<!-- TIME SERIES CHART OPTION SECTION STARTS HERE -->
    <b2b-expanders ng-show="reportRunJson.chartType=='TimeSeriesChart'" class="mpc-expanders" is-open="timeSeriesChartOptionOpen">            
        <b2b-expander-heading>
            <div class="row">    
                <div class="span6">
                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !timeSeriesChartOptionOpen, 'b2b-toggle-header-inactive': timeSeriesChartOptionOpen } ">Time Series Chart Options</div>
                    <p class="p-small">
                    </p>                    
                </div>
                <div style="position: absolute;right: 250px;" class="span1">
                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
                </div>  
            </div>    
        </b2b-expander-heading>               
        <b2b-expander-body>                   
            <div>	 
				<div>
				<table>
					<thead>
					    <tr>
					        <th width="20%">Render as</th>
					        <th width="20%">X Axis Label</th>
					        <th width="20%">X Axis Tickers</th>
					        <th width="20%">Is Time Axis?</th>
					        <th width="20%">Multi Series</th>					        					        
					    </tr>
					</thead>
				    <tbody>
				        <tr>
				            <td>
					            <label for="optionsLineChartRendererLine" class="radio">
					                <input type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" id="optionsLineChartRendererLine" name="optionsLineChartRendererLine" value="line">
					                <i class="skin"></i>
					                <span>Line</span>
					            </label>            
					            <label for="optionsLineChartRendererArea" class="radio">
					                <input type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" id="optionsLineChartRendererArea" name="optionsLineChartRendererArea" value="area">
					                <i class="skin"></i>
					                <span>Area</span>
					            </label>  				            
				            </td>
				            <td>
				                <label for="xAxisLabelCheckBox" class="checkbox">
				                    <input id="xAxisLabelCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" /><i class="skin"></i><span></span>
				                </label>            				            				            
				            </td>
				            <td>
				                <label for="addXAxisTickerCheckBox" class="checkbox">
				                    <input id="addXAxisTickerCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" /><i class="skin"></i><span></span>
				                </label>            				            				            
				            </td>
				            <td>
				                <label for="isTimeAxisCheckBox" class="checkbox">
				                    <input id="isTimeAxisCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" /><i class="skin"></i><span></span>
				                </label>
				            </td>
				            <td>
				                <label for="multiSeriesCheckBox" class="checkbox">
				                    <input id="multiSeriesCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" /><i class="skin"></i><span></span>
				                </label>
				            </td>
				        </tr>
				    </tbody>
				</table>
				</div>            	
			</div>
        </b2b-expander-body>     
    </b2b-expanders>
	<!-- TIME SERIES CHART OPTION SECTION ENDS HERE -->

    <b2b-expanders class="mpc-expanders" is-open="commonOptionOpen">            
        <b2b-expander-heading>
            <div class="row">    
                <div class="span6">
                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !commonOptionOpen, 'b2b-toggle-header-inactive': commonOptionOpen } ">Common Options</div>
                    <p class="p-small">
                    </p>                    
                </div>
                <div style="position: absolute;right: 250px;" class="span1">
                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
                </div>  
            </div>    
        </b2b-expander-heading>               
        <b2b-expander-body>                   
            <div >
                <div>
					<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
						<div style="margin-left:0px">
							<table>	
							<thead>
							    <tr>
							        <th>Legend Angle</th>
							        <th>Legend Position</th>
							    </tr>
							</thead>
						    <tbody>
						        <tr>
						    		<fieldset role="radiogroup" radio-group-accessibility>
						            <td>
						            <label for="optionsRadios1" class="radio">
						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios1" name="optionsRadio1" value="up45">
						                <i class="skin"></i>
						                <span>up 45&deg;</span>
						            </label>            
						            <label for="optionsRadios2" class="radio">
						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios2" name="optionsRadio2" value="up90">
						                <i class="skin"></i>
						                <span>up 90&deg;</span>
						            </label>            
						            <label for="optionsRadios3" class="radio">
						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios3" name="optionsRadio3" value="down45">
						                <i class="skin"></i>
						                <span>down 45&deg;</span>
						            </label>            
						            <label for="optionsRadios4444" class="radio">
						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios4444" name="optionsRadio44" value="down90">
						                <i class="skin"></i>
						                <span>down 90&deg;</span>
						            </label>            
						            <label for="optionsRadios5555" class="radio">
						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios5555" name="optionsRadio55" value="standard">
						                <i class="skin"></i>
						                <span>Standard</span>
						            </label>            
						            </td>    
						            </fieldset>
						            
						            <fieldset role="radiogroup" radio-group-accessibility>
						            <td>
						            <label for="optionsRadiosTop" class="radio">
						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" id="optionsRadiosTop" name="optionsRadioTop" value="top">
						                <i class="skin"></i>
						                <span>Top</span>
						            </label>            
						            <label for="optionsRadiosBottom" class="radio">
						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" id="optionsRadiosBottom" name="optionsRadioBottom" value="bottom">
						                <i class="skin"></i>
						                <span>Bottom</span>
						            </label>            
						            </td>                    
						            </fieldset>
						        </tr>
						    </tbody>
						</table>


						<table>	
						<thead>
						    <tr>
						        <th width="20%">Legend</th>
						        <th width="20%">Animation</th>
						        <th></th>
						    </tr>
						</thead>
					    <tbody>
					        <tr>
					    		<fieldset role="radiogroup" radio-group-accessibility>
					            <td>
					            <label for="optionsRadiosHideLegendFalse" class="radio">
					                <input type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" id="optionsRadiosHideLegendFalse" name="optionsRadiosHideLegendFalse" value="false">
					                <i class="skin"></i>
					                <span>Yes</span>
					            </label>            
					            <label for="optionsRadiosHideLegendTrue" class="radio">
					                <input type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" id="optionsRadiosHideLegendTrue" name="optionsRadiosHideLegendTrue" value="true">
					                <i class="skin"></i>
					                <span>No</span>
					            </label>            
					            </td>    
					            </fieldset>
					            
					            <fieldset role="radiogroup" radio-group-accessibility>
					            <td>
					            <label for="optionsRadiosAnimateChartTrue" class="radio">
					                <input type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" id="optionsRadiosAnimateChartTrue" name="optionsRadiosAnimateChartTrue" value="true">
					                <i class="skin"></i>
					                <span>Yes</span>
					            </label>            
					            <label for="optionsRadiosAnimateChartFalse" class="radio">
					                <input type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" id="optionsRadiosAnimateChartFalse" name="optionsRadiosAnimateChartFalse" value="false">
					                <i class="skin"></i>
					                <span>No</span>
					            </label>            
					            </td>                    
					            </fieldset>
					            <td>
					            </td>
					        </tr>
					    </tbody>
					</table>

					<table>
						<thead>
						    <tr>
						        <th width="25%">Top Margin</th>
						        <th width="25%">Bottom Margin</th>
						        <th width="25%">Left Margin</th>
						        <th width="25%">Right Margin</th>
						    </tr>
						</thead>
					    <tbody>
					        <tr>
					            <td>
					            	<input type="text" name="topMargin" ng-model="reportRunJson.commonChartOptions.topMargin" style="width:200px;">
					            </td>
					            <td>
					            	<input type="text" name="bottomMargin" ng-model="reportRunJson.commonChartOptions.bottomMargin" style="width:200px;">
					            </td>
					            <td>
					            	<input type="text" name="leftMargin" ng-model="reportRunJson.commonChartOptions.leftMargin" style="width:200px;">
					            </td>
					            <td>
					            	<input type="text" name="rightMargin" ng-model="reportRunJson.commonChartOptions.rightMargin" style="width:200px;">
					            </td>
					        </tr>
					    </tbody>
					</table>
				</div>                	
            </div>
           </div>
        </b2b-expander-body>     
    </b2b-expanders>

</div>
</div>
	<div>
	<button type="submit" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small" ng-click="saveChartData();">Save</button>	
	<a href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y">
	<button type="submit" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small">Run</button>
	</a>
	</div>    
</div>