Dependencies

These graphs and charts depend on additional scripts. We recommended you include highcharts.js and highcharts-more.js. Also, if you don't have nc.min.css included, is recommended to include graphs.css.

The code for all the examples on this page can be found in graphs-examples.js.

Bar Charts

Dependencies

For this type of chart is recommended to include rounded-corners.js

Clustered

<div class="container-graph" id="bar-chart"></div>

Stacked

<div class="container-graph" id="bar-chart-stacked"></div>

Split

<div class="container-graph" id="bar-chart-split"></div>

Two-sided Scales

<div class="container-graph" id="bar-chart-two-sided"></div>

Line Charts

Basic - Hard Line

<div class="container-graph" id="line-chart-hard-line"></div>

Basic - Soft Line

<div class="container-graph" id="line-chart-soft-line"></div>

Line with markers

<div class="container-graph" id="line-with-markers"></div>

Scatter plots

<div class="container-graph" id="scatter-plots-chart"></div>

<div class="container-graph" id="scatter-plots-chart-2"></div>

Table charts

Name Health Label Size Timeout Status
www.visma.com 60 12.358 12
www.visma.se 90 9.701 2
www.visma.no 90 9.701 2
Name Health Label Size Timeout
www.visma.fi 13 19.453 19
www.visma.dk 17 799 4
www.visma.uk 34 9.322 6
Name Health Label Size Timeout
www.visma.ro 23 358 14
www.visma.ru 14 10.131 12
www.visma.lt 43 5.321 5 
<!-- Spline chart -->
<table class="table table-line-chart">
   <thead>
      <tr>
         <th>Name</th>
         <th>Health</th>
         <th>Label</th>
         <th>Size</th>
         <th>Timeout</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody>
      <tr class="chart-ascending">
         <td><a>www.visma.com</a></td>
         <td class="text-center" data-sparkline="71, 59, 66, 33, 54, 71, 59, 66, 25, 33, 54"></td>
         <td>60</td>
         <td>12.358</td>
         <td>12</td>
         <td class="text-center"><span class="graph-arrow"></span></td>
      </tr>
      <tr class="chart-symmetrical">
         <td><a>www.visma.se</a></td>
         <td class="text-center" data-sparkline="61, 51, 66, 39, 54, 61, 79, 67, 25, 33, 54"></td>
         <td>90</td>
         <td>9.701</td>
         <td>2</td>
         <td class="text-center"><span class="graph-arrow"></span></td>
      </tr>
      <tr class="chart-descending">
         <td><a>www.visma.no</a></td>
         <td class="text-center" data-sparkline="27, 40, 34, 42"></td>
         <td>90</td>
         <td>9.701</td>
         <td>2</td>
         <td class="text-center"><span class="graph-arrow"></span></td>
      </tr>
   </tbody>
</table>

<!-- Column chart -->
<table class="table table-column-chart">
   <thead>
      <tr>
         <th>Name</th>
         <th>Health</th>
         <th>Label</th>
         <th>Size</th>
         <th>Timeout</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><a>www.visma.fi</a></td>
         <td class="text-center" data-sparkline="12, -11, -15, -13, 14 ; column"></td>
         <td>13</td>
         <td>19.453</td>
         <td>19</td>
      </tr>
      <tr>
         <td><a>www.visma.dk</a></td>
         <td class="text-center" data-sparkline="19, 17, 15, -13, 14 ; column"></td>
         <td>17</td>
         <td>799</td>
         <td>4</td>
      </tr>
      <tr>
         <td><a>www.visma.uk</a></td>
         <td class="text-center" data-sparkline="21, -18, 13, -12, -7 ; column"></td>
         <td>34</td>
         <td>9.322</td>
         <td>6</td>
      </tr>
   </tbody>
</table>

<!-- Line chart -->
<table class="table table-line-chart">
   <thead>
      <tr>
         <th>Name</th>
         <th>Health</th>
         <th>Label</th>
         <th>Size</th>
         <th>Timeout</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td><a>www.visma.ro</a></td>
         <td class="text-center" data-sparkline="52, 21, 35, 43, 64, 24, 12, -15, -25, 25, 44, 52 ; line"></td>
         <td>23</td>
         <td>358</td>
         <td>14</td>
      </tr>
      <tr>
         <td><a>www.visma.ru</a></td>
         <td class="text-center" data-sparkline="19, -17, -15, 23, 34 ; line"></td>
         <td>14</td>
         <td>10.131</td>
         <td>12</td>
      </tr>
      <tr>
         <td><a>www.visma.lt</a></td>
         <td class="text-center" data-sparkline="11, 29, 65, 18, 13, -35, 27 ; line"></td>
         <td>43</td>
         <td>5.321</td>
         <td>5</td>
      </tr>
   </tbody>
</table>

Circle Progress Graphs

Dependencies

For this type of chart is recommended to include solid-gauge.js

<div class="container-graph" id="circle-progress-graph"></div>

Line Progress Graphs

<div class="container-graph" id="line-progress-graph"></div>

Area charts

Basic

<div class="container-graph" id="area-charts"></div>

Splited

<div class="container-graph" id="area-charts-split"></div>

Stacked

<div class="container-graph" id="area-charts-stack"></div>

Pie charts

<div class="container-graph" id="pie-chart"></div>

Doughnut charts

<div class="container-graph" id="doughnut-chart"></div>

Gauges

Dependencies

For this type of chart is recommended to include solid-gauge.js

Primary

<div class="container-graph" id="gauges-chart-primary-example1"></div>

<div class="container-graph" id="gauges-chart-primary-example2"></div>

Secondary

<div class="container-graph" id="gauges-chart-secondary-example1"></div>

<div class="container-graph" id="gauges-chart-secondary-example2"></div>

<div class="container-graph" id="gauges-chart-secondary-example3"></div>

<div class="container-graph" id="gauges-chart-secondary-example4"></div>

<div class="container-graph" id="gauges-chart-secondary-example5"></div>

<div class="container-graph" id="gauges-chart-secondary-example6"></div>