<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <!-- <script src="https://code.highcharts.com/modules/exporting.js"></script> --> <style> .grafico { min-width: 310px; max-width: 400px; height: 280px; margin: 0 auto } .main-header { font-size: x-large; color : #888; font-family: Verdana; margin-bottom: 20px; } .destaque { color: #f88; font-weight: bolder; } .highcharts-tooltip h3 { margin: 0.3em 0; } </style> <div class="container"> <div class="row"> <div class="main-header">Product <span class="destaque">name</span></div> </div> <div class="col-md-3"> <div class="panel panel-info"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-list-ol fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading">4</p> <p class="announcement-text">Customers</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> View </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-usd fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading"> R$ 950 mil</p> <p class="announcement-text">Revenue</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Details </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="panel panel-warning"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-line-chart fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading"> 2,3 months</p> <p class="announcement-text">Average time</p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Details </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-3"> <div class="panel panel-success"> <div class="panel-heading"> <div class="row"> <div class="col-xs-6"> <i class="fa fa-money fa-5x"></i> </div> <div class="col-xs-6 text-right"> <p class="announcement-heading"> $ 250 k</p> <p class="announcement-text">Recovered <i class=""></i> </p> </div> </div> </div> <a href="#"> <div class="panel-footer announcement-bottom"> <div class="row"> <div class="col-xs-6"> Details </div> <div class="col-xs-6 text-right"> <i class="fa fa-arrow-circle-right"></i> </div> </div> </div> </a> </div> </div> <div class="col-md-6"> <h3>Main customers</h3> <table class="table table-condensed table-bordered table-hover small"> <thead> <tr> <th style="width:80px;">.</th> <th>Name</th> <th>Revenue</th> <th>Tax</th> <th>Cap</th> <th>ROI</th> <th>Interest</th> </tr> </thead> <tbody> <tr> <td> <a href="#"> <i class="glyphicon glyphicon-dashboard"></i></a> <a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a> <a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a> </td> <td> Company 1 </td> <td> $ 350 k </td> <td> 4 </td> <td> $ 291,75 </td> <td>3,72</td> <td> 3,65% </td> </tr> <tr class="danger"> <td> <a href="#"> <i class="glyphicon glyphicon-dashboard"></i> </a> <a href="#"> <i class="glyphicon glyphicon-eye-open"></i> </a> <a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a> </td> <td> Customer 2 </td> <td>$ 270 k</td> <td>7,8 </td> <td>$ 1307.32</td> <td>2,61</td> <td>8,45%</td> </tr> <tr class="info"> <td> <a href="#"> <i class="glyphicon glyphicon-dashboard"></i> </a> <a href="#"> <i class="glyphicon glyphicon-eye-open"></i> </a> <a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a> </td> <td> Customer 3 </td> <td>$ 125 k</td> <td>2,5 </td> <td>$ 312.45</td> <td>9,21</td> <td>2,5%</td> </tr> <tr > <td> <a href="#"> <i class="glyphicon glyphicon-dashboard"></i> </a> <a href="#"> <i class="glyphicon glyphicon-eye-open"></i> </a> <a href="#"> <i class="glyphicon glyphicon-warning-sign"></i></a> </td> <td> Customer 4 </td> <td>$ 205 k</td> <td>7,1 </td> <td>$ 115,75</td> <td>6,27</td> <td>(n/d)</td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div id='grafico1' class="grafico"></div> </div> <div class="col-md-6"> <div id='grafico2' class="grafico"></div> </div> <div class="col-md-6"> <div id='grafico3' class="grafico"></div> </div> <div class="col-md-8"> <h3>Messages</h3> <table class="table table-condensed table-bordered table-hover small"> <thead> <tr> <th style="width:30px;">.</th> <th>From</th> <th>Subject</th> <th>Actions</th> </tr> </thead> <tbody> <tr class="text-info"> <td> <i class="glyphicon glyphicon-info-sign"></i> </td> <td> John Doe </td> <td> Complaint </td> <td> <a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a> <a href="#"> <i class="glyphicon glyphicon-arrow-right"></i> </a> </td> </tr> <tr class="text-info"> <td> <i class="glyphicon glyphicon-user"></i> </td> <td> Mr Joe </td> <td> Congrats </td> <td> <a href="#"> <i class="glyphicon glyphicon-eye-open"></i></a> <a href="#"> <i class="glyphicon glyphicon-arrow-right"></i> </a> </td> </tr> </tbody> </table> </div> <div class="col-md-6"> <div id='grafico4' class="grafico" style="height: 400px;"></div> </div> </div>

document.addEventListener("DOMContentLoaded", function(event) { Highcharts.chart('grafico1', { credits: { enabled: false }, title: { text: 'Revenue by brand' }, yAxis: { title: { text: ' $' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { pointStart: 1 } }, series: [{ name: 'Brand 1', data: [23, 27, 32, 26, 25, 27, 22, 19] }, { name: 'Brand 2', data: [45, 49, 43, 41, 42, 41, 38, 34] }, { name: 'Brand 3', data: [43, 58, 51, 52, 51, 60, 62, 65] }, { name: 'Brand 4', data: [null, null, 23, 15, 19, 21, 27, 30] }] }); Highcharts.chart('grafico2', { chart: { type: 'areaspline' }, credits: { enabled: false }, title: { text: 'Forecast - ROI' }, yAxis: { title: { text: 'Months' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { pointStart: 1 } }, series: [{ name: 'Product 1', data: [15, 27, 32, 26, 25, 20] }, { name: 'Product 2', data: [43, 41, 42, 41, 38, 34] }, { name: 'Product 3', data: [51, 52, 51, 60, 62, 65] }, { name: 'Product 4', data: [null, null, 29, 22, 19, 21] }] }); Highcharts.chart('grafico3', { chart: { type: 'column' }, credits: { enabled: false }, title: { text: 'Runway overview' }, xAxis: { categories: ['Product 1', 'Product 2', 'Product 3', 'Product 4'] }, yAxis: { title: { text: 'value (USD)' }, stackLabels: { enabled: true, style: { fontWeight: 'bold', color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' } } }, legend: { align: 'center', verticalAlign: 'bottom', backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', borderColor: '#CCC', shadow: false }, tooltip: { headerFormat: '<b>{point.x}</b><br/>', pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' }, plotOptions: { column: { stacking: 'normal', dataLabels: { enabled: false, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: [{ name: 'Debit', data: [0,0,0,15], color : '#FA5858' }, { name: 'Available', data: [150, 130, 25, 0], color : '#58FA58' }, { name: 'Used', data: [100, 140, 100, 205], color : '#FE9A2E' }] }); Highcharts.chart('grafico4', { credits: { enabled: false }, chart: { type: 'bubble', plotBorderWidth: 1, zoomType: 'xy' }, legend: { enabled: true }, title: { text: 'Business analisys' }, xAxis: { min: 0, max: 100, gridLineWidth: 1, title: { text: 'Revenue' }, labels: { format: '{value} %' }, plotLines: [{ color: 'red', dashStyle: 'dot', width: 1, value: 25, zIndex: 3 },{ color: 'black', dashStyle: 'dot', width: 2, value: 50, zIndex: 3 },{ color: 'green', dashStyle: 'dot', width: 1, value: 75, zIndex: 3 } ] }, yAxis: { min: 0, max: 100, startOnTick: false, endOnTick: false, title: { text: 'Sales' }, labels: { format: '{value} %' }, maxPadding: 0.2, plotLines: [{ color: 'red', dashStyle: 'dot', width: 1, value: 25, zIndex: 3 },{ color: 'black', dashStyle: 'dot', width: 2, value: 50, zIndex: 3 },{ color: 'green', dashStyle: 'dot', width: 1, value: 75, zIndex: 3 }] }, tooltip: { useHTML: true, headerFormat: '<table>', pointFormat: '<tr><th>CAC:</th><td>{point.x}%</td></tr>' + '<tr><th>Vendas:</th><td>{point.y}%</td></tr>' + '<tr><th>Volume:</th><td>R$ {point.z} k</td></tr>', footerFormat: '</table>', followPointer: true }, plotOptions: { series: { dataLabels: { enabled: true, format: '{point.code}' } } }, series: [{ name : 'Ok', minSize : '10%', maxSize: '20%', color : '#0c0', data: [ { x: 80.4, y: 62.5, z: 50, code: 'I4', name: 'Product 4' } ] }, { name : 'Danger', minSize : '10%', maxSize: '20%', color: '#c00', data : [ { x: 25, y: 15, z: 16, code: 'I1', name: 'Product 1' } ] }, { name : 'Warning', minSize : '10%', maxSize: '20%', color : '#fa0', data : [ { x: 25, y: 65, z: 32, code: 'I5', name: 'Product 5' }, { x: 86.5, y: 10, z: 17, code: 'I2', name: 'Product 2'} ] }, { name : 'Regular', minSize : '10%', maxSize: '20%', color : '#af0', data: [ { x: 80.8, y: 48.5, z: 15, code: 'I3', name: 'Product 3' } ] } ] }); });