Subversion Repositories SmartDukaan

        <h3 style="margin-top:-2px;margin-bottom:24px"><strong>My Performance</strong></h3>
        <div class="col-lg-5">
                <h4 style="margin-top:-2px;margin-bottom:6px"><strong>Customer Rating</strong></h4>
                <table class="table table-condensed">
                          <tbody>
                            <tr class="current">
                              <td>Current Month</td>
                              <td>
                                <div class="stars-outer">
                                  <div class="stars-inner"></div>
                                </div>
                              </td>
                              <td>$currentMonthRating/5</td>
                            </tr>
                            <tr class="last">
                              <td>Last Month</td>
                              <td>
                                <div class="stars-outer">
                                  <div class="stars-inner"></div>
                                </div>
                              </td>
                              <td>$lastMonthRating/5</td>
                            </tr>
                            <tr class="tilldate">
                              <td>Till Date</td>
                              <td>
                                <div class="stars-outer">
                                  <div class="stars-inner"></div>
                                </div>
                              </td>
                              <td>$ratingTillDate/5</td>
                            </tr>
                          </tbody>
                </table>                                                
        </div>
        <div class="col-lg-7">
                        <div class="col-lg-6">
                                <canvas data-type="radial-gauge" id="hygeine"
                                    data-width="200",
                                    data-height="200"
                                    data-title="Hygeine"
                                    data-units="${hygienePercentage}%"
                                    data-min-value="0"
                                    data-max-value="100"
                                        data-value="${hygienePercentage}"
                                    data-major-ticks="0,20,40,60,80,100"
                                    data-minor-ticks="2"
                                    data-stroke-ticks="true"
                                    data-highlights='[
                                        {"from": 0, "to": 80, "color": "red"},
                                        {"from": 80, "to": 90, "color": "yellow"},
                                        {"from": 90, "to": 100, "color": "green"}
                                    ]',
                                        data-value-box="false"
                                    data-color-plate="#fff"
                                    data-border-shadow-width="0"
                                    data-borders="false"
                                    data-needle-type="arrow"
                                    data-needle-width="2"
                                    data-needle-circle-size="7"
                                    data-font-value-size="42"
                                    data-font-title-size="42"
                                    data-font-units-size="42"
                                    data-needle-circle-outer="true"
                                    data-needle-circle-inner="false"
                                    data-animation-duration="1500"
                                    data-animation-rule="linear"
                                ></canvas>
        
                        </div>
                        <div class="col-lg-6">
                                <canvas data-type="radial-gauge" id="investment"
                                    data-width="200"
                                    data-height="200"
                                    data-title="Investments"
                                        data-units="${investments.get('okDays')}/${dayOfMonth}"
                                        data-value="${investments.get('okDays')}"
                                    data-min-value="0"
                                    data-major-ticks=[]
                                        data-max-value="${monthDays}"
                                    data-highlights='[
                                        {"from": 0, "to": 7, "color": "red"},
                                        {"from": 7, "to": 12, "color": "yellow"},
                                        {"from": 12, "to": ${monthDays}, "color": "green"}
                                    ]'
                                data-value-box="false"
                                    data-color-plate="#fff"
                                    data-border-shadow-width="0"
                                    data-borders="false"
                                    data-needle-type="arrow"
                                    data-needle-width="2"
                                    data-needle-circle-size="7"
                                    data-font-value-size="42"
                                    data-font-title-size="42"
                                    data-font-units-size="42"
                                    
                                    data-needle-circle-outer="true"
                                    data-needle-circle-inner="false"
                                    data-animation-duration="1500"
                                    data-animation-rule="linear"
                                ></canvas>
                        </div>
        </div>

                
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/radial/gauge.min.js"></script>
<script type="text/javascript">
        var gauge1 = new RadialGauge({
            renderTo: 'hygeine'
        }).draw();
        var gauge2 = new RadialGauge({
            renderTo: 'investment'
        }).draw();
</script>