Merged feature/phpunit into dev
This commit is contained in:
xdrm-brackets
commit
61b0d515f1
|
|
@ -1 +1,3 @@
|
|||
.ftpconfig
|
||||
sftp-config.json
|
||||
phpunit/coverage/
|
||||
|
|
|
|||
|
|
@ -112,16 +112,18 @@
|
|||
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
|
||||
|
||||
|
||||
/* (4) On definit les donnees POST */
|
||||
$postdata = '';
|
||||
/* (4) On definit les donnees POST si on est pas en get */
|
||||
if( $build['method'] != 'GET' ){
|
||||
$postdata = '';
|
||||
|
||||
// On formatte les donnees au format 'key=value&key=value'
|
||||
foreach($build['postdata'] as $key=>$value)
|
||||
$postdata .= $key.'='.$value.'&';
|
||||
rtrim($postdata); // on supprime le '&' a la fin s'il y a
|
||||
// On formatte les donnees au format 'key=value&key=value'
|
||||
foreach($build['postdata'] as $key=>$value)
|
||||
$postdata .= $key.'='.$value.'&';
|
||||
rtrim($postdata); // on supprime le '&' a la fin s'il y a
|
||||
|
||||
// On envoie les donnees
|
||||
curl_setopt($curl, CURLOPT_POSTFIELDS, $postdata);
|
||||
// On envoie les donnees
|
||||
curl_setopt($curl, CURLOPT_POSTFIELDS, $postdata);
|
||||
}
|
||||
|
||||
|
||||
/* [4] Execution de la requete et recup de la response
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
use \manager\sessionManager;
|
||||
use \manager\ManagerError;
|
||||
use \manager\Repo;
|
||||
use \manager\Database;
|
||||
|
||||
use \api\client;
|
||||
|
||||
|
|
@ -22,6 +23,8 @@
|
|||
=========================================================*/
|
||||
$file_content = file_get_contents('calllog.xml');
|
||||
|
||||
var_dump( $file_content ); return;
|
||||
|
||||
/* [2] On cree la requete
|
||||
=========================================================*/
|
||||
$request = new ModuleRequest('call_log/unserialize', array('filecontent'=>$file_content));
|
||||
|
|
@ -66,16 +69,16 @@
|
|||
var_dump( $contact );
|
||||
}
|
||||
|
||||
parseCallLog();
|
||||
// parseCallLog();
|
||||
|
||||
debug();
|
||||
|
||||
|
||||
|
||||
/* () Test du client de l'API generique */
|
||||
// $api = new client();
|
||||
|
||||
// $response = $api->send('generate-network-chart-data', array(
|
||||
// '@token'=> '48e701d4e72e4e35bc37c9a800b49d5400734d7b'
|
||||
// '@token'=> '52945efbed43b50c12413f2f0e9519bfd9e98ce8'
|
||||
// ));
|
||||
|
||||
// var_dump($response);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"svg": "image/svg+xml",
|
||||
"svg": "image/svg+xml",
|
||||
|
||||
"jpg": "image/jpeg",
|
||||
"png": "image/png",
|
||||
"jpg": "image/jpeg",
|
||||
"png": "image/png",
|
||||
|
||||
"css": "text/css",
|
||||
"js": "text/js",
|
||||
"css": "text/css",
|
||||
"js": "text/javascript",
|
||||
|
||||
"json": "application/json"
|
||||
"json": "application/json"
|
||||
}
|
||||
|
|
@ -9,6 +9,6 @@
|
|||
"css" : "/css",
|
||||
"js" : "/js",
|
||||
|
||||
"cssview" : "/view/css",
|
||||
"jsview" : "/view/js"
|
||||
"highcharts": "/js/lib/highcharts",
|
||||
"sigma": "/js/lib/sigma"
|
||||
}
|
||||
|
|
@ -1,12 +1,34 @@
|
|||
{
|
||||
"module": {
|
||||
"method": {
|
||||
"description": "Test de l'API",
|
||||
"permissions": [],
|
||||
"parameters": {}
|
||||
},
|
||||
|
||||
"phpunitParams": {
|
||||
"description": "Méthode utile à phpunit pour le test des paramètres.",
|
||||
"permissions": [],
|
||||
"parameters": {
|
||||
"p1": { "description": "Texte", "type": "text" },
|
||||
"p2": { "description": "Entier positif", "type": "id" }
|
||||
}
|
||||
},
|
||||
|
||||
"phpunitPermissions": {
|
||||
"description": "Méthode utile à phpunit pour le test des permissions.",
|
||||
"permissions": ["a", "b"],
|
||||
"parameters": {}
|
||||
}
|
||||
},
|
||||
|
||||
"user": {
|
||||
"login": {
|
||||
"description": "Connexion avec un login (identifiant ou adresse mail) et un mot de passe.",
|
||||
"permissions": [],
|
||||
"parameters": {
|
||||
"login": { "description": "Identifiant ou adresse mail", "type": "varchar(255)" },
|
||||
"password": { "description": "Mot de passe", "type":"text" }
|
||||
"login": { "description": "Identifiant ou adresse mail", "type": "varchar(3,50)" },
|
||||
"password": { "description": "Mot de passe", "type": "text" }
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -37,7 +59,7 @@
|
|||
"description": "Creation d'un nouvel utilisateur.",
|
||||
"permissions": ["admin"],
|
||||
"parameters": {
|
||||
"login" : { "description": "Login de l'utilisateur, 30 caracteres maximum.", "type": "varchar(30)" },
|
||||
"login" : { "description": "Login de l'utilisateur, 30 caracteres maximum.", "type": "varchar(3,30)" },
|
||||
"password" : { "description": "Mot de passe de l'utilisateur.", "type": "text" },
|
||||
"mail" : { "description": "Adresse mail de l'utilisateur.", "type": "mail" },
|
||||
"reference" : { "description": "UID d'une personne d'un sondage, peut etre vide.", "type": "text" },
|
||||
|
|
@ -99,7 +121,7 @@
|
|||
"description": "Creation d'un token de nom et de duree donnee",
|
||||
"permissions": ["admin"],
|
||||
"parameters": {
|
||||
"name": { "description": "Nom attribue au token", "type": "varchar(50)" },
|
||||
"name" : { "description": "Nom attribue au token", "type": "varchar(3,50)" },
|
||||
"duration": { "description": "Duree du token en nombre de jours", "type": "numeric" }
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1,2 @@
|
|||
#WRAPPER>#CONTAINER>section{display:none;position:relative;flex-grow:1;padding:1em;border-radius:3px;background-color:#fff;color:#000;font-size:1em;border:1px solid #ddd}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section h6{color:#848484;font-size:1.2em;text-transform:uppercase;font-weight:300;letter-spacing:.2em;margin:0;padding:0}#WRAPPER>#CONTAINER>section h6:before{content:'- '}#WRAPPER>#CONTAINER>section h6:after{content:' -'}#WRAPPER>#CONTAINER>section h6.center{text-align:center}#WRAPPER>#CONTAINER>section input[type="radio"],#WRAPPER>#CONTAINER>section input[type="checkbox"]{display:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for],#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]{padding-left:.8em;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{content:'';display:inline-block;position:relative;top:.1em;left:-.8em;width:calc( 1em - 2*.15em );height:calc( 1em - 2*.15em );border-radius:50% / 50%;border:0.15em solid #399ced;background:#fff center center no-repeat;background-image:none;background-size:70% auto;transition:background .2s ease-in-out;cursor:pointer}#WRAPPER>#CONTAINER>section input[type="radio"]:checked+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]:checked+label[for]:before{background-color:#399ced;background-image:url("/f/svg/checked/st/container")}#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{border-radius:3px}#WRAPPER>#CONTAINER>section input[type="submit"],#WRAPPER>#CONTAINER>section input[type="button"]{margin:.5em 0;padding:.3em .5em;border-radius:3px;border:1px solid #515151;color:#515151;background-color:#fff;transition:background .1s ease-in-out, color .1s ease-in-out}#WRAPPER>#CONTAINER>section input[type="submit"]:hover,#WRAPPER>#CONTAINER>section input[type="button"]:hover{background-color:#515151;color:#fff}#WRAPPER>#CONTAINER>section input[type="submit"].primary,#WRAPPER>#CONTAINER>section input[type="button"].primary{border-color:#399ced;color:#399ced;background-color:#fff}#WRAPPER>#CONTAINER>section input[type="submit"].primary:hover,#WRAPPER>#CONTAINER>section input[type="button"].primary:hover{background-color:#399ced;color:#fff}#WRAPPER>#CONTAINER>section img{margin:1em;height:3em}#WRAPPER>#CONTAINER>section .flag{margin:0 .8em;padding:.2em .8em;border-radius:5px;border:1px solid #b5b5b5;color:#555;font-family:'Inconsolata'}
|
||||
#WRAPPER>#CONTAINER>section{display:none;position:relative;flex-grow:1;padding:1em;border-radius:3px;background-color:#fff;color:#000;font-size:1em;border:1px solid #ddd}#WRAPPER>#CONTAINER>section.active{display:block}#WRAPPER>#CONTAINER>section.charts{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around}#WRAPPER>#CONTAINER>section h6{color:#848484;font-size:1.2em;text-transform:uppercase;font-weight:300;letter-spacing:.2em;margin:0;padding:0}#WRAPPER>#CONTAINER>section h6:before{content:'- '}#WRAPPER>#CONTAINER>section h6:after{content:' -'}#WRAPPER>#CONTAINER>section h6.center{text-align:center}#WRAPPER>#CONTAINER>section input[type="radio"],#WRAPPER>#CONTAINER>section input[type="checkbox"]{display:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for],#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]{padding-left:.8em;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#WRAPPER>#CONTAINER>section input[type="radio"]+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{content:'';display:inline-block;position:relative;top:.1em;left:-.8em;width:calc( 1em - 2*.15em );height:calc( 1em - 2*.15em );border-radius:50% / 50%;border:0.15em solid #399ced;background:#fff center center no-repeat;background-image:none;background-size:70% auto;transition:background .2s ease-in-out;cursor:pointer}#WRAPPER>#CONTAINER>section input[type="radio"]:checked+label[for]:before,#WRAPPER>#CONTAINER>section input[type="checkbox"]:checked+label[for]:before{background-color:#399ced;background-image:url("/f/svg/checked/st/container")}#WRAPPER>#CONTAINER>section input[type="checkbox"]+label[for]:before{border-radius:3px}#WRAPPER>#CONTAINER>section input[type="submit"],#WRAPPER>#CONTAINER>section input[type="button"]{margin:.5em 0;padding:.3em .5em;border-radius:3px;border:1px solid #515151;color:#515151;background-color:#fff;transition:background .1s ease-in-out, color .1s ease-in-out}#WRAPPER>#CONTAINER>section input[type="submit"]:hover,#WRAPPER>#CONTAINER>section input[type="button"]:hover{background-color:#515151;color:#fff}#WRAPPER>#CONTAINER>section input[type="submit"].primary,#WRAPPER>#CONTAINER>section input[type="button"].primary{border-color:#399ced;color:#399ced;background-color:#fff}#WRAPPER>#CONTAINER>section input[type="submit"].primary:hover,#WRAPPER>#CONTAINER>section input[type="button"].primary:hover{background-color:#399ced;color:#fff}#WRAPPER>#CONTAINER>section img{margin:1em;height:3em}#WRAPPER>#CONTAINER>section .flag{margin:0 .8em;padding:.2em .8em;border-radius:5px;border:1px solid #b5b5b5;color:#555;font-family:'Inconsolata'}
|
||||
/*# sourceMappingURL=container.css.map */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAMC,2BAAW,CACV,OAAO,CAAE,IAAI,CAKb,QAAQ,CAAE,QAAQ,CAClB,SAAS,CAAE,CAAC,CAEZ,OAAO,CAAE,GAAG,CAEZ,aAAa,CAAE,GAAG,CAElB,gBAAgB,CAAE,IAAI,CAEtB,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,GAAG,CAEd,MAAM,CAAE,cAAc,CAdtB,kCAAQ,CAAE,OAAO,CAAE,KAAK,CAoBxB,8BAAI,CACH,KAAK,CAAE,OAAsB,CAC7B,SAAS,CAAE,KAAK,CAChB,cAAc,CAAE,SAAS,CACzB,WAAW,CAAE,GAAG,CAChB,cAAc,CAAE,IAAI,CAEpB,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CAEV,qCAAQ,CAAC,OAAO,CAAC,IAAI,CACrB,oCAAO,CAAC,OAAO,CAAC,IAAI,CAGpB,qCAAQ,CACP,UAAU,CAAE,MAAM,CAUpB,kGACwB,CACvB,OAAO,CAAE,IAAI,CAId,wHACqC,CACpC,YAAY,CAAE,IAAI,CAGlB,qBAAqB,CAAE,IAAI,CAC3B,mBAAmB,CAAI,IAAI,CAC3B,kBAAkB,CAAK,IAAI,CAC3B,gBAAgB,CAAO,IAAI,CAC3B,eAAe,CAAQ,IAAI,CAC3B,WAAW,CAAY,IAAI,CAI3B,sIAAQ,CACP,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,IAAI,CACT,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,qBAAqB,CAC5B,MAAM,CAAE,qBAAqB,CAE9B,aAAa,CAAE,SAAS,CACxB,MAAM,CAAE,oBAA6B,CAErC,UAAU,CAAE,4BAA4B,CACxC,gBAAgB,CAAE,IAAI,CACtB,eAAe,CAAE,QAAQ,CAEzB,UAAU,CAAE,0BAA0B,CAEtC,MAAM,CAAE,OAAO,CAKjB,sJACoD,CACnD,gBAAgB,CC9FA,OAAO,CD+FvB,gBAAgB,CAAE,kCAAkC,CAKrD,oEAA4C,CAC3C,aAAa,CAAE,GAAG,CASnB,iGACsB,CACrB,MAAM,CAAE,MAAM,CACd,OAAO,CAAE,SAAS,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAmB,CAE3B,KAAK,CCvHW,OAAO,CDyHvB,gBAAgB,CAAE,IAAI,CAEtB,UAAU,CAAE,iDAAiD,CAG7D,6GAAO,CACN,gBAAgB,CC/HD,OAAO,CDgItB,KAAK,CAAE,IAAI,CAKZ,iHAAS,CACR,YAAY,CCrIG,OAAO,CDsItB,KAAK,CCtIU,OAAO,CDuItB,gBAAgB,CAAE,IAAI,CAItB,6HAAO,CACN,gBAAgB,CC5IF,OAAO,CD6IrB,KAAK,CAAE,IAAI,CASd,+BAAK,CACJ,MAAM,CAAE,GAAG,CACX,MAAM,CAAE,GAAG,CAKZ,iCAAO,CACN,MAAM,CAAE,MAAM,CACd,OAAO,CAAE,SAAS,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAiB,CAEzB,KAAK,CAAE,IAAI,CACX,WAAW,CAAE,aAAa",
|
||||
"mappings": "AAMC,2BAAW,CACV,OAAO,CAAE,IAAI,CAcb,QAAQ,CAAE,QAAQ,CAClB,SAAS,CAAE,CAAC,CAEZ,OAAO,CAAE,GAAG,CAEZ,aAAa,CAAE,GAAG,CAElB,gBAAgB,CAAE,IAAI,CAEtB,KAAK,CAAE,IAAI,CACX,SAAS,CAAE,GAAG,CAEd,MAAM,CAAE,cAAc,CAvBtB,kCAAQ,CAAE,OAAO,CAAE,KAAK,CAGxB,kCAAQ,CACP,OAAO,CAAE,IAAI,CAEb,cAAc,CAAE,GAAG,CACnB,SAAS,CAAE,IAAI,CACf,eAAe,CAAE,YAAY,CAqB9B,8BAAI,CACH,KAAK,CAAE,OAAsB,CAC7B,SAAS,CAAE,KAAK,CAChB,cAAc,CAAE,SAAS,CACzB,WAAW,CAAE,GAAG,CAChB,cAAc,CAAE,IAAI,CAEpB,MAAM,CAAE,CAAC,CACT,OAAO,CAAE,CAAC,CAEV,qCAAQ,CAAC,OAAO,CAAC,IAAI,CACrB,oCAAO,CAAC,OAAO,CAAC,IAAI,CAGpB,qCAAQ,CACP,UAAU,CAAE,MAAM,CAUpB,kGACwB,CACvB,OAAO,CAAE,IAAI,CAId,wHACqC,CACpC,YAAY,CAAE,IAAI,CAGlB,qBAAqB,CAAE,IAAI,CAC3B,mBAAmB,CAAI,IAAI,CAC3B,kBAAkB,CAAK,IAAI,CAC3B,gBAAgB,CAAO,IAAI,CAC3B,eAAe,CAAQ,IAAI,CAC3B,WAAW,CAAY,IAAI,CAI3B,sIAAQ,CACP,OAAO,CAAE,EAAE,CACX,OAAO,CAAE,YAAY,CACrB,QAAQ,CAAE,QAAQ,CACjB,GAAG,CAAE,IAAI,CACT,IAAI,CAAE,KAAK,CACX,KAAK,CAAE,qBAAqB,CAC5B,MAAM,CAAE,qBAAqB,CAE9B,aAAa,CAAE,SAAS,CACxB,MAAM,CAAE,oBAA6B,CAErC,UAAU,CAAE,4BAA4B,CACxC,gBAAgB,CAAE,IAAI,CACtB,eAAe,CAAE,QAAQ,CAEzB,UAAU,CAAE,0BAA0B,CAEtC,MAAM,CAAE,OAAO,CAKjB,sJACoD,CACnD,gBAAgB,CCvGA,OAAO,CDwGvB,gBAAgB,CAAE,kCAAkC,CAKrD,oEAA4C,CAC3C,aAAa,CAAE,GAAG,CASnB,iGACsB,CACrB,MAAM,CAAE,MAAM,CACd,OAAO,CAAE,SAAS,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAmB,CAE3B,KAAK,CChIW,OAAO,CDkIvB,gBAAgB,CAAE,IAAI,CAEtB,UAAU,CAAE,iDAAiD,CAG7D,6GAAO,CACN,gBAAgB,CCxID,OAAO,CDyItB,KAAK,CAAE,IAAI,CAKZ,iHAAS,CACR,YAAY,CC9IG,OAAO,CD+ItB,KAAK,CC/IU,OAAO,CDgJtB,gBAAgB,CAAE,IAAI,CAItB,6HAAO,CACN,gBAAgB,CCrJF,OAAO,CDsJrB,KAAK,CAAE,IAAI,CASd,+BAAK,CACJ,MAAM,CAAE,GAAG,CACX,MAAM,CAAE,GAAG,CAKZ,iCAAO,CACN,MAAM,CAAE,MAAM,CACd,OAAO,CAAE,SAAS,CAElB,aAAa,CAAE,GAAG,CAClB,MAAM,CAAE,iBAAiB,CAEzB,KAAK,CAAE,IAAI,CACX,WAAW,CAAE,aAAa",
|
||||
"sources": ["container.scss","constants.scss"],
|
||||
"names": [],
|
||||
"file": "container.css"
|
||||
|
|
|
|||
|
|
@ -10,6 +10,15 @@
|
|||
// Gestion de l'activation des sous-parties
|
||||
&.active{ display: block; }
|
||||
|
||||
// Gestion d'une section contenant des graphiques
|
||||
&.charts{
|
||||
display: flex;
|
||||
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
font-style: normal;
|
||||
font-weight: 100;
|
||||
|
||||
src: url("/css/fonts/proxima-nova/thin.eot");
|
||||
src: url(/css/fonts/proxima-nova/thin#iefix.eot) format("embedded-opentype"),
|
||||
url(/css/fonts/proxima-nova/thin.woff) format("woff"),
|
||||
url(/css/fonts/proxima-nova/thin.ttf) format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Proxima Nova';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
|
||||
src: url("/css/fonts/proxima-nova/regular.eot");
|
||||
src: url(/css/fonts/proxima-nova/regular#iefix.eot) format("embedded-opentype"),
|
||||
url(/css/fonts/proxima-nova/regular.woff) format("woff"),
|
||||
url(/css/fonts/proxima-nova/regular.ttf) format("truetype");
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
/* (2) Gestion de la connection */
|
||||
$login_vars = isset($_POST['login-sub']);
|
||||
$login_vars = $login_vars && isset($_POST['login']) && Database::check('varchar(255)', $_POST['login']);
|
||||
$login_vars = $login_vars && isset($_POST['login']) && Database::check('varchar(3,50)', $_POST['login']);
|
||||
$login_vars = $login_vars && isset($_POST['password']) && Database::check('text', $_POST['password']);
|
||||
|
||||
// Status de login
|
||||
|
|
@ -40,10 +40,11 @@
|
|||
|
||||
// Si les parametres de connection, on essaie de connecter
|
||||
if( $login_vars ){
|
||||
|
||||
$login = new ModuleRequest('user/login', array( 'login' => $_POST['login'], 'password' => $_POST['password'] ));
|
||||
$login_ans = $login->dispatch();
|
||||
|
||||
// Si aucune erreur, on dit qu'on vient de se connecter
|
||||
// Si aucune erreur, on dit qu'on vient de se connecter
|
||||
if( $login_ans->error == ManagerError::Success )
|
||||
$_SESSION['login_status'] = 'logged';
|
||||
else // Si on n'a pas les bonnes donnees
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
/* (3) Gestion de le deconnexion */
|
||||
$logout_vars = isset($_POST['logout-sub']);
|
||||
|
||||
// Si on se deconnecte
|
||||
// Si on se deconnecte
|
||||
if( $logout_vars ){
|
||||
$logout = new ModuleRequest('user/logout');
|
||||
$logout_ans = $logout->dispatch();
|
||||
|
|
@ -68,6 +69,7 @@
|
|||
|
||||
|
||||
|
||||
|
||||
/* [0] On initialise le routeur
|
||||
===================================================*/
|
||||
$R = new Router( $_GET['url'] );
|
||||
|
|
|
|||
|
|
@ -1,4 +1,216 @@
|
|||
/* [-1] On recupere la liste des pages
|
||||
/* [0] Initialisation des variables en local
|
||||
=========================================================*/
|
||||
var DOM = {
|
||||
WRAPPER: $('WRAPPER'),
|
||||
HEADER: $('HEADER'),
|
||||
MENUSIDE: $('MENU-SIDE'),
|
||||
CONTAINER: $('CONTAINER')
|
||||
};
|
||||
var pageManager;
|
||||
|
||||
|
||||
// On cree une instance de l'api
|
||||
api = new APIClass('/api/');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [1] Toggle du sub-menu-side <-> navigation
|
||||
===========================================*/
|
||||
function navSubMenu(subsection){
|
||||
/* [1] Format du param
|
||||
------------------------------------------------*/
|
||||
// Contient l'element courant
|
||||
var current = document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink="'+pageManager.vars[0]+'"]');
|
||||
|
||||
// Contiendra l'element cible
|
||||
var target = null;
|
||||
|
||||
// si @subsection est un element, on le prends
|
||||
target = (subsection instanceof Element) ? subsection : null;
|
||||
|
||||
// Si string, on trouve l'element correspondant
|
||||
target = (typeof subsection == 'string') ? document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink="'+subsection+'"]') : target;
|
||||
|
||||
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||
target = (target == null) ? document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink]') : target;
|
||||
|
||||
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||
if( target == null ) return false;
|
||||
|
||||
/* [2] Gestion de l'affichage de l'element
|
||||
------------------------------------------------*/
|
||||
// On desactive l'element courant
|
||||
if( current != null )
|
||||
current.remClass('active');
|
||||
|
||||
// On cache les sections visibles
|
||||
var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active');
|
||||
for( var i = 0 ; i < visibleSections.length ; i++ )
|
||||
visibleSections[i].remClass('active');
|
||||
|
||||
// On active le nouveau
|
||||
if( target != null ){
|
||||
target.addClass('active');
|
||||
|
||||
// On affiche la section associee
|
||||
var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]');
|
||||
if( targetSection != null )
|
||||
targetSection.addClass('active');
|
||||
|
||||
}
|
||||
|
||||
/* [3] Gestion de pageManager
|
||||
------------------------------------------------*/
|
||||
// Si element, on recupere le data-link
|
||||
var page = null;
|
||||
|
||||
// Si erreur, on retourne FALSE
|
||||
if( !target.getData('sublink') ) return false
|
||||
|
||||
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
|
||||
|
||||
// On met a jour la variable page-manager si data-link trouve
|
||||
pageManager.vars[0] = target.getData('sublink');
|
||||
|
||||
if( mustRefresh )
|
||||
// navMenu(pageManager.page);
|
||||
pageManager.updateURL();
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [4 Toggle du side-menu <-> navigation
|
||||
===========================================*/
|
||||
function navMenu(section){
|
||||
|
||||
/* [1] Format du param
|
||||
------------------------------------------------*/
|
||||
// Contient l'element courant
|
||||
var current = document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]');
|
||||
|
||||
// Contiendra l'element cible
|
||||
var target = null;
|
||||
|
||||
// si @section est un element, on le prends
|
||||
target = (section instanceof Element) ? section : null;
|
||||
|
||||
// Si string, on trouve l'element correspondant
|
||||
target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;
|
||||
|
||||
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||
target = (target == null) ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]') : target;
|
||||
|
||||
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||
if( target == null ) return false;
|
||||
|
||||
/* [2] Gestion de l'affichage de l'element
|
||||
------------------------------------------------*/
|
||||
// On desactive l'element courant
|
||||
if( current != null )
|
||||
current.remClass('active');
|
||||
// On active le nouveau
|
||||
if( target != null )
|
||||
target.addClass('active');
|
||||
|
||||
/* [3] Gestion de pageManager
|
||||
------------------------------------------------*/
|
||||
// Si element, on recupere le data-link
|
||||
var page = null;
|
||||
|
||||
// On charge la page si data-link trouve
|
||||
if( target.getData('link') ){
|
||||
DOM.HEADER.addClass('loading'); // Animation de chargement
|
||||
|
||||
pageManager.setPage( target.getData('link') );
|
||||
|
||||
pageManager.activeXHR.addEventListener('loadend', function(){
|
||||
|
||||
// On gere la navigation du sous-menu (si defini, utilise)
|
||||
var subSectionExists = pageManager.vars.length >= 1 && document.querySelector('#CONTAINER > section[data-sublink="'+pageManager.vars[0]+'"]') != null;
|
||||
if( subSectionExists ) // Si le lien du menu associe existe
|
||||
navSubMenu(pageManager.vars[0]); // on charge la page associee
|
||||
else // sinon
|
||||
navSubMenu(null); // on charge le lien par defaut
|
||||
|
||||
|
||||
// GESTION DE LA NAVIGATION DU SOUS-MENU
|
||||
// si le sous-menu existe
|
||||
var smenu = document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub');
|
||||
if( smenu != null )
|
||||
smenu.addEventListener('click', function(e){
|
||||
var target = e.target;
|
||||
|
||||
while( target != document.body && !target.getData('sublink') )
|
||||
target = target.parentNode;
|
||||
|
||||
if( target.getData('sublink') )
|
||||
navSubMenu(target);
|
||||
}, false);
|
||||
|
||||
// On retire l'icone de chargement
|
||||
DOM.HEADER.remClass('loading');
|
||||
}, false);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [5] Gestion de la navigation (physique)
|
||||
===========================================*/
|
||||
DOM.MENUSIDE.addEventListener('click', function(e){
|
||||
var target = e.target;
|
||||
|
||||
// On remonte dans les parents au bon niveau
|
||||
while( target != document.body && !target.getData('link') )
|
||||
target = target.parentNode;
|
||||
|
||||
// Si on a trouve l'element, on l'utilise pour la page
|
||||
if( target.getData('link') )
|
||||
navMenu(target.getData('link'));
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
/* [6] Gestion du rechargement de page
|
||||
=========================================================*/
|
||||
function reload(){ navMenu( pageManager.page ); }
|
||||
|
||||
/* [7] Gestion du toggle de la page de login
|
||||
=========================================================*/
|
||||
var LOGIN = {
|
||||
show: document.getElementById('user-data'),
|
||||
hide: document.getElementById('login-close'),
|
||||
page: document.getElementById('LOGIN')
|
||||
};
|
||||
|
||||
/* (1) Gestion de l'affichage de la page de login */
|
||||
LOGIN.show.addEventListener('click', function(e){ LOGIN.page.className = 'active'; }, false);
|
||||
|
||||
/* (2) Gestion de la fermeture de la page de login */
|
||||
LOGIN.hide.addEventListener('click', function(e){ LOGIN.page.className = ''; }, false);
|
||||
|
||||
|
||||
|
||||
|
||||
/* [7] On recupere la liste des pages et on lance pageManager
|
||||
=========================================================*/
|
||||
pageManagerClass.prototype.ajax('/f/json/menu/conf', function(pagelistSerialized){
|
||||
// On initialise la liste des pages
|
||||
|
|
@ -11,219 +223,10 @@ pageManagerClass.prototype.ajax('/f/json/menu/conf', function(pagelistSerialized
|
|||
for( var i = 0 ; i < pagelistObject.length; i++ )
|
||||
pagelist.push( pagelistObject[i]['attributes']['data-link'] );
|
||||
|
||||
|
||||
|
||||
|
||||
DOM = {
|
||||
WRAPPER: $('WRAPPER'),
|
||||
HEADER: $('HEADER'),
|
||||
MENUSIDE: $('MENU-SIDE'),
|
||||
CONTAINER: $('CONTAINER')
|
||||
};
|
||||
|
||||
|
||||
|
||||
/* [0] Instanciation
|
||||
===========================================*/
|
||||
var pageManager = new pageManagerClass();
|
||||
/* (1) On initialisa pageManager */
|
||||
pageManager = new pageManagerClass();
|
||||
pageManager.setPage(null, '/view', DOM.CONTAINER, pagelist );
|
||||
|
||||
var api = new APIClass('/api/');
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [1] Toggle du sub-menu-side <-> navigation
|
||||
===========================================*/
|
||||
function navSubMenu(subsection){
|
||||
/* [1] Format du param
|
||||
------------------------------------------------*/
|
||||
// Contient l'element courant
|
||||
var current = document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink="'+pageManager.vars[0]+'"]');
|
||||
|
||||
// Contiendra l'element cible
|
||||
var target = null;
|
||||
|
||||
// si @subsection est un element, on le prends
|
||||
target = (subsection instanceof Element) ? subsection : null;
|
||||
|
||||
// Si string, on trouve l'element correspondant
|
||||
target = (typeof subsection == 'string') ? document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink="'+subsection+'"]') : target;
|
||||
|
||||
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||
target = (target == null) ? document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub > span[data-sublink]') : target;
|
||||
|
||||
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||
if( target == null ) return false;
|
||||
|
||||
/* [2] Gestion de l'affichage de l'element
|
||||
------------------------------------------------*/
|
||||
// On desactive l'element courant
|
||||
if( current != null )
|
||||
current.remClass('active');
|
||||
|
||||
// On cache les sections visibles
|
||||
var visibleSections = document.querySelectorAll('#CONTAINER > section[data-sublink].active');
|
||||
for( var i = 0 ; i < visibleSections.length ; i++ )
|
||||
visibleSections[i].remClass('active');
|
||||
|
||||
// On active le nouveau
|
||||
if( target != null ){
|
||||
target.addClass('active');
|
||||
|
||||
// On affiche la section associee
|
||||
var targetSection = document.querySelector('#CONTAINER > section[data-sublink="'+target.getData('sublink')+'"]');
|
||||
if( targetSection != null )
|
||||
targetSection.addClass('active');
|
||||
|
||||
}
|
||||
|
||||
/* [3] Gestion de pageManager
|
||||
------------------------------------------------*/
|
||||
// Si element, on recupere le data-link
|
||||
var page = null;
|
||||
|
||||
// Si erreur, on retourne FALSE
|
||||
if( !target.getData('sublink') ) return false
|
||||
|
||||
var mustRefresh = pageManager.vars[0] != target.getData('sublink');
|
||||
|
||||
// On met a jour la variable page-manager si data-link trouve
|
||||
pageManager.vars[0] = target.getData('sublink');
|
||||
|
||||
if( mustRefresh )
|
||||
// navMenu(pageManager.page);
|
||||
pageManager.updateURL();
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* [4 Toggle du side-menu <-> navigation
|
||||
===========================================*/
|
||||
function navMenu(section){
|
||||
|
||||
/* [1] Format du param
|
||||
------------------------------------------------*/
|
||||
// Contient l'element courant
|
||||
var current = document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.page+'"]');
|
||||
|
||||
// Contiendra l'element cible
|
||||
var target = null;
|
||||
|
||||
// si @section est un element, on le prends
|
||||
target = (section instanceof Element) ? section : null;
|
||||
|
||||
// Si string, on trouve l'element correspondant
|
||||
target = (typeof section == 'string') ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+section+'"]') : target;
|
||||
|
||||
// Si rien trouve, on prend le premier element correspondant a la premiere page
|
||||
target = (target == null) ? document.querySelector('#WRAPPER > #MENU-SIDE > span[data-link="'+pageManager.pagelist[0]+'"]') : target;
|
||||
|
||||
// Si le param n'est toujours pas bon, on retourne une erreur
|
||||
if( target == null ) return false;
|
||||
|
||||
/* [2] Gestion de l'affichage de l'element
|
||||
------------------------------------------------*/
|
||||
// On desactive l'element courant
|
||||
if( current != null )
|
||||
current.remClass('active');
|
||||
// On active le nouveau
|
||||
if( target != null )
|
||||
target.addClass('active');
|
||||
|
||||
/* [3] Gestion de pageManager
|
||||
------------------------------------------------*/
|
||||
// Si element, on recupere le data-link
|
||||
var page = null;
|
||||
|
||||
// On charge la page si data-link trouve
|
||||
if( target.getData('link') ){
|
||||
DOM.HEADER.addClass('loading'); // Animation de chargement
|
||||
|
||||
pageManager.setPage( target.getData('link') );
|
||||
|
||||
pageManager.activeXHR.addEventListener('loadend', function(){
|
||||
|
||||
// On gere la navigation du sous-menu (si defini, utilise)
|
||||
var subSectionExists = pageManager.vars.length >= 1 && document.querySelector('#CONTAINER > section[data-sublink="'+pageManager.vars[0]+'"]') != null;
|
||||
if( subSectionExists ) // Si le lien du menu associe existe
|
||||
navSubMenu(pageManager.vars[0]); // on charge la page associee
|
||||
else // sinon
|
||||
navSubMenu(null); // on charge le lien par defaut
|
||||
|
||||
|
||||
// GESTION DE LA NAVIGATION DU SOUS-MENU
|
||||
// si le sous-menu existe
|
||||
var smenu = document.querySelector('#MENU-SIDE > span[data-link='+pageManager.page+'] + div.sub');
|
||||
if( smenu != null )
|
||||
smenu.addEventListener('click', function(e){
|
||||
var target = e.target;
|
||||
|
||||
while( target != document.body && !target.getData('sublink') )
|
||||
target = target.parentNode;
|
||||
|
||||
if( target.getData('sublink') )
|
||||
navSubMenu(target);
|
||||
}, false);
|
||||
|
||||
// On retire l'icone de chargement
|
||||
DOM.HEADER.remClass('loading');
|
||||
}, false);
|
||||
}
|
||||
|
||||
}navMenu(pageManager.page);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* [5] Gestion de la navigation (physique)
|
||||
===========================================*/
|
||||
DOM.MENUSIDE.addEventListener('click', function(e){
|
||||
var target = e.target;
|
||||
|
||||
// On remonte dans les parents au bon niveau
|
||||
while( target != document.body && !target.getData('link') )
|
||||
target = target.parentNode;
|
||||
|
||||
// Si on a trouve l'element, on l'utilise pour la page
|
||||
if( target.getData('link') )
|
||||
navMenu(target.getData('link'));
|
||||
}, false);
|
||||
|
||||
|
||||
|
||||
/* [6] Gestion du rechargement de page
|
||||
=========================================================*/
|
||||
function reload(){ navMenu( pageManager.page ); }
|
||||
|
||||
/* [7] Gestion du toggle de la page de login
|
||||
=========================================================*/
|
||||
var LOGIN = {
|
||||
show: document.getElementById('user-data'),
|
||||
hide: document.getElementById('login-close'),
|
||||
page: document.getElementById('LOGIN')
|
||||
};
|
||||
|
||||
/* (1) Gestion de l'affichage de la page de login */
|
||||
LOGIN.show.addEventListener('click', function(e){ LOGIN.page.className = 'active'; }, false);
|
||||
|
||||
/* (2) Gestion de la fermeture de la page de login */
|
||||
LOGIN.hide.addEventListener('click', function(e){ LOGIN.page.className = ''; }, false);
|
||||
|
||||
|
||||
}, 'GET')
|
||||
/* (2) On charge la premiere page */
|
||||
navMenu(pageManager.page);
|
||||
}, 'GET');
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
var a = 'Hello World!';
|
||||
|
|
@ -5,7 +5,6 @@ APIClass.prototype = {
|
|||
xhr: [], // tableau d'objets pour les requêtes ajax
|
||||
|
||||
|
||||
|
||||
/* transaction avec le serveur (http://host/api/)
|
||||
*
|
||||
* @param pRequest<Object> l'objet passé en JSON à http://host/api/
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,594 @@
|
|||
.clearfix {
|
||||
clear: both;
|
||||
}
|
||||
.hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
.container {
|
||||
width: auto;
|
||||
padding: 30px;
|
||||
margin: auto;
|
||||
}
|
||||
* {
|
||||
font-family: 'Source Sans Pro', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: #15151d;
|
||||
font-size: 1em;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
h3 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
a {
|
||||
color: #8085e8;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover {
|
||||
color: #90ee7e;
|
||||
}
|
||||
|
||||
#nav a.dump {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
/*
|
||||
==========
|
||||
=== Header
|
||||
==========
|
||||
*/
|
||||
#top {
|
||||
background-color: #252530;
|
||||
}
|
||||
#top .container {
|
||||
padding: 0;
|
||||
}
|
||||
#top h1 {
|
||||
color: #eeeaea;
|
||||
font-weight: 100;
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.cell {
|
||||
width: 33%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.cell:nth-child(4) {
|
||||
text-align: right;
|
||||
color:#eeeaea;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#logo {
|
||||
display: block;
|
||||
|
||||
}
|
||||
#logo img {
|
||||
max-width: 200px;
|
||||
width: 100%;
|
||||
margin: 15px;
|
||||
margin-left: 33px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* Search bar */
|
||||
#search-div {
|
||||
color: #252530;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
border: 1px solid #252530;
|
||||
}
|
||||
|
||||
div#search-div i {
|
||||
margin: 5px;
|
||||
color: #252530;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input#search {
|
||||
height: 18px;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: 0.9em;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #252530;
|
||||
width:80%;
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
max-height: 500px;
|
||||
max-width: 400px;
|
||||
overflow-y: auto;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.ui-menu .ui-menu-item {
|
||||
font-size:14px;
|
||||
zoom:1;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
.ui-widget-content a {
|
||||
color: #222222 /*{fcContent}*/;
|
||||
}
|
||||
|
||||
/*
|
||||
==============
|
||||
=== END Header
|
||||
==============
|
||||
*/
|
||||
/*
|
||||
==========
|
||||
=== Footer
|
||||
==========
|
||||
*/
|
||||
#footer {
|
||||
background-color: #15151d;
|
||||
color: #eeeaea;
|
||||
}
|
||||
#footer-copy {
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
#footer-social {
|
||||
float: right;
|
||||
}
|
||||
#footer-social a {
|
||||
color: #eeeaea;
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
#footer-social a:hover {
|
||||
color: #90ee7e;
|
||||
}
|
||||
#footer .container {
|
||||
padding: 10px;
|
||||
}
|
||||
#scrollTop {
|
||||
position: fixed;
|
||||
bottom: 75px;
|
||||
right: 50px;
|
||||
background-color: #90ee7e;
|
||||
padding: 10px;
|
||||
border-radius: 2px;
|
||||
color: white;
|
||||
display: none;
|
||||
}
|
||||
#scrollTop:hover {
|
||||
color: black;
|
||||
}
|
||||
/*
|
||||
==============
|
||||
=== END Footer
|
||||
==============
|
||||
*/
|
||||
|
||||
#reference-loading {
|
||||
margin-top: 300px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
===========
|
||||
=== Wrapper
|
||||
===========
|
||||
*/
|
||||
#splashText {
|
||||
display: none;
|
||||
}
|
||||
.nav-section h3 {
|
||||
font-size: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#wrapper{
|
||||
background-color: #d6d1d1;
|
||||
}
|
||||
#wrapper .container {
|
||||
padding: 0;
|
||||
}
|
||||
#wrapper-inner {
|
||||
background-color: #ffffff;
|
||||
/*border: 1px solid silver;*/
|
||||
}
|
||||
|
||||
.tree a {
|
||||
color: #252530;
|
||||
}
|
||||
|
||||
#nav .tree, #nav .tree * {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
#nav .header p {
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#nav h1,
|
||||
#details h1,
|
||||
#details h2 {
|
||||
font-weight: 100;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#nav h1,
|
||||
#details h2 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
#nav {
|
||||
min-height: 100%;
|
||||
border-right: 1px solid silver;
|
||||
}
|
||||
|
||||
#nav-wrap {
|
||||
width: 30%;
|
||||
float:left;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#nav a,#nav a:visited {
|
||||
font-weight: bold;
|
||||
padding: 0 2px;
|
||||
margin: 1px;
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
padding: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.nav-section:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
#nav .level {
|
||||
margin-left: 13px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav .level-0 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav a.level-0 {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#nav .menuitem {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#nav .value {
|
||||
width: 40%;
|
||||
overflow: hidden;
|
||||
color: silver;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#nav .value-string, #nav .value-color {
|
||||
color: #39A832;
|
||||
}
|
||||
#nav .value-number {
|
||||
color: #297EA8;
|
||||
}
|
||||
|
||||
a.hilighted {
|
||||
background-color: #C5F7BE;
|
||||
}
|
||||
|
||||
#nav .plus {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 0;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
font-family: FontAwesome;
|
||||
color: gray;
|
||||
|
||||
}
|
||||
#nav .plus:before {
|
||||
}
|
||||
|
||||
#nav .collapsed>.plus:before {
|
||||
content: "\f0da";
|
||||
}
|
||||
|
||||
#nav .expanded>.plus:before {
|
||||
content: "\f0d7";
|
||||
}
|
||||
|
||||
#nav .dots {
|
||||
padding: 0 4px;
|
||||
}
|
||||
#nav .expanded>.dots {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#nav .dots.loading {
|
||||
background: url(./../images/ajax-loader.gif) no-repeat center;
|
||||
}
|
||||
#nav .dots.error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#nav .dots.loading span {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#nav code {
|
||||
color:#8085e8;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#nav span.typed {
|
||||
margin-left: 15px;
|
||||
}
|
||||
#nav .collapsed span.typed {
|
||||
margin-left: 0;
|
||||
}
|
||||
#nav .collapsed br.typed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#methods-and-properties-toc ul {
|
||||
margin-left: 0;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
#options-tree,#global-options-tree,#objects-tree {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre,code {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
#overview {
|
||||
margin-left: 420px;
|
||||
}
|
||||
|
||||
#details-wrap {
|
||||
float: right;
|
||||
width: 70%;
|
||||
overflow:auto;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
|
||||
/* Member styling */
|
||||
.member {
|
||||
padding: 30px;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
border-top: 1px solid silver;
|
||||
}
|
||||
|
||||
.member:first-child {
|
||||
color:green;
|
||||
}
|
||||
|
||||
.member.deprecated * {
|
||||
color: silver !important;
|
||||
}
|
||||
|
||||
.member.hilighted {
|
||||
background-color: #eefdec;
|
||||
}
|
||||
|
||||
.member .title, .member .title a, .member .returnType {
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.member .title a{
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.member .default {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.member .since {
|
||||
float: right;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.member .description {
|
||||
color: #666;
|
||||
}
|
||||
.member .context {
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
||||
.description code {
|
||||
color: #666;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.section .demo, .member .demo {
|
||||
font-style: italic;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom:0.5em;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
|
||||
.section .member .demo {
|
||||
margin-left: 0em;
|
||||
}
|
||||
|
||||
.section h1,
|
||||
.section h2,
|
||||
.section .section-description {
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
.section h1 {
|
||||
margin: 0px;
|
||||
font-family: "Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
.section-description {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
|
||||
/*gert*/
|
||||
.menuitem div {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.tree {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
div.edit {
|
||||
float: right
|
||||
}
|
||||
|
||||
/*edit form*/
|
||||
form#optionAttribute td.inp {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
form#optionAttribute td input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form#optionAttribute td textarea {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form#optionAttribute td input[type="checkbox"] {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.pencil {
|
||||
background-image: url(./../images/edit.png);
|
||||
}
|
||||
|
||||
.remove {
|
||||
background-image: url(./../images/delete.gif);
|
||||
}
|
||||
|
||||
.add {
|
||||
background-image: url(./../images/add.png);
|
||||
}
|
||||
|
||||
.copy {
|
||||
background-image: url(./../images/copy.png);
|
||||
}
|
||||
|
||||
.pencil, .add, .remove, .copy {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
float: right;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.pencil a,.add a,.remove a, .copy a {
|
||||
text-decoration: none;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.deprecated, .error {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dl#inhMembers dd a,span.returnType {
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
/* fix for icons changing containers height, affects updateHeights, javascript function */
|
||||
#footer-social i:before {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.nav-section-inner {
|
||||
display: none;
|
||||
}
|
||||
#nav-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
#details-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
.nav-section {
|
||||
padding: 0px;
|
||||
}
|
||||
#search-div{
|
||||
margin:30px;
|
||||
}
|
||||
#wrapper,
|
||||
#wrapper-inner,
|
||||
#details-wrap {
|
||||
height: auto !important;
|
||||
}
|
||||
.cell {
|
||||
width: 48%;
|
||||
text-align: center !important;
|
||||
}
|
||||
.cell:nth-child(1) {
|
||||
width: 100%;
|
||||
}
|
||||
#splashText {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
#splashText.section {
|
||||
border: none;
|
||||
}
|
||||
#splashText img {
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
}
|
||||
#scrollTop {
|
||||
display: block;
|
||||
}
|
||||
.section {
|
||||
padding-top: 0px;
|
||||
}
|
||||
#logo img {
|
||||
margin-left:0px;
|
||||
margin-right:0px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 479px) {
|
||||
#footer-copy,
|
||||
#footer-social {
|
||||
float: none;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.cell {
|
||||
width: 100%;
|
||||
}
|
||||
.ui-autocomplete {
|
||||
max-height: 300px;
|
||||
max-width: 275px;
|
||||
overflow-x:auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-ExtraLight.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-ExtraLight.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-ExtraLight.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-ExtraLight.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-ExtraLightIt.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-ExtraLightIt.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-ExtraLightIt.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-ExtraLightIt.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Light.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Light.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-Light.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-Light.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-LightIt.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-LightIt.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-LightIt.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-LightIt.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Regular.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Regular.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-Regular.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-Regular.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-It.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-It.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-It.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-It.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Semibold.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Semibold.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-Semibold.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-Semibold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-SemiboldIt.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-SemiboldIt.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-SemiboldIt.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-SemiboldIt.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Bold.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Bold.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-Bold.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-Bold.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-BoldIt.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-BoldIt.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-BoldIt.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-BoldIt.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-Black.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-Black.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-Black.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-Black.ttf') format('truetype');
|
||||
}
|
||||
|
||||
@font-face{
|
||||
font-family: 'Source Sans Pro';
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
font-stretch: normal;
|
||||
src: url('../fonts/sourcesanspro/EOT/SourceSansPro-BlackIt.eot') format('embedded-opentype'),
|
||||
url('../fonts/sourcesanspro/WOFF/OTF/SourceSansPro-BlackIt.otf.woff') format('woff'),
|
||||
url('../fonts/sourcesanspro/OTF/SourceSansPro-BlackIt.otf') format('opentype'),
|
||||
url('../fonts/sourcesanspro/TTF/SourceSansPro-BlackIt.ttf') format('truetype');
|
||||
}
|
||||
Binary file not shown.
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>Highcharts API Reference</title>
|
||||
<link href="css/source-sans-pro.css" rel="stylesheet" type="text/css">
|
||||
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/jquery-ui.min.css" />
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" href="images/favicon-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="images/favicon-160x160.png" sizes="160x160">
|
||||
<link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="96x96">
|
||||
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32">
|
||||
<meta name="msapplication-TileColor" content="#2b5797">
|
||||
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
|
||||
<link href="css/ref.css" rel="stylesheet"
|
||||
type="text/css" />
|
||||
<script src="js/jquery-1.11.3.min.js"></script>
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var PRODUCTNAME = 'Highcharts'.toLowerCase(),
|
||||
runDB = false;
|
||||
</script>
|
||||
<script src="js/ref.js"
|
||||
type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="top">
|
||||
<div class="container">
|
||||
<div class="cell">
|
||||
<a href="http://www.highcharts.com/products/highcharts" title="Highcharts Home Page" id="logo"><img
|
||||
alt="Highcharts Home Page"
|
||||
src="images/Highcharts.svg"
|
||||
border="0"></a>
|
||||
</div>
|
||||
<div class="cell" style="text-align: center;">
|
||||
<h1>Options Reference v4.2.4</h1>
|
||||
</div>
|
||||
<div class="cell hidden-offline">See also options for <a href="/highstock">Highstock</a>, <a href="/highmaps">Highmaps</a>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<div class="container">
|
||||
<div id="wrapper-inner">
|
||||
<div id="nav-wrap">
|
||||
<div id="nav">
|
||||
<div class="nav-section first">
|
||||
<div class="ui-widget" id="search-div">
|
||||
<div id="search-wrap">
|
||||
<i class="fa fa-search"></i><input id="search"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-section-inner">
|
||||
<h3 id="options-header">Configuration options</h3>
|
||||
<p>For initial declarative chart setup. View as <a class="dump" href="highcharts/option/dump.json">JSON</a>.</p>
|
||||
<div id="global-options-tree">
|
||||
<code>Highcharts.setOptions({</code>
|
||||
<div id="global-options" class="tree"></div>
|
||||
<code>});</code>
|
||||
</div>
|
||||
<div id="options-tree">
|
||||
<code>$("#container").highcharts({</code>
|
||||
<div id="options" class="tree"></div>
|
||||
<code>});</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="nav-section-inner">
|
||||
<h3>Methods and properties</h3>
|
||||
|
||||
<p>For dynamically modifying the chart. View as <a class="dump" href="highcharts/object/dump.json">JSON</a>. </p>
|
||||
<div id="methods-and-properties-toc"></div>
|
||||
|
||||
<div id="objects-tree">
|
||||
<div id="objects" class="tree"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="details-wrap">
|
||||
<div id="details">
|
||||
<div id="splashText" class="section">
|
||||
<img src="images/splash.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="footer">
|
||||
<div class="container">
|
||||
<div id="footer-copy">
|
||||
© Highcharts 2016. All rights reserved.
|
||||
</div>
|
||||
<div id="footer-social">
|
||||
<a href="https://www.facebook.com/Highcharts" title="Facebook" class="social-icon"><i class="fa fa-facebook"></i></a>
|
||||
<a href="https://twitter.com/Highcharts" title="Twitter" class="social-icon"><i class="fa fa-twitter"></i></a>
|
||||
<a href="http://www.linkedin.com/company/highsoft-solutions-as" title="LinkedIn" class="social-icon"><i class="fa fa-linkedin"></i></a>
|
||||
<a href="https://github.com/highslide-software/highcharts.com" title="Github" class="social-icon"><i class="fa fa-github"></i></a>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<a id="scrollTop" href="#top" style="display: none;"><i class="fa fa-arrow-up"></i></a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="380" height="70"
|
||||
xml:space="preserve">
|
||||
|
||||
<g transform="translate(-25,-30)">
|
||||
<g>
|
||||
<path fill="#eeeaea" d="M138.475,69.712h-17.02v9.77c0,1.037-0.813,1.851-1.849,1.851c-1.037,0-1.85-0.813-1.85-1.851V57.725
|
||||
c0-1.037,0.813-1.852,1.85-1.852c1.036,0,1.849,0.813,1.849,1.852v8.436h17.02v-8.436c0-1.037,0.814-1.852,1.85-1.852
|
||||
c1.036,0,1.85,0.813,1.85,1.852v21.754c0,1.037-0.814,1.851-1.85,1.851c-1.036,0-1.85-0.813-1.85-1.851V69.712z"/>
|
||||
<path fill="#eeeaea" d="M156.973,79.479c0,1.037-0.814,1.851-1.852,1.851s-1.852-0.813-1.852-1.851V57.725
|
||||
c0-1.037,0.814-1.852,1.852-1.852s1.852,0.813,1.852,1.852V79.479z"/>
|
||||
<path fill="#eeeaea" d="M184.125,70.378c0-1.036,0.814-1.774,1.852-1.774c1.034,0,1.852,0.813,1.852,1.849v5.847
|
||||
c0,0.444-0.226,1.109-0.595,1.479c-2.367,2.369-5.549,3.773-9.176,3.773c-7.178,0-12.949-5.771-12.949-12.948
|
||||
c0-7.181,5.771-12.949,12.949-12.949c3.627,0,6.809,1.405,9.176,3.771c0.738,0.74,0.738,1.852,0,2.592
|
||||
c-0.741,0.738-1.922,0.813-2.663,0.072c-1.702-1.699-3.923-2.736-6.513-2.736c-5.104,0-9.249,4.144-9.249,9.25
|
||||
c0,5.104,4.146,9.25,9.249,9.25c2.367,0,4.441-0.813,6.067-2.222V70.378z"/>
|
||||
<path fill="#eeeaea" d="M218.162,69.712h-17.019v9.77c0,1.037-0.817,1.851-1.852,1.851c-1.037,0-1.849-0.813-1.849-1.851V57.725
|
||||
c0-1.037,0.812-1.852,1.849-1.852c1.034,0,1.852,0.813,1.852,1.852v8.436h17.019v-8.436c0-1.037,0.813-1.852,1.849-1.852
|
||||
c1.037,0,1.852,0.813,1.852,1.852v21.754c0,1.037-0.813,1.851-1.852,1.851c-1.033,0-1.849-0.813-1.849-1.851V69.712z"/>
|
||||
<path fill="#eeeaea" d="M242.948,81.552c-7.182,0-12.949-5.771-12.949-12.948c0-7.181,5.77-12.949,12.949-12.949
|
||||
c3.627,0,6.809,1.405,9.176,3.771c0.738,0.74,0.738,1.852,0,2.592c-0.741,0.738-1.925,0.813-2.666,0.072
|
||||
c-1.699-1.699-3.92-2.736-6.51-2.736c-5.106,0-9.249,4.144-9.249,9.25c0,5.104,4.143,9.25,9.249,9.25
|
||||
c2.59,0,4.884-0.962,6.586-2.664c0.74-0.741,1.849-0.741,2.59,0c0.738,0.738,0.738,1.85,0,2.589
|
||||
C249.756,80.146,246.574,81.552,242.948,81.552z"/>
|
||||
<path fill="#eeeaea" d="M281.569,69.712h-17.02v9.77c0,1.037-0.813,1.851-1.852,1.851c-1.034,0-1.85-0.813-1.85-1.851V57.725
|
||||
c0-1.037,0.813-1.852,1.85-1.852c1.035,0,1.852,0.813,1.852,1.852v8.436h17.02v-8.436c0-1.037,0.813-1.852,1.853-1.852
|
||||
c1.034,0,1.849,0.813,1.849,1.852v21.754c0,1.037-0.813,1.851-1.849,1.851c-1.037,0-1.853-0.813-1.853-1.851V69.712z"/>
|
||||
<path fill="#eeeaea" d="M308.758,57.503l10.507,20.646c0.223,0.443,0.445,1.036,0.445,1.554c0,1.036-0.668,1.628-1.702,1.628
|
||||
c-0.741,0-1.481-0.222-2.001-1.258l-3.253-6.438h-13.547l-3.183,6.438c-0.517,1.036-1.256,1.258-1.994,1.258
|
||||
c-1.037,0-1.702-0.593-1.702-1.628c0-0.519,0.22-1.109,0.442-1.554l10.506-20.646c0.668-1.405,2.002-1.628,2.74-1.628
|
||||
C306.76,55.875,308.09,56.096,308.758,57.503z M300.985,70.083h9.988l-4.957-9.99L300.985,70.083z"/>
|
||||
<path fill="#eeeaea" d="M340.159,56.023c4.441,0,8.064,3.255,8.064,7.694c0,3.923-2.813,6.884-6.511,7.549l6.731,7.104
|
||||
c0.664,0.666,0.889,1.85,0.146,2.516c-0.736,0.741-2.145,0.521-2.886-0.296l-8.729-9.176h-6.511v8.142
|
||||
c0,1.034-0.815,1.774-1.854,1.774c-1.033,0-1.85-0.813-1.85-1.851V57.873c0-1.035,0.814-1.85,1.85-1.85H340.159z M330.468,59.575
|
||||
v8.288h9.691c2.59,0,4.367-1.776,4.367-4.146c0-2.365-1.777-4.144-4.367-4.144L330.468,59.575L330.468,59.575z"/>
|
||||
<path fill="#eeeaea" d="M365.047,59.575h-9.249c-1.033,0-1.849-0.74-1.849-1.776c0-1.034,0.813-1.773,1.849-1.773h22.201
|
||||
c1.037,0,1.852,0.74,1.852,1.773c0,1.037-0.813,1.776-1.852,1.776h-9.249V79.48c0,1.037-0.813,1.851-1.849,1.851
|
||||
c-1.037,0-1.854-0.813-1.854-1.851V59.575z"/>
|
||||
<path fill="#eeeaea" d="M388.724,66.013c0-9.25,5.698-10.359,9.99-10.359c1.035,0,1.85,0.813,1.85,1.85
|
||||
c0,1.036-0.813,1.851-1.85,1.851c-3.479,0-6.29,0.738-6.29,6.66v5.18c0,9.25-5.698,10.358-9.989,10.358
|
||||
c-1.035,0-1.85-0.813-1.85-1.85s0.814-1.85,1.85-1.85c3.479,0,6.289-0.74,6.289-6.66V66.013z"/>
|
||||
</g>
|
||||
<polygon fill="#8087E8" points="67.981,30.52 56.757,56.73 42.009,91.171 76.301,76.685 94.465,69.013 "/>
|
||||
<polygon fill="#30426B" points="73.7,62.25 76.302,76.685 94.466,69.013 "/>
|
||||
<polygon fill="#6699A1" points="67.981,30.52 73.7,62.251 94.465,69.013 "/>
|
||||
<polygon fill="#78758C" points="73.7,62.25 94.466,69.013 56.758,56.729 42.009,91.171 76.302,76.685 "/>
|
||||
<polygon fill="#A3EDBA" points="42.009,91.171 56.757,56.73 26.442,46.855 "/>
|
||||
<polygon fill="#6699A1" points="76.302,76.685 79.628,95.13 94.466,69.013 "/>
|
||||
<polygon fill="#8087E8" points="67.981,30.52 56.757,56.73 73.7,62.251 "/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1,43 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="256" width="1020" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<metadata>
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g transform="translate(0,-796.36218)">
|
||||
<g transform="matrix(1.6460977,0,0,1.6460984,-8.1132563,652.37875)">
|
||||
<g style="letter-spacing:0px;word-spacing:0px;" font-weight="normal" font-size="68.34341431px" font-style="normal" font-stretch="normal" line-height="125%" font-variant="normal" font-family="Reenie Beanie" fill="#8085e8">
|
||||
<path d="m39.2,174c-0.00003,2.05-0.365,3.66-1.09,4.82-0.729,1.16-1.8,2.24-3.21,3.25-0.364,0.228-0.865,0.502-1.5,0.821-0.638,0.319-1.34,0.615-2.12,0.888-0.775,0.273-1.59,0.501-2.46,0.683-0.866,0.182-1.66,0.273-2.39,0.273-2.05,0-3.6-0.216-4.65-0.649-1.05-0.432-1.57-0.945-1.57-1.54-0.000011-0.638,0.182-1.16,0.546-1.57s0.683-0.638,0.957-0.684l0.753,0.546c0.227,0.228,0.545,0.468,0.955,0.719s1.07,0.376,1.98,0.376c0.865,0.00001,1.91-0.148,3.14-0.444s2.4-0.752,3.52-1.37c1.12-0.615,2.07-1.38,2.87-2.29,0.797-0.911,1.2-1.96,1.2-3.14-0.000027-1.05-0.786-2.01-2.36-2.9-1.57-0.888-4.04-1.49-7.42-1.81-1.73-0.136-3.44-0.352-5.13-0.649-1.69-0.296-3.2-0.706-4.54-1.23s-2.43-1.18-3.25-1.98c-0.82-0.797-1.23-1.79-1.23-2.97-0.000004-1.14,0.319-2.23,0.957-3.28s1.42-2.02,2.36-2.9c0.934-0.888,1.9-1.67,2.9-2.36,1-0.683,1.85-1.25,2.53-1.71,0.546-0.318,1.31-0.74,2.29-1.26,0.98-0.524,2.03-1.03,3.14-1.5,1.12-0.478,2.23-0.888,3.35-1.23,1.12-0.341,2.06-0.512,2.84-0.512,0.912,0.00004,1.53,0.251,1.85,0.752,0.318,0.501,0.478,1.21,0.478,2.12-0.000026,0.775-0.0911,1.59-0.273,2.46-0.182,0.866-0.387,1.71-0.615,2.53s-0.444,1.54-0.649,2.15c-0.204,0.615-0.353,1.01-0.444,1.2-0.182,0.41-0.387,0.683-0.615,0.82-0.228,0.136-0.387,0.204-0.478,0.204-0.182,0.00002-0.273-0.114-0.273-0.342-0.000022-0.136,0.034-0.398,0.102-0.785,0.0681-0.387,0.159-0.854,0.273-1.4,0.114-0.547,0.205-1.14,0.273-1.78,0.0681-0.637,0.102-1.28,0.102-1.91-0.000023-1-0.0456-1.73-0.137-2.19-0.0911-0.455-0.456-0.683-1.09-0.683-0.637,0.00004-1.5,0.171-2.6,0.512-1.09,0.341-2.21,0.763-3.35,1.26-1.23,0.546-2.42,1.25-3.59,2.12-1.16,0.866-2.2,1.75-3.11,2.67-0.911,0.911-1.65,1.79-2.22,2.63-0.569,0.843-0.854,1.51-0.854,2.02-0.000006,0.546,0.376,1.06,1.13,1.54,0.752,0.478,1.71,0.9,2.87,1.26,1.16,0.365,2.45,0.684,3.86,0.957s2.8,0.478,4.17,0.614c1.14,0.136,2.39,0.318,3.76,0.546s2.64,0.593,3.83,1.09c1.18,0.501,2.19,1.17,3.01,2.02,0.82,0.843,1.23,1.93,1.23,3.25z"/>
|
||||
<path d="m61.9,177c0.0459,0.0918,0.0688,0.229,0.0688,0.411-0.000022,0.274-0.205,0.684-0.615,1.23-0.136,0.182-0.432,0.478-0.888,0.888s-1.07,0.82-1.85,1.23c-0.774,0.41-1.72,0.774-2.84,1.09-1.12,0.318-2.43,0.478-3.93,0.478-1.05,0-2.07-0.239-3.07-0.717s-1.89-1.18-2.67-2.12c-0.774-0.934-1.41-2.1-1.91-3.49-0.501-1.39-0.752-3.02-0.752-4.89-0.000003-1.78,0.228-3.44,0.683-4.99s1.04-2.92,1.74-4.1c0.706-1.18,1.49-2.12,2.36-2.8,0.866-0.683,1.71-1.03,2.53-1.03,0.729,0.00003,1.47,0.148,2.22,0.444,0.752,0.296,1.44,0.672,2.05,1.13,0.615,0.456,1.1,0.969,1.47,1.54,0.365,0.569,0.547,1.15,0.547,1.74-0.000017,0.683-0.308,1.39-0.923,2.12-0.615,0.729-1.36,1.4-2.22,2.02-0.866,0.615-1.73,1.12-2.6,1.5-0.866,0.387-1.55,0.581-2.05,0.581-0.273,0.00001-0.511-0.125-0.716-0.376s-0.308-0.559-0.308-0.923c-0.000008-0.638,0.285-1.14,0.854-1.5,0.569-0.364,1.2-0.695,1.88-0.991,0.683-0.296,1.31-0.649,1.88-1.06,0.569-0.41,0.854-0.98,0.854-1.71-0.000013-0.0918-0.114-0.32-0.342-0.684s-0.843-0.546-1.85-0.546c-0.455,0.00002-0.978,0.262-1.57,0.786s-1.16,1.23-1.71,2.12c-0.547,0.889-1,1.94-1.37,3.14-0.364,1.21-0.546,2.52-0.546,3.93-0.000006,1.18,0.217,2.26,0.65,3.21,0.433,0.957,0.991,1.77,1.67,2.43,0.683,0.661,1.48,1.17,2.39,1.54,0.911,0.364,1.85,0.546,2.8,0.546,0.683,0,1.42-0.148,2.22-0.444,0.797-0.296,1.55-0.615,2.26-0.957,0.706-0.342,1.32-0.661,1.84-0.957,0.523-0.296,0.854-0.444,0.992-0.444,0.136,0.00001,0.284,0.0685,0.443,0.205,0.159,0.137,0.262,0.274,0.308,0.41z"/>
|
||||
<path d="m99.3,170c-0.000036,0.82-0.376,1.83-1.13,3.04-0.752,1.21-1.77,2.38-3.04,3.52-1.28,1.14-2.76,2.11-4.44,2.9-1.69,0.797-3.44,1.2-5.26,1.2-0.82,0.00001-1.69-0.137-2.6-0.41-0.911-0.273-1.8-0.672-2.67-1.2-0.866-0.524-1.64-1.16-2.32-1.91-0.683-0.752-1.19-1.61-1.5-2.56-0.273,0.273-0.602,0.728-0.99,1.37-0.387,0.638-0.809,1.29-1.26,1.95-0.456,0.66-0.957,1.23-1.5,1.71-0.546,0.478-1.12,0.717-1.71,0.717-0.592,0.00001-1.08-0.308-1.47-0.923-0.387-0.615-0.695-1.3-0.923-2.05-0.228-0.752-0.388-1.47-0.479-2.15-0.0911-0.683-0.137-1.07-0.137-1.16-0.000003-0.548,0.16-1.58,0.479-3.11s0.797-3.11,1.43-4.75c0.638-1.64,1.45-3.1,2.43-4.37,0.98-1.28,2.13-1.91,3.45-1.91,0.501,0.00003,0.831,0.216,0.991,0.649,0.16,0.432,0.24,0.854,0.24,1.26v2.05c0.227,0.182,0.465,0.308,0.716,0.376,0.251,0.0688,0.479,0.16,0.684,0.273s0.365,0.284,0.479,0.512,0.171,0.592,0.171,1.09c-0.000015,0.32-0.023,0.605-0.0688,0.855-0.0459,0.25-0.0688,0.489-0.0688,0.717-0.000015,1.18,0.0911,2.35,0.273,3.49s0.547,2.15,1.09,3.04c0.547,0.888,1.3,1.62,2.26,2.19,0.957,0.57,2.23,0.855,3.83,0.855,2.01,0.00001,3.7-0.422,5.09-1.26,1.39-0.843,2.55-1.78,3.49-2.8,0.934-1.02,1.67-1.96,2.22-2.8,0.546-0.843,1-1.26,1.37-1.26,0.592,0.00002,0.888,0.296,0.888,0.888zm-24-3.01c-0.000011-0.182-0.0456-0.353-0.137-0.512-0.0911-0.159-0.137-0.307-0.137-0.443-0.000011-0.182,0.0455-0.342,0.137-0.479,0.0911-0.137,0.137-0.319,0.137-0.547-0.000011-0.136-0.0456-0.238-0.137-0.307-0.0911-0.0681-0.137-0.148-0.137-0.24-0.41,0.0918-0.832,0.479-1.26,1.16-0.433,0.683-0.843,1.48-1.23,2.39-0.387,0.911-0.695,1.83-0.922,2.77-0.227,0.934-0.341,1.7-0.341,2.29-0.000008,0.318,0.0911,0.842,0.273,1.57,0.182,0.729,0.387,1.21,0.615,1.44,0.774-1.59,1.49-3.14,2.15-4.65,0.66-1.5,0.991-2.98,0.991-4.44z"/>
|
||||
<path d="m116,163c-0.00001,0.318-0.137,0.58-0.41,0.785s-0.592,0.376-0.957,0.513-0.73,0.24-1.09,0.308c-0.364,0.0682-0.66,0.102-0.888,0.102-0.683,0.00002-1.14-0.0455-1.37-0.137-0.228-0.091-0.41-0.137-0.546-0.137-1.14,0.00002-2.05,0.0911-2.73,0.273-0.683,0.182-1.22,0.478-1.61,0.888-0.387,0.41-0.638,0.923-0.752,1.54-0.114,0.615-0.171,1.36-0.171,2.22-0.00001,1.46,0.057,2.62,0.171,3.49,0.114,0.866,0.228,1.57,0.341,2.12,0.113,0.546,0.227,0.968,0.341,1.26,0.114,0.296,0.171,0.581,0.171,0.855-0.00001,0.364-0.194,0.752-0.581,1.16-0.387,0.41-0.74,0.615-1.06,0.615-0.546,0-1.04-0.49-1.47-1.47-0.433-0.98-0.798-2.14-1.09-3.49-0.296-1.34-0.535-2.68-0.717-4s-0.273-2.32-0.273-3.01c0-0.776,0.0681-1.52,0.204-2.22,0.136-0.706,0.318-1.32,0.546-1.84,0.228-0.524,0.479-0.946,0.752-1.26,0.273-0.319,0.547-0.479,0.821-0.479,0.228,0.00003,0.41,0.08,0.546,0.24s0.25,0.342,0.341,0.547c0.0911,0.205,0.194,0.387,0.308,0.546s0.262,0.239,0.444,0.239c0.41,0.00003,1.07-0.205,1.98-0.615,0.911-0.41,2.03-0.615,3.35-0.615,1.23,0.00002,2.15,0.0341,2.77,0.102,0.615,0.0682,1.22,0.216,1.81,0.444,0.136,0.0459,0.307,0.148,0.512,0.308,0.205,0.159,0.308,0.399,0.308,0.719z"/>
|
||||
<path d="m141,172c-0.00002,0.456-0.0685,0.923-0.205,1.4-0.137,0.478-0.274,0.877-0.41,1.2-0.0918,0.138-0.513,0.605-1.26,1.4-0.752,0.797-1.69,1.63-2.8,2.49-1.12,0.866-2.37,1.65-3.76,2.36-1.39,0.706-2.72,1.06-4,1.06-0.774,0-1.56-0.137-2.36-0.411-0.797-0.274-1.54-0.718-2.22-1.33-0.683-0.615-1.24-1.38-1.67-2.29-0.432-0.911-0.649-2.03-0.649-3.35,0-2.19,0.364-4.17,1.09-5.95,0.729-1.78,1.46-3.19,2.19-4.24,0.32-0.501,0.741-1.01,1.26-1.54,0.524-0.524,1.04-1,1.54-1.43,0.501-0.432,0.968-0.786,1.4-1.06,0.433-0.274,0.741-0.411,0.923-0.411,0.41,0.00002,0.786,0.114,1.13,0.342,0.341,0.228,0.512,0.456,0.512,0.684-0.00001,0.364-0.102,0.672-0.307,0.922-0.204,0.25-0.489,0.524-0.854,0.82s-0.798,0.684-1.3,1.16c-0.501,0.479-1.03,1.11-1.57,1.88-1.09,1.5-1.9,3.04-2.43,4.61-0.524,1.57-0.786,2.95-0.786,4.13s0.444,2.13,1.33,2.84c0.888,0.706,1.81,1.06,2.77,1.06,1.73,0,3.27-0.387,4.61-1.16,1.34-0.774,2.5-1.64,3.45-2.6,0.957-0.957,1.73-1.82,2.32-2.6,0.592-0.774,1.02-1.16,1.3-1.16,0.502,0.00001,0.753,0.387,0.753,1.16z"/>
|
||||
<path d="m169,171c0.228,0.228,0.342,0.365,0.342,0.411-0.00003,0.0904-0.125,0.363-0.375,0.819-0.25,0.455-0.581,0.934-0.991,1.43-0.41,0.501-0.854,0.946-1.33,1.33-0.478,0.387-0.946,0.581-1.4,0.581-0.957,0.00001-1.73-0.194-2.32-0.581-0.592-0.387-1.08-0.877-1.47-1.47-0.387-0.592-0.683-1.24-0.888-1.95-0.205-0.706-0.376-1.38-0.512-2.02-0.0918-0.32-0.183-0.48-0.273-0.48-0.138,0.00002-0.411,0.49-0.821,1.47s-0.853,2.05-1.33,3.21c-0.478,1.16-0.934,2.23-1.37,3.21-0.433,0.98-0.718,1.47-0.854,1.47-0.82,0.00001-1.52-0.353-2.08-1.06-0.569-0.706-1.03-1.53-1.37-2.46-0.342-0.934-0.604-1.89-0.786-2.87s-0.296-1.74-0.342-2.29c-0.136-1.23-0.432-3.28-0.887-6.15s-0.843-6.36-1.16-10.5c-0.0904-0.865-0.193-1.65-0.307-2.36-0.114-0.706-0.24-1.49-0.376-2.36-0.137-0.866-0.251-1.85-0.342-2.94-0.0911-1.09-0.137-2.44-0.137-4.03,0-0.0903,0.0229-0.386,0.0688-0.887s0.114-1.05,0.205-1.64c0.0911-0.592,0.239-1.12,0.444-1.57,0.205-0.456,0.444-0.684,0.716-0.684,0.32,0.00005,0.616,0.194,0.89,0.581,0.273,0.387,0.512,0.832,0.717,1.33,0.205,0.501,0.353,0.98,0.444,1.44,0.0911,0.456,0.137,0.775,0.137,0.957-0.00001,0.683-0.0455,1.32-0.137,1.91-0.0911,0.592-0.137,1.14-0.137,1.64,0,0.683,0.057,1.55,0.171,2.6s0.262,2.12,0.444,3.21,0.341,2.15,0.478,3.18c0.136,1.03,0.25,1.86,0.342,2.5-0.00001,0.0445,0.0455,0.363,0.137,0.955,0.0911,0.592,0.194,1.33,0.308,2.22,0.114,0.889,0.228,1.85,0.342,2.87,0.114,1.03,0.239,2.03,0.375,3.01s0.261,1.85,0.375,2.6c0.114,0.752,0.194,1.29,0.24,1.61-0.00001,0.136,0.0341,0.33,0.102,0.58,0.0681,0.25,0.136,0.535,0.204,0.854,0.0681,0.319,0.148,0.615,0.24,0.888,0.0918,0.273,0.206,0.479,0.342,0.616,0.273-0.546,0.625-1.39,1.06-2.53,0.433-1.14,0.889-2.3,1.37-3.49,0.478-1.18,0.934-2.22,1.37-3.11,0.433-0.888,0.809-1.33,1.13-1.33,0.364,0.00002,0.66,0.0685,0.888,0.205,0.228,0.137,0.524,0.251,0.888,0.341,0.456,0.182,0.684,0.421,0.684,0.717-0.00002,0.296,0.0452,0.649,0.136,1.06,0.0918,0.548,0.24,1.27,0.445,2.15,0.205,0.889,0.444,1.75,0.717,2.6,0.273,0.843,0.592,1.56,0.956,2.15,0.364,0.592,0.729,0.889,1.09,0.888,0.182,0.00001,0.433-0.239,0.752-0.717s0.752-0.74,1.3-0.786c0.0917,0.00001,0.252,0.057,0.48,0.171s0.455,0.262,0.682,0.444z"/>
|
||||
<path d="m224,135c0.0459,0.0918,0.0688,0.252,0.0688,0.48-0.00003,0.228-0.00003,0.478,0,0.751-0.00003,0.32-0.114,0.48-0.342,0.48-0.0918,0.00005-0.206-0.0229-0.342-0.0688-0.136-0.0458-0.25-0.0917-0.342-0.138-0.82-0.364-1.81-0.831-2.97-1.4s-2.47-0.854-3.93-0.854c-1.64,0.00005-2.96,0.615-3.96,1.84-1,1.23-1.77,2.65-2.29,4.27-0.524,1.62-0.866,3.2-1.03,4.75-0.159,1.55-0.239,2.67-0.239,3.35-0.00001,0.501,0.0796,1.29,0.239,2.36s0.376,2.18,0.65,3.32,0.593,2.18,0.957,3.11c0.364,0.934,0.729,1.51,1.09,1.74,0.274,0.00002,0.764-0.0229,1.47-0.0688s1.29-0.0688,1.74-0.0688c0.774,0.00003,1.5,0.0685,2.19,0.205,0.683,0.137,1.39,0.205,2.12,0.205,0.182,0.00003,0.455,0.00003,0.82,0,0.364,0.00003,0.74,0.023,1.13,0.0688,0.387,0.0459,0.717,0.126,0.991,0.239,0.273,0.113,0.41,0.261,0.41,0.443-0.00002,0.228-0.16,0.433-0.479,0.615s-0.683,0.33-1.09,0.444c-0.41,0.114-0.819,0.194-1.23,0.24-0.41,0.0459-0.729,0.0688-0.957,0.0688-0.228,0.00002-0.524-0.0114-0.888-0.0344-0.364-0.0229-0.763-0.0573-1.2-0.103-0.433-0.0459-0.843-0.0799-1.23-0.102-0.387-0.0222-0.717-0.0333-0.99-0.0334-0.73,0.00002-1.17,0.0796-1.33,0.239-0.159,0.159-0.239,0.467-0.239,0.923-0.00001,0.683,0.308,1.6,0.923,2.77,0.615,1.16,1.29,2.4,2.02,3.73,0.729,1.32,1.4,2.69,2.02,4.1,0.615,1.41,0.923,2.71,0.923,3.9-0.00002,0.227-0.057,0.648-0.171,1.26-0.114,0.615-0.274,1.24-0.479,1.88-0.205,0.638-0.49,1.21-0.854,1.71-0.364,0.501-0.774,0.752-1.23,0.752-0.364,0.00001-0.695-0.103-0.991-0.308s-0.444-0.559-0.444-1.06c-0.00001-0.729,0.194-1.41,0.581-2.05,0.387-0.638,0.581-1.32,0.581-2.05-0.00001-0.364-0.171-0.979-0.512-1.84-0.341-0.866-0.763-1.83-1.26-2.9-0.501-1.07-1.05-2.2-1.64-3.38-0.592-1.18-1.15-2.27-1.67-3.25-0.524-0.98-0.968-1.79-1.33-2.43-0.364-0.638-0.569-0.98-0.615-1.03-0.911,0.32-1.84,0.639-2.8,0.958-0.957,0.319-1.82,0.797-2.6,1.43-0.318,0.32-0.615,0.48-0.888,0.48-0.455,0.00002-0.876-0.182-1.26-0.547-0.387-0.365-0.581-0.775-0.581-1.23,0-0.502,0.148-0.901,0.444-1.2,0.296-0.296,0.581-0.512,0.853-0.649,0.41-0.228,1.05-0.479,1.91-0.752,0.866-0.273,1.73-0.501,2.6-0.683,0.318-0.0917,0.615-0.172,0.888-0.24,0.274-0.0681,0.411-0.216,0.411-0.444-0.138-0.455-0.332-1.06-0.582-1.81-0.25-0.752-0.501-1.65-0.752-2.7s-0.468-2.22-0.65-3.52-0.273-2.7-0.273-4.2c-0.00001-1.64,0.194-3.37,0.581-5.19s1-3.5,1.85-5.02c0.843-1.53,1.9-2.78,3.18-3.76s2.8-1.47,4.58-1.47c0.819,0.00005,1.73,0.08,2.73,0.24s1.93,0.388,2.77,0.684c0.843,0.296,1.55,0.661,2.12,1.09,0.569,0.432,0.854,0.922,0.854,1.47z"/>
|
||||
<path d="m240,169c-0.00002,1-0.137,1.96-0.41,2.87-0.273,0.911-0.638,1.71-1.09,2.39-0.455,0.683-0.991,1.22-1.61,1.61-0.615,0.387-1.29,0.581-2.02,0.581-1.28,0-2.28-0.365-3.01-1.09-0.729-0.729-1.29-1.57-1.67-2.53-0.388-0.957-0.639-1.92-0.752-2.9s-0.17-1.72-0.17-2.22c0-0.82,0.125-1.74,0.375-2.77s0.592-1.97,1.03-2.84c0.433-0.866,0.923-1.59,1.47-2.19,0.546-0.592,1.12-0.888,1.71-0.888,0.136,0.00003,0.352,0.0456,0.649,0.137,0.296,0.0911,0.604,0.228,0.923,0.41s0.604,0.41,0.855,0.683,0.422,0.593,0.512,0.958c0.502,0.0445,1,0.226,1.5,0.545,0.501,0.319,0.774,0.57,0.82,0.752,0.364,1.18,0.603,2.37,0.717,3.55s0.171,2.16,0.171,2.94zm-3.07-1.23c-0.00001-0.683-0.0685-1.4-0.205-2.15-0.137-0.752-0.411-1.52-0.821-2.29-0.0904,0.0459-0.204,0.0688-0.342,0.0688-0.182,0.00002-0.33-0.0226-0.444-0.0678s-0.216-0.0678-0.307-0.0678c-0.546,0.00002-0.979,0.148-1.3,0.444-0.319,0.296-0.559,0.683-0.719,1.16-0.16,0.478-0.262,0.991-0.308,1.54-0.0452,0.546-0.0678,1.07-0.0678,1.57,0,0.501,0.0226,1.06,0.0678,1.67,0.0452,0.615,0.148,1.2,0.308,1.74,0.16,0.546,0.376,1.01,0.65,1.4,0.273,0.387,0.638,0.581,1.09,0.581,0.455,0.00001,0.842-0.239,1.16-0.717,0.319-0.478,0.57-1.04,0.752-1.67,0.182-0.638,0.308-1.26,0.376-1.88,0.0688-0.615,0.103-1.06,0.103-1.33z"/>
|
||||
<path d="m263,163c-0.00002,0.318-0.137,0.58-0.41,0.785s-0.592,0.376-0.957,0.513-0.73,0.24-1.09,0.308c-0.364,0.0682-0.66,0.102-0.888,0.102-0.683,0.00002-1.14-0.0455-1.37-0.137-0.228-0.091-0.41-0.137-0.546-0.137-1.14,0.00002-2.05,0.0911-2.73,0.273-0.683,0.182-1.22,0.478-1.61,0.888-0.387,0.41-0.638,0.923-0.752,1.54-0.114,0.615-0.171,1.36-0.171,2.22,0,1.46,0.057,2.62,0.171,3.49,0.114,0.866,0.228,1.57,0.341,2.12,0.113,0.546,0.227,0.968,0.341,1.26,0.114,0.296,0.171,0.581,0.171,0.855-0.00001,0.364-0.194,0.752-0.581,1.16-0.387,0.41-0.74,0.615-1.06,0.615-0.546,0-1.04-0.49-1.47-1.47-0.433-0.98-0.798-2.14-1.09-3.49-0.296-1.34-0.535-2.68-0.717-4s-0.273-2.32-0.273-3.01c-0.00001-0.776,0.0681-1.52,0.204-2.22,0.136-0.706,0.318-1.32,0.546-1.84,0.228-0.524,0.479-0.946,0.752-1.26,0.273-0.319,0.547-0.479,0.821-0.479,0.228,0.00003,0.41,0.08,0.546,0.24s0.25,0.342,0.341,0.547c0.0911,0.205,0.194,0.387,0.308,0.546s0.262,0.239,0.444,0.239c0.41,0.00003,1.07-0.205,1.98-0.615,0.911-0.41,2.03-0.615,3.35-0.615,1.23,0.00002,2.15,0.0341,2.77,0.102,0.615,0.0682,1.22,0.216,1.81,0.444,0.136,0.0459,0.307,0.148,0.512,0.308,0.205,0.159,0.308,0.399,0.308,0.719z"/>
|
||||
<path d="m309,169c-0.00001,1-0.137,1.96-0.41,2.87-0.273,0.911-0.638,1.71-1.09,2.39-0.455,0.683-0.991,1.22-1.61,1.61-0.615,0.387-1.29,0.581-2.02,0.581-1.28,0-2.28-0.365-3.01-1.09-0.729-0.729-1.29-1.57-1.67-2.53-0.388-0.957-0.639-1.92-0.752-2.9s-0.17-1.72-0.17-2.22c-0.00001-0.82,0.125-1.74,0.375-2.77s0.592-1.97,1.03-2.84c0.433-0.866,0.923-1.59,1.47-2.19,0.546-0.592,1.12-0.888,1.71-0.888,0.136,0.00003,0.352,0.0456,0.649,0.137,0.296,0.0911,0.604,0.228,0.923,0.41s0.604,0.41,0.855,0.683,0.422,0.593,0.512,0.958c0.502,0.0445,1,0.226,1.5,0.545,0.501,0.319,0.774,0.57,0.82,0.752,0.364,1.18,0.603,2.37,0.717,3.55s0.171,2.16,0.171,2.94zm-3.07-1.23c-0.00001-0.683-0.0685-1.4-0.205-2.15-0.137-0.752-0.411-1.52-0.821-2.29-0.0904,0.0459-0.204,0.0688-0.342,0.0688-0.182,0.00002-0.33-0.0226-0.444-0.0678s-0.216-0.0678-0.307-0.0678c-0.546,0.00002-0.979,0.148-1.3,0.444-0.319,0.296-0.559,0.683-0.719,1.16-0.16,0.478-0.262,0.991-0.308,1.54-0.0452,0.546-0.0678,1.07-0.0678,1.57-0.00001,0.501,0.0226,1.06,0.0678,1.67,0.0452,0.615,0.148,1.2,0.308,1.74,0.16,0.546,0.376,1.01,0.65,1.4,0.273,0.387,0.638,0.581,1.09,0.581,0.455,0.00001,0.842-0.239,1.16-0.717,0.319-0.478,0.57-1.04,0.752-1.67,0.182-0.638,0.308-1.26,0.376-1.88,0.0688-0.615,0.103-1.06,0.103-1.33z"/>
|
||||
<path d="m338,164c-0.00002,1.18-0.33,2.32-0.991,3.42-0.66,1.09-1.47,2.11-2.43,3.04-0.957,0.934-2,1.8-3.14,2.6-1.14,0.797-2.19,1.49-3.14,2.08-0.911,0.638-1.66,1.16-2.25,1.57-0.592,0.41-0.889,0.729-0.888,0.957-0.00001,0.592,0.0681,1.42,0.204,2.49s0.307,2.23,0.512,3.49c0.205,1.25,0.41,2.54,0.615,3.86s0.354,2.53,0.445,3.62c-0.00002,0.0459,0.034,0.251,0.102,0.615,0.0681,0.364,0.159,0.774,0.273,1.23,0.114,0.455,0.205,0.877,0.273,1.26,0.0681,0.387,0.102,0.627,0.102,0.719-0.00001,0.318-0.0111,0.671-0.0334,1.06-0.0223,0.387-0.0904,0.752-0.204,1.09-0.114,0.342-0.285,0.627-0.513,0.855s-0.524,0.342-0.888,0.342c-0.502-0.00001-0.867-0.217-1.09-0.65-0.227-0.433-0.341-0.855-0.341-1.26-0.00001-0.0904,0.0111-0.181,0.0334-0.273,0.0222-0.0918,0.0333-0.206,0.0334-0.342-0.00002-0.501-0.182-1.84-0.546-4.03s-0.774-4.8-1.23-7.83c-0.455-3.03-0.865-6.29-1.23-9.77-0.364-3.49-0.546-6.78-0.546-9.88-0.00001-0.228,0.0226-0.49,0.0678-0.786s0.0678-0.558,0.0678-0.786c-0.456,0.0459-1.13,0.251-2.02,0.616-0.888,0.365-1.77,0.809-2.63,1.33-0.866,0.524-1.63,1.07-2.29,1.64-0.66,0.569-0.991,1.08-0.991,1.54h-0.478c-0.138,0.00002-0.309-0.0911-0.514-0.273s-0.387-0.387-0.546-0.615-0.307-0.456-0.444-0.683-0.205-0.387-0.205-0.479c0.00001-0.957,0.57-1.86,1.71-2.7,1.14-0.843,2.56-1.6,4.27-2.26s3.59-1.18,5.64-1.57c2.05-0.387,3.99-0.581,5.81-0.581,1.78,0.00003,3.27,0.205,4.48,0.615s2.18,0.9,2.9,1.47c0.729,0.569,1.25,1.15,1.57,1.74,0.319,0.592,0.479,1.09,0.479,1.5zm-3.35-0.204c-0.00002-0.456-0.57-0.923-1.71-1.4-1.14-0.478-2.48-0.717-4.03-0.717-1.37,0.00002-2.37,0.0456-3.01,0.137-0.638,0.0911-1.07,0.183-1.3,0.274-0.0918,0.729-0.16,1.59-0.205,2.6-0.0452,1-0.0678,2.03-0.0678,3.07-0.00001,1.09,0.0341,2.15,0.102,3.18,0.0681,1.02,0.147,1.88,0.238,2.56,0.638-0.41,1.52-0.968,2.63-1.67,1.12-0.706,2.22-1.5,3.32-2.39,1.09-0.888,2.04-1.82,2.84-2.8,0.797-0.98,1.2-1.92,1.2-2.84z"/>
|
||||
<path d="m360,153c-0.592,0.683-1.44,1.35-2.53,2.02-1.09,0.661-2.19,1.26-3.28,1.81-1.09,0.546-2.05,1.01-2.87,1.4-0.82,0.387-1.23,0.649-1.23,0.785-0.00001,0.138,0.0911,0.548,0.273,1.23,0.182,0.683,0.398,1.49,0.649,2.43,0.25,0.934,0.512,1.9,0.786,2.9s0.502,1.89,0.684,2.67c0.0904,0.456,0.204,1.05,0.341,1.78,0.137,0.729,0.262,1.46,0.376,2.19,0.114,0.729,0.217,1.38,0.308,1.95,0.0911,0.569,0.137,0.877,0.137,0.923-0.00001,0.683-0.114,1.39-0.342,2.12-0.228,0.729-0.592,1.09-1.09,1.09-0.274,0-0.525-0.114-0.753-0.342s-0.433-0.49-0.615-0.786-0.319-0.581-0.41-0.854c-0.0911-0.273-0.137-0.478-0.137-0.614-0.00001-0.0918,0.0115-0.229,0.0344-0.411s0.0344-0.387,0.0344-0.615c-0.00002-0.865-0.137-2.12-0.411-3.76-0.0904-0.501-0.272-1.28-0.545-2.32-0.273-1.05-0.547-2.12-0.821-3.21-0.318-1.28-0.683-2.67-1.09-4.17-0.182-0.638-0.296-0.957-0.342-0.957-0.32,0.00002-0.855,0.194-1.61,0.581-0.752,0.387-1.61,0.866-2.56,1.44-0.957,0.57-1.96,1.19-3.01,1.85s-2.03,1.28-2.94,1.84c-0.911,0.569-1.7,1.05-2.36,1.43-0.66,0.387-1.06,0.581-1.2,0.581-0.592,0.00002-1.07-0.205-1.43-0.615-0.364-0.41-0.546-0.866-0.546-1.37,0-0.274,0.376-0.673,1.13-1.2,0.752-0.523,1.69-1.1,2.8-1.74,1.12-0.638,2.32-1.3,3.62-1.98,1.3-0.683,2.51-1.3,3.62-1.84,1.12-0.546,2.05-1,2.8-1.37,0.752-0.365,1.13-0.547,1.13-0.547-0.41-2.1-0.752-3.96-1.03-5.6-0.228-1.41-0.445-2.71-0.65-3.9-0.205-1.18-0.308-1.82-0.308-1.91,0-0.592,0.125-1.04,0.376-1.33,0.251-0.296,0.536-0.444,0.854-0.444,0.502,0.00004,0.821,0.342,0.957,1.03,0.501,2.46,0.967,4.65,1.4,6.56s0.855,3.46,1.26,4.65c0.41-0.0904,1.12-0.352,2.12-0.785s2.05-0.9,3.14-1.4c1.09-0.501,2.08-0.945,2.97-1.33,0.888-0.387,1.4-0.581,1.54-0.581,0.273,0.00003,0.443,0.0914,0.512,0.274,0.0688,0.183,0.148,0.342,0.239,0.479z"/>
|
||||
<path d="m368,153c-0.00001,0.0904-0.16,0.272-0.479,0.545s-0.695,0.558-1.13,0.854c-0.432,0.296-0.877,0.558-1.33,0.786-0.456,0.228-0.82,0.342-1.09,0.342-0.182,0.00003-0.421-0.0114-0.717-0.0344-0.296-0.0229-0.592-0.103-0.888-0.239s-0.558-0.33-0.786-0.581-0.342-0.582-0.342-0.992c0-0.637,0.228-1.24,0.683-1.81s1.05-0.855,1.78-0.855c0.136,0.00004,0.444,0.057,0.922,0.171s0.968,0.262,1.47,0.444c0.501,0.182,0.946,0.387,1.33,0.615,0.387,0.228,0.581,0.479,0.581,0.753zm2.25,25.6c-0.00001,0.318-0.239,0.592-0.717,0.82s-0.832,0.342-1.06,0.342c-0.455,0.00001-0.865-0.296-1.23-0.888s-0.684-1.28-0.957-2.05c-0.273-0.774-0.501-1.51-0.683-2.22-0.182-0.706-0.318-1.2-0.409-1.47-0.138-0.456-0.32-1-0.547-1.64-0.227-0.638-0.444-1.25-0.649-1.85-0.205-0.592-0.376-1.12-0.513-1.57-0.137-0.455-0.205-0.706-0.205-0.752-0.00001-0.638,0.125-1.23,0.375-1.78,0.25-0.546,0.558-0.82,0.924-0.82,0.41,0.00002,0.843,0.319,1.3,0.957,0.455,0.638,0.899,1.45,1.33,2.43,0.432,0.98,0.831,2.05,1.2,3.21,0.365,1.16,0.684,2.25,0.957,3.28,0.273,1.02,0.489,1.91,0.649,2.67,0.159,0.752,0.239,1.2,0.239,1.33z"/>
|
||||
<path d="m386,169c-0.00001,1-0.137,1.96-0.41,2.87-0.273,0.911-0.638,1.71-1.09,2.39-0.455,0.683-0.991,1.22-1.61,1.61-0.615,0.387-1.29,0.581-2.02,0.581-1.28,0-2.28-0.365-3.01-1.09-0.729-0.729-1.29-1.57-1.67-2.53-0.388-0.957-0.639-1.92-0.752-2.9s-0.17-1.72-0.17-2.22c-0.00001-0.82,0.125-1.74,0.375-2.77s0.592-1.97,1.03-2.84c0.433-0.866,0.923-1.59,1.47-2.19,0.546-0.592,1.12-0.888,1.71-0.888,0.136,0.00003,0.352,0.0456,0.649,0.137,0.296,0.0911,0.604,0.228,0.923,0.41s0.604,0.41,0.855,0.683,0.422,0.593,0.512,0.958c0.502,0.0445,1,0.226,1.5,0.545,0.501,0.319,0.774,0.57,0.82,0.752,0.364,1.18,0.603,2.37,0.717,3.55s0.171,2.16,0.171,2.94zm-3.07-1.23c-0.00001-0.683-0.0685-1.4-0.205-2.15-0.137-0.752-0.411-1.52-0.821-2.29-0.0904,0.0459-0.204,0.0688-0.342,0.0688-0.182,0.00002-0.33-0.0226-0.444-0.0678s-0.216-0.0678-0.307-0.0678c-0.546,0.00002-0.979,0.148-1.3,0.444-0.319,0.296-0.559,0.683-0.719,1.16-0.16,0.478-0.262,0.991-0.308,1.54-0.0452,0.546-0.0678,1.07-0.0678,1.57-0.00001,0.501,0.0226,1.06,0.0678,1.67,0.0452,0.615,0.148,1.2,0.308,1.74,0.16,0.546,0.376,1.01,0.65,1.4,0.273,0.387,0.638,0.581,1.09,0.581,0.455,0.00001,0.842-0.239,1.16-0.717,0.319-0.478,0.57-1.04,0.752-1.67,0.182-0.638,0.308-1.26,0.376-1.88,0.0688-0.615,0.103-1.06,0.103-1.33z"/>
|
||||
<path d="m414,176c-0.00003,0.273-0.0911,0.545-0.273,0.819-0.182,0.273-0.398,0.524-0.649,0.752-0.25,0.228-0.524,0.422-0.82,0.581s-0.558,0.239-0.786,0.239c-0.774,0-1.77-0.171-2.97-0.512-1.21-0.341-2.18-0.876-2.9-1.6-0.774-0.774-1.46-1.7-2.05-2.77-0.592-1.07-1.25-2.65-1.98-4.75-0.501,2.01-1.08,3.99-1.74,5.95s-1.72,3.76-3.18,5.4c-0.0904,0.0904-0.227,0.136-0.411,0.136-0.318,0-0.66-0.16-1.02-0.479-0.364-0.319-0.546-0.638-0.546-0.956-0.00001-0.318-0.0344-1.06-0.103-2.22-0.0688-1.16-0.149-2.46-0.24-3.9-0.0911-1.43-0.171-2.89-0.239-4.37-0.0681-1.48-0.102-2.7-0.102-3.66-0.00001-0.456,0.0229-1.06,0.0688-1.81,0.0459-0.752,0.182-1.4,0.409-1.95,0.0459-0.0917,0.217-0.274,0.513-0.547s0.626-0.41,0.991-0.41c0.32,0.00002,0.502,0.205,0.547,0.615,0.0452,0.41,0.0678,0.866,0.0678,1.37v10.8c0,0.228,0.0344,0.547,0.103,0.956,0.0688,0.41,0.171,0.705,0.308,0.887,0.501-1.09,0.967-2.38,1.4-3.86s0.855-2.89,1.26-4.24c0.41-1.34,0.82-2.48,1.23-3.42,0.41-0.934,0.82-1.4,1.23-1.4,0.456,0.00003,0.821,0.0911,1.09,0.273,0.273,0.182,0.501,0.547,0.683,1.09,0.228,1.32,0.411,2.49,0.547,3.52,0.137,1.02,0.308,1.95,0.513,2.77s0.501,1.58,0.888,2.29c0.387,0.706,0.922,1.36,1.6,1.95,0.638,0.592,1.36,1.03,2.15,1.3,0.797,0.273,1.49,0.41,2.08,0.41,0.274,0.00001,0.57-0.057,0.888-0.171s0.546-0.171,0.684-0.171c0.182,0.00001,0.353,0.16,0.512,0.479s0.239,0.525,0.239,0.616z"/>
|
||||
<path d="m433,175c-0.00002,0.774-0.262,1.45-0.786,2.02-0.524,0.569-1.19,1.05-1.98,1.43-0.797,0.387-1.67,0.695-2.63,0.923-0.957,0.228-1.87,0.399-2.73,0.512-0.866,0.113-1.63,0.181-2.29,0.204-0.661,0.023-1.08,0.0344-1.26,0.0344-1,0.00001-1.78-0.16-2.32-0.479-0.546-0.319-0.82-0.888-0.82-1.71,0-0.274,0.0226-0.513,0.0678-0.719,0.0452-0.205,0.228-0.308,0.547-0.308,0.136,0.00001,0.364,0.0341,0.683,0.102,0.319,0.0681,0.57,0.102,0.752,0.102,0.182,0.00001,0.763-0.0341,1.74-0.102,0.98-0.0681,2.03-0.193,3.14-0.375,1.12-0.182,2.12-0.444,3.01-0.786,0.888-0.342,1.33-0.786,1.33-1.33-0.00001-0.0904-0.467-0.375-1.4-0.853-0.934-0.478-2.34-1.29-4.2-2.43-1.46-0.911-2.48-1.83-3.08-2.77-0.592-0.934-0.888-2.2-0.888-3.79,0-1,0.217-1.82,0.65-2.46,0.433-0.638,1.03-1.14,1.78-1.5,0.752-0.364,1.62-0.626,2.6-0.785s2.02-0.239,3.11-0.239c0.0918,0.00003,0.377,0.0456,0.855,0.137,0.478,0.0911,0.991,0.239,1.54,0.444,0.547,0.205,1.04,0.456,1.47,0.752,0.432,0.296,0.649,0.626,0.649,0.991-0.00002,0.0904-0.0796,0.227-0.239,0.409s-0.421,0.524-0.785,1.03c-0.138-0.0459-0.377-0.114-0.719-0.205-0.341-0.091-0.729-0.194-1.16-0.308-0.433-0.114-0.877-0.205-1.33-0.273-0.455-0.0681-0.82-0.102-1.09-0.102-1.18,0.00002-2.14,0.216-2.87,0.649-0.729,0.432-1.09,1.26-1.09,2.49-0.00001,0.592,0.239,1.14,0.717,1.64,0.478,0.501,1.08,0.968,1.81,1.4,0.729,0.433,1.51,0.866,2.36,1.3,0.843,0.432,1.63,0.899,2.36,1.4,0.729,0.501,1.33,1.04,1.81,1.61,0.479,0.569,0.718,1.22,0.719,1.95z"/>
|
||||
<path d="m489,171c0.228,0.228,0.342,0.365,0.342,0.411-0.00002,0.0904-0.125,0.363-0.375,0.819-0.25,0.455-0.581,0.934-0.991,1.43-0.41,0.501-0.854,0.946-1.33,1.33-0.478,0.387-0.946,0.581-1.4,0.581-0.957,0.00001-1.73-0.194-2.32-0.581-0.592-0.387-1.08-0.877-1.47-1.47-0.387-0.592-0.683-1.24-0.888-1.95-0.205-0.706-0.376-1.38-0.512-2.02-0.0918-0.32-0.183-0.48-0.273-0.48-0.138,0.00002-0.411,0.49-0.821,1.47s-0.853,2.05-1.33,3.21c-0.478,1.16-0.934,2.23-1.37,3.21-0.433,0.98-0.718,1.47-0.854,1.47-0.82,0.00001-1.52-0.353-2.08-1.06-0.569-0.706-1.03-1.53-1.37-2.46-0.342-0.934-0.604-1.89-0.786-2.87s-0.296-1.74-0.342-2.29c-0.136-1.23-0.432-3.28-0.887-6.15s-0.843-6.36-1.16-10.5c-0.0904-0.865-0.193-1.65-0.307-2.36-0.114-0.706-0.24-1.49-0.376-2.36-0.137-0.866-0.251-1.85-0.342-2.94-0.0911-1.09-0.137-2.44-0.137-4.03,0-0.0903,0.0229-0.386,0.0688-0.887s0.114-1.05,0.205-1.64c0.0911-0.592,0.239-1.12,0.444-1.57,0.205-0.456,0.444-0.684,0.716-0.684,0.32,0.00005,0.616,0.194,0.89,0.581,0.273,0.387,0.512,0.832,0.717,1.33,0.205,0.501,0.353,0.98,0.444,1.44,0.0911,0.456,0.137,0.775,0.137,0.957-0.00001,0.683-0.0455,1.32-0.137,1.91-0.0911,0.592-0.137,1.14-0.137,1.64-0.00001,0.683,0.057,1.55,0.171,2.6s0.262,2.12,0.444,3.21,0.341,2.15,0.478,3.18c0.136,1.03,0.25,1.86,0.342,2.5-0.00001,0.0445,0.0455,0.363,0.137,0.955,0.0911,0.592,0.194,1.33,0.308,2.22,0.114,0.889,0.228,1.85,0.342,2.87,0.114,1.03,0.239,2.03,0.375,3.01s0.261,1.85,0.375,2.6c0.114,0.752,0.194,1.29,0.24,1.61-0.00001,0.136,0.034,0.33,0.102,0.58,0.0681,0.25,0.136,0.535,0.204,0.854,0.0681,0.319,0.148,0.615,0.24,0.888,0.0917,0.273,0.206,0.479,0.342,0.616,0.273-0.546,0.625-1.39,1.06-2.53,0.433-1.14,0.889-2.3,1.37-3.49,0.478-1.18,0.934-2.22,1.37-3.11,0.433-0.888,0.809-1.33,1.13-1.33,0.364,0.00002,0.66,0.0685,0.888,0.205,0.228,0.137,0.524,0.251,0.888,0.341,0.456,0.182,0.684,0.421,0.684,0.717-0.00002,0.296,0.0452,0.649,0.136,1.06,0.0918,0.548,0.24,1.27,0.445,2.15,0.205,0.889,0.444,1.75,0.717,2.6,0.273,0.843,0.592,1.56,0.956,2.15,0.364,0.592,0.729,0.889,1.09,0.888,0.182,0.00001,0.433-0.239,0.752-0.717s0.752-0.74,1.3-0.786c0.0918,0.00001,0.252,0.057,0.48,0.171s0.455,0.262,0.682,0.444z"/>
|
||||
<path d="m512,177c0.0459,0.0918,0.0688,0.229,0.0688,0.411-0.00002,0.274-0.205,0.684-0.615,1.23-0.136,0.182-0.432,0.478-0.888,0.888s-1.07,0.82-1.85,1.23c-0.774,0.41-1.72,0.774-2.84,1.09-1.12,0.318-2.43,0.478-3.93,0.478-1.05,0-2.07-0.239-3.07-0.717s-1.89-1.18-2.67-2.12c-0.774-0.934-1.41-2.1-1.91-3.49-0.501-1.39-0.752-3.02-0.752-4.89,0-1.78,0.228-3.44,0.683-4.99s1.04-2.92,1.74-4.1c0.706-1.18,1.49-2.12,2.36-2.8,0.866-0.683,1.71-1.03,2.53-1.03,0.729,0.00003,1.47,0.148,2.22,0.444,0.752,0.296,1.44,0.672,2.05,1.13,0.615,0.456,1.1,0.969,1.47,1.54,0.365,0.569,0.547,1.15,0.547,1.74-0.00001,0.683-0.308,1.39-0.923,2.12-0.615,0.729-1.36,1.4-2.22,2.02-0.866,0.615-1.73,1.12-2.6,1.5-0.866,0.387-1.55,0.581-2.05,0.581-0.273,0.00001-0.511-0.125-0.716-0.376s-0.308-0.559-0.308-0.923c-0.00001-0.638,0.285-1.14,0.854-1.5,0.569-0.364,1.2-0.695,1.88-0.991,0.683-0.296,1.31-0.649,1.88-1.06,0.569-0.41,0.854-0.98,0.854-1.71-0.00002-0.0918-0.114-0.32-0.342-0.684s-0.843-0.546-1.85-0.546c-0.455,0.00002-0.978,0.262-1.57,0.786s-1.16,1.23-1.71,2.12c-0.547,0.889-1,1.94-1.37,3.14-0.364,1.21-0.546,2.52-0.546,3.93,0,1.18,0.217,2.26,0.65,3.21,0.433,0.957,0.991,1.77,1.67,2.43,0.683,0.661,1.48,1.17,2.39,1.54,0.911,0.364,1.85,0.546,2.8,0.546,0.683,0,1.42-0.148,2.22-0.444,0.797-0.296,1.55-0.615,2.26-0.957,0.706-0.342,1.32-0.661,1.84-0.957,0.523-0.296,0.854-0.444,0.992-0.444,0.136,0.00001,0.284,0.0685,0.443,0.205,0.159,0.137,0.262,0.274,0.308,0.41z"/>
|
||||
<path d="m533,163c-0.00002,0.318-0.137,0.58-0.41,0.785s-0.592,0.376-0.957,0.513-0.73,0.24-1.09,0.308c-0.364,0.0682-0.66,0.102-0.888,0.102-0.683,0.00002-1.14-0.0455-1.37-0.137-0.228-0.091-0.41-0.137-0.546-0.137-1.14,0.00002-2.05,0.0911-2.73,0.273-0.683,0.182-1.22,0.478-1.61,0.888-0.387,0.41-0.638,0.923-0.752,1.54-0.114,0.615-0.171,1.36-0.171,2.22-0.00001,1.46,0.057,2.62,0.171,3.49,0.114,0.866,0.228,1.57,0.341,2.12,0.113,0.546,0.227,0.968,0.341,1.26,0.114,0.296,0.171,0.581,0.171,0.855-0.00001,0.364-0.194,0.752-0.581,1.16-0.387,0.41-0.74,0.615-1.06,0.615-0.546,0-1.04-0.49-1.47-1.47-0.433-0.98-0.798-2.14-1.09-3.49-0.296-1.34-0.535-2.68-0.717-4s-0.273-2.32-0.273-3.01c0-0.776,0.0681-1.52,0.204-2.22,0.136-0.706,0.318-1.32,0.546-1.84,0.228-0.524,0.479-0.946,0.752-1.26,0.273-0.319,0.547-0.479,0.821-0.479,0.228,0.00003,0.41,0.08,0.546,0.24s0.25,0.342,0.341,0.547c0.0911,0.205,0.194,0.387,0.308,0.546s0.262,0.239,0.444,0.239c0.41,0.00003,1.07-0.205,1.98-0.615,0.911-0.41,2.03-0.615,3.35-0.615,1.23,0.00002,2.15,0.0341,2.77,0.102,0.615,0.0682,1.22,0.216,1.81,0.444,0.136,0.0459,0.307,0.148,0.512,0.308,0.205,0.159,0.308,0.399,0.308,0.719z"/>
|
||||
<path d="m558,177c0.0459,0.0918,0.0688,0.229,0.0688,0.411-0.00002,0.274-0.205,0.684-0.615,1.23-0.136,0.182-0.432,0.478-0.888,0.888s-1.07,0.82-1.85,1.23c-0.774,0.41-1.72,0.774-2.84,1.09-1.12,0.318-2.43,0.478-3.93,0.478-1.05,0-2.07-0.239-3.07-0.717s-1.89-1.18-2.67-2.12c-0.774-0.934-1.41-2.1-1.91-3.49-0.501-1.39-0.752-3.02-0.752-4.89,0-1.78,0.228-3.44,0.683-4.99s1.04-2.92,1.74-4.1c0.706-1.18,1.49-2.12,2.36-2.8,0.866-0.683,1.71-1.03,2.53-1.03,0.729,0.00003,1.47,0.148,2.22,0.444,0.752,0.296,1.44,0.672,2.05,1.13,0.615,0.456,1.1,0.969,1.47,1.54,0.365,0.569,0.547,1.15,0.547,1.74-0.00001,0.683-0.308,1.39-0.923,2.12-0.615,0.729-1.36,1.4-2.22,2.02-0.866,0.615-1.73,1.12-2.6,1.5-0.866,0.387-1.55,0.581-2.05,0.581-0.273,0.00001-0.511-0.125-0.716-0.376s-0.308-0.559-0.308-0.923c0-0.638,0.285-1.14,0.854-1.5,0.569-0.364,1.2-0.695,1.88-0.991,0.683-0.296,1.31-0.649,1.88-1.06,0.569-0.41,0.854-0.98,0.854-1.71-0.00001-0.0918-0.114-0.32-0.342-0.684s-0.843-0.546-1.85-0.546c-0.455,0.00002-0.978,0.262-1.57,0.786s-1.16,1.23-1.71,2.12c-0.547,0.889-1,1.94-1.37,3.14-0.364,1.21-0.546,2.52-0.546,3.93,0,1.18,0.217,2.26,0.65,3.21,0.433,0.957,0.991,1.77,1.67,2.43,0.683,0.661,1.48,1.17,2.39,1.54,0.911,0.364,1.85,0.546,2.8,0.546,0.683,0,1.42-0.148,2.22-0.444,0.797-0.296,1.55-0.615,2.26-0.957,0.706-0.342,1.32-0.661,1.84-0.957,0.523-0.296,0.854-0.444,0.992-0.444,0.136,0.00001,0.284,0.0685,0.443,0.205,0.159,0.137,0.262,0.274,0.308,0.41z"/>
|
||||
</g>
|
||||
<g stroke-linejoin="miter" transform="translate(77.31638,-1.3284405)" stroke="#8085e8" stroke-linecap="butt" stroke-dasharray="none" stroke-miterlimit="4" fill="none">
|
||||
<path d="m786,141c75.8,1.01,67.7-26.3,62.6-68.7-6-42.6-6-42.6-6-42.6" transform="matrix(0.60749736,0,0,0.6074971,4.9287817,87.469516)" stroke-width="4"/>
|
||||
<path d="m498,126c12.9-8.59,19.6-22.1,19.6-22.1s0.614,3.07,12.9,9.2c12.3,6.14,10.4,5.52,10.4,5.52" stroke-width="2.42998885999999990"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,863 @@
|
|||
var $hilighted,
|
||||
$hilightedMenuItem,
|
||||
optionDictionary = {},
|
||||
names = [],
|
||||
buildApiOffline,
|
||||
initOffline,
|
||||
offline = {},
|
||||
API = {},
|
||||
buildPage;
|
||||
|
||||
function loadScript(url, callback) {
|
||||
//http://www.nczonline.net/blog/2009/07/28/the-best-way-to-load-external-javascript/
|
||||
var script = document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
if (script.readyState){ //IE
|
||||
script.onreadystatechange = function(){
|
||||
if (script.readyState == "loaded" ||
|
||||
script.readyState == "complete"){
|
||||
script.onreadystatechange = null;
|
||||
callback();
|
||||
}
|
||||
};
|
||||
} else { //Others
|
||||
script.onload = function() {
|
||||
callback();
|
||||
};
|
||||
}
|
||||
|
||||
script.src = url;
|
||||
document.getElementsByTagName("head")[0].appendChild(script);
|
||||
}
|
||||
|
||||
function toDot (id){
|
||||
return id.replace(/[-]+/g,'.');
|
||||
};
|
||||
|
||||
function escapeHTML(html) {
|
||||
if (typeof html === 'string') {
|
||||
html = html
|
||||
.replace('\u25CF', '\\u25CF')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
function escapeSelector (name) {
|
||||
return name.replace('<', '\\<').replace('>', '\\>');
|
||||
}
|
||||
|
||||
function activateInternalLinks($parent) {
|
||||
$('a[href^="#"]', $parent).each(function (i, anchor) {
|
||||
$(anchor).click(function () {
|
||||
gotoSection(anchor.href.split('#')[1], true);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Highligth a specific option by coloring it in the menu view and section view
|
||||
*/
|
||||
function hilight (id) {
|
||||
var linkId, $el, $detailsWrap = $('#details-wrap');
|
||||
|
||||
$el = $('div.member#' + escapeSelector(id));
|
||||
|
||||
// clear old
|
||||
if ($hilighted) {
|
||||
$hilighted.removeClass('hilighted');
|
||||
}
|
||||
if ($hilightedMenuItem) {
|
||||
$hilightedMenuItem.removeClass('hilighted');
|
||||
}
|
||||
|
||||
if ($el.length === 0) {
|
||||
$detailsWrap.scrollTop(0);
|
||||
} else {
|
||||
// hilight new
|
||||
$hilighted = $el;
|
||||
$hilighted.addClass('hilighted');
|
||||
$detailsWrap.scrollTop($hilighted.offset().top + $detailsWrap.scrollTop() - 160);
|
||||
}
|
||||
linkId = id.replace(/[^a-z0-9<>\\]+/gi,'.');
|
||||
|
||||
$hilightedMenuItem = $('a[href="#'+ linkId +'"]').not('.plus');
|
||||
$hilightedMenuItem.addClass('hilighted');
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand and load children when necessary of current level
|
||||
*/
|
||||
function toggleExpand($elem, callback) {
|
||||
var $_menu = $elem.find('div[id$="-menu"]').first(),
|
||||
_id = $_menu.attr('id').replace("-menu",""),
|
||||
displayChildrenCallback = function () {
|
||||
|
||||
$('.dots', $elem).removeClass('loading');
|
||||
$elem.removeClass("collapsed");
|
||||
$elem.addClass("expanded");
|
||||
$_menu.slideDown();
|
||||
// show relevant section
|
||||
|
||||
if (/[A-Z]/.test(_id[0])) {
|
||||
_id = 'object-' + _id;
|
||||
}
|
||||
toggleSection(_id);
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
if ($elem.hasClass('collapsed')) {
|
||||
|
||||
/* if not loaded, load children, standard we have three children */
|
||||
if ($_menu.children().size() == 1) {
|
||||
$('.dots', $elem).addClass('loading');
|
||||
loadChildren(_id, false, displayChildrenCallback);
|
||||
|
||||
} else {
|
||||
displayChildrenCallback();
|
||||
}
|
||||
} else {
|
||||
// hide children
|
||||
$_menu.slideUp('normal',function(){
|
||||
$elem.removeClass("expanded");
|
||||
$elem.addClass("collapsed");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function toggleSection(sectionId) {
|
||||
$section = $("#details > div.section:visible");
|
||||
|
||||
// hide current section
|
||||
if($section){
|
||||
$section.hide();
|
||||
}
|
||||
if (/[^\\]</.test(sectionId)) {
|
||||
sectionId = sectionId.replace('<', '\\<').replace('>', '\\>');
|
||||
}
|
||||
$('#details > div.section#' + sectionId).show();
|
||||
}
|
||||
|
||||
|
||||
function addSectionOption(val){
|
||||
$section = $('<div class="section" id="' + val.name + '" style="display:none;"></div>').appendTo('#details');
|
||||
$('<h1>' + val.fullname.replace('<', '<').replace('>', '>') + '</h1>'
|
||||
+ (val.description ? '<div class="section-description">' + val.description + '</div>': '')
|
||||
+ (val.demo ? '<div class="demo"><h4>Try it:</h4> ' + val.demo + '</div>': '' )).appendTo($section);
|
||||
|
||||
activateInternalLinks($section);
|
||||
$(document).triggerHandler({ type:"xtra.btn.section.event",id: optionDictionary[val.fullname], table: 'option' });
|
||||
}
|
||||
|
||||
function addSectionObject(val){
|
||||
$section = $('<div class="section" id="object-' + val.name + '" style="display:none;"></div>').appendTo('#details');
|
||||
$('<h1>' + val.title + '</h1>').appendTo($section);
|
||||
$('<div class="section-description">' + val.description + '</div>').appendTo($section);
|
||||
|
||||
activateInternalLinks($section);
|
||||
$(document).triggerHandler({ type:"xtra.btn.section.event",id: 'object-'+ val.name, table: 'object'});
|
||||
}
|
||||
|
||||
function markupReturnType(s) {
|
||||
s = s.replace(/[<>]/g, function (a) {
|
||||
return {
|
||||
'<': '<',
|
||||
'>': '>'
|
||||
}[a];
|
||||
});
|
||||
s = s.replace(/(Axis|Chart|Element|Highcharts|Point|Renderer|Series)/g, '<a href="#$1">$1</a>');
|
||||
return s;
|
||||
}
|
||||
|
||||
function loadOptionMemberInSection(obj, isParent){
|
||||
//add member to section in div#details
|
||||
var $_section = $('div#' + obj.parent.replace('<', '\\<').replace('>', '\\>') + '.section'),
|
||||
$_inheritedLink,
|
||||
$memberDiv,
|
||||
contextClass = obj.description && obj.description.indexOf('<p>') > -1 ? '' : ' context';
|
||||
|
||||
$memberDiv = $('<div class="member" id="' + obj.name + '"><span class="title">' + obj.title + '</span>'
|
||||
+ (obj.returnType ? '<span class="returnType">: ' + markupReturnType(obj.returnType) + '</span>' : '')
|
||||
+ (obj.deprecated ? '<div class="deprecated"><p>Deprecated</p></div>' : '' )
|
||||
+ (obj.since ? '<div class="since">Since ' + obj.since + '</div>' : '' )
|
||||
+ (obj.description ? '<div class="description">' + obj.description
|
||||
+ (obj.defaults ? ' Defaults to <code>' + escapeHTML(obj.defaults) + '</code>.' : '')
|
||||
+ '</div>' : '')
|
||||
+ (obj.context ? '<div class="description' + contextClass + '">The <code>this</code> keyword refers to the '+ markupReturnType(obj.context) +' object.</div>' : '')
|
||||
+ (obj.demo ? '<div class="demo"><h4>Try it:</h4> ' + obj.demo + '</div>': '' )
|
||||
+ (obj.seeAlso ? '<div class="seeAlso">See also: ' + obj.seeAlso + '</div>': '' )
|
||||
+ '</div>').appendTo($_section);
|
||||
|
||||
activateInternalLinks($memberDiv);
|
||||
|
||||
if (isParent) {
|
||||
$('div#' + escapeSelector(obj.name) + '.member span.title').html(function() {
|
||||
var title = $.trim($(this).text());
|
||||
return $('<a href="#' + obj.fullname + '">' + title + '</a>').click(function(){
|
||||
gotoSection(obj.fullname, true);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function loadObjectMemberInSection(obj) {
|
||||
$memberDiv = $('<div class="member" id="' + obj.name + '">'
|
||||
+ '<span class="title">' + obj.title + '</span> '
|
||||
+ (obj.params ? '<span class="parameters">' + obj.params + '</span>' : '')
|
||||
+ (obj.since ? '<div class="since">Since ' + obj.since + '</div>' : '' )
|
||||
+ (obj.deprecated ? '<div class="deprecated"><p>Deprecated</p></div>' : '' )
|
||||
+ '<div class="description"><p>' + obj.description + '</p>'
|
||||
+ (obj.paramsDescription ? '<h4>Parameters</h4><ul id="paramdesc"><li>' +
|
||||
obj.paramsDescription.replace(/\|\|/g,'</li><li>') + '</li></ul>' : '')
|
||||
+ (obj.returnType ? '<h4>Returns</h4><ul id="returns"><li>' + markupReturnType(obj.returnType) + '</li></ul>' : '')
|
||||
+ '</div>'
|
||||
+ (obj.demo ? '<div class="demo"><h4>Try it:</h4> ' + obj.demo + '</div>': '' )
|
||||
+ '</div>').appendTo('div#object-' + obj.parent + '.section');
|
||||
|
||||
activateInternalLinks($memberDiv);
|
||||
}
|
||||
|
||||
function loadChildren(name, silent, callback) {
|
||||
|
||||
var isObject = /[A-Z]/.test(name[0]),
|
||||
url = isObject ?
|
||||
'object/'+ PRODUCTNAME + '-obj/child/' + name :
|
||||
'option/'+ PRODUCTNAME + '/child/' + name;
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: url,
|
||||
dataType: "json",
|
||||
error: function () {
|
||||
var $menu;
|
||||
$menu = $('div#' + escapeSelector(name) + '-menu');
|
||||
$('.dots', $menu.parent()).removeClass('loading').addClass('error').html('Error');
|
||||
},
|
||||
success: function (data) {
|
||||
var display = 'block',
|
||||
display, $menu, $menuItem;
|
||||
|
||||
if (silent){
|
||||
display = 'none';
|
||||
}
|
||||
|
||||
name = name.replace('<', '\\<').replace('>', '\\>');
|
||||
$menu = $('div#' + name + '-menu');
|
||||
|
||||
|
||||
$.each(data, function (key, val) {
|
||||
var $div = $('<div></div>').appendTo($menu), $plus, $menuLink, parts,
|
||||
tie, dottedName, internalName,
|
||||
name,
|
||||
title,
|
||||
defaults,
|
||||
cls;
|
||||
|
||||
/*if (val.type === 'method') {
|
||||
name = val.name.replace('--', '.') + '()';
|
||||
} else if (val.type === 'property') {
|
||||
name = val.name.replace('--', '.');
|
||||
} else {
|
||||
name = val.fullname;
|
||||
}*/
|
||||
name = val.fullname;
|
||||
|
||||
if (val.isParent) {
|
||||
var preBracket = '{',
|
||||
postBracket = '}';
|
||||
|
||||
if (val.returnType && val.returnType.indexOf('Array') === 0 ) {
|
||||
preBracket = '[{';
|
||||
postBracket = '}]';
|
||||
}
|
||||
|
||||
|
||||
|
||||
$menuItem = $('<div class="menuitem collapsed"></div>');
|
||||
$menuLink = $('<a href="#' + name + '">' + val.title + '</a>').appendTo($menuItem);
|
||||
|
||||
$menuLink.click(function(){
|
||||
gotoSection(val.fullname, true);
|
||||
});
|
||||
$plus = $('<a href="#' + name + '" class="plus"></a>').appendTo($menuItem);
|
||||
$plus.click(function () {
|
||||
toggleExpand($plus.parent());
|
||||
});
|
||||
$menuItem.append(': '+ preBracket +'<span class="dots"><span>…</span></span>');
|
||||
// add empty submenu
|
||||
$subMenu = $('<div id="' + val.name + '-menu" style="display:none"><div>').appendTo($menuItem);
|
||||
$menuItem.append(postBracket);
|
||||
$menuItem.appendTo($menu);
|
||||
addSectionOption(val);
|
||||
} else {
|
||||
if (val.type === 'method') {
|
||||
title = val.title + '()';
|
||||
} else {
|
||||
title = val.title;
|
||||
}
|
||||
|
||||
$menuLink = $('<a href="#' + name + '">' + title + '</a>').appendTo($div);
|
||||
$menuLink.click(function() {
|
||||
gotoSection(name, true);
|
||||
});
|
||||
if (val.type === 'method') {
|
||||
defaults = '[function]';
|
||||
} else if (val.type === 'property') {
|
||||
defaults = '[' + val.returnType + ']';
|
||||
} else if (val.defaults === 'null' || val.defaults === 'undefined' || val.defaults === '' || val.defaults === undefined) {
|
||||
defaults = val.defaults;
|
||||
} else if (val.returnType === 'String' || val.returnType === 'Color') {
|
||||
defaults = '"' + val.defaults + '"';
|
||||
|
||||
} else {
|
||||
defaults = val.defaults;
|
||||
}
|
||||
|
||||
if (val.returnType) {
|
||||
cls = val.returnType.toLowerCase();
|
||||
} else {
|
||||
cls = '';
|
||||
console.warn('Missing returnType for ' + val.fullname);
|
||||
}
|
||||
|
||||
|
||||
$('<span class="value value-' + cls + '">: ' + escapeHTML(defaults) + '</span>').appendTo($div);
|
||||
}
|
||||
if (isObject) {
|
||||
loadObjectMemberInSection(val);
|
||||
} else {
|
||||
loadOptionMemberInSection(val, val.isParent);
|
||||
}
|
||||
});
|
||||
|
||||
$(document).triggerHandler({
|
||||
type:"xtra.btn.member.event",
|
||||
id: isObject ? 'object-' + name : name,
|
||||
table: isObject ? 'object' : 'option'
|
||||
});
|
||||
|
||||
if (callback) {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
function loadObjectMembers(name){
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'object/'+ PRODUCTNAME + '-obj/child/' + name,
|
||||
async: false,
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
$.each(data, function (key, val) {
|
||||
loadObjectMemberInSection(val);
|
||||
});
|
||||
}
|
||||
});
|
||||
$(document).triggerHandler({ type:"xtra.btn.member.event", id: 'object-' + name,table:'object'});
|
||||
};
|
||||
|
||||
function gotoSection(anchor, hilighted) {
|
||||
|
||||
var name, levels, member, isObjectArr, isObject, parts, $_parent, $_parentparent, $_menu,
|
||||
sectionId, parent,
|
||||
i,
|
||||
callbackStack = [];
|
||||
|
||||
// is it an option-section or an object-section?
|
||||
parts = anchor.split("-");
|
||||
|
||||
// Handle typed parent item, like series<line>
|
||||
name = anchor.split('.');
|
||||
if (name.length > 1) {
|
||||
name[name.length - 1] = '-' + name[name.length - 1];
|
||||
}
|
||||
name = name.join('-');
|
||||
|
||||
levels = name.split(/[-]{1,2}/);
|
||||
|
||||
isObject = (parts.length > 1 && parts[0] == 'object' || /[A-Z]/.test(name[0]));
|
||||
|
||||
// Asyncronously expand parent elements of selected item
|
||||
$.each(levels, function(i) {
|
||||
callbackStack.push(function () {
|
||||
var proceed = true,
|
||||
level,
|
||||
$_menu,
|
||||
$_parent;
|
||||
|
||||
if (levels[i]) {
|
||||
level = levels.slice(0, i + 1).join('-');
|
||||
|
||||
if (level.indexOf('<') > -1) {
|
||||
$_parentparent = $('#' + level.split('<')[0] + '-menu').parent();
|
||||
level = escapeSelector(level);
|
||||
}
|
||||
|
||||
$_menu = $('#' + level + '-menu');
|
||||
$_parent = $_menu.parent();
|
||||
|
||||
if ($_menu && $_parent.hasClass('collapsed')) {
|
||||
|
||||
if ($_parentparent && $_parentparent.hasClass('collapsed')) {
|
||||
toggleExpand($_parentparent);
|
||||
}
|
||||
|
||||
// Do the toggle, and pass the next level as the callback argument
|
||||
toggleExpand($_parent, callbackStack[i + 1]);
|
||||
proceed = false;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// For the last path item, show the section etc
|
||||
if (/[A-Z]/.test(level[0])) {
|
||||
level = 'object-' + level;
|
||||
}
|
||||
if ($('#details > div.section#' + level).length) {
|
||||
toggleSection(level);
|
||||
|
||||
// empty search
|
||||
$("#search").val("");
|
||||
window.location.hash = anchor;
|
||||
}
|
||||
|
||||
if (proceed && callbackStack[i + 1]) {
|
||||
callbackStack[i + 1]();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Hilighting is the last operation in the async stack
|
||||
if (hilighted) {
|
||||
callbackStack.push(function () {
|
||||
hilight(name);
|
||||
});
|
||||
}
|
||||
|
||||
// Start the recursive iteration
|
||||
callbackStack[0]();
|
||||
|
||||
|
||||
|
||||
}
|
||||
/*
|
||||
function addToSelectBox(key, val, type) {
|
||||
|
||||
var $menuItem = $('<div class="menuitem collapsed"></div>').appendTo('#' + type + 's'),
|
||||
splut = val.fullname.split('<'),
|
||||
commonName = splut[0],
|
||||
templateName = splut[1].split('>')[0],
|
||||
$menuLink = $('#' + commonName + '-menulink'),
|
||||
$selectbox = $('#' + commonName + '-selectbox');
|
||||
|
||||
// The first time we encounter the series, generate the menu item for it.
|
||||
if ($menuLink.length === 0) {
|
||||
$menuLink = $('<a href="#' + commonName + '" id="' + commonName + '-menulink">' + commonName + '</a>')
|
||||
.appendTo($menuItem);
|
||||
|
||||
$menuItem.append(': { type: ');
|
||||
|
||||
$selectbox = $('<select id="'+ commonName +'-selectbox">')
|
||||
.bind('change', function () {
|
||||
console.log(this.value);
|
||||
})
|
||||
.appendTo($menuItem);
|
||||
|
||||
$menuItem.append(' }');
|
||||
|
||||
}
|
||||
|
||||
$selectbox.append('<option>' + templateName + '</option>')
|
||||
.attr({
|
||||
name: templateName
|
||||
});
|
||||
}
|
||||
*/
|
||||
/**
|
||||
* Add the first level menu items on page load
|
||||
*/
|
||||
function addFirstLevelMenuItem(key, val, type) {
|
||||
|
||||
|
||||
var $menuItem = $('<div class="menuitem collapsed"></div>').appendTo('#' + type + 's'),
|
||||
$plus, anchor, $menu, levels, level, member, $menuLink,
|
||||
sectionId = val.fullname || val.name,
|
||||
title = escapeHTML(val.title),
|
||||
mainSection,
|
||||
name = val.name,
|
||||
recurseToType = false,
|
||||
menuItemPrefix = '';
|
||||
prefix = ': {',
|
||||
suffix = '}';
|
||||
|
||||
if (val.returnType && val.returnType.indexOf('Array') === 0) {
|
||||
if (val.returnType === 'Array<Object>') {
|
||||
prefix = ': [{';
|
||||
suffix = '}]';
|
||||
} else {
|
||||
prefix = ': [';
|
||||
suffix = ']';
|
||||
}
|
||||
}
|
||||
|
||||
// Global options
|
||||
if ($.inArray(val.name, ['global', 'lang']) !== -1) {
|
||||
$menuItem = $('<div class="menuitem collapsed"></div>').appendTo('#global-options');
|
||||
}
|
||||
|
||||
|
||||
// Handle the series<line> syntax
|
||||
if (sectionId.indexOf('<') > -1) {
|
||||
mainSection = sectionId.split('<')[0];
|
||||
|
||||
// The first time we encounter a menu item on the syntax series<line>, add the series menu item
|
||||
if ($('#' + mainSection + '-menu').length === 0) {
|
||||
sectionId = title = name = mainSection;
|
||||
prefix = ': [';
|
||||
suffix = ']';
|
||||
recurseToType = true; // run this method again, but now for the { type: "line" } menu item
|
||||
} else {
|
||||
$menuItem.appendTo($('#' + mainSection + '-menu'));
|
||||
menuItemPrefix = '{<br class="typed"/>';
|
||||
title = '<span class="typed">type: "' + sectionId.split('<')[1].split('>')[0] + '"</span>';
|
||||
prefix = ', ';
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
if (menuItemPrefix) {
|
||||
$menuItem.append(menuItemPrefix);
|
||||
}
|
||||
|
||||
$menuLink = $('<a href="#' + sectionId + '">' + title + '</a>')
|
||||
.appendTo($menuItem)
|
||||
.click(function(){
|
||||
gotoSection(sectionId, true);
|
||||
return false;
|
||||
});
|
||||
|
||||
if (val.isParent) {
|
||||
$plus = $('<a href="#' + sectionId + '" class="plus"></a>')
|
||||
.appendTo($menuItem)
|
||||
.click(function () {
|
||||
toggleExpand($plus.parent());
|
||||
});
|
||||
}
|
||||
|
||||
$menuItem.append(prefix);
|
||||
|
||||
$('<span class="dots"><span>…</span></span>').appendTo($menuItem);
|
||||
|
||||
if(val.isParent) {
|
||||
$subMenu = $('<div id="' + name + '-menu" style="display:none"><div>').appendTo($menuItem);
|
||||
}
|
||||
|
||||
$menuItem.append(suffix);
|
||||
|
||||
|
||||
// create sections in div#details
|
||||
if (type === 'option') {
|
||||
addSectionOption(val);
|
||||
} else {
|
||||
addSectionObject(val);
|
||||
}
|
||||
|
||||
if (recurseToType) {
|
||||
addFirstLevelMenuItem.apply(null, arguments);
|
||||
}
|
||||
}
|
||||
|
||||
prepareOffline = function(callback) {
|
||||
|
||||
offline = {highcharts: {}, highstock: {}, highmaps: {}};
|
||||
|
||||
// now we have the data loaded we rewrite $.ajax for offline use
|
||||
$.ajax = function(obj) {
|
||||
var result,
|
||||
type,
|
||||
splitted;
|
||||
|
||||
if (obj.url === PRODUCTNAME + '/names') {
|
||||
result = API[PRODUCTNAME].names;
|
||||
}
|
||||
|
||||
var type = obj.url.split('/');
|
||||
|
||||
if (obj.url === 'option/'+ PRODUCTNAME + '/main') {
|
||||
result = API[PRODUCTNAME].main.option;
|
||||
}
|
||||
|
||||
if (obj.url === 'object/'+ PRODUCTNAME + '-obj/main') {
|
||||
result = API[PRODUCTNAME].main.object;
|
||||
}
|
||||
|
||||
splitted = obj.url.split('object/' + PRODUCTNAME + '-obj/child/');
|
||||
if (splitted.length > 1) {
|
||||
result = API[PRODUCTNAME].object[splitted[1]].children;
|
||||
}
|
||||
splitted = obj.url.split('option/' + PRODUCTNAME + '/child/');
|
||||
if (splitted.length > 1) {
|
||||
result = API[PRODUCTNAME].option[splitted[1]].children;
|
||||
}
|
||||
|
||||
// result to handler
|
||||
obj.success(result);
|
||||
};
|
||||
|
||||
callback();
|
||||
}
|
||||
|
||||
// build dictionary for offline use
|
||||
buildApiOffline = function(data, callback) {
|
||||
|
||||
var option,
|
||||
main,
|
||||
names,
|
||||
type,
|
||||
i = 0;
|
||||
|
||||
API[PRODUCTNAME] = { option: [], object: [], main: {}, names: [] };
|
||||
|
||||
names = API[PRODUCTNAME].names;
|
||||
|
||||
function fillWithType(type) {
|
||||
var idx,
|
||||
slot = API[PRODUCTNAME][type],
|
||||
main = API[PRODUCTNAME].main[type] = [];
|
||||
name,
|
||||
parent;
|
||||
|
||||
// Loop over options in dump file
|
||||
for (idx = 0; idx < data[type].length; idx++) {
|
||||
option = data[type][idx];
|
||||
name = option.name;
|
||||
names.push(name);
|
||||
|
||||
if (option.isParent) {
|
||||
|
||||
// Store main options separately
|
||||
if (!/-/.test(name)) {
|
||||
main.push(option);
|
||||
}
|
||||
|
||||
if (slot[name] == undefined) {
|
||||
slot[name] = {details: option, children: []};
|
||||
} else {
|
||||
/* In case the parent option was already
|
||||
* deducted from a child option
|
||||
*/
|
||||
slot[name].details = option;
|
||||
}
|
||||
}
|
||||
|
||||
// we have a child!
|
||||
if (slot.hasOwnProperty(option.parent)) {
|
||||
slot[option.parent].children.push(option);
|
||||
} else {
|
||||
slot[option.parent] = {details: null, children: [option]};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
while(i < 2) {
|
||||
type = ['option', 'object'][i];
|
||||
fillWithType(type);
|
||||
i++
|
||||
}
|
||||
|
||||
callback();
|
||||
|
||||
};
|
||||
|
||||
buildPage = function() {
|
||||
|
||||
// autocomplete
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: PRODUCTNAME + '/names',
|
||||
async: false,
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
$.each(data, function (key, val) {
|
||||
var dotted = toDot(val);
|
||||
names.push(dotted);
|
||||
optionDictionary[dotted] = val;
|
||||
});
|
||||
|
||||
$("#search" ).autocomplete({
|
||||
source: names,
|
||||
autoFocus: true,
|
||||
minLength: 2,
|
||||
select: function( event, ui ) {
|
||||
gotoSection(ui.item.value, true);
|
||||
},
|
||||
position: {
|
||||
my: 'left top',
|
||||
of: '#search-wrap'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// load main options and build folded menu tree
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'option/' + PRODUCTNAME + '/main',
|
||||
async: false,
|
||||
dataType: "json",
|
||||
success: function (data) {
|
||||
$.each(data, function (key, val) {
|
||||
addFirstLevelMenuItem(key, val, 'option');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// load objects of product
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: 'object/' + PRODUCTNAME + '-obj/main',
|
||||
async: false,
|
||||
dataType: "json",
|
||||
|
||||
success: function (data) {
|
||||
|
||||
$.each(data, function (key, val) {
|
||||
addFirstLevelMenuItem(key, val, 'object');
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// check url for anchor, remove also '()' from old links for object.method().
|
||||
anchor = window.location.hash.replace('#', '').replace('()','');
|
||||
if (anchor) {
|
||||
gotoSection(anchor, true);
|
||||
}
|
||||
|
||||
if (/\?object_not_found=true/.test(window.location.search)) {
|
||||
dottedName = window.location.hash.split('#').pop();
|
||||
internalName = optionDictionary[dottedName];
|
||||
$('div#' + internalName).append('<div class="error">The object/option wasn\'t found in the database, maybe iẗ́\'s inherited??</div>');
|
||||
}
|
||||
|
||||
// focus search
|
||||
$("#search")[0].focus();
|
||||
}
|
||||
|
||||
// Startup
|
||||
$(document).ready( function () {
|
||||
|
||||
if (runDB) {
|
||||
buildPage();
|
||||
} else {
|
||||
// prepare dump object
|
||||
prepareOffline(function () {
|
||||
// load offline data
|
||||
loadScript('./js/' + PRODUCTNAME + '.json', function() {
|
||||
buildApiOffline(offline[PRODUCTNAME], buildPage);
|
||||
});
|
||||
});
|
||||
// hide elements that don't make sence in offline mode
|
||||
$('.hidden-offline').hide();
|
||||
};
|
||||
|
||||
// convert hash from redirected dash syntax to new dot syntax
|
||||
if (/-/.test(location.hash)) {
|
||||
location.hash = location.hash.replace(/(--|-)/g, '.');
|
||||
}
|
||||
|
||||
// Add scrollanimation to button
|
||||
$("a[href='#top']").click(function() {
|
||||
$("html, body").animate({ scrollTop: 0 }, "slow");
|
||||
return false;
|
||||
});
|
||||
|
||||
$(window).on('scroll', function() {
|
||||
button = $("#scrollTop");
|
||||
if (!$("#top").isOnScreen()) {
|
||||
if (button.css('display') == 'none') {
|
||||
button.fadeIn("slow");
|
||||
}
|
||||
} else {
|
||||
if (button.css('display') == 'block') {
|
||||
button.fadeOut("slow");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$.fn.isOnScreen = function(){
|
||||
var win = $(window),
|
||||
viewport = {
|
||||
top : win.scrollTop(),
|
||||
left : win.scrollLeft()
|
||||
};
|
||||
|
||||
viewport.right = viewport.left + win.width();
|
||||
viewport.bottom = viewport.top + win.height();
|
||||
|
||||
var bounds = this.offset();
|
||||
bounds.right = bounds.left + this.outerWidth();
|
||||
bounds.bottom = bounds.top + this.outerHeight();
|
||||
|
||||
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
|
||||
|
||||
};
|
||||
|
||||
function updateHeight() {
|
||||
if (jQuery(window).width() >= 768) {
|
||||
// Disable
|
||||
var padding,
|
||||
height = $(window).height() - $('#top').height() - $('#footer').height();
|
||||
$("#wrapper").height(height);
|
||||
padding = $("#wrapper .container").innerHeight() - $("#wrapper .container").height();
|
||||
height = $("#wrapper").height() - padding;
|
||||
$("#wrapper-inner").height(height);
|
||||
$("#nav-wrap").height(height);
|
||||
$("#details-wrap").height(height);
|
||||
} else {
|
||||
// no height defined on the element for mobile devices
|
||||
$('#nav-wrap').removeAttr('style');
|
||||
}
|
||||
};
|
||||
|
||||
updateHeight();
|
||||
|
||||
$(window).resize(updateHeight);
|
||||
|
||||
// Make the Highcharts/Highstock links dynamic
|
||||
$('#highstock-link, #highcharts-link').click(function () {
|
||||
this.href += location.hash;
|
||||
});
|
||||
|
||||
// Login shortcut (hot corner)
|
||||
$("<div>")
|
||||
.css({
|
||||
position: 'absolute',
|
||||
display: 'block',
|
||||
width: '10px',
|
||||
height: '10px',
|
||||
right: 0,
|
||||
cursor: 'pointer'
|
||||
})
|
||||
.click(function () {
|
||||
$('<iframe src="auth/login">').dialog({
|
||||
height: 300
|
||||
});
|
||||
})
|
||||
.prependTo('#top .container');
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container, #sliders {
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#container {
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// Set up the chart
|
||||
var chart = new Highcharts.Chart({
|
||||
chart: {
|
||||
renderTo: 'container',
|
||||
type: 'column',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
depth: 50,
|
||||
viewDistance: 25
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Chart rotation demo'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Test options by dragging the sliders below'
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
depth: 25
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
|
||||
}]
|
||||
});
|
||||
|
||||
function showValues() {
|
||||
$('#alpha-value').html(chart.options.chart.options3d.alpha);
|
||||
$('#beta-value').html(chart.options.chart.options3d.beta);
|
||||
$('#depth-value').html(chart.options.chart.options3d.depth);
|
||||
}
|
||||
|
||||
// Activate the sliders
|
||||
$('#sliders input').on('input change', function () {
|
||||
chart.options.chart.options3d[this.id] = this.value;
|
||||
showValues();
|
||||
chart.redraw(false);
|
||||
});
|
||||
|
||||
showValues();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container"></div>
|
||||
<div id="sliders">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Alpha Angle</td>
|
||||
<td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beta Angle</td>
|
||||
<td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Depth</td>
|
||||
<td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 10,
|
||||
beta: 25,
|
||||
depth: 70
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '3D chart with null values'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Notice the difference between a 0 value and a null point'
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
depth: 25
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
categories: Highcharts.getOptions().lang.shortMonths
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Sales',
|
||||
data: [2, 3, null, 4, 0, 5, 1, 4, 6, 3]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 15,
|
||||
beta: 15,
|
||||
viewDistance: 25,
|
||||
depth: 40
|
||||
}
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Total fruit consumption, grouped by gender'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Number of fruits'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
headerFormat: '<b>{point.key}</b><br>',
|
||||
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.y} / {point.stackTotal}'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal',
|
||||
depth: 40
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, 2, 5],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, 5, 6, 2, 1],
|
||||
stack: 'female'
|
||||
}, {
|
||||
name: 'Janet',
|
||||
data: [3, 0, 4, 4, 3],
|
||||
stack: 'female'
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'pie',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 45
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Contents of Highsoft\'s weekly fruit delivery'
|
||||
},
|
||||
subtitle: {
|
||||
text: '3D donut in Highcharts'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
innerSize: 100,
|
||||
depth: 45
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Delivered amount',
|
||||
data: [
|
||||
['Bananas', 8],
|
||||
['Kiwi', 3],
|
||||
['Mixed nuts', 1],
|
||||
['Oranges', 6],
|
||||
['Apples', 8],
|
||||
['Pears', 4],
|
||||
['Clementines', 4],
|
||||
['Reddish (bag)', 1],
|
||||
['Grapes (bunch)', 1]
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'pie',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 45,
|
||||
beta: 0
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares at a specific website, 2014'
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
allowPointSelect: true,
|
||||
cursor: 'pointer',
|
||||
depth: 35,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.name}'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
type: 'pie',
|
||||
name: 'Browser share',
|
||||
data: [
|
||||
['Firefox', 45.0],
|
||||
['IE', 26.8],
|
||||
{
|
||||
name: 'Chrome',
|
||||
y: 12.8,
|
||||
sliced: true,
|
||||
selected: true
|
||||
},
|
||||
['Safari', 8.5],
|
||||
['Opera', 6.2],
|
||||
['Others', 0.7]
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
height: 400px;
|
||||
min-width: 310px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// Give the points a 3D feel by adding a radial gradient
|
||||
Highcharts.getOptions().colors = $.map(Highcharts.getOptions().colors, function (color) {
|
||||
return {
|
||||
radialGradient: {
|
||||
cx: 0.4,
|
||||
cy: 0.3,
|
||||
r: 0.5
|
||||
},
|
||||
stops: [
|
||||
[0, color],
|
||||
[1, Highcharts.Color(color).brighten(-0.2).get('rgb')]
|
||||
]
|
||||
};
|
||||
});
|
||||
|
||||
// Set up the chart
|
||||
var chart = new Highcharts.Chart({
|
||||
chart: {
|
||||
renderTo: 'container',
|
||||
margin: 100,
|
||||
type: 'scatter',
|
||||
options3d: {
|
||||
enabled: true,
|
||||
alpha: 10,
|
||||
beta: 30,
|
||||
depth: 250,
|
||||
viewDistance: 5,
|
||||
fitToPlot: false,
|
||||
frame: {
|
||||
bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },
|
||||
back: { size: 1, color: 'rgba(0,0,0,0.04)' },
|
||||
side: { size: 1, color: 'rgba(0,0,0,0.06)' }
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Draggable box'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click and drag the plot area to rotate in space'
|
||||
},
|
||||
plotOptions: {
|
||||
scatter: {
|
||||
width: 10,
|
||||
height: 10,
|
||||
depth: 10
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
title: null
|
||||
},
|
||||
xAxis: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
gridLineWidth: 1
|
||||
},
|
||||
zAxis: {
|
||||
min: 0,
|
||||
max: 10,
|
||||
showFirstLabel: false
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Reading',
|
||||
colorByPoint: true,
|
||||
data: [[1, 6, 5], [8, 7, 9], [1, 3, 4], [4, 6, 8], [5, 7, 7], [6, 9, 6], [7, 0, 5], [2, 3, 3], [3, 9, 8], [3, 6, 5], [4, 9, 4], [2, 3, 3], [6, 9, 9], [0, 7, 0], [7, 7, 9], [7, 2, 9], [0, 6, 2], [4, 6, 7], [3, 7, 7], [0, 1, 7], [2, 8, 6], [2, 3, 7], [6, 4, 8], [3, 5, 9], [7, 9, 5], [3, 1, 7], [4, 4, 2], [3, 6, 2], [3, 1, 6], [6, 8, 5], [6, 6, 7], [4, 1, 1], [7, 2, 7], [7, 7, 0], [8, 8, 9], [9, 4, 1], [8, 3, 4], [9, 8, 9], [3, 5, 3], [0, 2, 4], [6, 0, 2], [2, 1, 3], [5, 8, 9], [2, 1, 1], [9, 7, 6], [3, 0, 2], [9, 9, 0], [3, 4, 8], [2, 6, 1], [8, 9, 2], [7, 6, 5], [6, 3, 1], [9, 3, 1], [8, 9, 3], [9, 1, 0], [3, 8, 7], [8, 0, 0], [4, 9, 7], [8, 6, 2], [4, 3, 0], [2, 3, 5], [9, 1, 4], [1, 1, 4], [6, 0, 2], [6, 1, 6], [3, 8, 8], [8, 8, 7], [5, 5, 0], [3, 9, 6], [5, 4, 3], [6, 8, 3], [0, 1, 5], [6, 7, 3], [8, 3, 2], [3, 8, 3], [2, 1, 6], [4, 6, 7], [8, 9, 9], [5, 4, 2], [6, 1, 3], [6, 9, 5], [4, 8, 2], [9, 7, 4], [5, 4, 2], [9, 6, 1], [2, 7, 3], [4, 5, 4], [6, 8, 1], [3, 4, 0], [2, 2, 6], [5, 1, 2], [9, 9, 7], [6, 9, 9], [8, 4, 3], [4, 1, 7], [6, 2, 5], [0, 4, 9], [3, 5, 9], [6, 9, 1], [1, 9, 2]]
|
||||
}]
|
||||
});
|
||||
|
||||
|
||||
// Add mouse events for rotation
|
||||
$(chart.container).bind('mousedown.hc touchstart.hc', function (eStart) {
|
||||
eStart = chart.pointer.normalize(eStart);
|
||||
|
||||
var posX = eStart.pageX,
|
||||
posY = eStart.pageY,
|
||||
alpha = chart.options.chart.options3d.alpha,
|
||||
beta = chart.options.chart.options3d.beta,
|
||||
newAlpha,
|
||||
newBeta,
|
||||
sensitivity = 5; // lower is more sensitive
|
||||
|
||||
$(document).bind({
|
||||
'mousemove.hc touchdrag.hc': function (e) {
|
||||
// Run beta
|
||||
newBeta = beta + (posX - e.pageX) / sensitivity;
|
||||
chart.options.chart.options3d.beta = newBeta;
|
||||
|
||||
// Run alpha
|
||||
newAlpha = alpha + (e.pageY - posY) / sensitivity;
|
||||
chart.options.chart.options3d.alpha = newAlpha;
|
||||
|
||||
chart.redraw(false);
|
||||
},
|
||||
'mouseup touchend': function () {
|
||||
$(document).unbind('.hc');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="height: 400px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'US and USSR nuclear stockpiles'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
|
||||
'thebulletin.metapress.com</a>'
|
||||
},
|
||||
xAxis: {
|
||||
allowDecimals: false,
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value; // clean, unformatted number for year
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Nuclear weapon states'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value / 1000 + 'k';
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
pointStart: 1940,
|
||||
marker: {
|
||||
enabled: false,
|
||||
symbol: 'circle',
|
||||
radius: 2,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'USA',
|
||||
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
|
||||
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
|
||||
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
|
||||
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
|
||||
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
|
||||
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
|
||||
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
|
||||
}, {
|
||||
name: 'USSR/Russia',
|
||||
data: [null, null, null, null, null, null, null, null, null, null,
|
||||
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
|
||||
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
|
||||
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
|
||||
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
|
||||
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
|
||||
21000, 20000, 19000, 18000, 18000, 17000, 16000]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'area',
|
||||
inverted: true
|
||||
},
|
||||
title: {
|
||||
text: 'Average fruit consumption during one week'
|
||||
},
|
||||
subtitle: {
|
||||
style: {
|
||||
position: 'absolute',
|
||||
right: '0px',
|
||||
bottom: '10px'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'top',
|
||||
x: -150,
|
||||
y: 100,
|
||||
floating: true,
|
||||
borderWidth: 1,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday',
|
||||
'Sunday'
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Number of units'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value;
|
||||
}
|
||||
},
|
||||
min: 0
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
fillOpacity: 0.5
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [3, 4, 3, 5, 4, 10, 12]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [1, 3, 4, 3, 3, 5, 4]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'area',
|
||||
spacingBottom: 30
|
||||
},
|
||||
title: {
|
||||
text: 'Fruit consumption *'
|
||||
},
|
||||
subtitle: {
|
||||
text: '* Jane\'s banana consumption is unknown',
|
||||
floating: true,
|
||||
align: 'right',
|
||||
verticalAlign: 'bottom',
|
||||
y: 15
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
verticalAlign: 'top',
|
||||
x: 150,
|
||||
y: 100,
|
||||
floating: true,
|
||||
borderWidth: 1,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Y-Axis'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + '</b><br/>' +
|
||||
this.x + ': ' + this.y;
|
||||
}
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
fillOpacity: 0.5
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [0, 1, 4, 4, 5, 2, 3, 7]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [1, 0, 3, null, 3, 1, 2, 1]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'Area chart with negative values'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, -2, -3, 2, 1]
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, -2, 5]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'Historic and Estimated Worldwide Population Distribution by Region'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: Wikipedia.org'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
|
||||
tickmarkPlacement: 'on',
|
||||
title: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Percent'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
stacking: 'percent',
|
||||
lineColor: '#ffffff',
|
||||
lineWidth: 1,
|
||||
marker: {
|
||||
lineWidth: 1,
|
||||
lineColor: '#ffffff'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Asia',
|
||||
data: [502, 635, 809, 947, 1402, 3634, 5268]
|
||||
}, {
|
||||
name: 'Africa',
|
||||
data: [106, 107, 111, 133, 221, 767, 1766]
|
||||
}, {
|
||||
name: 'Europe',
|
||||
data: [163, 203, 276, 408, 547, 729, 628]
|
||||
}, {
|
||||
name: 'America',
|
||||
data: [18, 31, 54, 156, 339, 818, 1201]
|
||||
}, {
|
||||
name: 'Oceania',
|
||||
data: [2, 2, 2, 6, 13, 30, 46]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'area'
|
||||
},
|
||||
title: {
|
||||
text: 'Historic and Estimated Worldwide Population Growth by Region'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: Wikipedia.org'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
|
||||
tickmarkPlacement: 'on',
|
||||
title: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Billions'
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value / 1000;
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
valueSuffix: ' millions'
|
||||
},
|
||||
plotOptions: {
|
||||
area: {
|
||||
stacking: 'normal',
|
||||
lineColor: '#666666',
|
||||
lineWidth: 1,
|
||||
marker: {
|
||||
lineWidth: 1,
|
||||
lineColor: '#666666'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Asia',
|
||||
data: [502, 635, 809, 947, 1402, 3634, 5268]
|
||||
}, {
|
||||
name: 'Africa',
|
||||
data: [106, 107, 111, 133, 221, 767, 1766]
|
||||
}, {
|
||||
name: 'Europe',
|
||||
data: [163, 203, 276, 408, 547, 729, 628]
|
||||
}, {
|
||||
name: 'America',
|
||||
data: [18, 31, 54, 156, 339, 818, 1201]
|
||||
}, {
|
||||
name: 'Oceania',
|
||||
data: [2, 2, 2, 6, 13, 30, 46]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
var ranges = [
|
||||
[1246406400000, 14.3, 27.7],
|
||||
[1246492800000, 14.5, 27.8],
|
||||
[1246579200000, 15.5, 29.6],
|
||||
[1246665600000, 16.7, 30.7],
|
||||
[1246752000000, 16.5, 25.0],
|
||||
[1246838400000, 17.8, 25.7],
|
||||
[1246924800000, 13.5, 24.8],
|
||||
[1247011200000, 10.5, 21.4],
|
||||
[1247097600000, 9.2, 23.8],
|
||||
[1247184000000, 11.6, 21.8],
|
||||
[1247270400000, 10.7, 23.7],
|
||||
[1247356800000, 11.0, 23.3],
|
||||
[1247443200000, 11.6, 23.7],
|
||||
[1247529600000, 11.8, 20.7],
|
||||
[1247616000000, 12.6, 22.4],
|
||||
[1247702400000, 13.6, 19.6],
|
||||
[1247788800000, 11.4, 22.6],
|
||||
[1247875200000, 13.2, 25.0],
|
||||
[1247961600000, 14.2, 21.6],
|
||||
[1248048000000, 13.1, 17.1],
|
||||
[1248134400000, 12.2, 15.5],
|
||||
[1248220800000, 12.0, 20.8],
|
||||
[1248307200000, 12.0, 17.1],
|
||||
[1248393600000, 12.7, 18.3],
|
||||
[1248480000000, 12.4, 19.4],
|
||||
[1248566400000, 12.6, 19.9],
|
||||
[1248652800000, 11.9, 20.2],
|
||||
[1248739200000, 11.0, 19.3],
|
||||
[1248825600000, 10.8, 17.8],
|
||||
[1248912000000, 11.8, 18.5],
|
||||
[1248998400000, 10.8, 16.1]
|
||||
],
|
||||
averages = [
|
||||
[1246406400000, 21.5],
|
||||
[1246492800000, 22.1],
|
||||
[1246579200000, 23],
|
||||
[1246665600000, 23.8],
|
||||
[1246752000000, 21.4],
|
||||
[1246838400000, 21.3],
|
||||
[1246924800000, 18.3],
|
||||
[1247011200000, 15.4],
|
||||
[1247097600000, 16.4],
|
||||
[1247184000000, 17.7],
|
||||
[1247270400000, 17.5],
|
||||
[1247356800000, 17.6],
|
||||
[1247443200000, 17.7],
|
||||
[1247529600000, 16.8],
|
||||
[1247616000000, 17.7],
|
||||
[1247702400000, 16.3],
|
||||
[1247788800000, 17.8],
|
||||
[1247875200000, 18.1],
|
||||
[1247961600000, 17.2],
|
||||
[1248048000000, 14.4],
|
||||
[1248134400000, 13.7],
|
||||
[1248220800000, 15.7],
|
||||
[1248307200000, 14.6],
|
||||
[1248393600000, 15.3],
|
||||
[1248480000000, 15.3],
|
||||
[1248566400000, 15.8],
|
||||
[1248652800000, 15.2],
|
||||
[1248739200000, 14.8],
|
||||
[1248825600000, 14.4],
|
||||
[1248912000000, 15],
|
||||
[1248998400000, 13.6]
|
||||
];
|
||||
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
title: {
|
||||
text: 'July temperatures'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
crosshairs: true,
|
||||
shared: true,
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
|
||||
legend: {
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Temperature',
|
||||
data: averages,
|
||||
zIndex: 1,
|
||||
marker: {
|
||||
fillColor: 'white',
|
||||
lineWidth: 2,
|
||||
lineColor: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
}, {
|
||||
name: 'Range',
|
||||
data: ranges,
|
||||
type: 'arearange',
|
||||
lineWidth: 0,
|
||||
linkedTo: ':previous',
|
||||
color: Highcharts.getOptions().colors[0],
|
||||
fillOpacity: 0.3,
|
||||
zIndex: 0
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=range.json&callback=?', function (data) {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'arearange',
|
||||
zoomType: 'x'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Temperature variation by day'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
crosshairs: true,
|
||||
shared: true,
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Temperatures',
|
||||
data: data
|
||||
}]
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'areaspline'
|
||||
},
|
||||
title: {
|
||||
text: 'Average fruit consumption during one week'
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
verticalAlign: 'top',
|
||||
x: 150,
|
||||
y: 100,
|
||||
floating: true,
|
||||
borderWidth: 1,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Monday',
|
||||
'Tuesday',
|
||||
'Wednesday',
|
||||
'Thursday',
|
||||
'Friday',
|
||||
'Saturday',
|
||||
'Sunday'
|
||||
],
|
||||
plotBands: [{ // visualize the weekend
|
||||
from: 4.5,
|
||||
to: 6.5,
|
||||
color: 'rgba(68, 170, 213, .2)'
|
||||
}]
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Fruit units'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
valueSuffix: ' units'
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
areaspline: {
|
||||
fillOpacity: 0.5
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [3, 4, 3, 5, 4, 10, 12]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [1, 3, 4, 3, 3, 5, 4]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
title: {
|
||||
text: 'Historic World Population by Region'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Population (millions)',
|
||||
align: 'high'
|
||||
},
|
||||
labels: {
|
||||
overflow: 'justify'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' millions'
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
dataLabels: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'right',
|
||||
verticalAlign: 'top',
|
||||
x: -40,
|
||||
y: 80,
|
||||
floating: true,
|
||||
borderWidth: 1,
|
||||
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
|
||||
shadow: true
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Year 1800',
|
||||
data: [107, 31, 635, 203, 2]
|
||||
}, {
|
||||
name: 'Year 1900',
|
||||
data: [133, 156, 947, 408, 6]
|
||||
}, {
|
||||
name: 'Year 2012',
|
||||
data: [1052, 954, 4250, 740, 38]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
// Data gathered from http://populationpyramid.net/germany/2015/
|
||||
$(function () {
|
||||
// Age categories
|
||||
var categories = ['0-4', '5-9', '10-14', '15-19',
|
||||
'20-24', '25-29', '30-34', '35-39', '40-44',
|
||||
'45-49', '50-54', '55-59', '60-64', '65-69',
|
||||
'70-74', '75-79', '80-84', '85-89', '90-94',
|
||||
'95-99', '100 + '];
|
||||
$(document).ready(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
title: {
|
||||
text: 'Population pyramid for Germany, 2015'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://populationpyramid.net/germany/2015/">Population Pyramids of the World from 1950 to 2100</a>'
|
||||
},
|
||||
xAxis: [{
|
||||
categories: categories,
|
||||
reversed: false,
|
||||
labels: {
|
||||
step: 1
|
||||
}
|
||||
}, { // mirror axis on right side
|
||||
opposite: true,
|
||||
reversed: false,
|
||||
categories: categories,
|
||||
linkedTo: 0,
|
||||
labels: {
|
||||
step: 1
|
||||
}
|
||||
}],
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return Math.abs(this.value) + '%';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
stacking: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
|
||||
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Male',
|
||||
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
|
||||
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
|
||||
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
|
||||
}, {
|
||||
name: 'Female',
|
||||
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
|
||||
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
|
||||
1.8, 1.2, 0.6, 0.1, 0.0]
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'bar'
|
||||
},
|
||||
title: {
|
||||
text: 'Stacked bar chart'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Total fruit consumption'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
reversed: true
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
stacking: 'normal'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, 2, 3, 2, 1]
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, 2, 5]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'boxplot'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts Box Plot Example'
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['1', '2', '3', '4', '5'],
|
||||
title: {
|
||||
text: 'Experiment No.'
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Observations'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 932,
|
||||
color: 'red',
|
||||
width: 1,
|
||||
label: {
|
||||
text: 'Theoretical mean: 932',
|
||||
align: 'center',
|
||||
style: {
|
||||
color: 'gray'
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Observations',
|
||||
data: [
|
||||
[760, 801, 848, 895, 965],
|
||||
[733, 853, 939, 980, 1080],
|
||||
[714, 762, 817, 870, 918],
|
||||
[724, 802, 806, 871, 950],
|
||||
[834, 836, 864, 882, 910]
|
||||
],
|
||||
tooltip: {
|
||||
headerFormat: '<em>Experiment No {point.key}</em><br/>'
|
||||
}
|
||||
}, {
|
||||
name: 'Outlier',
|
||||
color: Highcharts.getOptions().colors[0],
|
||||
type: 'scatter',
|
||||
data: [ // x, y positions where 0 is the first category
|
||||
[0, 644],
|
||||
[4, 718],
|
||||
[4, 951],
|
||||
[4, 969]
|
||||
],
|
||||
marker: {
|
||||
fillColor: 'white',
|
||||
lineWidth: 1,
|
||||
lineColor: Highcharts.getOptions().colors[0]
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: 'Observation: {point.y}'
|
||||
}
|
||||
}]
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'bubble',
|
||||
plotBorderWidth: 1,
|
||||
zoomType: 'xy'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts bubbles with radial gradient fill'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
gridLineWidth: 1
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
startOnTick: false,
|
||||
endOnTick: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [
|
||||
[9, 81, 63],
|
||||
[98, 5, 89],
|
||||
[51, 50, 73],
|
||||
[41, 22, 14],
|
||||
[58, 24, 20],
|
||||
[78, 37, 34],
|
||||
[55, 56, 53],
|
||||
[18, 45, 70],
|
||||
[42, 44, 28],
|
||||
[3, 52, 59],
|
||||
[31, 18, 97],
|
||||
[79, 91, 63],
|
||||
[93, 23, 23],
|
||||
[44, 83, 22]
|
||||
],
|
||||
marker: {
|
||||
fillColor: {
|
||||
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
|
||||
stops: [
|
||||
[0, 'rgba(255,255,255,0.5)'],
|
||||
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
|
||||
]
|
||||
}
|
||||
}
|
||||
}, {
|
||||
data: [
|
||||
[42, 38, 20],
|
||||
[6, 18, 1],
|
||||
[1, 93, 55],
|
||||
[57, 2, 90],
|
||||
[80, 76, 22],
|
||||
[11, 74, 96],
|
||||
[88, 56, 10],
|
||||
[30, 47, 49],
|
||||
[57, 62, 98],
|
||||
[4, 16, 16],
|
||||
[46, 10, 11],
|
||||
[22, 87, 89],
|
||||
[57, 91, 82],
|
||||
[45, 15, 98]
|
||||
],
|
||||
marker: {
|
||||
fillColor: {
|
||||
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
|
||||
stops: [
|
||||
[0, 'rgba(255,255,255,0.5)'],
|
||||
[1, Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.5).get('rgba')]
|
||||
]
|
||||
}
|
||||
}
|
||||
}]
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-more.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
.highcharts-tooltip h3 {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'bubble',
|
||||
plotBorderWidth: 1,
|
||||
zoomType: 'xy'
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Sugar and fat intake per country'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
gridLineWidth: 1,
|
||||
title: {
|
||||
text: 'Daily fat intake'
|
||||
},
|
||||
labels: {
|
||||
format: '{value} gr'
|
||||
},
|
||||
plotLines: [{
|
||||
color: 'black',
|
||||
dashStyle: 'dot',
|
||||
width: 2,
|
||||
value: 65,
|
||||
label: {
|
||||
rotation: 0,
|
||||
y: 15,
|
||||
style: {
|
||||
fontStyle: 'italic'
|
||||
},
|
||||
text: 'Safe fat intake 65g/day'
|
||||
},
|
||||
zIndex: 3
|
||||
}]
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
startOnTick: false,
|
||||
endOnTick: false,
|
||||
title: {
|
||||
text: 'Daily sugar intake'
|
||||
},
|
||||
labels: {
|
||||
format: '{value} gr'
|
||||
},
|
||||
maxPadding: 0.2,
|
||||
plotLines: [{
|
||||
color: 'black',
|
||||
dashStyle: 'dot',
|
||||
width: 2,
|
||||
value: 50,
|
||||
label: {
|
||||
align: 'right',
|
||||
style: {
|
||||
fontStyle: 'italic'
|
||||
},
|
||||
text: 'Safe sugar intake 50g/day',
|
||||
x: -10
|
||||
},
|
||||
zIndex: 3
|
||||
}]
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
useHTML: true,
|
||||
headerFormat: '<table>',
|
||||
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
|
||||
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
|
||||
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
|
||||
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
|
||||
footerFormat: '</table>',
|
||||
followPointer: true
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.name}'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [
|
||||
{ x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
|
||||
{ x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
|
||||
{ x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
|
||||
{ x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
|
||||
{ x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
|
||||
{ x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
|
||||
{ x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
|
||||
{ x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
|
||||
{ x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
|
||||
{ x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
|
||||
{ x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
|
||||
{ x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
|
||||
{ x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
|
||||
{ x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
|
||||
{ x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
|
||||
]
|
||||
}]
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Monthly Average Rainfall'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: WorldClimate.com'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Jan',
|
||||
'Feb',
|
||||
'Mar',
|
||||
'Apr',
|
||||
'May',
|
||||
'Jun',
|
||||
'Jul',
|
||||
'Aug',
|
||||
'Sep',
|
||||
'Oct',
|
||||
'Nov',
|
||||
'Dec'
|
||||
],
|
||||
crosshair: true
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Rainfall (mm)'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
|
||||
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
|
||||
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
|
||||
footerFormat: '</table>',
|
||||
shared: true,
|
||||
useHTML: true
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
pointPadding: 0.2,
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Tokyo',
|
||||
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
|
||||
|
||||
}, {
|
||||
name: 'New York',
|
||||
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
|
||||
|
||||
}, {
|
||||
name: 'London',
|
||||
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
|
||||
|
||||
}, {
|
||||
name: 'Berlin',
|
||||
data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
|
||||
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// Create the chart
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Browser market shares. January, 2015 to May, 2015'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click the columns to view versions. Source: <a href="http://netmarketshare.com">netmarketshare.com</a>.'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Total percent market share'
|
||||
}
|
||||
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
borderWidth: 0,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '{point.y:.1f}%'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
|
||||
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Brands',
|
||||
colorByPoint: true,
|
||||
data: [{
|
||||
name: 'Microsoft Internet Explorer',
|
||||
y: 56.33,
|
||||
drilldown: 'Microsoft Internet Explorer'
|
||||
}, {
|
||||
name: 'Chrome',
|
||||
y: 24.03,
|
||||
drilldown: 'Chrome'
|
||||
}, {
|
||||
name: 'Firefox',
|
||||
y: 10.38,
|
||||
drilldown: 'Firefox'
|
||||
}, {
|
||||
name: 'Safari',
|
||||
y: 4.77,
|
||||
drilldown: 'Safari'
|
||||
}, {
|
||||
name: 'Opera',
|
||||
y: 0.91,
|
||||
drilldown: 'Opera'
|
||||
}, {
|
||||
name: 'Proprietary or Undetectable',
|
||||
y: 0.2,
|
||||
drilldown: null
|
||||
}]
|
||||
}],
|
||||
drilldown: {
|
||||
series: [{
|
||||
name: 'Microsoft Internet Explorer',
|
||||
id: 'Microsoft Internet Explorer',
|
||||
data: [
|
||||
[
|
||||
'v11.0',
|
||||
24.13
|
||||
],
|
||||
[
|
||||
'v8.0',
|
||||
17.2
|
||||
],
|
||||
[
|
||||
'v9.0',
|
||||
8.11
|
||||
],
|
||||
[
|
||||
'v10.0',
|
||||
5.33
|
||||
],
|
||||
[
|
||||
'v6.0',
|
||||
1.06
|
||||
],
|
||||
[
|
||||
'v7.0',
|
||||
0.5
|
||||
]
|
||||
]
|
||||
}, {
|
||||
name: 'Chrome',
|
||||
id: 'Chrome',
|
||||
data: [
|
||||
[
|
||||
'v40.0',
|
||||
5
|
||||
],
|
||||
[
|
||||
'v41.0',
|
||||
4.32
|
||||
],
|
||||
[
|
||||
'v42.0',
|
||||
3.68
|
||||
],
|
||||
[
|
||||
'v39.0',
|
||||
2.96
|
||||
],
|
||||
[
|
||||
'v36.0',
|
||||
2.53
|
||||
],
|
||||
[
|
||||
'v43.0',
|
||||
1.45
|
||||
],
|
||||
[
|
||||
'v31.0',
|
||||
1.24
|
||||
],
|
||||
[
|
||||
'v35.0',
|
||||
0.85
|
||||
],
|
||||
[
|
||||
'v38.0',
|
||||
0.6
|
||||
],
|
||||
[
|
||||
'v32.0',
|
||||
0.55
|
||||
],
|
||||
[
|
||||
'v37.0',
|
||||
0.38
|
||||
],
|
||||
[
|
||||
'v33.0',
|
||||
0.19
|
||||
],
|
||||
[
|
||||
'v34.0',
|
||||
0.14
|
||||
],
|
||||
[
|
||||
'v30.0',
|
||||
0.14
|
||||
]
|
||||
]
|
||||
}, {
|
||||
name: 'Firefox',
|
||||
id: 'Firefox',
|
||||
data: [
|
||||
[
|
||||
'v35',
|
||||
2.76
|
||||
],
|
||||
[
|
||||
'v36',
|
||||
2.32
|
||||
],
|
||||
[
|
||||
'v37',
|
||||
2.31
|
||||
],
|
||||
[
|
||||
'v34',
|
||||
1.27
|
||||
],
|
||||
[
|
||||
'v38',
|
||||
1.02
|
||||
],
|
||||
[
|
||||
'v31',
|
||||
0.33
|
||||
],
|
||||
[
|
||||
'v33',
|
||||
0.22
|
||||
],
|
||||
[
|
||||
'v32',
|
||||
0.15
|
||||
]
|
||||
]
|
||||
}, {
|
||||
name: 'Safari',
|
||||
id: 'Safari',
|
||||
data: [
|
||||
[
|
||||
'v8.0',
|
||||
2.56
|
||||
],
|
||||
[
|
||||
'v7.1',
|
||||
0.77
|
||||
],
|
||||
[
|
||||
'v5.1',
|
||||
0.42
|
||||
],
|
||||
[
|
||||
'v5.0',
|
||||
0.3
|
||||
],
|
||||
[
|
||||
'v6.1',
|
||||
0.29
|
||||
],
|
||||
[
|
||||
'v7.0',
|
||||
0.26
|
||||
],
|
||||
[
|
||||
'v6.2',
|
||||
0.17
|
||||
]
|
||||
]
|
||||
}, {
|
||||
name: 'Opera',
|
||||
id: 'Opera',
|
||||
data: [
|
||||
[
|
||||
'v12.x',
|
||||
0.34
|
||||
],
|
||||
[
|
||||
'v28',
|
||||
0.24
|
||||
],
|
||||
[
|
||||
'v27',
|
||||
0.17
|
||||
],
|
||||
[
|
||||
'v29',
|
||||
0.16
|
||||
]
|
||||
]
|
||||
}]
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/data.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Column chart with negative values'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, -2, -3, 2, 1]
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, -2, 5]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
data: {
|
||||
table: 'datatable'
|
||||
},
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Data extracted from a HTML table in the page'
|
||||
},
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
title: {
|
||||
text: 'Units'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + '</b><br/>' +
|
||||
this.point.y + ' ' + this.point.name.toLowerCase();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/data.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
<table id="datatable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Jane</th>
|
||||
<th>John</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Apples</th>
|
||||
<td>3</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Pears</th>
|
||||
<td>2</td>
|
||||
<td>0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Plums</th>
|
||||
<td>5</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bananas</th>
|
||||
<td>1</td>
|
||||
<td>1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Oranges</th>
|
||||
<td>2</td>
|
||||
<td>4</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Efficiency Optimization by Branch'
|
||||
},
|
||||
xAxis: {
|
||||
categories: [
|
||||
'Seattle HQ',
|
||||
'San Francisco',
|
||||
'Tokyo'
|
||||
]
|
||||
},
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Employees'
|
||||
}
|
||||
}, {
|
||||
title: {
|
||||
text: 'Profit (millions)'
|
||||
},
|
||||
opposite: true
|
||||
}],
|
||||
legend: {
|
||||
shadow: false
|
||||
},
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
grouping: false,
|
||||
shadow: false,
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'Employees',
|
||||
color: 'rgba(165,170,217,1)',
|
||||
data: [150, 73, 20],
|
||||
pointPadding: 0.3,
|
||||
pointPlacement: -0.2
|
||||
}, {
|
||||
name: 'Employees Optimized',
|
||||
color: 'rgba(126,86,134,.9)',
|
||||
data: [140, 90, 40],
|
||||
pointPadding: 0.4,
|
||||
pointPlacement: -0.2
|
||||
}, {
|
||||
name: 'Profit',
|
||||
color: 'rgba(248,161,63,1)',
|
||||
data: [183.6, 178.8, 198.5],
|
||||
tooltip: {
|
||||
valuePrefix: '$',
|
||||
valueSuffix: ' M'
|
||||
},
|
||||
pointPadding: 0.3,
|
||||
pointPlacement: 0.2,
|
||||
yAxis: 1
|
||||
}, {
|
||||
name: 'Profit Optimized',
|
||||
color: 'rgba(186,60,61,.9)',
|
||||
data: [203.6, 198.8, 208.5],
|
||||
tooltip: {
|
||||
valuePrefix: '$',
|
||||
valueSuffix: ' M'
|
||||
},
|
||||
pointPadding: 0.4,
|
||||
pointPlacement: 0.2,
|
||||
yAxis: 1
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'World\'s largest cities per 2014'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
labels: {
|
||||
rotation: -45,
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Verdana, sans-serif'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Population (millions)'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
|
||||
},
|
||||
series: [{
|
||||
name: 'Population',
|
||||
data: [
|
||||
['Shanghai', 23.7],
|
||||
['Lagos', 16.1],
|
||||
['Istanbul', 14.2],
|
||||
['Karachi', 14.0],
|
||||
['Mumbai', 12.5],
|
||||
['Moscow', 12.1],
|
||||
['São Paulo', 11.8],
|
||||
['Beijing', 11.7],
|
||||
['Guangzhou', 11.1],
|
||||
['Delhi', 11.1],
|
||||
['Shenzhen', 10.5],
|
||||
['Seoul', 10.4],
|
||||
['Jakarta', 10.0],
|
||||
['Kinshasa', 9.3],
|
||||
['Tianjin', 9.3],
|
||||
['Tokyo', 9.0],
|
||||
['Cairo', 8.9],
|
||||
['Dhaka', 8.9],
|
||||
['Mexico City', 8.9],
|
||||
['Lima', 8.9]
|
||||
],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
rotation: -90,
|
||||
color: '#FFFFFF',
|
||||
align: 'right',
|
||||
format: '{point.y:.1f}', // one decimal
|
||||
y: 10, // 10 pixels down from the top
|
||||
style: {
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Verdana, sans-serif'
|
||||
}
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Total fruit consumtion, grouped by gender'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
allowDecimals: false,
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Number of fruits'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.x + '</b><br/>' +
|
||||
this.series.name + ': ' + this.y + '<br/>' +
|
||||
'Total: ' + this.point.stackTotal;
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, 2, 5],
|
||||
stack: 'male'
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, 5, 6, 2, 1],
|
||||
stack: 'female'
|
||||
}, {
|
||||
name: 'Janet',
|
||||
data: [3, 0, 4, 4, 3],
|
||||
stack: 'female'
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Stacked column chart'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Total fruit consumption'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
|
||||
shared: true
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'percent'
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, 2, 3, 2, 1]
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, 2, 5]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'column'
|
||||
},
|
||||
title: {
|
||||
text: 'Stacked column chart'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
|
||||
},
|
||||
yAxis: {
|
||||
min: 0,
|
||||
title: {
|
||||
text: 'Total fruit consumption'
|
||||
},
|
||||
stackLabels: {
|
||||
enabled: true,
|
||||
style: {
|
||||
fontWeight: 'bold',
|
||||
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
align: 'right',
|
||||
x: -30,
|
||||
verticalAlign: 'top',
|
||||
y: 25,
|
||||
floating: true,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
|
||||
borderColor: '#CCC',
|
||||
borderWidth: 1,
|
||||
shadow: false
|
||||
},
|
||||
tooltip: {
|
||||
headerFormat: '<b>{point.x}</b><br/>',
|
||||
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
|
||||
},
|
||||
plotOptions: {
|
||||
column: {
|
||||
stacking: 'normal',
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
|
||||
style: {
|
||||
textShadow: '0 0 3px black'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'John',
|
||||
data: [5, 3, 4, 7, 2]
|
||||
}, {
|
||||
name: 'Jane',
|
||||
data: [2, 2, 3, 2, 1]
|
||||
}, {
|
||||
name: 'Joe',
|
||||
data: [3, 4, 4, 2, 5]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'columnrange',
|
||||
inverted: true
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Temperature variation by month'
|
||||
},
|
||||
|
||||
subtitle: {
|
||||
text: 'Observed in Vik i Sogn, Norway'
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature ( °C )'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
columnrange: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
return this.y + '°C';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Temperatures',
|
||||
data: [
|
||||
[-9.7, 9.4],
|
||||
[-8.7, 6.5],
|
||||
[-3.5, 9.4],
|
||||
[-1.4, 19.9],
|
||||
[0.0, 22.6],
|
||||
[2.9, 29.5],
|
||||
[9.2, 30.7],
|
||||
[7.3, 26.5],
|
||||
[4.4, 18.0],
|
||||
[-3.1, 11.4],
|
||||
[-5.2, 10.4],
|
||||
[-13.5, 9.8]
|
||||
]
|
||||
}]
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
zoomType: 'xy'
|
||||
},
|
||||
title: {
|
||||
text: 'Average Monthly Temperature and Rainfall in Tokyo'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: WorldClimate.com'
|
||||
},
|
||||
xAxis: [{
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
crosshair: true
|
||||
}],
|
||||
yAxis: [{ // Primary yAxis
|
||||
labels: {
|
||||
format: '{value}°C',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Temperature',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
}
|
||||
}, { // Secondary yAxis
|
||||
title: {
|
||||
text: 'Rainfall',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
format: '{value} mm',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
},
|
||||
opposite: true
|
||||
}],
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
x: 120,
|
||||
verticalAlign: 'top',
|
||||
y: 100,
|
||||
floating: true,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
||||
},
|
||||
series: [{
|
||||
name: 'Rainfall',
|
||||
type: 'column',
|
||||
yAxis: 1,
|
||||
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
||||
tooltip: {
|
||||
valueSuffix: ' mm'
|
||||
}
|
||||
|
||||
}, {
|
||||
name: 'Temperature',
|
||||
type: 'spline',
|
||||
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
||||
tooltip: {
|
||||
valueSuffix: '°C'
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,791 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* This is a complex demo of how to set up a Highcharts chart, coupled to a
|
||||
* dynamic source and extended by drawing image sprites, wind arrow paths
|
||||
* and a second grid on top of the chart. The purpose of the demo is to inpire
|
||||
* developers to go beyond the basic chart types and show how the library can
|
||||
* be extended programmatically. This is what the demo does:
|
||||
*
|
||||
* - Loads weather forecast from www.yr.no in form of an XML service. The XML
|
||||
* is translated on the Higcharts website into JSONP for the sake of the demo
|
||||
* being shown on both our website and JSFiddle.
|
||||
* - When the data arrives async, a Meteogram instance is created. We have
|
||||
* created the Meteogram prototype to provide an organized structure of the different
|
||||
* methods and subroutines associated with the demo.
|
||||
* - The parseYrData method parses the data from www.yr.no into several parallel arrays. These
|
||||
* arrays are used directly as the data option for temperature, precipitation
|
||||
* and air pressure. As the temperature data gives only full degrees, we apply
|
||||
* some smoothing on the graph, but keep the original data in the tooltip.
|
||||
* - After this, the options structure is build, and the chart generated with the
|
||||
* parsed data.
|
||||
* - In the callback (on chart load), we weather icons on top of the temperature series.
|
||||
* The icons are sprites from a single PNG image, placed inside a clipped 30x30
|
||||
* SVG <g> element. VML interprets this as HTML images inside a clipped div.
|
||||
* - Lastly, the wind arrows are built and added below the plot area, and a grid is
|
||||
* drawn around them. The wind arrows are basically drawn north-south, then rotated
|
||||
* as per the wind direction.
|
||||
*/
|
||||
|
||||
function Meteogram(xml, container) {
|
||||
// Parallel arrays for the chart data, these are populated as the XML/JSON file
|
||||
// is loaded
|
||||
this.symbols = [];
|
||||
this.symbolNames = [];
|
||||
this.precipitations = [];
|
||||
this.windDirections = [];
|
||||
this.windDirectionNames = [];
|
||||
this.windSpeeds = [];
|
||||
this.windSpeedNames = [];
|
||||
this.temperatures = [];
|
||||
this.pressures = [];
|
||||
|
||||
// Initialize
|
||||
this.xml = xml;
|
||||
this.container = container;
|
||||
|
||||
// Run
|
||||
this.parseYrData();
|
||||
}
|
||||
/**
|
||||
* Return weather symbol sprites as laid out at http://om.yr.no/forklaring/symbol/
|
||||
*/
|
||||
Meteogram.prototype.getSymbolSprites = function (symbolSize) {
|
||||
return {
|
||||
'01d': {
|
||||
x: 0,
|
||||
y: 0
|
||||
},
|
||||
'01n': {
|
||||
x: symbolSize,
|
||||
y: 0
|
||||
},
|
||||
'16': {
|
||||
x: 2 * symbolSize,
|
||||
y: 0
|
||||
},
|
||||
'02d': {
|
||||
x: 0,
|
||||
y: symbolSize
|
||||
},
|
||||
'02n': {
|
||||
x: symbolSize,
|
||||
y: symbolSize
|
||||
},
|
||||
'03d': {
|
||||
x: 0,
|
||||
y: 2 * symbolSize
|
||||
},
|
||||
'03n': {
|
||||
x: symbolSize,
|
||||
y: 2 * symbolSize
|
||||
},
|
||||
'17': {
|
||||
x: 2 * symbolSize,
|
||||
y: 2 * symbolSize
|
||||
},
|
||||
'04': {
|
||||
x: 0,
|
||||
y: 3 * symbolSize
|
||||
},
|
||||
'05d': {
|
||||
x: 0,
|
||||
y: 4 * symbolSize
|
||||
},
|
||||
'05n': {
|
||||
x: symbolSize,
|
||||
y: 4 * symbolSize
|
||||
},
|
||||
'18': {
|
||||
x: 2 * symbolSize,
|
||||
y: 4 * symbolSize
|
||||
},
|
||||
'06d': {
|
||||
x: 0,
|
||||
y: 5 * symbolSize
|
||||
},
|
||||
'06n': {
|
||||
x: symbolSize,
|
||||
y: 5 * symbolSize
|
||||
},
|
||||
'07d': {
|
||||
x: 0,
|
||||
y: 6 * symbolSize
|
||||
},
|
||||
'07n': {
|
||||
x: symbolSize,
|
||||
y: 6 * symbolSize
|
||||
},
|
||||
'08d': {
|
||||
x: 0,
|
||||
y: 7 * symbolSize
|
||||
},
|
||||
'08n': {
|
||||
x: symbolSize,
|
||||
y: 7 * symbolSize
|
||||
},
|
||||
'19': {
|
||||
x: 2 * symbolSize,
|
||||
y: 7 * symbolSize
|
||||
},
|
||||
'09': {
|
||||
x: 0,
|
||||
y: 8 * symbolSize
|
||||
},
|
||||
'10': {
|
||||
x: 0,
|
||||
y: 9 * symbolSize
|
||||
},
|
||||
'11': {
|
||||
x: 0,
|
||||
y: 10 * symbolSize
|
||||
},
|
||||
'12': {
|
||||
x: 0,
|
||||
y: 11 * symbolSize
|
||||
},
|
||||
'13': {
|
||||
x: 0,
|
||||
y: 12 * symbolSize
|
||||
},
|
||||
'14': {
|
||||
x: 0,
|
||||
y: 13 * symbolSize
|
||||
},
|
||||
'15': {
|
||||
x: 0,
|
||||
y: 14 * symbolSize
|
||||
},
|
||||
'20d': {
|
||||
x: 0,
|
||||
y: 15 * symbolSize
|
||||
},
|
||||
'20n': {
|
||||
x: symbolSize,
|
||||
y: 15 * symbolSize
|
||||
},
|
||||
'20m': {
|
||||
x: 2 * symbolSize,
|
||||
y: 15 * symbolSize
|
||||
},
|
||||
'21d': {
|
||||
x: 0,
|
||||
y: 16 * symbolSize
|
||||
},
|
||||
'21n': {
|
||||
x: symbolSize,
|
||||
y: 16 * symbolSize
|
||||
},
|
||||
'21m': {
|
||||
x: 2 * symbolSize,
|
||||
y: 16 * symbolSize
|
||||
},
|
||||
'22': {
|
||||
x: 0,
|
||||
y: 17 * symbolSize
|
||||
},
|
||||
'23': {
|
||||
x: 0,
|
||||
y: 18 * symbolSize
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Function to smooth the temperature line. The original data provides only whole degrees,
|
||||
* which makes the line graph look jagged. So we apply a running mean on it, but preserve
|
||||
* the unaltered value in the tooltip.
|
||||
*/
|
||||
Meteogram.prototype.smoothLine = function (data) {
|
||||
var i = data.length,
|
||||
sum,
|
||||
value;
|
||||
|
||||
while (i--) {
|
||||
data[i].value = value = data[i].y; // preserve value for tooltip
|
||||
|
||||
// Set the smoothed value to the average of the closest points, but don't allow
|
||||
// it to differ more than 0.5 degrees from the given value
|
||||
sum = (data[i - 1] || data[i]).y + value + (data[i + 1] || data[i]).y;
|
||||
data[i].y = Math.max(value - 0.5, Math.min(sum / 3, value + 0.5));
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Callback function that is called from Highcharts on hovering each point and returns
|
||||
* HTML for the tooltip.
|
||||
*/
|
||||
Meteogram.prototype.tooltipFormatter = function (tooltip) {
|
||||
|
||||
// Create the header with reference to the time interval
|
||||
var index = tooltip.points[0].point.index,
|
||||
ret = '<small>' + Highcharts.dateFormat('%A, %b %e, %H:%M', tooltip.x) + '-' +
|
||||
Highcharts.dateFormat('%H:%M', tooltip.points[0].point.to) + '</small><br>';
|
||||
|
||||
// Symbol text
|
||||
ret += '<b>' + this.symbolNames[index] + '</b>';
|
||||
|
||||
ret += '<table>';
|
||||
|
||||
// Add all series
|
||||
Highcharts.each(tooltip.points, function (point) {
|
||||
var series = point.series;
|
||||
ret += '<tr><td><span style="color:' + series.color + '">\u25CF</span> ' + series.name +
|
||||
': </td><td style="white-space:nowrap">' + Highcharts.pick(point.point.value, point.y) +
|
||||
series.options.tooltip.valueSuffix + '</td></tr>';
|
||||
});
|
||||
|
||||
// Add wind
|
||||
ret += '<tr><td style="vertical-align: top">\u25CF Wind</td><td style="white-space:nowrap">' + this.windDirectionNames[index] +
|
||||
'<br>' + this.windSpeedNames[index] + ' (' +
|
||||
Highcharts.numberFormat(this.windSpeeds[index], 1) + ' m/s)</td></tr>';
|
||||
|
||||
// Close
|
||||
ret += '</table>';
|
||||
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the weather symbols on top of the temperature series. The symbols are sprites of a single
|
||||
* file, defined in the getSymbolSprites function above.
|
||||
*/
|
||||
Meteogram.prototype.drawWeatherSymbols = function (chart) {
|
||||
var meteogram = this,
|
||||
symbolSprites = this.getSymbolSprites(30);
|
||||
|
||||
$.each(chart.series[0].data, function (i, point) {
|
||||
var sprite,
|
||||
group;
|
||||
|
||||
if (meteogram.resolution > 36e5 || i % 2 === 0) {
|
||||
|
||||
sprite = symbolSprites[meteogram.symbols[i]];
|
||||
if (sprite) {
|
||||
|
||||
// Create a group element that is positioned and clipped at 30 pixels width and height
|
||||
group = chart.renderer.g()
|
||||
.attr({
|
||||
translateX: point.plotX + chart.plotLeft - 15,
|
||||
translateY: point.plotY + chart.plotTop - 30,
|
||||
zIndex: 5
|
||||
})
|
||||
.clip(chart.renderer.clipRect(0, 0, 30, 30))
|
||||
.add();
|
||||
|
||||
// Position the image inside it at the sprite position
|
||||
chart.renderer.image(
|
||||
'https://www.highcharts.com/samples/graphics/meteogram-symbols-30px.png',
|
||||
-sprite.x,
|
||||
-sprite.y,
|
||||
90,
|
||||
570
|
||||
)
|
||||
.add(group);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Create wind speed symbols for the Beaufort wind scale. The symbols are rotated
|
||||
* around the zero centerpoint.
|
||||
*/
|
||||
Meteogram.prototype.windArrow = function (name) {
|
||||
var level,
|
||||
path;
|
||||
|
||||
// The stem and the arrow head
|
||||
path = [
|
||||
'M', 0, 7, // base of arrow
|
||||
'L', -1.5, 7,
|
||||
0, 10,
|
||||
1.5, 7,
|
||||
0, 7,
|
||||
0, -10 // top
|
||||
];
|
||||
|
||||
level = $.inArray(name, ['Calm', 'Light air', 'Light breeze', 'Gentle breeze', 'Moderate breeze',
|
||||
'Fresh breeze', 'Strong breeze', 'Near gale', 'Gale', 'Strong gale', 'Storm',
|
||||
'Violent storm', 'Hurricane']);
|
||||
|
||||
if (level === 0) {
|
||||
path = [];
|
||||
}
|
||||
|
||||
if (level === 2) {
|
||||
path.push('M', 0, -8, 'L', 4, -8); // short line
|
||||
} else if (level >= 3) {
|
||||
path.push(0, -10, 7, -10); // long line
|
||||
}
|
||||
|
||||
if (level === 4) {
|
||||
path.push('M', 0, -7, 'L', 4, -7);
|
||||
} else if (level >= 5) {
|
||||
path.push('M', 0, -7, 'L', 7, -7);
|
||||
}
|
||||
|
||||
if (level === 5) {
|
||||
path.push('M', 0, -4, 'L', 4, -4);
|
||||
} else if (level >= 6) {
|
||||
path.push('M', 0, -4, 'L', 7, -4);
|
||||
}
|
||||
|
||||
if (level === 7) {
|
||||
path.push('M', 0, -1, 'L', 4, -1);
|
||||
} else if (level >= 8) {
|
||||
path.push('M', 0, -1, 'L', 7, -1);
|
||||
}
|
||||
|
||||
return path;
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw the wind arrows. Each arrow path is generated by the windArrow function above.
|
||||
*/
|
||||
Meteogram.prototype.drawWindArrows = function (chart) {
|
||||
var meteogram = this;
|
||||
|
||||
$.each(chart.series[0].data, function (i, point) {
|
||||
var arrow, x, y;
|
||||
|
||||
if (meteogram.resolution > 36e5 || i % 2 === 0) {
|
||||
|
||||
// Draw the wind arrows
|
||||
x = point.plotX + chart.plotLeft + 7;
|
||||
y = 255;
|
||||
if (meteogram.windSpeedNames[i] === 'Calm') {
|
||||
arrow = chart.renderer.circle(x, y, 10).attr({
|
||||
fill: 'none'
|
||||
});
|
||||
} else {
|
||||
arrow = chart.renderer.path(
|
||||
meteogram.windArrow(meteogram.windSpeedNames[i])
|
||||
).attr({
|
||||
rotation: parseInt(meteogram.windDirections[i], 10),
|
||||
translateX: x, // rotation center
|
||||
translateY: y // rotation center
|
||||
});
|
||||
}
|
||||
arrow.attr({
|
||||
stroke: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
|
||||
'stroke-width': 1.5,
|
||||
zIndex: 5
|
||||
})
|
||||
.add();
|
||||
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Draw blocks around wind arrows, below the plot area
|
||||
*/
|
||||
Meteogram.prototype.drawBlocksForWindArrows = function (chart) {
|
||||
var xAxis = chart.xAxis[0],
|
||||
x,
|
||||
pos,
|
||||
max,
|
||||
isLong,
|
||||
isLast,
|
||||
i;
|
||||
|
||||
for (pos = xAxis.min, max = xAxis.max, i = 0; pos <= max + 36e5; pos += 36e5, i += 1) {
|
||||
|
||||
// Get the X position
|
||||
isLast = pos === max + 36e5;
|
||||
x = Math.round(xAxis.toPixels(pos)) + (isLast ? 0.5 : -0.5);
|
||||
|
||||
// Draw the vertical dividers and ticks
|
||||
if (this.resolution > 36e5) {
|
||||
isLong = pos % this.resolution === 0;
|
||||
} else {
|
||||
isLong = i % 2 === 0;
|
||||
}
|
||||
chart.renderer.path(['M', x, chart.plotTop + chart.plotHeight + (isLong ? 0 : 28),
|
||||
'L', x, chart.plotTop + chart.plotHeight + 32, 'Z'])
|
||||
.attr({
|
||||
'stroke': chart.options.chart.plotBorderColor,
|
||||
'stroke-width': 1
|
||||
})
|
||||
.add();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get the title based on the XML data
|
||||
*/
|
||||
Meteogram.prototype.getTitle = function () {
|
||||
return 'Meteogram for ' + this.xml.location.name + ', ' + this.xml.location.country;
|
||||
};
|
||||
|
||||
/**
|
||||
* Build and return the Highcharts options structure
|
||||
*/
|
||||
Meteogram.prototype.getChartOptions = function () {
|
||||
var meteogram = this;
|
||||
|
||||
return {
|
||||
chart: {
|
||||
renderTo: this.container,
|
||||
marginBottom: 70,
|
||||
marginRight: 40,
|
||||
marginTop: 50,
|
||||
plotBorderWidth: 1,
|
||||
width: 800,
|
||||
height: 310
|
||||
},
|
||||
|
||||
title: {
|
||||
text: this.getTitle(),
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
credits: {
|
||||
text: 'Forecast from <a href="http://yr.no">yr.no</a>',
|
||||
href: this.xml.credit.link['@attributes'].url,
|
||||
position: {
|
||||
x: -40
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
shared: true,
|
||||
useHTML: true,
|
||||
formatter: function () {
|
||||
return meteogram.tooltipFormatter(this);
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: [{ // Bottom X axis
|
||||
type: 'datetime',
|
||||
tickInterval: 2 * 36e5, // two hours
|
||||
minorTickInterval: 36e5, // one hour
|
||||
tickLength: 0,
|
||||
gridLineWidth: 1,
|
||||
gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0',
|
||||
startOnTick: false,
|
||||
endOnTick: false,
|
||||
minPadding: 0,
|
||||
maxPadding: 0,
|
||||
offset: 30,
|
||||
showLastLabel: true,
|
||||
labels: {
|
||||
format: '{value:%H}'
|
||||
}
|
||||
}, { // Top X axis
|
||||
linkedTo: 0,
|
||||
type: 'datetime',
|
||||
tickInterval: 24 * 3600 * 1000,
|
||||
labels: {
|
||||
format: '{value:<span style="font-size: 12px; font-weight: bold">%a</span> %b %e}',
|
||||
align: 'left',
|
||||
x: 3,
|
||||
y: -5
|
||||
},
|
||||
opposite: true,
|
||||
tickLength: 20,
|
||||
gridLineWidth: 1
|
||||
}],
|
||||
|
||||
yAxis: [{ // temperature axis
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
format: '{value}°',
|
||||
style: {
|
||||
fontSize: '10px'
|
||||
},
|
||||
x: -3
|
||||
},
|
||||
plotLines: [{ // zero plane
|
||||
value: 0,
|
||||
color: '#BBBBBB',
|
||||
width: 1,
|
||||
zIndex: 2
|
||||
}],
|
||||
// Custom positioner to provide even temperature ticks from top down
|
||||
tickPositioner: function () {
|
||||
var max = Math.ceil(this.max) + 1,
|
||||
pos = max - 12, // start
|
||||
ret;
|
||||
|
||||
if (pos < this.min) {
|
||||
ret = [];
|
||||
while (pos <= max) {
|
||||
ret.push(pos += 1);
|
||||
}
|
||||
} // else return undefined and go auto
|
||||
|
||||
return ret;
|
||||
|
||||
},
|
||||
maxPadding: 0.3,
|
||||
tickInterval: 1,
|
||||
gridLineColor: (Highcharts.theme && Highcharts.theme.background2) || '#F0F0F0'
|
||||
|
||||
}, { // precipitation axis
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
gridLineWidth: 0,
|
||||
tickLength: 0
|
||||
|
||||
}, { // Air pressure
|
||||
allowDecimals: false,
|
||||
title: { // Title on top of axis
|
||||
text: 'hPa',
|
||||
offset: 0,
|
||||
align: 'high',
|
||||
rotation: 0,
|
||||
style: {
|
||||
fontSize: '10px',
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
},
|
||||
textAlign: 'left',
|
||||
x: 3
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '8px',
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
},
|
||||
y: 2,
|
||||
x: 3
|
||||
},
|
||||
gridLineWidth: 0,
|
||||
opposite: true,
|
||||
showLastLabel: false
|
||||
}],
|
||||
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
pointPlacement: 'between'
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
series: [{
|
||||
name: 'Temperature',
|
||||
data: this.temperatures,
|
||||
type: 'spline',
|
||||
marker: {
|
||||
enabled: false,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: '°C'
|
||||
},
|
||||
zIndex: 1,
|
||||
color: '#FF3333',
|
||||
negativeColor: '#48AFE8'
|
||||
}, {
|
||||
name: 'Precipitation',
|
||||
data: this.precipitations,
|
||||
type: 'column',
|
||||
color: '#68CFE8',
|
||||
yAxis: 1,
|
||||
groupPadding: 0,
|
||||
pointPadding: 0,
|
||||
borderWidth: 0,
|
||||
shadow: false,
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function () {
|
||||
if (this.y > 0) {
|
||||
return this.y;
|
||||
}
|
||||
},
|
||||
style: {
|
||||
fontSize: '8px'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: 'mm'
|
||||
}
|
||||
}, {
|
||||
name: 'Air pressure',
|
||||
color: Highcharts.getOptions().colors[2],
|
||||
data: this.pressures,
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
shadow: false,
|
||||
tooltip: {
|
||||
valueSuffix: ' hPa'
|
||||
},
|
||||
dashStyle: 'shortdot',
|
||||
yAxis: 2
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Post-process the chart from the callback function, the second argument to Highcharts.Chart.
|
||||
*/
|
||||
Meteogram.prototype.onChartLoad = function (chart) {
|
||||
|
||||
this.drawWeatherSymbols(chart);
|
||||
this.drawWindArrows(chart);
|
||||
this.drawBlocksForWindArrows(chart);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Create the chart. This function is called async when the data file is loaded and parsed.
|
||||
*/
|
||||
Meteogram.prototype.createChart = function () {
|
||||
var meteogram = this;
|
||||
this.chart = new Highcharts.Chart(this.getChartOptions(), function (chart) {
|
||||
meteogram.onChartLoad(chart);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle the data. This part of the code is not Highcharts specific, but deals with yr.no's
|
||||
* specific data format
|
||||
*/
|
||||
Meteogram.prototype.parseYrData = function () {
|
||||
|
||||
var meteogram = this,
|
||||
xml = this.xml,
|
||||
pointStart;
|
||||
|
||||
if (!xml || !xml.forecast) {
|
||||
$('#loading').html('<i class="fa fa-frown-o"></i> Failed loading data, please try again later');
|
||||
return;
|
||||
}
|
||||
|
||||
// The returned xml variable is a JavaScript representation of the provided XML,
|
||||
// generated on the server by running PHP simple_load_xml and converting it to
|
||||
// JavaScript by json_encode.
|
||||
$.each(xml.forecast.tabular.time, function (i, time) {
|
||||
// Get the times - only Safari can't parse ISO8601 so we need to do some replacements
|
||||
var from = time['@attributes'].from + ' UTC',
|
||||
to = time['@attributes'].to + ' UTC';
|
||||
|
||||
from = from.replace(/-/g, '/').replace('T', ' ');
|
||||
from = Date.parse(from);
|
||||
to = to.replace(/-/g, '/').replace('T', ' ');
|
||||
to = Date.parse(to);
|
||||
|
||||
if (to > pointStart + 4 * 24 * 36e5) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If it is more than an hour between points, show all symbols
|
||||
if (i === 0) {
|
||||
meteogram.resolution = to - from;
|
||||
}
|
||||
|
||||
// Populate the parallel arrays
|
||||
meteogram.symbols.push(time.symbol['@attributes']['var'].match(/[0-9]{2}[dnm]?/)[0]); // eslint-disable-line dot-notation
|
||||
meteogram.symbolNames.push(time.symbol['@attributes'].name);
|
||||
|
||||
meteogram.temperatures.push({
|
||||
x: from,
|
||||
y: parseInt(time.temperature['@attributes'].value, 10),
|
||||
// custom options used in the tooltip formatter
|
||||
to: to,
|
||||
index: i
|
||||
});
|
||||
|
||||
meteogram.precipitations.push({
|
||||
x: from,
|
||||
y: parseFloat(time.precipitation['@attributes'].value)
|
||||
});
|
||||
meteogram.windDirections.push(parseFloat(time.windDirection['@attributes'].deg));
|
||||
meteogram.windDirectionNames.push(time.windDirection['@attributes'].name);
|
||||
meteogram.windSpeeds.push(parseFloat(time.windSpeed['@attributes'].mps));
|
||||
meteogram.windSpeedNames.push(time.windSpeed['@attributes'].name);
|
||||
|
||||
meteogram.pressures.push({
|
||||
x: from,
|
||||
y: parseFloat(time.pressure['@attributes'].value)
|
||||
});
|
||||
|
||||
if (i === 0) {
|
||||
pointStart = (from + to) / 2;
|
||||
}
|
||||
});
|
||||
|
||||
// Smooth the line
|
||||
this.smoothLine(this.temperatures);
|
||||
|
||||
// Create the chart when the data is loaded
|
||||
this.createChart();
|
||||
};
|
||||
// End of the Meteogram protype
|
||||
|
||||
|
||||
|
||||
$(function () { // On DOM ready...
|
||||
|
||||
// Set the hash to the yr.no URL we want to parse
|
||||
if (!location.hash) {
|
||||
var place = 'United_Kingdom/England/London';
|
||||
//place = 'France/Rhône-Alpes/Val_d\'Isère~2971074';
|
||||
//place = 'Norway/Sogn_og_Fjordane/Vik/Målset';
|
||||
//place = 'United_States/California/San_Francisco';
|
||||
//place = 'United_States/Minnesota/Minneapolis';
|
||||
location.hash = 'https://www.yr.no/place/' + place + '/forecast_hour_by_hour.xml';
|
||||
|
||||
}
|
||||
|
||||
// Then get the XML file through Highcharts' jsonp provider, see
|
||||
// https://github.com/highcharts/highcharts/blob/master/samples/data/jsonp.php
|
||||
// for source code.
|
||||
$.getJSON(
|
||||
'https://www.highcharts.com/samples/data/jsonp.php?url=' + location.hash.substr(1) + '&callback=?',
|
||||
function (xml) {
|
||||
window.meteogram = new Meteogram(xml, 'container');
|
||||
}
|
||||
);
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||
|
||||
<div id="container" style="width: 800px; height: 310px; margin: 0 auto">
|
||||
<div style="margin-top: 100px; text-align: center" id="loading">
|
||||
<i class="fa fa-spinner fa-spin"></i> Loading data from external source
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div style="width: 800px; margin: 0 auto">
|
||||
<a href="#http://www.yr.no/place/United_Kingdom/England/London/forecast_hour_by_hour.xml">London</a>,
|
||||
<a href="#http://www.yr.no/place/France/Rhône-Alpes/Val_d\'Isère~2971074/forecast_hour_by_hour.xml">Val d'Isère</a>,
|
||||
<a href="#http://www.yr.no/place/United_States/California/San_Francisco/forecast_hour_by_hour.xml">San Francisco</a>,
|
||||
<a href="#http://www.yr.no/place/Norway/Vik/Vikafjell/forecast_hour_by_hour.xml">Vikjafjellet</a>
|
||||
</div>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
zoomType: 'xy'
|
||||
},
|
||||
title: {
|
||||
text: 'Average Monthly Weather Data for Tokyo'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: WorldClimate.com'
|
||||
},
|
||||
xAxis: [{
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
crosshair: true
|
||||
}],
|
||||
yAxis: [{ // Primary yAxis
|
||||
labels: {
|
||||
format: '{value}°C',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Temperature',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
}
|
||||
},
|
||||
opposite: true
|
||||
|
||||
}, { // Secondary yAxis
|
||||
gridLineWidth: 0,
|
||||
title: {
|
||||
text: 'Rainfall',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
format: '{value} mm',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
}
|
||||
|
||||
}, { // Tertiary yAxis
|
||||
gridLineWidth: 0,
|
||||
title: {
|
||||
text: 'Sea-Level Pressure',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
format: '{value} mb',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
},
|
||||
opposite: true
|
||||
}],
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
legend: {
|
||||
layout: 'vertical',
|
||||
align: 'left',
|
||||
x: 80,
|
||||
verticalAlign: 'top',
|
||||
y: 55,
|
||||
floating: true,
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
|
||||
},
|
||||
series: [{
|
||||
name: 'Rainfall',
|
||||
type: 'column',
|
||||
yAxis: 1,
|
||||
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
||||
tooltip: {
|
||||
valueSuffix: ' mm'
|
||||
}
|
||||
|
||||
}, {
|
||||
name: 'Sea-Level Pressure',
|
||||
type: 'spline',
|
||||
yAxis: 2,
|
||||
data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
dashStyle: 'shortdot',
|
||||
tooltip: {
|
||||
valueSuffix: ' mb'
|
||||
}
|
||||
|
||||
}, {
|
||||
name: 'Temperature',
|
||||
type: 'spline',
|
||||
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
||||
tooltip: {
|
||||
valueSuffix: ' °C'
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
xAxis: {
|
||||
min: -0.5,
|
||||
max: 5.5
|
||||
},
|
||||
yAxis: {
|
||||
min: 0
|
||||
},
|
||||
title: {
|
||||
text: 'Scatter plot with regression line'
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
name: 'Regression Line',
|
||||
data: [[0, 1.11], [5, 4.51]],
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 0
|
||||
}
|
||||
},
|
||||
enableMouseTracking: false
|
||||
}, {
|
||||
type: 'scatter',
|
||||
name: 'Observations',
|
||||
data: [1, 1.5, 2.8, 3.5, 3.9, 4.2],
|
||||
marker: {
|
||||
radius: 4
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
min-width: 300px;
|
||||
max-width: 1000px;
|
||||
height: 420px;
|
||||
margin: 1em auto;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
/**
|
||||
* This is an advanced demo of setting up Highcharts with the flags feature borrowed from Highstock.
|
||||
* It also shows custom graphics drawn in the chart area on chart load.
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* Fires on chart load, called from the chart.events.load option.
|
||||
*/
|
||||
function onChartLoad() {
|
||||
|
||||
var centerX = 140,
|
||||
centerY = 110,
|
||||
path = [],
|
||||
angle,
|
||||
radius,
|
||||
badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
|
||||
spike,
|
||||
empImage,
|
||||
big5,
|
||||
label,
|
||||
left,
|
||||
right,
|
||||
years,
|
||||
renderer;
|
||||
|
||||
if (this.chartWidth < 530) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Draw the spiked disc
|
||||
for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
|
||||
radius = spike ? 80 : 70;
|
||||
path.push(
|
||||
'L',
|
||||
centerX + radius * Math.cos(angle),
|
||||
centerY + radius * Math.sin(angle)
|
||||
);
|
||||
spike = !spike;
|
||||
}
|
||||
path[0] = 'M';
|
||||
path.push('z');
|
||||
this.renderer.path(path)
|
||||
.attr({
|
||||
fill: badgeColor,
|
||||
zIndex: 6
|
||||
})
|
||||
.add();
|
||||
|
||||
// Employee image overlay
|
||||
empImage = this.renderer.path(path)
|
||||
.attr({
|
||||
zIndex: 7,
|
||||
opacity: 0,
|
||||
stroke: badgeColor,
|
||||
'stroke-width': 1
|
||||
})
|
||||
.add();
|
||||
|
||||
// Big 5
|
||||
big5 = this.renderer.text('5')
|
||||
.attr({
|
||||
zIndex: 6
|
||||
})
|
||||
.css({
|
||||
color: 'white',
|
||||
fontSize: '100px',
|
||||
fontStyle: 'italic',
|
||||
fontFamily: '\'Brush Script MT\', sans-serif'
|
||||
})
|
||||
.add();
|
||||
big5.attr({
|
||||
x: centerX - big5.getBBox().width / 2,
|
||||
y: centerY + 14
|
||||
});
|
||||
|
||||
// Draw the label
|
||||
label = this.renderer.text('Highcharts Anniversary')
|
||||
.attr({
|
||||
zIndex: 6
|
||||
})
|
||||
.css({
|
||||
color: '#FFFFFF'
|
||||
})
|
||||
.add();
|
||||
|
||||
left = centerX - label.getBBox().width / 2;
|
||||
right = centerX + label.getBBox().width / 2;
|
||||
|
||||
label.attr({
|
||||
x: left,
|
||||
y: centerY + 44
|
||||
});
|
||||
|
||||
// The band
|
||||
left = centerX - 90;
|
||||
right = centerX + 90;
|
||||
this.renderer
|
||||
.path([
|
||||
'M', left, centerY + 30,
|
||||
'L', right, centerY + 30,
|
||||
right, centerY + 50,
|
||||
left, centerY + 50,
|
||||
'z',
|
||||
'M', left, centerY + 40,
|
||||
'L', left - 20, centerY + 40,
|
||||
left - 10, centerY + 50,
|
||||
left - 20, centerY + 60,
|
||||
left + 10, centerY + 60,
|
||||
left, centerY + 50,
|
||||
left + 10, centerY + 60,
|
||||
left + 10, centerY + 50,
|
||||
left, centerY + 50,
|
||||
'z',
|
||||
'M', right, centerY + 40,
|
||||
'L', right + 20, centerY + 40,
|
||||
right + 10, centerY + 50,
|
||||
right + 20, centerY + 60,
|
||||
right - 10, centerY + 60,
|
||||
right, centerY + 50,
|
||||
right - 10, centerY + 60,
|
||||
right - 10, centerY + 50,
|
||||
right, centerY + 50,
|
||||
'z'
|
||||
])
|
||||
.attr({
|
||||
fill: badgeColor,
|
||||
stroke: '#FFFFFF',
|
||||
'stroke-width': 1,
|
||||
zIndex: 5
|
||||
})
|
||||
.add();
|
||||
|
||||
// 2009-2014
|
||||
years = this.renderer.text('2009-2014')
|
||||
.attr({
|
||||
zIndex: 6
|
||||
})
|
||||
.css({
|
||||
color: '#FFFFFF',
|
||||
fontStyle: 'italic',
|
||||
fontSize: '10px'
|
||||
})
|
||||
.add();
|
||||
years.attr({
|
||||
x: centerX - years.getBBox().width / 2,
|
||||
y: centerY + 62
|
||||
});
|
||||
|
||||
|
||||
// Prepare mouseover
|
||||
renderer = this.renderer;
|
||||
if (renderer.defs) { // is SVG
|
||||
$.each(this.get('employees').points, function () {
|
||||
var point = this,
|
||||
pattern;
|
||||
if (point.image) {
|
||||
pattern = renderer.createElement('pattern').attr({
|
||||
id: 'pattern-' + point.image,
|
||||
patternUnits: 'userSpaceOnUse',
|
||||
width: 400,
|
||||
height: 400
|
||||
}).add(renderer.defs);
|
||||
renderer.image(
|
||||
'https://www.highcharts.com/images/employees2014/' + point.image + '.jpg',
|
||||
centerX - 80,
|
||||
centerY - 80,
|
||||
160,
|
||||
213
|
||||
).add(pattern);
|
||||
|
||||
Highcharts.addEvent(point, 'mouseOver', function () {
|
||||
empImage
|
||||
.attr({
|
||||
fill: 'url(#pattern-' + point.image + ')'
|
||||
})
|
||||
.animate({ opacity: 1 }, { duration: 500 });
|
||||
});
|
||||
Highcharts.addEvent(point, 'mouseOut', function () {
|
||||
empImage.animate({ opacity: 0 }, { duration: 500 });
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
var options = {
|
||||
|
||||
chart: {
|
||||
events: {
|
||||
load: onChartLoad
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
minTickInterval: 365 * 24 * 36e5,
|
||||
labels: {
|
||||
align: 'left'
|
||||
},
|
||||
plotBands: [{
|
||||
from: Date.UTC(2009, 10, 27),
|
||||
to: Date.UTC(2010, 11, 1),
|
||||
color: '#EFFFFF',
|
||||
label: {
|
||||
text: '<em>Offices:</em><br> Torstein\'s basement',
|
||||
style: {
|
||||
color: '#999999'
|
||||
},
|
||||
y: 180
|
||||
}
|
||||
}, {
|
||||
from: Date.UTC(2010, 11, 1),
|
||||
to: Date.UTC(2013, 9, 1),
|
||||
color: '#FFFFEF',
|
||||
label: {
|
||||
text: '<em>Offices:</em><br> Tomtebu',
|
||||
style: {
|
||||
color: '#999999'
|
||||
},
|
||||
y: 30
|
||||
}
|
||||
}, {
|
||||
from: Date.UTC(2013, 9, 1),
|
||||
to: Date.UTC(2014, 10, 27),
|
||||
color: '#FFEFFF',
|
||||
label: {
|
||||
text: '<em>Offices:</em><br> VikØrsta',
|
||||
style: {
|
||||
color: '#999999'
|
||||
},
|
||||
y: 30
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Highcharts and Highsoft timeline'
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
style: {
|
||||
width: '250px'
|
||||
}
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
max: 100,
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
gridLineColor: 'rgba(0, 0, 0, 0.07)'
|
||||
}, {
|
||||
allowDecimals: false,
|
||||
max: 15,
|
||||
labels: {
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Employees',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[2]
|
||||
}
|
||||
},
|
||||
opposite: true,
|
||||
gridLineWidth: 0
|
||||
}],
|
||||
|
||||
plotOptions: {
|
||||
series: {
|
||||
marker: {
|
||||
enabled: false,
|
||||
symbol: 'circle',
|
||||
radius: 2
|
||||
},
|
||||
fillOpacity: 0.5
|
||||
},
|
||||
flags: {
|
||||
tooltip: {
|
||||
xDateFormat: '%B %e, %Y'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'spline',
|
||||
id: 'google-trends',
|
||||
dashStyle: 'dash',
|
||||
name: 'Google search for <em>highcharts</em>',
|
||||
data: [{ x: 1258322400000, /* November 2009 */ y: 0 }, { x: 1260961200000, y: 5 }, { x: 1263639600000, y: 7 }, { x: 1266188400000, y: 5 }, { x: 1268740800000, y: 6 }, { x: 1271368800000, y: 8 }, { x: 1274004000000, y: 11 }, { x: 1276639200000, y: 9 }, { x: 1279274400000, y: 12 }, { x: 1281952800000, y: 13 }, { x: 1284588000000, y: 17 }, { x: 1287223200000, y: 17 }, { x: 1289858400000, y: 18 }, { x: 1292497200000, y: 20 }, { x: 1295175600000, y: 20 }, { x: 1297724400000, y: 27 }, { x: 1300276800000, y: 32 }, { x: 1302904800000, y: 29 }, { x: 1305540000000, y: 34 }, { x: 1308175200000, y: 34 }, { x: 1310810400000, y: 36 }, { x: 1313488800000, y: 43 }, { x: 1316124000000, y: 44 }, { x: 1318759200000, y: 42 }, { x: 1321394400000, y: 47 }, { x: 1324033200000, y: 46 }, { x: 1326711600000, y: 50 }, { x: 1329303600000, y: 57 }, { x: 1331899200000, y: 54 }, { x: 1334527200000, y: 59 }, { x: 1337162400000, y: 62 }, { x: 1339797600000, y: 66 }, { x: 1342432800000, y: 61 }, { x: 1345111200000, y: 68 }, { x: 1347746400000, y: 67 }, { x: 1350381600000, y: 73 }, { x: 1353016800000, y: 63 }, { x: 1355655600000, y: 54 }, { x: 1358334000000, y: 67 }, { x: 1360882800000, y: 74 }, { x: 1363435200000, y: 81 }, { x: 1366063200000, y: 89 }, { x: 1368698400000, y: 83 }, { x: 1371333600000, y: 88 }, { x: 1373968800000, y: 86 }, { x: 1376647200000, y: 81 }, { x: 1379282400000, y: 83 }, { x: 1381917600000, y: 95 }, { x: 1384552800000, y: 86 }, { x: 1387191600000, y: 83 }, { x: 1389870000000, y: 89 }, { x: 1392418800000, y: 90 }, { x: 1394971200000, y: 94 }, { x: 1397599200000, y: 100 }, { x: 1400234400000, y: 100 }, { x: 1402869600000, y: 99 }, { x: 1405504800000, y: 99 }, { x: 1408183200000, y: 93 }, { x: 1410818400000, y: 97 }, { x: 1413453600000, y: 98 }],
|
||||
tooltip: {
|
||||
xDateFormat: '%B %Y',
|
||||
valueSuffix: ' % of best month'
|
||||
}
|
||||
}, {
|
||||
name: 'Revenue',
|
||||
id: 'revenue',
|
||||
type: 'area',
|
||||
data: [[1257033600000, 2], [1259625600000, 3], [1262304000000, 2], [1264982400000, 3], [1267401600000, 4], [1270080000000, 4], [1272672000000, 4], [1275350400000, 4], [1277942400000, 5], [1280620800000, 7], [1283299200000, 6], [1285891200000, 9], [1288569600000, 10], [1291161600000, 8], [1293840000000, 10], [1296518400000, 13], [1298937600000, 15], [1301616000000, 14], [1304208000000, 15], [1306886400000, 16], [1309478400000, 22], [1312156800000, 19], [1314835200000, 20], [1317427200000, 32], [1320105600000, 34], [1322697600000, 36], [1325376000000, 34], [1328054400000, 40], [1330560000000, 37], [1333238400000, 35], [1335830400000, 40], [1338508800000, 38], [1341100800000, 39], [1343779200000, 43], [1346457600000, 49], [1349049600000, 43], [1351728000000, 54], [1354320000000, 44], [1356998400000, 43], [1359676800000, 43], [1362096000000, 52], [1364774400000, 52], [1367366400000, 56], [1370044800000, 62], [1372636800000, 66], [1375315200000, 62], [1377993600000, 63], [1380585600000, 60], [1383264000000, 60], [1385856000000, 58], [1388534400000, 65], [1391212800000, 52], [1393632000000, 72], [1396310400000, 57], [1398902400000, 70], [1401580800000, 63], [1404172800000, 65], [1406851200000, 65], [1409529600000, 89], [1412121600000, 100]],
|
||||
tooltip: {
|
||||
xDateFormat: '%B %Y',
|
||||
valueSuffix: ' % of best month'
|
||||
}
|
||||
|
||||
}, {
|
||||
yAxis: 1,
|
||||
name: 'Highsoft employees',
|
||||
id: 'employees',
|
||||
type: 'area',
|
||||
step: 'left',
|
||||
tooltip: {
|
||||
headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%B %e, %Y}</span><br>',
|
||||
pointFormat: '{point.name}<br><b>{point.y}</b>',
|
||||
valueSuffix: ' employees'
|
||||
},
|
||||
data: [
|
||||
{ x: Date.UTC(2009, 10, 1), y: 1, name: 'Torstein worked alone', image: 'Torstein' },
|
||||
{ x: Date.UTC(2010, 10, 20), y: 2, name: 'Grethe joined', image: 'Grethe' },
|
||||
{ x: Date.UTC(2011, 3, 1), y: 3, name: 'Erik joined', image: null },
|
||||
{ x: Date.UTC(2011, 7, 1), y: 4, name: 'Gert joined', image: 'Gert' },
|
||||
{ x: Date.UTC(2011, 7, 15), y: 5, name: 'Hilde joined', image: 'Hilde' },
|
||||
{ x: Date.UTC(2012, 5, 1), y: 6, name: 'Guro joined', image: 'Guro' },
|
||||
{ x: Date.UTC(2012, 8, 1), y: 5, name: 'Erik left', image: null },
|
||||
{ x: Date.UTC(2012, 8, 15), y: 6, name: 'Anne Jorunn joined', image: 'AnneJorunn' },
|
||||
{ x: Date.UTC(2013, 0, 1), y: 7, name: 'Hilde T. joined', image: null },
|
||||
{ x: Date.UTC(2013, 7, 1), y: 8, name: 'Jon Arild joined', image: 'JonArild' },
|
||||
{ x: Date.UTC(2013, 7, 20), y: 9, name: 'Øystein joined', image: 'Oystein' },
|
||||
{ x: Date.UTC(2013, 9, 1), y: 10, name: 'Stephane joined', image: 'Stephane' },
|
||||
{ x: Date.UTC(2014, 9, 1), y: 11, name: 'Anita joined', image: 'Anita' },
|
||||
{ x: Date.UTC(2014, 10, 27), y: 11, name: ' ', image: null }
|
||||
]
|
||||
|
||||
}]
|
||||
};
|
||||
|
||||
// Add flags for important milestones. This requires Highstock.
|
||||
if (Highcharts.seriesTypes.flags) {
|
||||
options.series.push({
|
||||
type: 'flags',
|
||||
name: 'Cloud',
|
||||
color: '#333333',
|
||||
shape: 'squarepin',
|
||||
y: -80,
|
||||
data: [
|
||||
{ x: Date.UTC(2014, 4, 1), text: 'Highcharts Cloud Beta', title: 'Cloud', shape: 'squarepin' }
|
||||
],
|
||||
showInLegend: false
|
||||
}, {
|
||||
type: 'flags',
|
||||
name: 'Highmaps',
|
||||
color: '#333333',
|
||||
shape: 'squarepin',
|
||||
y: -55,
|
||||
data: [
|
||||
{ x: Date.UTC(2014, 5, 13), text: 'Highmaps version 1.0 released', title: 'Maps' }
|
||||
],
|
||||
showInLegend: false
|
||||
}, {
|
||||
type: 'flags',
|
||||
name: 'Highcharts',
|
||||
color: '#333333',
|
||||
shape: 'circlepin',
|
||||
data: [
|
||||
{ x: Date.UTC(2009, 10, 27), text: 'Highcharts version 1.0 released', title: '1.0' },
|
||||
{ x: Date.UTC(2010, 6, 13), text: 'Ported from canvas to SVG rendering', title: '2.0' },
|
||||
{ x: Date.UTC(2010, 10, 23), text: 'Dynamically resize and scale to text labels', title: '2.1' },
|
||||
{ x: Date.UTC(2011, 9, 18), text: 'Highstock version 1.0 released', title: 'Stock', shape: 'squarepin' },
|
||||
{ x: Date.UTC(2012, 7, 24), text: 'Gauges, polar charts and range series', title: '2.3' },
|
||||
{ x: Date.UTC(2013, 2, 22), text: 'Multitouch support, more series types', title: '3.0' },
|
||||
{ x: Date.UTC(2014, 3, 22), text: '3D charts, heatmaps', title: '4.0' }
|
||||
],
|
||||
showInLegend: false
|
||||
}, {
|
||||
type: 'flags',
|
||||
name: 'Events',
|
||||
color: '#333333',
|
||||
fillColor: 'rgba(255,255,255,0.8)',
|
||||
data: [
|
||||
{ x: Date.UTC(2012, 10, 1), text: 'Highsoft won "Entrepeneur of the Year" in Sogn og Fjordane, Norway', title: 'Award' },
|
||||
{ x: Date.UTC(2012, 11, 25), text: 'Packt Publishing published <em>Learning Highcharts by Example</em>. Since then, many other books are written about Highcharts.', title: 'First book' },
|
||||
{ x: Date.UTC(2013, 4, 25), text: 'Highsoft nominated Norway\'s Startup of the Year', title: 'Award' },
|
||||
{ x: Date.UTC(2014, 4, 25), text: 'Highsoft nominated Best Startup in Nordic Startup Awards', title: 'Award' }
|
||||
],
|
||||
onSeries: 'revenue',
|
||||
showInLegend: false
|
||||
});
|
||||
}
|
||||
|
||||
$('#container').highcharts(options);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/stock/highstock.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
<div id="container"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
title: {
|
||||
text: 'Combination chart'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
|
||||
},
|
||||
labels: {
|
||||
items: [{
|
||||
html: 'Total fruit consumption',
|
||||
style: {
|
||||
left: '50px',
|
||||
top: '18px',
|
||||
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
|
||||
}
|
||||
}]
|
||||
},
|
||||
series: [{
|
||||
type: 'column',
|
||||
name: 'Jane',
|
||||
data: [3, 2, 1, 3, 4]
|
||||
}, {
|
||||
type: 'column',
|
||||
name: 'John',
|
||||
data: [2, 3, 5, 7, 6]
|
||||
}, {
|
||||
type: 'column',
|
||||
name: 'Joe',
|
||||
data: [4, 3, 3, 9, 0]
|
||||
}, {
|
||||
type: 'spline',
|
||||
name: 'Average',
|
||||
data: [3, 2.67, 3, 6.33, 3.33],
|
||||
marker: {
|
||||
lineWidth: 2,
|
||||
lineColor: Highcharts.getOptions().colors[3],
|
||||
fillColor: 'white'
|
||||
}
|
||||
}, {
|
||||
type: 'pie',
|
||||
name: 'Total consumption',
|
||||
data: [{
|
||||
name: 'Jane',
|
||||
y: 13,
|
||||
color: Highcharts.getOptions().colors[0] // Jane's color
|
||||
}, {
|
||||
name: 'John',
|
||||
y: 23,
|
||||
color: Highcharts.getOptions().colors[1] // John's color
|
||||
}, {
|
||||
name: 'Joe',
|
||||
y: 19,
|
||||
color: Highcharts.getOptions().colors[2] // Joe's color
|
||||
}],
|
||||
center: [100, 80],
|
||||
size: 100,
|
||||
showInLegend: false,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'scatter',
|
||||
margin: [70, 50, 60, 80],
|
||||
events: {
|
||||
click: function (e) {
|
||||
// find the clicked values and the series
|
||||
var x = e.xAxis[0].value,
|
||||
y = e.yAxis[0].value,
|
||||
series = this.series[0];
|
||||
|
||||
// Add it
|
||||
series.addPoint([x, y]);
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'User supplied data'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Click the plot area to add a point. Click a point to remove it.'
|
||||
},
|
||||
xAxis: {
|
||||
gridLineWidth: 1,
|
||||
minPadding: 0.2,
|
||||
maxPadding: 0.2,
|
||||
maxZoom: 60
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Value'
|
||||
},
|
||||
minPadding: 0.2,
|
||||
maxPadding: 0.2,
|
||||
maxZoom: 60,
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
exporting: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
lineWidth: 1,
|
||||
point: {
|
||||
events: {
|
||||
'click': function () {
|
||||
if (this.series.data.length > 1) {
|
||||
this.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
data: [[20, 20], [80, 80]]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
|
||||
var detailChart;
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
// create the detail chart
|
||||
function createDetail(masterChart) {
|
||||
|
||||
// prepare the detail chart
|
||||
var detailData = [],
|
||||
detailStart = data[0][0];
|
||||
|
||||
$.each(masterChart.series[0].data, function () {
|
||||
if (this.x >= detailStart) {
|
||||
detailData.push(this.y);
|
||||
}
|
||||
});
|
||||
|
||||
// create a detail chart referenced by a global variable
|
||||
detailChart = $('#detail-container').highcharts({
|
||||
chart: {
|
||||
marginBottom: 120,
|
||||
reflow: false,
|
||||
marginLeft: 50,
|
||||
marginRight: 20,
|
||||
style: {
|
||||
position: 'absolute'
|
||||
}
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: 'Historical USD to EUR Exchange Rate'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Select an area by dragging across the lower chart'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime'
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
maxZoom: 0.1
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
var point = this.points[0];
|
||||
return '<b>' + point.series.name + '</b><br/>' + Highcharts.dateFormat('%A %B %e %Y', this.x) + ':<br/>' +
|
||||
'1 USD = ' + Highcharts.numberFormat(point.y, 2) + ' EUR';
|
||||
},
|
||||
shared: true
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
marker: {
|
||||
enabled: false,
|
||||
states: {
|
||||
hover: {
|
||||
enabled: true,
|
||||
radius: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: 'USD to EUR',
|
||||
pointStart: detailStart,
|
||||
pointInterval: 24 * 3600 * 1000,
|
||||
data: detailData
|
||||
}],
|
||||
|
||||
exporting: {
|
||||
enabled: false
|
||||
}
|
||||
|
||||
}).highcharts(); // return chart
|
||||
}
|
||||
|
||||
// create the master chart
|
||||
function createMaster() {
|
||||
$('#master-container').highcharts({
|
||||
chart: {
|
||||
reflow: false,
|
||||
borderWidth: 0,
|
||||
backgroundColor: null,
|
||||
marginLeft: 50,
|
||||
marginRight: 20,
|
||||
zoomType: 'x',
|
||||
events: {
|
||||
|
||||
// listen to the selection event on the master chart to update the
|
||||
// extremes of the detail chart
|
||||
selection: function (event) {
|
||||
var extremesObject = event.xAxis[0],
|
||||
min = extremesObject.min,
|
||||
max = extremesObject.max,
|
||||
detailData = [],
|
||||
xAxis = this.xAxis[0];
|
||||
|
||||
// reverse engineer the last part of the data
|
||||
$.each(this.series[0].data, function () {
|
||||
if (this.x > min && this.x < max) {
|
||||
detailData.push([this.x, this.y]);
|
||||
}
|
||||
});
|
||||
|
||||
// move the plot bands to reflect the new detail span
|
||||
xAxis.removePlotBand('mask-before');
|
||||
xAxis.addPlotBand({
|
||||
id: 'mask-before',
|
||||
from: data[0][0],
|
||||
to: min,
|
||||
color: 'rgba(0, 0, 0, 0.2)'
|
||||
});
|
||||
|
||||
xAxis.removePlotBand('mask-after');
|
||||
xAxis.addPlotBand({
|
||||
id: 'mask-after',
|
||||
from: max,
|
||||
to: data[data.length - 1][0],
|
||||
color: 'rgba(0, 0, 0, 0.2)'
|
||||
});
|
||||
|
||||
|
||||
detailChart.series[0].setData(detailData);
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
showLastTickLabel: true,
|
||||
maxZoom: 14 * 24 * 3600000, // fourteen days
|
||||
plotBands: [{
|
||||
id: 'mask-before',
|
||||
from: data[0][0],
|
||||
to: data[data.length - 1][0],
|
||||
color: 'rgba(0, 0, 0, 0.2)'
|
||||
}],
|
||||
title: {
|
||||
text: null
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
gridLineWidth: 0,
|
||||
labels: {
|
||||
enabled: false
|
||||
},
|
||||
title: {
|
||||
text: null
|
||||
},
|
||||
min: 0.6,
|
||||
showFirstLabel: false
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
fillColor: {
|
||||
linearGradient: [0, 0, 0, 70],
|
||||
stops: [
|
||||
[0, Highcharts.getOptions().colors[0]],
|
||||
[1, 'rgba(255,255,255,0)']
|
||||
]
|
||||
},
|
||||
lineWidth: 1,
|
||||
marker: {
|
||||
enabled: false
|
||||
},
|
||||
shadow: false,
|
||||
states: {
|
||||
hover: {
|
||||
lineWidth: 1
|
||||
}
|
||||
},
|
||||
enableMouseTracking: false
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
type: 'area',
|
||||
name: 'USD to EUR',
|
||||
pointInterval: 24 * 3600 * 1000,
|
||||
pointStart: data[0][0],
|
||||
data: data
|
||||
}],
|
||||
|
||||
exporting: {
|
||||
enabled: false
|
||||
}
|
||||
|
||||
}, function (masterChart) {
|
||||
createDetail(masterChart);
|
||||
})
|
||||
.highcharts(); // return chart instance
|
||||
}
|
||||
|
||||
// make the container smaller and add a second container for the master chart
|
||||
var $container = $('#container')
|
||||
.css('position', 'relative');
|
||||
|
||||
$('<div id="detail-container">')
|
||||
.appendTo($container);
|
||||
|
||||
$('<div id="master-container">')
|
||||
.css({
|
||||
position: 'absolute',
|
||||
top: 300,
|
||||
height: 100,
|
||||
width: '100%'
|
||||
})
|
||||
.appendTo($container);
|
||||
|
||||
// create master and in its callback, create the detail chart
|
||||
createMaster();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$(document).ready(function () {
|
||||
Highcharts.setOptions({
|
||||
global: {
|
||||
useUTC: false
|
||||
}
|
||||
});
|
||||
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'spline',
|
||||
animation: Highcharts.svg, // don't animate in old IE
|
||||
marginRight: 10,
|
||||
events: {
|
||||
load: function () {
|
||||
|
||||
// set up the updating of the chart each second
|
||||
var series = this.series[0];
|
||||
setInterval(function () {
|
||||
var x = (new Date()).getTime(), // current time
|
||||
y = Math.random();
|
||||
series.addPoint([x, y], true, true);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Live random data'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
tickPixelInterval: 150
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Value'
|
||||
},
|
||||
plotLines: [{
|
||||
value: 0,
|
||||
width: 1,
|
||||
color: '#808080'
|
||||
}]
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return '<b>' + this.series.name + '</b><br/>' +
|
||||
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
|
||||
Highcharts.numberFormat(this.y, 2);
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
exporting: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Random data',
|
||||
data: (function () {
|
||||
// generate an array of random data
|
||||
var data = [],
|
||||
time = (new Date()).getTime(),
|
||||
i;
|
||||
|
||||
for (i = -19; i <= 0; i += 1) {
|
||||
data.push({
|
||||
x: time + i * 1000,
|
||||
y: Math.random()
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}())
|
||||
}]
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
zoomType: 'xy'
|
||||
},
|
||||
title: {
|
||||
text: 'Temperature vs Rainfall'
|
||||
},
|
||||
xAxis: [{
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
}],
|
||||
yAxis: [{ // Primary yAxis
|
||||
labels: {
|
||||
format: '{value} °C',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: 'Temperature',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[1]
|
||||
}
|
||||
}
|
||||
}, { // Secondary yAxis
|
||||
title: {
|
||||
text: 'Rainfall',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
format: '{value} mm',
|
||||
style: {
|
||||
color: Highcharts.getOptions().colors[0]
|
||||
}
|
||||
},
|
||||
opposite: true
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
shared: true
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Rainfall',
|
||||
type: 'column',
|
||||
yAxis: 1,
|
||||
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
|
||||
tooltip: {
|
||||
pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f} mm</b> '
|
||||
}
|
||||
}, {
|
||||
name: 'Rainfall error',
|
||||
type: 'errorbar',
|
||||
yAxis: 1,
|
||||
data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]],
|
||||
tooltip: {
|
||||
pointFormat: '(error range: {point.low}-{point.high} mm)<br/>'
|
||||
}
|
||||
}, {
|
||||
name: 'Temperature',
|
||||
type: 'spline',
|
||||
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
|
||||
tooltip: {
|
||||
pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
|
||||
}
|
||||
}, {
|
||||
name: 'Temperature error',
|
||||
type: 'errorbar',
|
||||
data: [[6, 8], [5.9, 7.6], [9.4, 10.4], [14.1, 15.9], [18.0, 20.1], [21.0, 24.0], [23.2, 25.3], [26.1, 27.8], [23.2, 23.9], [18.0, 21.1], [12.9, 14.0], [7.6, 10.0]],
|
||||
tooltip: {
|
||||
pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
|
||||
}
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
chart: {
|
||||
type: 'funnel',
|
||||
marginRight: 100
|
||||
},
|
||||
title: {
|
||||
text: 'Sales funnel',
|
||||
x: -50
|
||||
},
|
||||
plotOptions: {
|
||||
series: {
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
format: '<b>{point.name}</b> ({point.y:,.0f})',
|
||||
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
|
||||
softConnector: true
|
||||
},
|
||||
neckWidth: '30%',
|
||||
neckHeight: '25%'
|
||||
|
||||
//-- Other available options
|
||||
// height: pixels or percent
|
||||
// width: pixels or percent
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
enabled: false
|
||||
},
|
||||
series: [{
|
||||
name: 'Unique users',
|
||||
data: [
|
||||
['Website visits', 15654],
|
||||
['Downloads', 4064],
|
||||
['Requested price list', 1987],
|
||||
['Invoice sent', 976],
|
||||
['Finalized', 846]
|
||||
]
|
||||
}]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/funnel.js"></script>
|
||||
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
|
||||
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// Uncomment to style it like Apple Watch
|
||||
/*
|
||||
if (!Highcharts.theme) {
|
||||
Highcharts.setOptions({
|
||||
chart: {
|
||||
backgroundColor: 'black'
|
||||
},
|
||||
colors: ['#F62366', '#9DFF02', '#0CCDD6'],
|
||||
title: {
|
||||
style: {
|
||||
color: 'silver'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
style: {
|
||||
color: 'silver'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// */
|
||||
|
||||
Highcharts.chart('container', {
|
||||
|
||||
chart: {
|
||||
type: 'solidgauge',
|
||||
marginTop: 50
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Activity',
|
||||
style: {
|
||||
fontSize: '24px'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
borderWidth: 0,
|
||||
backgroundColor: 'none',
|
||||
shadow: false,
|
||||
style: {
|
||||
fontSize: '16px'
|
||||
},
|
||||
pointFormat: '{series.name}<br><span style="font-size:2em; color: {point.color}; font-weight: bold">{point.y}%</span>',
|
||||
positioner: function (labelWidth, labelHeight) {
|
||||
return {
|
||||
x: 200 - labelWidth / 2,
|
||||
y: 180
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: 0,
|
||||
endAngle: 360,
|
||||
background: [{ // Track for Move
|
||||
outerRadius: '112%',
|
||||
innerRadius: '88%',
|
||||
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
|
||||
borderWidth: 0
|
||||
}, { // Track for Exercise
|
||||
outerRadius: '87%',
|
||||
innerRadius: '63%',
|
||||
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
|
||||
borderWidth: 0
|
||||
}, { // Track for Stand
|
||||
outerRadius: '62%',
|
||||
innerRadius: '38%',
|
||||
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
|
||||
borderWidth: 0
|
||||
}]
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
lineWidth: 0,
|
||||
tickPositions: []
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
solidgauge: {
|
||||
borderWidth: '34px',
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
linecap: 'round',
|
||||
stickyTracking: false
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Move',
|
||||
borderColor: Highcharts.getOptions().colors[0],
|
||||
data: [{
|
||||
color: Highcharts.getOptions().colors[0],
|
||||
radius: '100%',
|
||||
innerRadius: '100%',
|
||||
y: 80
|
||||
}]
|
||||
}, {
|
||||
name: 'Exercise',
|
||||
borderColor: Highcharts.getOptions().colors[1],
|
||||
data: [{
|
||||
color: Highcharts.getOptions().colors[1],
|
||||
radius: '75%',
|
||||
innerRadius: '75%',
|
||||
y: 65
|
||||
}]
|
||||
}, {
|
||||
name: 'Stand',
|
||||
borderColor: Highcharts.getOptions().colors[2],
|
||||
data: [{
|
||||
color: Highcharts.getOptions().colors[2],
|
||||
radius: '50%',
|
||||
innerRadius: '50%',
|
||||
y: 50
|
||||
}]
|
||||
}]
|
||||
},
|
||||
|
||||
/**
|
||||
* In the chart load callback, add icons on top of the circular shapes
|
||||
*/
|
||||
function callback() {
|
||||
|
||||
// Move icon
|
||||
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8])
|
||||
.attr({
|
||||
'stroke': '#303030',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-width': 2,
|
||||
'zIndex': 10
|
||||
})
|
||||
.translate(190, 26)
|
||||
.add(this.series[2].group);
|
||||
|
||||
// Exercise icon
|
||||
this.renderer.path(['M', -8, 0, 'L', 8, 0, 'M', 0, -8, 'L', 8, 0, 0, 8, 'M', 8, -8, 'L', 16, 0, 8, 8])
|
||||
.attr({
|
||||
'stroke': '#303030',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-width': 2,
|
||||
'zIndex': 10
|
||||
})
|
||||
.translate(190, 61)
|
||||
.add(this.series[2].group);
|
||||
|
||||
// Stand icon
|
||||
this.renderer.path(['M', 0, 8, 'L', 0, -8, 'M', -8, 0, 'L', 0, -8, 8, 0])
|
||||
.attr({
|
||||
'stroke': '#303030',
|
||||
'stroke-linecap': 'round',
|
||||
'stroke-linejoin': 'round',
|
||||
'stroke-width': 2,
|
||||
'zIndex': 10
|
||||
})
|
||||
.translate(190, 96)
|
||||
.add(this.series[2].group);
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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/solid-gauge.js"></script>
|
||||
|
||||
<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
/**
|
||||
* Get the current time
|
||||
*/
|
||||
function getNow() {
|
||||
var now = new Date();
|
||||
|
||||
return {
|
||||
hours: now.getHours() + now.getMinutes() / 60,
|
||||
minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
|
||||
seconds: now.getSeconds() * 12 / 60
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Pad numbers
|
||||
*/
|
||||
function pad(number, length) {
|
||||
// Create an array of the remaining length + 1 and join it with 0's
|
||||
return new Array((length || 2) + 1 - String(number).length).join(0) + number;
|
||||
}
|
||||
|
||||
var now = getNow();
|
||||
|
||||
// Create the chart
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false,
|
||||
height: 200
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'The Highcharts clock'
|
||||
},
|
||||
|
||||
pane: {
|
||||
background: [{
|
||||
// default background
|
||||
}, {
|
||||
// reflex for supported browsers
|
||||
backgroundColor: Highcharts.svg ? {
|
||||
radialGradient: {
|
||||
cx: 0.5,
|
||||
cy: -0.4,
|
||||
r: 1.9
|
||||
},
|
||||
stops: [
|
||||
[0.5, 'rgba(255, 255, 255, 0.2)'],
|
||||
[0.5, 'rgba(200, 200, 200, 0.2)']
|
||||
]
|
||||
} : null
|
||||
}]
|
||||
},
|
||||
|
||||
yAxis: {
|
||||
labels: {
|
||||
distance: -20
|
||||
},
|
||||
min: 0,
|
||||
max: 12,
|
||||
lineWidth: 0,
|
||||
showFirstLabel: false,
|
||||
|
||||
minorTickInterval: 'auto',
|
||||
minorTickWidth: 1,
|
||||
minorTickLength: 5,
|
||||
minorTickPosition: 'inside',
|
||||
minorGridLineWidth: 0,
|
||||
minorTickColor: '#666',
|
||||
|
||||
tickInterval: 1,
|
||||
tickWidth: 2,
|
||||
tickPosition: 'inside',
|
||||
tickLength: 10,
|
||||
tickColor: '#666',
|
||||
title: {
|
||||
text: 'Powered by<br/>Highcharts',
|
||||
style: {
|
||||
color: '#BBB',
|
||||
fontWeight: 'normal',
|
||||
fontSize: '8px',
|
||||
lineHeight: '10px'
|
||||
},
|
||||
y: 10
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
formatter: function () {
|
||||
return this.series.chart.tooltipText;
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
data: [{
|
||||
id: 'hour',
|
||||
y: now.hours,
|
||||
dial: {
|
||||
radius: '60%',
|
||||
baseWidth: 4,
|
||||
baseLength: '95%',
|
||||
rearLength: 0
|
||||
}
|
||||
}, {
|
||||
id: 'minute',
|
||||
y: now.minutes,
|
||||
dial: {
|
||||
baseLength: '95%',
|
||||
rearLength: 0
|
||||
}
|
||||
}, {
|
||||
id: 'second',
|
||||
y: now.seconds,
|
||||
dial: {
|
||||
radius: '100%',
|
||||
baseWidth: 1,
|
||||
rearLength: '20%'
|
||||
}
|
||||
}],
|
||||
animation: false,
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
||||
// Move
|
||||
function (chart) {
|
||||
setInterval(function () {
|
||||
|
||||
now = getNow();
|
||||
|
||||
var hour = chart.get('hour'),
|
||||
minute = chart.get('minute'),
|
||||
second = chart.get('second'),
|
||||
// run animation unless we're wrapping around from 59 to 0
|
||||
animation = now.seconds === 0 ?
|
||||
false :
|
||||
{
|
||||
easing: 'easeOutBounce'
|
||||
};
|
||||
|
||||
// Cache the tooltip text
|
||||
chart.tooltipText =
|
||||
pad(Math.floor(now.hours), 2) + ':' +
|
||||
pad(Math.floor(now.minutes * 5), 2) + ':' +
|
||||
pad(now.seconds * 5, 2);
|
||||
|
||||
hour.update(now.hours, true, animation);
|
||||
minute.update(now.minutes, true, animation);
|
||||
second.update(now.seconds, true, animation);
|
||||
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Easing function from https://github.com/danro/easing-js/blob/master/easing.js
|
||||
*/
|
||||
Math.easeOutBounce = function (pos) {
|
||||
if ((pos) < (1 / 2.75)) {
|
||||
return (7.5625 * pos * pos);
|
||||
}
|
||||
if (pos < (2 / 2.75)) {
|
||||
return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
|
||||
}
|
||||
if (pos < (2.5 / 2.75)) {
|
||||
return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
|
||||
}
|
||||
return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script src="https://code.highcharts.com/highcharts-more.js"></script>
|
||||
|
||||
<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
alignTicks: false,
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Speedometer with dual axes'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: -150,
|
||||
endAngle: 150
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
min: 0,
|
||||
max: 200,
|
||||
lineColor: '#339',
|
||||
tickColor: '#339',
|
||||
minorTickColor: '#339',
|
||||
offset: -25,
|
||||
lineWidth: 2,
|
||||
labels: {
|
||||
distance: -20,
|
||||
rotation: 'auto'
|
||||
},
|
||||
tickLength: 5,
|
||||
minorTickLength: 5,
|
||||
endOnTick: false
|
||||
}, {
|
||||
min: 0,
|
||||
max: 124,
|
||||
tickPosition: 'outside',
|
||||
lineColor: '#933',
|
||||
lineWidth: 2,
|
||||
minorTickPosition: 'outside',
|
||||
tickColor: '#933',
|
||||
minorTickColor: '#933',
|
||||
tickLength: 5,
|
||||
minorTickLength: 5,
|
||||
labels: {
|
||||
distance: 12,
|
||||
rotation: 'auto'
|
||||
},
|
||||
offset: -20,
|
||||
endOnTick: false
|
||||
}],
|
||||
|
||||
series: [{
|
||||
name: 'Speed',
|
||||
data: [80],
|
||||
dataLabels: {
|
||||
formatter: function () {
|
||||
var kmh = this.y,
|
||||
mph = Math.round(kmh * 0.621);
|
||||
return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
|
||||
'<span style="color:#933">' + mph + ' mph</span>';
|
||||
},
|
||||
backgroundColor: {
|
||||
linearGradient: {
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: 0,
|
||||
y2: 1
|
||||
},
|
||||
stops: [
|
||||
[0, '#DDD'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' km/h'
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
// Add some life
|
||||
function (chart) {
|
||||
setInterval(function () {
|
||||
var point = chart.series[0].points[0],
|
||||
newVal,
|
||||
inc = Math.round((Math.random() - 0.5) * 20);
|
||||
|
||||
newVal = point.y + inc;
|
||||
if (newVal < 0 || newVal > 200) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
|
||||
}, 3000);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
var gaugeOptions = {
|
||||
|
||||
chart: {
|
||||
type: 'solidgauge'
|
||||
},
|
||||
|
||||
title: null,
|
||||
|
||||
pane: {
|
||||
center: ['50%', '85%'],
|
||||
size: '140%',
|
||||
startAngle: -90,
|
||||
endAngle: 90,
|
||||
background: {
|
||||
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
|
||||
innerRadius: '60%',
|
||||
outerRadius: '100%',
|
||||
shape: 'arc'
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
stops: [
|
||||
[0.1, '#55BF3B'], // green
|
||||
[0.5, '#DDDF0D'], // yellow
|
||||
[0.9, '#DF5353'] // red
|
||||
],
|
||||
lineWidth: 0,
|
||||
minorTickInterval: null,
|
||||
tickPixelInterval: 400,
|
||||
tickWidth: 0,
|
||||
title: {
|
||||
y: -70
|
||||
},
|
||||
labels: {
|
||||
y: 16
|
||||
}
|
||||
},
|
||||
|
||||
plotOptions: {
|
||||
solidgauge: {
|
||||
dataLabels: {
|
||||
y: 5,
|
||||
borderWidth: 0,
|
||||
useHTML: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// The speed gauge
|
||||
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 200,
|
||||
title: {
|
||||
text: 'Speed'
|
||||
}
|
||||
},
|
||||
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Speed',
|
||||
data: [80],
|
||||
dataLabels: {
|
||||
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
|
||||
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
|
||||
'<span style="font-size:12px;color:silver">km/h</span></div>'
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' km/h'
|
||||
}
|
||||
}]
|
||||
|
||||
}));
|
||||
|
||||
// The RPM gauge
|
||||
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 5,
|
||||
title: {
|
||||
text: 'RPM'
|
||||
}
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'RPM',
|
||||
data: [1],
|
||||
dataLabels: {
|
||||
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
|
||||
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
|
||||
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
|
||||
},
|
||||
tooltip: {
|
||||
valueSuffix: ' revolutions/min'
|
||||
}
|
||||
}]
|
||||
|
||||
}));
|
||||
|
||||
// Bring life to the dials
|
||||
setTimeout(function () {
|
||||
// Speed
|
||||
var chart = $('#container-speed').highcharts(),
|
||||
point,
|
||||
newVal,
|
||||
inc;
|
||||
|
||||
if (chart) {
|
||||
point = chart.series[0].points[0];
|
||||
inc = Math.round((Math.random() - 0.5) * 100);
|
||||
newVal = point.y + inc;
|
||||
|
||||
if (newVal < 0 || newVal > 200) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
}
|
||||
|
||||
// RPM
|
||||
chart = $('#container-rpm').highcharts();
|
||||
if (chart) {
|
||||
point = chart.series[0].points[0];
|
||||
inc = Math.random() - 0.5;
|
||||
newVal = point.y + inc;
|
||||
|
||||
if (newVal < 0 || newVal > 5) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
}
|
||||
}, 2000);
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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/solid-gauge.js"></script>
|
||||
|
||||
<div style="width: 600px; height: 400px; margin: 0 auto">
|
||||
<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
|
||||
<div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBackgroundColor: null,
|
||||
plotBackgroundImage: null,
|
||||
plotBorderWidth: 0,
|
||||
plotShadow: false
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'Speedometer'
|
||||
},
|
||||
|
||||
pane: {
|
||||
startAngle: -150,
|
||||
endAngle: 150,
|
||||
background: [{
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#FFF'],
|
||||
[1, '#333']
|
||||
]
|
||||
},
|
||||
borderWidth: 0,
|
||||
outerRadius: '109%'
|
||||
}, {
|
||||
backgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#333'],
|
||||
[1, '#FFF']
|
||||
]
|
||||
},
|
||||
borderWidth: 1,
|
||||
outerRadius: '107%'
|
||||
}, {
|
||||
// default background
|
||||
}, {
|
||||
backgroundColor: '#DDD',
|
||||
borderWidth: 0,
|
||||
outerRadius: '105%',
|
||||
innerRadius: '103%'
|
||||
}]
|
||||
},
|
||||
|
||||
// the value axis
|
||||
yAxis: {
|
||||
min: 0,
|
||||
max: 200,
|
||||
|
||||
minorTickInterval: 'auto',
|
||||
minorTickWidth: 1,
|
||||
minorTickLength: 10,
|
||||
minorTickPosition: 'inside',
|
||||
minorTickColor: '#666',
|
||||
|
||||
tickPixelInterval: 30,
|
||||
tickWidth: 2,
|
||||
tickPosition: 'inside',
|
||||
tickLength: 10,
|
||||
tickColor: '#666',
|
||||
labels: {
|
||||
step: 2,
|
||||
rotation: 'auto'
|
||||
},
|
||||
title: {
|
||||
text: 'km/h'
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 120,
|
||||
color: '#55BF3B' // green
|
||||
}, {
|
||||
from: 120,
|
||||
to: 160,
|
||||
color: '#DDDF0D' // yellow
|
||||
}, {
|
||||
from: 160,
|
||||
to: 200,
|
||||
color: '#DF5353' // red
|
||||
}]
|
||||
},
|
||||
|
||||
series: [{
|
||||
name: 'Speed',
|
||||
data: [80],
|
||||
tooltip: {
|
||||
valueSuffix: ' km/h'
|
||||
}
|
||||
}]
|
||||
|
||||
},
|
||||
// Add some life
|
||||
function (chart) {
|
||||
if (!chart.renderer.forExport) {
|
||||
setInterval(function () {
|
||||
var point = chart.series[0].points[0],
|
||||
newVal,
|
||||
inc = Math.round((Math.random() - 0.5) * 20);
|
||||
|
||||
newVal = point.y + inc;
|
||||
if (newVal < 0 || newVal > 200) {
|
||||
newVal = point.y - inc;
|
||||
}
|
||||
|
||||
point.update(newVal);
|
||||
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>Highcharts Example</title>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
|
||||
<style type="text/css">
|
||||
${demo.css}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$('#container').highcharts({
|
||||
|
||||
chart: {
|
||||
type: 'gauge',
|
||||
plotBorderWidth: 1,
|
||||
plotBackgroundColor: {
|
||||
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
|
||||
stops: [
|
||||
[0, '#FFF4C6'],
|
||||
[0.3, '#FFFFFF'],
|
||||
[1, '#FFF4C6']
|
||||
]
|
||||
},
|
||||
plotBackgroundImage: null,
|
||||
height: 200
|
||||
},
|
||||
|
||||
title: {
|
||||
text: 'VU meter'
|
||||
},
|
||||
|
||||
pane: [{
|
||||
startAngle: -45,
|
||||
endAngle: 45,
|
||||
background: null,
|
||||
center: ['25%', '145%'],
|
||||
size: 300
|
||||
}, {
|
||||
startAngle: -45,
|
||||
endAngle: 45,
|
||||
background: null,
|
||||
center: ['75%', '145%'],
|
||||
size: 300
|
||||
}],
|
||||
|
||||
tooltip: {
|
||||
enabled: false
|
||||
},
|
||||
|
||||
yAxis: [{
|
||||
min: -20,
|
||||
max: 6,
|
||||
minorTickPosition: 'outside',
|
||||
tickPosition: 'outside',
|
||||
labels: {
|
||||
rotation: 'auto',
|
||||
distance: 20
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 6,
|
||||
color: '#C02316',
|
||||
innerRadius: '100%',
|
||||
outerRadius: '105%'
|
||||
}],
|
||||
pane: 0,
|
||||
title: {
|
||||
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
|
||||
y: -40
|
||||
}
|
||||
}, {
|
||||
min: -20,
|
||||
max: 6,
|
||||
minorTickPosition: 'outside',
|
||||
tickPosition: 'outside',
|
||||
labels: {
|
||||
rotation: 'auto',
|
||||
distance: 20
|
||||
},
|
||||
plotBands: [{
|
||||
from: 0,
|
||||
to: 6,
|
||||
color: '#C02316',
|
||||
innerRadius: '100%',
|
||||
outerRadius: '105%'
|
||||
}],
|
||||
pane: 1,
|
||||
title: {
|
||||
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
|
||||
y: -40
|
||||
}
|
||||
}],
|
||||
|
||||
plotOptions: {
|
||||
gauge: {
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
dial: {
|
||||
radius: '100%'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
series: [{
|
||||
name: 'Channel A',
|
||||
data: [-20],
|
||||
yAxis: 0
|
||||
}, {
|
||||
name: 'Channel B',
|
||||
data: [-20],
|
||||
yAxis: 1
|
||||
}]
|
||||
|
||||
},
|
||||
|
||||
// Let the music play
|
||||
function (chart) {
|
||||
setInterval(function () {
|
||||
if (chart.series) { // the chart may be destroyed
|
||||
var left = chart.series[0].points[0],
|
||||
right = chart.series[1].points[0],
|
||||
leftVal,
|
||||
rightVal,
|
||||
inc = (Math.random() - 0.5) * 3;
|
||||
|
||||
leftVal = left.y + inc;
|
||||
rightVal = leftVal + inc / 3;
|
||||
if (leftVal < -20 || leftVal > 6) {
|
||||
leftVal = left.y - inc;
|
||||
}
|
||||
if (rightVal < -20 || rightVal > 6) {
|
||||
rightVal = leftVal;
|
||||
}
|
||||
|
||||
left.update(leftVal, false);
|
||||
right.update(rightVal, false);
|
||||
chart.redraw();
|
||||
}
|
||||
}, 500);
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
|
||||
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue