Cloud9Charts API Demo

by knowi

HTML

<h2>Knowi API Demo</h2>

<button id="goto_dashboard">
  Go to dashboard
</button>
<button id="goto_datasources">
  Go to datasources
</button>
<button id="goto_queries">
  Go to queries
</button>
<button id="goto_widgets">
  Go to widgets
</button>
<div id="knowi"></div>

CSS

#knowi {
  width: 900px;
  height: 550px;
}

JavaScript

$(function() {

  /*
      //
      // Access to a simple shared dashboard 
      //
  	Knowi.render('#knowi', {
  		type: 'share',
          dashboard: 'CnzzWr6ZGrii4BYsa295HoVWzNB7VaZey6StgO1uFw2kie'
  	}, function(){ 
      	$('body').append('<span>Dashboard page has been loaded</span>');
      });
      
      //
      // Access to a secure shared dashboard 
      //    
  	Knowi.render('#', {
          type: 'secure',
          dashboard: 'CnzzWr6ZGrii4BYsa295HoVWzNB7VaZey6StgO1uFw2kie',
          hash: 'secureHash'
  	}, function(){ 
      	$('body').append('<span>Dashboard page has been loaded</span>');
      });    
      
      //
      // Single Sign-On
      //    
  	Cloud9Charts.render('#cloud9charts', {
          type: 'single',
          token: 'b7E5pofgis9nBjSyPxUclksflkfltS1ZEPhhHhG2MBZis34QJiiBFn8ie'
  	}, function(){ 
      	$('body').append('<span>Dashboard page has been loaded</span>');
      });
  */

  //
  // Simple login
  //
  Knowi.render('#knowi', {
    type: 'touchdown',
    username: 'demo',
    password: 'demo',
    view: {
      title: true,
      css: ['https://rawgit.com/AntonLapshin/csharp/master/custom1.css', 'https://rawgit.com/AntonLapshin/csharp/master/custom2.css'],
      backgroundColor: 'cccaaa',
      scroll: false
    },
  }, function() {
    $('body').append('<p>Dashboard page has been loaded</p>');
  });

  $('#goto_dashboard').click(function() {
    Knowi.goto('dashboard', {}, function() {
      $('body').append('<p>Dashboard page has been loaded</p>');
    })
  });

  $('#goto_datasources').click(function() {
    Knowi.goto('datasources', {}, function() {
      $('body').append('<p>Datasources page has been loaded</p>');
    })
  });

  $('#goto_queries').click(function() {
    Knowi.goto('queries', {
      backgroundColor: 'transparent'
    }, function() {
      $('body').append('<p>Queries page has been loaded</p>');
    })
  });

  $('#goto_widgets').click(function() {
    Knowi.goto('widgets', {}, function() {
 ...