manyi/static/angular-mod/tpl/ui_chart.html

<div class="bg-light lter b-b wrapper-md">
  <h1 class="m-n font-thin h3">Beauty Your Data</h1>
</div>
<div class="wrapper-md">
  <div ng-controller="FlotChartDemoCtrl">
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">Spline</div>
          <div class="panel-body">
            <div ui-jq="plot" ui-options="
              [
                { data: {{d}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 } }
              ], 
              {
                colors: ['{{app.color.info}}'],
                series: { shadowSize: 3 },
                xaxis:{ 
                  font: { color: '#ccc' },
                  position: 'bottom',
                  ticks: [
                    [ 1, 'Jan' ], [ 2, 'Feb' ], [ 3, 'Mar' ], [ 4, 'Apr' ], [ 5, 'May' ], [ 6, 'Jun' ], [ 7, 'Jul' ], [ 8, 'Aug' ], [ 9, 'Sep' ], [ 10, 'Oct' ], [ 11, 'Nov' ], [ 12, 'Dec' ]
                  ]
                },
                yaxis:{ font: { color: '#ccc' } },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                tooltip: true,
                tooltipOpts: { content: '%x.1 is %y.4',  defaultTheme: false, shifts: { x: 0, y: 20 } }
              }
            " style="height:240px" >
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">Multiple</div>
          <div class="panel-body">
            <div ui-jq="plot" ui-options="
              [
                { data: {{d0_1}}, label: 'Unique Visits', points: { show: true } }, 
                { data: {{d0_2}}, label: 'Page Views', bars: { show: true, barWidth: 0.6, fillColor: { colors: [{ opacity: 0.2 }, { opacity: 0.4}] } } }
              ],
              {                
                colors: [ '{{app.color.info}}','{{app.color.success}}' ],
                series: { shadowSize: 2 },
                xaxis:{ font: { color: '#ccc' } },
                yaxis:{ font: { color: '#ccc' } },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                tooltip: true,
                tooltipOpts: { content: '%s of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 0, y: 20 } }
              }
            " style="height:240px"></div>
          </div>                  
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">Order bar</div>
          <div class="panel-body">
            <div ui-jq="plot" ui-options="
              [ 
                { label: 'A', data: {{d1_1}} },
                { label: 'B', data: {{d1_2}} },
                { label: 'C', data: {{d1_3}} }
              ],
              {
                bars: { show: true, fill: true, lineWidth: 1, order: 1, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] } },
                colors: ['{{app.color.info}}', '{{app.color.success}}', '{{app.color.primary}}'],
                series: { shadowSize: 1 },
                xaxis:{ font: { color: '#ccc' } },
                yaxis:{ font: { color: '#ccc' } },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },                
                tooltip: true
              }
            " style="height:240px"></div>
          </div>                  
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">Bar</div>
          <div class="panel-body">
            <div ui-jq="plot" ui-options="
              [
                { data: {{d2}}, label: 'Pressure', color: '{{app.color.info}}' }
              ],
              {
                bars: { show: true, barWidth: 0.6, fillColor: { colors: [{ opacity: 0.5 }, { opacity: 0.9}] }  },
                xaxis: { font: { color: '#ccc' } },
                yaxis: { font: { color: '#ccc' }, min: -2, max: 2 },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                series: { shadowSize: 1 },
                tooltip: true
              }
            " style="height:240px"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">Compose</div>
          <div class="panel-body">
            <div ui-jq="plot" ui-options="
              [
                { data: {{d0_1}}, label: 'A', points: { show: true }, lines: { show: true, fill: true, fillColor: { colors: [{ opacity: 0.1 }, { opacity: 0.1}] } } }, 
                { data: {{d0_2}}, label: 'B', points: { show: true, radius: 4 } }
              ],
              {
                colors: [ '{{app.color.info}}','{{app.color.warning}}' ],
                series: { shadowSize: 2 },
                xaxis:{ font: { color: '#ccc' } },
                yaxis:{ font: { color: '#ccc' } },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                tooltip: true,
                tooltipOpts: { content: '%s of %x.1 is %y.4',  defaultTheme: false, shifts: { x: 0, y: 20 } }
              }
            " style="height:240px"></div>
          </div>                  
        </div>
      </div>
      <div class="col-md-6">
        <div class="panel panel-default">
          <div class="panel-heading font-bold">Donut Pie</div>
          <div class="panel-body">
            <div ui-jq="plot" ui-options="
              {{d3}},
              {
                series: { pie: { show: true, innerRadius: 0.5, stroke: { width: 0 }, label: { show: true, threshold: 0.05 } } },
                colors: ['{{app.color.primary}}','{{app.color.info}}','{{app.color.success}}','{{app.color.warning}}','{{app.color.danger}}'],
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },   
                tooltip: true,
                tooltipOpts: { content: '%s: %p.0%' }
              }
            " style="height:240px"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">Pie</div>
        <div class="panel-body text-center">              
          <div ng-init="data1=[60,40]" ui-jq="sparkline" ui-options="{{data1}}, {type:'pie', height:154, sliceColors:['{{app.color.info}}','#eaeeea']}" class="sparkline inline"></div>
          <div class="line pull-in"></div>
          <div class="text-xs">
            <i class="fa fa-circle text-info"></i> 60%
            <i class="fa fa-circle text-muted m-l"></i> 40%
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">Data graph</div>
        <div class="bg-light dker wrapper m-t-n-xxs">
          <span class="pull-right">Friday</span>
          <span class="h4">$540</span>
          <div class="text-center m-b-n m-t-sm">
              <div ng-init="data2=[50.32,45.23,47.56,36.25,53.85,40.15,41.25,50.15,57.14,36.15,97.26,50.15,45.32,47.19,37.75,25.15,56.34,50.35,47.25,53.15]" ui-jq="sparkline" ui-options="{{data2}}, {type:'line', height:65, width: '100%', lineWidth:2, valueSpots:{'0:':'#fff'}, lineColor:'#fff', spotColor:'#fff', fillColor:'', highlightLineColor:'#fff', spotRadius:3}"></div>

              <div ng-init="data3=[ 10,9,11,10,11,10,12,10,9,10,11,9,8 ]" ui-jq="sparkline" ui-options="{{data3}}, {type:'bar', height:45, barWidth:6, barSpacing:6, barColor:'{{app.color.primary}}'}" class="sparkline inline">loading...</div>
          </div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-xs-4">
              <small class="text-muted block">Market</small>
              <span>$1500.00</span>
            </div>
            <div class="col-xs-4">
              <small class="text-muted block">Referal</small>
              <span>$600.00</span>
            </div>
            <div class="col-xs-4">
              <small class="text-muted block">Affiliate</small>
              <span>$400.00</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">Stacked</div>
        <div class="panel-body">
          <div class="m-b-md">
            <p class="h3 font-thin">Investings</p>
            Avarage investing in last year.
          </div>
          <div class="row m-b">
            <div class="col-xs-6">
              <div ng-init="data4 = [ [2, 8], [4, 6], [6, 4], [8, 2], [10, 0], [8, 2], [6, 4], [4, 6], [2,8] ]" ui-jq="sparkline" ui-options="{{data4}}, {type:'bar', height:112, barWidth:6, barSpacing:10, stackedBarColor:['{{app.color.success}}', '#d7e5e8']}" class="sparkline inline"></div>
            </div>
            <div class="col-xs-6">
              Revenue
              <div class="h3 text-black m-b">4500,00</div>
              Costs
              <div class="h3 text-success">3450,00</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">
          Easypiechart
        </div>
        <div class="panel-body text-center">
          <h4>62.5<small> hrs</small></h4>
          <small class="text-muted block">Updated at 2 minutes ago</small>
          <div class="inline">
            <div ui-jq="easyPieChart" ui-options="{
                      percent: 75,
                      lineWidth: 10,
                      trackColor: '{{app.color.light}}',
                      barColor: '{{app.color.warning}}',
                      scaleColor: '{{app.color.light}}',
                      size: 188,
                      lineCap: 'butt'
                    }">
              <div>
                <span class="h2 m-l-sm step">75</span>%
                <div class="text text-sm">new</div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-footer"><small>% of avarage rate of the Conversion</small></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">
          Animate
        </div>
        <div class="panel-body text-center">
          <h4><small>last </small>12<small> hrs</small></h4>
          <small class="text-muted block">yesterday: 20%</small>
          <div class="inline">
            <div ui-jq="easyPieChart"  ui-options="{
                      percent: 25,
                      lineWidth: 10,
                      trackColor: '{{app.color.light}}',
                      barColor: '{{app.color.success}}',
                      scaleColor: '{{app.color.light}}',
                      size: 188,
                      lineCap: 'butt',
                      animate: 1000
                    }">
              <div>
                <span class="h2 m-l-sm step">25</span>%
                <div class="text text-sm">today</div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-footer"><small>% of change</small></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="panel panel-default">
        <div class="panel-heading font-bold">
          Rotate
        </div>
        <div class="panel-body text-center">
          <h4>3,450</h4>
          <small class="text-muted block">Worldwide visitors</small>
          <div class="inline m-t m-b">
            <div ui-jq="easyPieChart" ui-options="{
                      percent: 50,
                      lineWidth: 10,
                      trackColor: '{{app.color.light}}',
                      barColor: '{{app.color.info}}',
                      scaleColor: false,
                      size: 158,
                      rotate: 90,
                      lineCap: 'butt'
                    }">
              <div>
                <span class="h2 m-l-sm step">50</span>%
                <div class="text text-sm">new visits</div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-footer"><small>% of avarage rate of the visits</small></div>
      </div>
    </div>
  </div>
</div>