Knockout Flot Grap

Knockout Flot Grap

by Keyur Patel

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
    <div data-bind="foreach: people"> 
        <div class="col-sm-6">
            <label data-bind="text: $index()"></label>
            <label data-bind="text: $data.firstName"></label>
            <label data-bind="text: $data.lastName"></label>
        </div>
       <div class="col-sm-6">
            <!-- flot grap div inside knoutout binding -->
    <div data-bind="attr:{'id':'placeholder'+$index()}" style="width:400px;height:300px;float:right"></div>
        </div>
    </div>

CSS

// Not used if showHtml is false
.valueLabels {
	font-size:70%;
	color:black;
}
div.valueLabelLight {
	opacity:0.5;
	background-color: white;
	border:none;
	position:absolute;
}
div.valueLabel {
	position:absolute;
	border:none;
}

JavaScript

/***************************************************************************/
/**
 * Value Labels Plugin for flot.
 * http://leonardoeloy.github.com/flot-valuelabels
 * http://wiki.github.com/leonardoeloy/flot-valuelabels/
 *
 * Using canvas.fillText instead of divs, which is better for printing - by Leonardo Eloy, March 2010.
 * Tested with Flot 0.6 and JQuery 1.3.2.
 *
 * Original homepage: http://sites.google.com/site/petrsstuff/projects/flotvallab
 * Released under the MIT license by Petr Blahos, December 2009.
 */

/***************************************************************************/

var data = [
       {
           label: 'Active',
           color: 'aqua',
           data: [[0, 4200]]
       },
       {
           label: 'Term-Vested',
           color: 'blue',
           data: [[1, 360]]
       },
       {
           label: 'Inactive',
           color: 'red',
           data: [[2, 16]]
       },
       {
           label: 'Retiree',
           color: 'green',
           data: [[3, 806]]
       }    
    
        /*
        {data: [[0, 4200]]},
        {data: [[1, 360]]},
        {data: [[2, 16]]},
        {data: [[3, 806]]}
        */
 ];

var ticks = [[0, "Active"], [1, "Term-Vested"], [2, "Inactive"], [3, "Retiree"]]; 

var options = {
            series: {
                 valueLabels: {
                      show:            true,
                      showAsHtml:      false, 
                      align:           'center'                     
              },
              bars: {
                    show: true,
                    fill: 0.9                    
              }                          
            },
            bars: {
                align: "center",
                barWidth: 0.5,
            },            
            xaxis: {
          // Need to include jquery.flot.axislabels.js to customize the fonts
                 //axisLabel: "",   
                //axisLabelUseCanvas: true,
               ...