first commit
This commit is contained in:
Le Stagiaire
143
alertes.php
Normal file
143
alertes.php
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
<?php require('head.php');
|
||||||
|
if(@$infos_user['droit'] > 0)
|
||||||
|
{
|
||||||
|
|
||||||
|
$color = true;
|
||||||
|
$num_page = 1; // Initialisation du numéro de la page
|
||||||
|
$nb_per_page = 10; // Initialisation du nombre d'entréé par page
|
||||||
|
$index = 0; // Initialisation de l'index pour la selection dans la BDD
|
||||||
|
|
||||||
|
// Si l'utilisateur change le nombre d'alertes par page
|
||||||
|
if(isset($_GET['npp']) && $_GET['npp'] > 0)
|
||||||
|
$nb_per_page = $_GET['npp']; // On modifie l'attribut
|
||||||
|
|
||||||
|
// Si le numéro de la page est supérieur à 0
|
||||||
|
if(isset($_GET['page']) && $_GET['page'] > 0)
|
||||||
|
{
|
||||||
|
$num_page = $_GET['page']; // On modifie l'attribut
|
||||||
|
$index = $nb_per_page * ($num_page - 1); // Ainsi que l'attribut ci
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sélection de l'affichage
|
||||||
|
$getaff = "";
|
||||||
|
if(isset($_POST['chateau']) or isset($_POST['relevage']) or isset($_POST['surpresseur']))
|
||||||
|
{
|
||||||
|
if(@$_POST['chateau']) $_SESSION['alerte_chateau'] = 1; else $_SESSION['alerte_chateau'] = 0;
|
||||||
|
if(@$_POST['relevage']) $_SESSION['alerte_relevage'] = 1; else $_SESSION['alerte_relevage'] = 0;
|
||||||
|
if(@$_POST['surpresseur']) $_SESSION['alerte_surpresseur'] = 1; else $_SESSION['alerte_surpresseur'] = 0;
|
||||||
|
}
|
||||||
|
if(!@$_SESSION['alerte_chateau'] && !@$_SESSION['alerte_relevage'] && !@$_SESSION['alerte_surpresseur'])
|
||||||
|
{
|
||||||
|
$_SESSION['alerte_chateau'] = 1;
|
||||||
|
$_SESSION['alerte_relevage'] = 1;
|
||||||
|
$_SESSION['alerte_surpresseur'] = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
$where = "WHERE ";
|
||||||
|
if($_SESSION['alerte_chateau'])
|
||||||
|
{ $where .= "equipement='Chateau'"; }
|
||||||
|
if($_SESSION['alerte_relevage'])
|
||||||
|
{
|
||||||
|
if($_SESSION['alerte_chateau']) $where .= " or ";
|
||||||
|
$where .= "equipement='Station de Relevage'";
|
||||||
|
}
|
||||||
|
if($_SESSION['alerte_surpresseur'])
|
||||||
|
{
|
||||||
|
if($_SESSION['alerte_relevage'] or $_SESSION['alerte_chateau']) $where .= " or ";
|
||||||
|
$where .= "equipement='Surpresseur'";
|
||||||
|
}
|
||||||
|
|
||||||
|
if(isset($_GET['acquitte_id']) && $_GET['acquitte_id'] >= 0)
|
||||||
|
{
|
||||||
|
if($connexion->query("UPDATE alertes SET acquitte='1' WHERE id_releve=".$_GET['acquitte_id']))
|
||||||
|
header("Location:".$_SERVER['HTTP_REFERER']); // On acquitte l'alerte avec l'ID $_GET['acquitte_id'] puis on revient
|
||||||
|
else echo 'Erreur..'; // sur la page précédente donc la page d'affichage des alertes
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
|
||||||
|
// Requête qui récupère les informations de la base de données
|
||||||
|
$result_alertes = $connexion->query("SELECT * FROM alertes ".$where." ORDER BY date DESC, heure DESC LIMIT $index, $nb_per_page");
|
||||||
|
|
||||||
|
echo '<h1>Gestion des alertes</h1>';
|
||||||
|
|
||||||
|
// Déclaration des titres du tableau
|
||||||
|
echo '<table width="800px" border="0" cellspacing="0" cellpadding="0" align="center" style="text-align: center;">';
|
||||||
|
echo '<tr>';
|
||||||
|
echo '<td>Equipement</td>';
|
||||||
|
echo '<td>Type</td>';
|
||||||
|
echo '<td>Date / Heure</td>';
|
||||||
|
echo '<td>Acquitte?</td>';
|
||||||
|
echo '</tr>';
|
||||||
|
|
||||||
|
while($alertes = $result_alertes->fetch()) // fetch() récupère un à un les alertes
|
||||||
|
{
|
||||||
|
$color = !$color; // $color est un booléen, pour l'alternance de couleur
|
||||||
|
if($color) $couleur = "#9CF"; else $couleur = "#9CC"; // 2 couleurs, pour la lisibilité du tableau
|
||||||
|
|
||||||
|
echo '<tr style="background-color:'.$couleur.';">'; // On défini la nouvelle ligne avec la couleur
|
||||||
|
echo '<td class="ligne">'.$alertes['equipement'].'</td>'; // Equipement
|
||||||
|
echo '<td class="ligne">'.utf8_encode(strtolower(str_replace('?', 'e', str_replace('_', ' ', $alertes['type'])))).'</td>';
|
||||||
|
// Type d'alerte en minuscule avec strtolower()
|
||||||
|
echo '<td class="ligne">'.$alertes['date'].' / '.$alertes['heure'].'</td>'; // Date et Heure
|
||||||
|
echo '<td class="ligne">';
|
||||||
|
// Si "acquitte" est a 1 on affiche "Oui" sinon on afficher un lien pour l'acquitter "Non-> Acquitter"
|
||||||
|
if($alertes['acquitte']) echo 'Oui';
|
||||||
|
else echo '<span id="acqu'.$alertes['id_releve'].'">Non → <a href="?acquitte_id='.$alertes['id_releve'].'" onClick="acqu'.$alertes['id_releve'].'.innerHTML=\'→ Oui\'">Acquitter</a>';
|
||||||
|
echo '</td>';
|
||||||
|
echo '</tr>';
|
||||||
|
}
|
||||||
|
|
||||||
|
echo '</table>'; // Fermeture du tableau
|
||||||
|
|
||||||
|
// Nb pages
|
||||||
|
$nb_alertes = $connexion->query("SELECT count(*) FROM alertes ".$where."")->fetchColumn();
|
||||||
|
if($nb_alertes == 0) echo '<h1>Aucunes alertes</h1>';
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if(isset($_GET['page']))
|
||||||
|
$pageActuelle = $_GET['page'];
|
||||||
|
else
|
||||||
|
$pageActuelle = '1';
|
||||||
|
|
||||||
|
function get_list_page($page, $nb_page, $link, $nb = 3){
|
||||||
|
$list_page = array();
|
||||||
|
for ($i=1; $i <= $nb_page; $i++)
|
||||||
|
{
|
||||||
|
if (($i < $nb) OR ($i > $nb_page - $nb) OR (($i < $page + $nb) AND ($i > $page -$nb)))
|
||||||
|
$list_page[] = ($i==$page)?'<a class="pagenumeroactuel">[ '.$i.' ]</a>':'<a class="pagenumero" href="'.$link.'page='.$i.'">'.$i.'</a>';
|
||||||
|
else
|
||||||
|
{
|
||||||
|
if ($i >= $nb AND $i <= $page - $nb)
|
||||||
|
$i = $page - $nb;
|
||||||
|
elseif ($i >= $page + $nb AND $i <= $nb_page - $nb)
|
||||||
|
$i = $nb_page - $nb;
|
||||||
|
$list_page[] = '...';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$print= implode(' ', $list_page);
|
||||||
|
return $print;
|
||||||
|
}
|
||||||
|
echo '<br>Pages: ';
|
||||||
|
echo get_list_page($pageActuelle, (($nb_alertes -1 ) / $nb_per_page)+1, '?');
|
||||||
|
echo '<form method="GET"><input type="text" name="page" value="'.$pageActuelle.'" style="width:30px;"><input type="submit" value="Rechercher"></form>';
|
||||||
|
echo '<br>';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Options d'affichage
|
||||||
|
echo '</br><div style class="options"><form method="post" action="alertes.php?npp='.$nb_per_page.'"><label><input type="checkbox" name="chateau" value="1" ';
|
||||||
|
if($_SESSION['alerte_chateau']) echo 'checked';
|
||||||
|
echo '>Château</label> <label><input type="checkbox" name="relevage" value="1" ';
|
||||||
|
if($_SESSION['alerte_relevage']) echo 'checked';
|
||||||
|
echo '>Station de Relevage</label> <label><input type="checkbox" name="surpresseur" value="1" ';
|
||||||
|
if($_SESSION['alerte_surpresseur']) echo 'checked';
|
||||||
|
echo '>Surpresseur</label><br/><input type="submit" value="Flitrer les résultats"></form></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else echo 'Vous n\'êtes pas autorisé/connecté!';
|
||||||
|
include('foot.php'); ?>
|
||||||
BIN
banniere_reh.png
Normal file
BIN
banniere_reh.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
254
calendrier.js
Normal file
254
calendrier.js
Normal file
@ -0,0 +1,254 @@
|
|||||||
|
// <!-- <![CDATA[
|
||||||
|
|
||||||
|
// Set the initial date.
|
||||||
|
var ds_i_date = new Date();
|
||||||
|
ds_c_month = ds_i_date.getMonth() + 1;
|
||||||
|
ds_c_year = ds_i_date.getFullYear();
|
||||||
|
|
||||||
|
// Get Element By Id
|
||||||
|
function ds_getel(id) {
|
||||||
|
return document.getElementById(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the left and the top of the element.
|
||||||
|
function ds_getleft(el) {
|
||||||
|
var tmp = el.offsetLeft;
|
||||||
|
el = el.offsetParent
|
||||||
|
while(el) {
|
||||||
|
tmp += el.offsetLeft;
|
||||||
|
el = el.offsetParent;
|
||||||
|
}
|
||||||
|
return tmp;
|
||||||
|
}
|
||||||
|
function ds_gettop(el) {
|
||||||
|
var tmp = el.offsetTop;
|
||||||
|
el = el.offsetParent
|
||||||
|
while(el) {
|
||||||
|
tmp += el.offsetTop;
|
||||||
|
el = el.offsetParent;
|
||||||
|
}
|
||||||
|
return tmp;
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(
|
||||||
|
function(){
|
||||||
|
// Output Element
|
||||||
|
ds_oe = ds_getel('ds_calclass');
|
||||||
|
// Container
|
||||||
|
ds_ce = ds_getel('ds_conclass');
|
||||||
|
}, 100
|
||||||
|
);
|
||||||
|
|
||||||
|
// Output Buffering
|
||||||
|
var ds_ob = '';
|
||||||
|
function ds_ob_clean() {
|
||||||
|
ds_ob = '';
|
||||||
|
}
|
||||||
|
function ds_ob_flush() {
|
||||||
|
ds_oe.innerHTML = ds_ob;
|
||||||
|
ds_ob_clean();
|
||||||
|
}
|
||||||
|
function ds_echo(t) {
|
||||||
|
ds_ob += t;
|
||||||
|
}
|
||||||
|
|
||||||
|
var ds_element; // Text Element...
|
||||||
|
|
||||||
|
var ds_monthnames = [
|
||||||
|
'Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin',
|
||||||
|
'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Decembre'
|
||||||
|
]; // You can translate it for your language.
|
||||||
|
|
||||||
|
var ds_daynames = [
|
||||||
|
'Dim', 'Lun', 'Mar', 'Me', 'Jeu', 'Ven', 'Sam'
|
||||||
|
]; // You can translate it for your language.
|
||||||
|
|
||||||
|
// Calendar template
|
||||||
|
function ds_template_main_above(t) {
|
||||||
|
return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
|
||||||
|
+ '<tr>'
|
||||||
|
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
|
||||||
|
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
|
||||||
|
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Fermer]</td>'
|
||||||
|
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
|
||||||
|
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
|
||||||
|
+ '</tr>'
|
||||||
|
+ '<tr>'
|
||||||
|
+ '<td colspan="7" class="ds_head">' + t + '</td>'
|
||||||
|
+ '</tr>'
|
||||||
|
+ '<tr>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function ds_template_day_row(t) {
|
||||||
|
return '<td class="ds_subhead">' + t + '</td>';
|
||||||
|
// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
|
||||||
|
}
|
||||||
|
|
||||||
|
function ds_template_new_week() {
|
||||||
|
return '</tr><tr>';
|
||||||
|
}
|
||||||
|
|
||||||
|
function ds_template_blank_cell(colspan) {
|
||||||
|
return '<td colspan="' + colspan + '"></td>'
|
||||||
|
}
|
||||||
|
|
||||||
|
function ds_template_day(d, m, y) {
|
||||||
|
return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
|
||||||
|
// Define width the day row.
|
||||||
|
}
|
||||||
|
|
||||||
|
function ds_template_main_below() {
|
||||||
|
return '</tr>' + '</table>';
|
||||||
|
}
|
||||||
|
|
||||||
|
// This one draws calendar...
|
||||||
|
function ds_draw_calendar(m, y) {
|
||||||
|
// First clean the output buffer.
|
||||||
|
ds_ob_clean();
|
||||||
|
// Here we go, do the header
|
||||||
|
ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
|
||||||
|
for (i = 0; i < 7; i ++) {
|
||||||
|
ds_echo (ds_template_day_row(ds_daynames[i]));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
|
||||||
|
days = 31;
|
||||||
|
}
|
||||||
|
else if (m == 4 || m == 6 || m == 9 || m == 11) {
|
||||||
|
days = 30;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
days = (y % 4 == 0) ? 29 : 28;
|
||||||
|
}
|
||||||
|
var first_day = new Date(y, (m-1), 1).getDay();
|
||||||
|
var first_loop = 1;
|
||||||
|
// Start the first week
|
||||||
|
ds_echo (ds_template_new_week());
|
||||||
|
// If sunday is not the first day of the month, make a blank cell...
|
||||||
|
if (first_day != 0) {
|
||||||
|
ds_echo (ds_template_blank_cell(first_day));
|
||||||
|
}
|
||||||
|
var j = first_day;
|
||||||
|
for (i = 0; i < days; i ++) {
|
||||||
|
// Today is sunday, make a new week.
|
||||||
|
// If this sunday is the first day of the month,
|
||||||
|
// we've made a new row for you already.
|
||||||
|
if (j == 0 && !first_loop) {
|
||||||
|
// New week!!
|
||||||
|
ds_echo (ds_template_new_week());
|
||||||
|
}
|
||||||
|
|
||||||
|
ds_echo (ds_template_day(i + 1, m, y)); // Make a row of that day!
|
||||||
|
first_loop = 0; // This is not first loop anymore...
|
||||||
|
|
||||||
|
// What is the next day?
|
||||||
|
j ++;
|
||||||
|
j %= 7;
|
||||||
|
}
|
||||||
|
|
||||||
|
ds_echo (ds_template_main_below()); // Do the footer
|
||||||
|
ds_ob_flush(); // And let's display..
|
||||||
|
ds_ce.scrollIntoView(); // Scroll it into view.
|
||||||
|
}
|
||||||
|
|
||||||
|
// A function to show the calendar.
|
||||||
|
// When user click on the date, it will set the content of t.
|
||||||
|
function ds_sh(t) {
|
||||||
|
// Set the element to set...
|
||||||
|
ds_element = t;
|
||||||
|
var date = t.value.split("-");
|
||||||
|
// Make a new date, and set the current month and year.
|
||||||
|
if(t != "")
|
||||||
|
{
|
||||||
|
ds_c_month = date[1];
|
||||||
|
ds_c_year = date[0];
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
var ds_sh_date = new Date();
|
||||||
|
ds_c_month = ds_sh_date.getMonth() + 1;
|
||||||
|
ds_c_year = ds_sh_date.getFullYear();
|
||||||
|
}
|
||||||
|
// Draw the calendar
|
||||||
|
ds_draw_calendar(ds_c_month, ds_c_year);
|
||||||
|
// To change the position properly, we must show it first.
|
||||||
|
ds_ce.style.display = '';
|
||||||
|
// Move the calendar container!
|
||||||
|
the_left = ds_getleft(t);
|
||||||
|
the_top = ds_gettop(t) + t.offsetHeight;
|
||||||
|
ds_ce.style.left = the_left + 'px';
|
||||||
|
ds_ce.style.top = the_top + 'px';
|
||||||
|
// Scroll it into view.
|
||||||
|
ds_ce.scrollIntoView();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide the calendar.
|
||||||
|
function ds_hi() {ds_ce.style.display = 'none';}
|
||||||
|
|
||||||
|
// Moves to the next month...
|
||||||
|
function ds_nm() {
|
||||||
|
// Increase the current month.
|
||||||
|
ds_c_month ++;
|
||||||
|
// We have passed December, let's go to the next year.
|
||||||
|
// Increase the current year, and set the current month to January.
|
||||||
|
if (ds_c_month > 12) {
|
||||||
|
ds_c_month = 1;
|
||||||
|
ds_c_year++;
|
||||||
|
}
|
||||||
|
// Redraw the calendar.
|
||||||
|
ds_draw_calendar(ds_c_month, ds_c_year);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Moves to the previous month...
|
||||||
|
function ds_pm() {
|
||||||
|
ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
|
||||||
|
// We have passed January, let's go back to the previous year.
|
||||||
|
// Decrease the current year, and set the current month to December.
|
||||||
|
if (ds_c_month < 1) {
|
||||||
|
ds_c_month = 12;
|
||||||
|
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
|
||||||
|
}
|
||||||
|
// Redraw the calendar.
|
||||||
|
ds_draw_calendar(ds_c_month, ds_c_year);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Moves to the next year...
|
||||||
|
function ds_ny() {
|
||||||
|
ds_c_year++; // Increase the current year.
|
||||||
|
ds_draw_calendar(ds_c_month, ds_c_year); // Redraw the calendar.
|
||||||
|
}
|
||||||
|
|
||||||
|
// Moves to the previous year...
|
||||||
|
function ds_py() {
|
||||||
|
// Decrease the current year.
|
||||||
|
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
|
||||||
|
ds_draw_calendar(ds_c_month, ds_c_year); // Redraw the calendar.
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format the date to output.
|
||||||
|
function ds_format_date(d, m, y) {
|
||||||
|
m2 = '00' + m; // 2 digits month.
|
||||||
|
m2 = m2.substr(m2.length - 2);
|
||||||
|
d2 = '00' + d; // 2 digits day.
|
||||||
|
d2 = d2.substr(d2.length - 2);
|
||||||
|
return y + '-' + m2 + '-' + d2;
|
||||||
|
}
|
||||||
|
|
||||||
|
// When the user clicks the day.
|
||||||
|
function ds_onclick(d, m, y) {
|
||||||
|
ds_hi(); // Hide the calendar.
|
||||||
|
|
||||||
|
if (typeof(ds_element.value) != 'undefined') {
|
||||||
|
// Set the value of it, if we can.
|
||||||
|
ds_element.value = ds_format_date(d, m, y);
|
||||||
|
}
|
||||||
|
else if (typeof(ds_element.innerHTML) != 'undefined') {
|
||||||
|
// Maybe we want to set the HTML in it.
|
||||||
|
ds_element.innerHTML = ds_format_date(d, m, y);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// I don't know how should we display it, just alert it to user.
|
||||||
|
alert (ds_format_date(d, m, y));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// ]]> -->
|
||||||
52
connexion.php
Normal file
52
connexion.php
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
<?php require('head.php');
|
||||||
|
if(@$infos_user['token'] == @$_SESSION['token'] && @$_SESSION['token'] != '')
|
||||||
|
{
|
||||||
|
if(@$_GET['action'] == 'logout')
|
||||||
|
{
|
||||||
|
$_SESSION['user'] = '';
|
||||||
|
$_SESSION['token'] = '';
|
||||||
|
header('Refresh:1; url=connexion.php');
|
||||||
|
echo 'Vous êtes déconnecté!';
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
header('Refresh:1; url=index.php');
|
||||||
|
echo 'Vous êtes connecté en tant que: <b>'.$_SESSION['user'].'</b>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
elseif(@$_POST['user'] && @$_POST['pass'])
|
||||||
|
{
|
||||||
|
if($result_infos_userCO = $connexion->query("SELECT * FROM comptes WHERE pseudo='".$_POST['user']."'"))
|
||||||
|
{
|
||||||
|
$infos_userCO = $result_infos_userCO->fetch();
|
||||||
|
//if($infos_userCO['mdp1'] == md5($_POST['pass']))
|
||||||
|
if($infos_userCO['mdp1'] == $_POST['pass'])
|
||||||
|
{
|
||||||
|
$tokenCO = rand(100000, 999999);
|
||||||
|
if($connexion->query("UPDATE comptes SET token='".$tokenCO."' WHERE pseudo='".$_POST['user']."'"))
|
||||||
|
{
|
||||||
|
$_SESSION['user'] = $_POST['user'];
|
||||||
|
$_SESSION['token'] = $tokenCO;
|
||||||
|
header('Refresh:1; url=index.php');
|
||||||
|
echo 'Vous êtes connecté en tant que: <b>'.$_SESSION['user'].'</b>';
|
||||||
|
}
|
||||||
|
else echo 'Erreur avec la BDD! 0x02';
|
||||||
|
}
|
||||||
|
else echo 'L\'utilisateur ou mot de passe incorrect!<br/><br/>-> <a href="connexion.php">On réésaye?</a>';
|
||||||
|
}
|
||||||
|
else echo 'Erreur avec la BDD! 0x01';
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
?>
|
||||||
|
<h2>Connexion</h2>
|
||||||
|
<form method="post">
|
||||||
|
Utilisateur :<br/>
|
||||||
|
<input type="text" name="user"><br/><br/>
|
||||||
|
Mot de passe :<br/>
|
||||||
|
<input type="password" name="pass">
|
||||||
|
<input type="submit" value="Se connecter">
|
||||||
|
</form>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
include('foot.php'); ?>
|
||||||
6
connexion_erreur.php
Normal file
6
connexion_erreur.php
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?php
|
||||||
|
// message d'erreur lors d'un pb de connexion
|
||||||
|
// cr<63><72> en 2014 COPYRIGHT<48> C HANRION 2014
|
||||||
|
echo 'Vous n\'etes pas autorise!';
|
||||||
|
|
||||||
|
?>
|
||||||
16
foot.php
Normal file
16
foot.php
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
</div>
|
||||||
|
<!-- FIN CORPS -->
|
||||||
|
|
||||||
|
<!-- PIED -->
|
||||||
|
<div><hr style="width:800px; margin-top:20px;">
|
||||||
|
<em style="font-size:12px;">Exécuté en ~<?php
|
||||||
|
list($usec, $sec) = explode(" ", microtime());
|
||||||
|
$fin_ex = (float)$usec + (float)$sec;
|
||||||
|
echo round($fin_ex-$debut_ex,3);
|
||||||
|
?> s.<br/>Panel réalisé par BREGAND Alexis et HANRION Claude</a>.</em>
|
||||||
|
</div>
|
||||||
|
<!-- FIN PIED -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
166
graph_journalier.php
Normal file
166
graph_journalier.php
Normal file
@ -0,0 +1,166 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Volume Chateau</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||||
|
<script src="js/highcharts.js"></script>
|
||||||
|
<script src="js/exporting.js"></script>
|
||||||
|
<link rel="stylesheet" href="ext_jquery-ui.css">
|
||||||
|
<script src="js/ext_jquery-ui.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function() {
|
||||||
|
$( "#datepicker" ).datepicker();
|
||||||
|
$( "#format" ).change(function() {
|
||||||
|
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<?php
|
||||||
|
include('sql_connexion.php');
|
||||||
|
if (isset($_SESSION['pseudo']) && isset($_SESSION['token']))
|
||||||
|
{
|
||||||
|
if(isset ($_GET['datepicker']))
|
||||||
|
{
|
||||||
|
$datepicker=$_GET['datepicker'];
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
$datepicker=null;
|
||||||
|
}
|
||||||
|
echo'<form name=\'form\' method=\'get\' action="">';
|
||||||
|
echo'<select name="graphique" size="1">';
|
||||||
|
echo'<option>Volume dans la cuve';
|
||||||
|
echo'<option>Température colonne';
|
||||||
|
echo'<option>Température ambiante';
|
||||||
|
echo'</select> ';
|
||||||
|
echo'Date début: <input type="text" id="datepicker" name="datepicker" value="'.$datepicker.'">';
|
||||||
|
echo'<input type="submit" value="Valider">';
|
||||||
|
echo'</form>';
|
||||||
|
if(isset ($_GET['datepicker']))
|
||||||
|
{
|
||||||
|
if (($_GET['datepicker'])!=null)
|
||||||
|
{
|
||||||
|
echo'<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>';
|
||||||
|
echo '<br><a href="./menu.php">retour</a>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
include('connexion_erreur.php');
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function () {
|
||||||
|
$('#container').highcharts({
|
||||||
|
chart: {
|
||||||
|
zoomType: 'x',
|
||||||
|
spacingRight: 20
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: '<?php if($_GET['graphique']=='Volume dans la cuve'){$text='Pompe';}else{ $text='Température';}echo $text;?> Château d\'eau'
|
||||||
|
},
|
||||||
|
subtitle: {<?php
|
||||||
|
echo " text: 'Rosière-en-Haye données du ".$_GET['datepicker']."'";
|
||||||
|
?>
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
tickInterval: 3600 * 1000,
|
||||||
|
title: {
|
||||||
|
text: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
title: {
|
||||||
|
text: '<?php if($_GET['graphique']=='Volume dans la cuve') echo'Volume (m³)';
|
||||||
|
else{ echo'température (°C)';}?>'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
shared: true
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
area: {
|
||||||
|
fillColor: {
|
||||||
|
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
|
||||||
|
stops: [
|
||||||
|
[0, Highcharts.getOptions().colors[0]],
|
||||||
|
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
lineWidth: 1,
|
||||||
|
marker: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
shadow: false,
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
lineWidth: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
threshold: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [{
|
||||||
|
type: 'area',
|
||||||
|
name: '<?php if($_GET['graphique']=='Volume dans la cuve') echo'volume';
|
||||||
|
else{ echo'température';}?>',
|
||||||
|
pointInterval: 900 * 1000,
|
||||||
|
pointStart: Date.UTC(<?php $date = (string)$datepicker; $date= str_replace ( '-', ',', $date);echo $date;?>, 0, 0, 0, 0),
|
||||||
|
data: [<?php
|
||||||
|
if(isset($datepicker))
|
||||||
|
{
|
||||||
|
if ($_GET['graphique']=='Température colonne')
|
||||||
|
{
|
||||||
|
$result_co = $bdd->query("SELECT * FROM chateau WHERE date='$datepicker' ORDER BY date, heure ASC");
|
||||||
|
while($recup = $result_co->fetch(PDO::FETCH_ASSOC))
|
||||||
|
{
|
||||||
|
$tableautemp_colonne[] = $recup['temp_colonne'];
|
||||||
|
}
|
||||||
|
for ($j=0;$j<count($tableautemp_colonne)-1;$j++)
|
||||||
|
{
|
||||||
|
if($j != 0) echo ", ";
|
||||||
|
echo $tableautemp_colonne[$j];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if ($_GET['graphique']=='Température ambiante')
|
||||||
|
{
|
||||||
|
$result_co = $bdd->query("SELECT * FROM chateau WHERE date='$datepicker' ORDER BY date, heure ASC");
|
||||||
|
while($recup = $result_co->fetch(PDO::FETCH_ASSOC))
|
||||||
|
{
|
||||||
|
$tableautemp_ambiante[] = $recup['temp_ambiante'];
|
||||||
|
}
|
||||||
|
for ($j=0;$j<count($tableautemp_ambiante)-1;$j++)
|
||||||
|
{
|
||||||
|
if($j != 0) echo ", ";
|
||||||
|
echo $tableautemp_ambiante[$j];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
$result_co = $bdd->query("SELECT * FROM chateau WHERE date='$datepicker' ORDER BY date, heure ASC");
|
||||||
|
while($recup = $result_co->fetch(PDO::FETCH_ASSOC))
|
||||||
|
{
|
||||||
|
$tableau_hauteurvol[] = $recup['volume'];
|
||||||
|
}
|
||||||
|
for ($j=0;$j<count($tableau_hauteurvol)-1;$j++)
|
||||||
|
{
|
||||||
|
if($j != 0) echo ", ";
|
||||||
|
echo $tableau_hauteurvol[$j];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
41
head.php
Normal file
41
head.php
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<?php
|
||||||
|
list($usec, $sec) = explode(" ", microtime());
|
||||||
|
$debut_ex = (float)$usec + (float)$sec;
|
||||||
|
?>
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
<title>Panel de Rosières-en-Haye</title>
|
||||||
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
require('mysql.php');
|
||||||
|
?>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div style="width:800px; margin-left:auto; margin-right:auto;">
|
||||||
|
|
||||||
|
<!-- LOGO -->
|
||||||
|
<div style="float:left"><img src="banniere_reh.png" width="600" height="200" alt=""/></div>
|
||||||
|
<!-- FIN LOGO -->
|
||||||
|
|
||||||
|
<!-- MENU -->
|
||||||
|
<div style="height:200px; text-align:right;">
|
||||||
|
<?php if(@$infos_user){ echo strtoupper($infos_user['prenom'].' '.$infos_user['nom']); ?><br/>
|
||||||
|
(<?php echo strtolower($infos_user['pseudo']); ?>)<br/>
|
||||||
|
<a href="connexion.php?action=logout">Se déconnecter</a><br/><br/>
|
||||||
|
<a href="index.php">Menu</a><br/>
|
||||||
|
<a href="alertes.php"><?php echo $result_nb_alertes; ?> Alertes</a><br/>
|
||||||
|
<a href="membres.php">Membres</a>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
else echo 'Bonjour à vous!<br/><br/><a href="connexion.php">Se connecter</a>'; ?>
|
||||||
|
</div>
|
||||||
|
<!-- FIN MENU -->
|
||||||
|
|
||||||
|
<!-- CORPS -->
|
||||||
|
<div><hr style="width:800px;">
|
||||||
55
high/FillBDD.php
Normal file
55
high/FillBDD.php
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<?php
|
||||||
|
// Connexion … mysql
|
||||||
|
if($Numco=mysql_connect("localhost","root",""))
|
||||||
|
{
|
||||||
|
echo "Connexion serveur OK <br>"; // Alors connexion serveur
|
||||||
|
// Selection de la base de donn‚ess
|
||||||
|
if ($NumBdd=mysql_select_db ("texier"))
|
||||||
|
{echo "Selection BDD OK <br>";
|
||||||
|
//On test l'extraction des donn‚es
|
||||||
|
if($result = mysql_query("SELECT * FROM data "))
|
||||||
|
{echo "Table BDD OK <br>";
|
||||||
|
|
||||||
|
$dateHasard = mktime(0, 0, 0, 1, 1, 2016);
|
||||||
|
//echo $dateHasard;
|
||||||
|
//echo date("Y-m-d h:m:s",1451602800);
|
||||||
|
//format timeStamp MySQL : AAAA-MM-DD HH:MM:SS
|
||||||
|
// format timeStamp PHP : 1451602800
|
||||||
|
$ExtHasard;
|
||||||
|
$humidHasard;
|
||||||
|
for($Cmpt=25000;$Cmpt>1;$Cmpt--)
|
||||||
|
{
|
||||||
|
$dateHasard = $dateHasard + 900; // données tous les 15 mn
|
||||||
|
echo $dateHasard."<br>";
|
||||||
|
//echo date("Y-m-d h:i:s",$dateHasard)."<br>";
|
||||||
|
$ExtHasard=rand ( -5 , 30 );
|
||||||
|
$humidHasard=rand ( 30 , 80 );
|
||||||
|
$requete="INSERT INTO data (dateT,tempExt,humidExt) VALUES ('".$dateHasard."','".$ExtHasard."','".$humidHasard."')";
|
||||||
|
mysql_query($requete);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
echo "<p>Extraction des donnees impossible</p>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else // Sinon connexion base
|
||||||
|
{
|
||||||
|
echo " <p>Base de donnees introuvable <br></p>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
echo "<p> Connexion SERVEUR impossible <br></p>";
|
||||||
|
}
|
||||||
|
mysql_close($Numco);
|
||||||
|
?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
177
high/TP3.php
Normal file
177
high/TP3.php
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
<?php require("database.php"); ?>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||||
|
<script type="text/javascript" src="js/highcharts.js"></script>
|
||||||
|
<script type="text/javascript" src="js/grid.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$db->exec('USE texier');
|
||||||
|
|
||||||
|
try {
|
||||||
|
$bdd = $db->query('SELECT max(dateT) from data');
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
print "Erreur SQL !";
|
||||||
|
die();
|
||||||
|
}
|
||||||
|
$list=$bdd->fetch();
|
||||||
|
|
||||||
|
$stop=$list[0];
|
||||||
|
$start=$stop-(86400*2);
|
||||||
|
|
||||||
|
$bdd = $db->query("SELECT dateT, tempExt, humidExt FROM data WHERE dateT >= '".$start."' and dateT <= '".$stop."' ORDER BY dateT");
|
||||||
|
$i=0;
|
||||||
|
while ($list = $bdd->fetch(PDO::FETCH_ASSOC)) {
|
||||||
|
if (date("I",time()) == 0) {
|
||||||
|
$time[$i]=($list['dateT']+3600)*1000;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$time[$i]=($list['dateT']+7200)*1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
$tempExt[$i]=$list['tempExt']*1;
|
||||||
|
$humidExt[$i]=$list['humidExt']*1;
|
||||||
|
$i++;
|
||||||
|
}
|
||||||
|
$bdd = null;
|
||||||
|
?>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
eval(<?php echo "'var dateT = ".json_encode($time)."'" ?>);
|
||||||
|
eval(<?php echo "'var tempExt = ".json_encode($tempExt)."'" ?>);
|
||||||
|
eval(<?php echo "'var humidExt = ".json_encode($humidExt)."'" ?>);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
|
||||||
|
function comArr(unitsArray) {
|
||||||
|
var outarr = [];
|
||||||
|
for (var i = 0; i < dateT.length; i++) {
|
||||||
|
outarr[i] = [dateT[i], unitsArray[i]];
|
||||||
|
}
|
||||||
|
return outarr;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
Highcharts.setOptions({
|
||||||
|
lang: {
|
||||||
|
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
|
||||||
|
'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
|
||||||
|
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
|
||||||
|
shortMonths: ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil','Août', 'Sept', 'Oct', 'Nov', 'Déc'],
|
||||||
|
decimalPoint: ',',
|
||||||
|
resetZoom: 'Ré-initialiser zoom',
|
||||||
|
resetZoomTitle: 'Ré-initialiser zoom à 1:1',
|
||||||
|
downloadPNG: "Télécharger au format PNG image",
|
||||||
|
downloadJPEG: "Télécharger au format JPEG image",
|
||||||
|
downloadPDF: "Télécharger au format PDF document",
|
||||||
|
downloadSVG: "Télécharger au format SVG vector image",
|
||||||
|
exportButtonTitle: "Exporter image ou document",
|
||||||
|
printChart: "Imprimer le graphique",
|
||||||
|
loading: "Chargement...",
|
||||||
|
rangeSelectorFrom: 'Du',
|
||||||
|
rangeSelectorTo: 'au'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
chart = new Highcharts.Chart({
|
||||||
|
chart: {
|
||||||
|
renderTo: 'graphique',
|
||||||
|
zoomType: 'x',
|
||||||
|
type: 'spline',
|
||||||
|
marginBottom: 70,
|
||||||
|
marginLeft: 80,
|
||||||
|
defaultSeriesType: "spline",
|
||||||
|
alignTicks: false,
|
||||||
|
plotShadow: true,
|
||||||
|
plotBorderColor: '#346691',
|
||||||
|
plotBorderWidth: 1,
|
||||||
|
backgroundColor: {
|
||||||
|
linearGradient: [0, 0, 600, 600],
|
||||||
|
stops: [
|
||||||
|
[0, 'rgb(162, 192, 216)'],
|
||||||
|
[1, 'rgb(255, 255, 255)']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
credits: {
|
||||||
|
text: '© Texier Baptiste',
|
||||||
|
href: ''
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: 'Température',
|
||||||
|
x: -20
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
text: 'Source : Météo',
|
||||||
|
align: 'center',
|
||||||
|
x: -20
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
type: 'datetime',
|
||||||
|
startOnTick: false,
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Température (°C)'
|
||||||
|
},
|
||||||
|
plotLines: [{
|
||||||
|
value: 0,
|
||||||
|
width: 1,
|
||||||
|
color: '#FF0000'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
crosshairs:[true],
|
||||||
|
borderColor: '#4b85b7',
|
||||||
|
shared: true,
|
||||||
|
backgroundColor: '#edf1c8',
|
||||||
|
formatter: function() {
|
||||||
|
var s = '<b>'+ Highcharts.dateFormat('%e %B à %H:%M', this.x) +'</b>';
|
||||||
|
$.each(this.points, function(i, point) {
|
||||||
|
var unit = {
|
||||||
|
'Température': ' °C',
|
||||||
|
'Humidité': ' %'
|
||||||
|
}[this.point.series.name];
|
||||||
|
s = s + '<br>' + '<span style="color:'+ point.series.color +'"></span>'+ point.series.name + '<b> : '+Highcharts.numberFormat(point.y,1,","," ")+ '</b>' + unit;
|
||||||
|
});
|
||||||
|
return s;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Température',
|
||||||
|
zIndex: 1,
|
||||||
|
color: '#FF0000',
|
||||||
|
data: comArr(tempExt)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Humidité',
|
||||||
|
color: '#BD005C',
|
||||||
|
dashStyle: 'ShortDash',
|
||||||
|
data: comArr(humidExt)
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<br>
|
||||||
|
<center>
|
||||||
|
<h1>TP Texier</h1>
|
||||||
|
</center>
|
||||||
|
<br>
|
||||||
|
<div id="graphique" style="width: 550px; height:300px; margin: 0 auto;"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3
high/database.php
Normal file
3
high/database.php
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<?php
|
||||||
|
$db = new PDO("mysql:host=localhost", "root", "");
|
||||||
|
?>
|
||||||
BIN
high/highcharts/Highcharts-5.0.0.zip
Normal file
BIN
high/highcharts/Highcharts-5.0.0.zip
Normal file
Binary file not shown.
751
high/highcharts/api/css/api.css
Normal file
751
high/highcharts/api/css/api.css
Normal file
@ -0,0 +1,751 @@
|
|||||||
|
/*
|
||||||
|
Mobile first
|
||||||
|
_________
|
||||||
|
| _______ |
|
||||||
|
|| ||
|
||||||
|
|| ||
|
||||||
|
|| ||
|
||||||
|
|| ||
|
||||||
|
||_______||
|
||||||
|
|____O____|
|
||||||
|
*/
|
||||||
|
|
||||||
|
.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: 100%;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell.other-products {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
color: #eeeaea;
|
||||||
|
font-size: 0.9em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo {
|
||||||
|
height: 32px;
|
||||||
|
margin: 0 40px; /* avoid overlapping with sidebar button while still being centered */
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo img {
|
||||||
|
max-width: 200px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav-link {
|
||||||
|
z-index: 999999;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
transition: left 0.2s ease;
|
||||||
|
font-size: 30px;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px;
|
||||||
|
background: #252530;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-nav-link i {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search bar */
|
||||||
|
#search-div {
|
||||||
|
color: #252530;
|
||||||
|
display: block;
|
||||||
|
margin: 30px;
|
||||||
|
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: 300px;
|
||||||
|
max-width: 275px;
|
||||||
|
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 {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-copy,
|
||||||
|
#footer-social {
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrollTop:hover {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
==============
|
||||||
|
=== END Footer
|
||||||
|
==============
|
||||||
|
*/
|
||||||
|
|
||||||
|
#reference-loading {
|
||||||
|
margin-top: 300px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
===========
|
||||||
|
=== Wrapper
|
||||||
|
===========
|
||||||
|
*/
|
||||||
|
|
||||||
|
#splashText {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splashText h1 {
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splashText.section {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splashText img {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 {
|
||||||
|
font-weight: 100;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav h1 {
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav {
|
||||||
|
min-height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
overflow-x: scroll;
|
||||||
|
border-right: 1px solid silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide right border when sidebar is hidden */
|
||||||
|
.sidr.left {
|
||||||
|
left: -261px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fix bug in Firefox where fixed items do not update position when body moves */
|
||||||
|
body.sidr-open #sidebar-nav-link {
|
||||||
|
left: 261px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav-wrap {
|
||||||
|
width: 100%;
|
||||||
|
float: left;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav a,#nav a:visited {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0 2px;
|
||||||
|
margin: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-section {
|
||||||
|
position: relative;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 .menuitem a {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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: #eefdec;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav .plus {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: -12px;
|
||||||
|
top: 0;
|
||||||
|
width: 9px;
|
||||||
|
height: 9px;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
color: gray;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#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: 100%;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: 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 .title a.noChildren {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 .demo, .member .demo,
|
||||||
|
.section .see-also, .member .see-also {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
.section .demo h4, .member .demo h4,
|
||||||
|
.section .see-also h4, .section .see-also h4 {
|
||||||
|
color: #555;
|
||||||
|
font-style: italic;
|
||||||
|
font-size: 0.9em;
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.section h1,
|
||||||
|
.section .section-description,
|
||||||
|
.section .section-demo {
|
||||||
|
padding-left: 25px;
|
||||||
|
padding-right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h1 {
|
||||||
|
margin-top: 1em;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h1 span {
|
||||||
|
font-family: "Courier New", Courier, monospace;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
Scale up
|
||||||
|
/\
|
||||||
|
/ \
|
||||||
|
/ \
|
||||||
|
/ \
|
||||||
|
/ \
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
==============================
|
||||||
|
=== Fablets / Vertical tablets
|
||||||
|
==============================
|
||||||
|
*/
|
||||||
|
@media screen and (min-width: 479px) {
|
||||||
|
#footer-copy {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-social {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-autocomplete {
|
||||||
|
max-height: 500px;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
==============================
|
||||||
|
=== Larger tablets / Computers
|
||||||
|
==============================
|
||||||
|
*/
|
||||||
|
@media screen and (min-width: 767px) {
|
||||||
|
/* Hide the sidebar-link */
|
||||||
|
#sidebar-nav-link {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If sidr sidebar is visible while scaling up,
|
||||||
|
the page breaks. To avoid this, we counteract
|
||||||
|
the effects sidr is having on the body element: */
|
||||||
|
body {
|
||||||
|
left: 0 !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make nav and details share width 30/70 */
|
||||||
|
#nav-wrap {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
#details-wrap {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Left-align splash page title */
|
||||||
|
#splashText h1 {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Since sidr hides nav via fixed positioning,
|
||||||
|
we make its position static again */
|
||||||
|
#nav {
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
border-right: 1px solid silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make vertical space between items in nav smaller,
|
||||||
|
as user is likely to have a mouse at this screen size */
|
||||||
|
#nav .menuitem a {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-section {
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-div{
|
||||||
|
margin: 0 0 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell,
|
||||||
|
.cell.other-products {
|
||||||
|
width: 33%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell.other-products {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell.highcharts-link {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Remove space held for the sidebar button, as the sidebar button is no longer displayed */
|
||||||
|
#logo {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#scrollTop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#logo img {
|
||||||
|
margin: 15px 15px 15px 33px;
|
||||||
|
}
|
||||||
|
}
|
||||||
4
high/highcharts/api/css/font-awesome.min.css
vendored
Normal file
4
high/highcharts/api/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
high/highcharts/api/css/images/ui-bg_flat_75_ffffff_40x100.png
Normal file
BIN
high/highcharts/api/css/images/ui-bg_flat_75_ffffff_40x100.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 B |
BIN
high/highcharts/api/css/images/ui-bg_glass_75_dadada_1x400.png
Normal file
BIN
high/highcharts/api/css/images/ui-bg_glass_75_dadada_1x400.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
7
high/highcharts/api/css/jquery-ui.min.css
vendored
Normal file
7
high/highcharts/api/css/jquery-ui.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
high/highcharts/api/css/jquery.sidr.bare.css
Normal file
1
high/highcharts/api/css/jquery.sidr.bare.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
.sidr{display:block;position:fixed;top:0;height:100%;z-index:999999;width:260px;overflow-x:hidden;overflow-y:auto}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}
|
||||||
BIN
high/highcharts/api/fonts/fontawesome-webfont.woff
Normal file
BIN
high/highcharts/api/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
high/highcharts/api/fonts/fontawesome-webfont.woff2
Normal file
BIN
high/highcharts/api/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
130
high/highcharts/api/highcharts.html
Normal file
130
high/highcharts/api/highcharts.html
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
<!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">
|
||||||
|
<meta name="google-site-verification" content="Xw_doMm5E7oOphD3Yg6xBBWRXyFTfq78TkmClgnjKQE" />
|
||||||
|
<title>Highcharts API Reference</title>
|
||||||
|
|
||||||
|
<link href="css/font-awesome.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="css/jquery-ui.min.css" />
|
||||||
|
<link rel="stylesheet" href="css/jquery.sidr.bare.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/api.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 src="js/jquery.sidr.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var PRODUCTNAME = 'Highcharts'.toLowerCase(),
|
||||||
|
runDB = false,
|
||||||
|
PAGE = '',
|
||||||
|
CTXT = '';
|
||||||
|
</script>
|
||||||
|
<script src="js/api.js"
|
||||||
|
type="text/javascript"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="top">
|
||||||
|
<div class="container">
|
||||||
|
<a id="sidebar-nav-link" class="sidebar-nav-link" href="#nav"><i class="fa fa-bars" aria-hidden="true"></i></a>
|
||||||
|
<div class="cell highcharts-link">
|
||||||
|
<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 page-title" style="text-align: center;">
|
||||||
|
<h1>Options Reference v5.0.0</h1>
|
||||||
|
</div>
|
||||||
|
<div class="cell other-products 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">
|
||||||
|
<h1>Welcome to the Highcharts Options Reference</h1>
|
||||||
|
<p>These pages outline the chart configuration options, and the methods and properties of Highcharts objects.</p>
|
||||||
|
<p>Feel free to search this <a href="https://en.wikipedia.org/wiki/Application_programming_interface">API</a> through the search bar or the navigation tree in the <a class="sidebar-nav-link" href="#nav">sidebar</a>.</p>
|
||||||
|
</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>
|
||||||
54
high/highcharts/api/images/Highcharts.svg
Normal file
54
high/highcharts/api/images/Highcharts.svg
Normal file
@ -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"
|
||||||
|
viewBox="0 0 380 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 |
BIN
high/highcharts/api/images/apple-touch-icon-114x114.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-114x114.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-120x120.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-144x144.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-152x152.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.4 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-180x180.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-57x57.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-57x57.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-60x60.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-60x60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-72x72.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-72x72.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
high/highcharts/api/images/apple-touch-icon-76x76.png
Normal file
BIN
high/highcharts/api/images/apple-touch-icon-76x76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
high/highcharts/api/images/favicon-160x160.png
Normal file
BIN
high/highcharts/api/images/favicon-160x160.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
high/highcharts/api/images/favicon-16x16.png
Normal file
BIN
high/highcharts/api/images/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
high/highcharts/api/images/favicon-192x192.png
Normal file
BIN
high/highcharts/api/images/favicon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
high/highcharts/api/images/favicon-32x32.png
Normal file
BIN
high/highcharts/api/images/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
high/highcharts/api/images/favicon-96x96.png
Normal file
BIN
high/highcharts/api/images/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
high/highcharts/api/images/sprite.png
Normal file
BIN
high/highcharts/api/images/sprite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 445 B |
1170
high/highcharts/api/js/api.js
Normal file
1170
high/highcharts/api/js/api.js
Normal file
File diff suppressed because it is too large
Load Diff
2
high/highcharts/api/js/highcharts.json
Normal file
2
high/highcharts/api/js/highcharts.json
Normal file
File diff suppressed because one or more lines are too long
5
high/highcharts/api/js/jquery-1.11.3.min.js
vendored
Normal file
5
high/highcharts/api/js/jquery-1.11.3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
13
high/highcharts/api/js/jquery-ui.min.js
vendored
Normal file
13
high/highcharts/api/js/jquery-ui.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
4
high/highcharts/api/js/jquery.sidr.min.js
vendored
Normal file
4
high/highcharts/api/js/jquery.sidr.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
89
high/highcharts/examples/3d-column-interactive/index.htm
Normal file
89
high/highcharts/examples/3d-column-interactive/index.htm
Normal file
@ -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>
|
||||||
63
high/highcharts/examples/3d-column-null-values/index.htm
Normal file
63
high/highcharts/examples/3d-column-null-values/index.htm
Normal file
@ -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>
|
||||||
59
high/highcharts/examples/3d-pie-donut/index.htm
Normal file
59
high/highcharts/examples/3d-pie-donut/index.htm
Normal file
@ -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>
|
||||||
68
high/highcharts/examples/3d-pie/index.htm
Normal file
68
high/highcharts/examples/3d-pie/index.htm
Normal file
@ -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>
|
||||||
134
high/highcharts/examples/3d-scatter-draggable/index.htm
Normal file
134
high/highcharts/examples/3d-scatter-draggable/index.htm
Normal file
@ -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>
|
||||||
90
high/highcharts/examples/area-basic/index.htm
Normal file
90
high/highcharts/examples/area-basic/index.htm
Normal file
@ -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>
|
||||||
83
high/highcharts/examples/area-inverted/index.htm
Normal file
83
high/highcharts/examples/area-inverted/index.htm
Normal file
@ -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>
|
||||||
83
high/highcharts/examples/area-missing/index.htm
Normal file
83
high/highcharts/examples/area-missing/index.htm
Normal file
@ -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>
|
||||||
47
high/highcharts/examples/area-negative/index.htm
Normal file
47
high/highcharts/examples/area-negative/index.htm
Normal file
@ -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>
|
||||||
77
high/highcharts/examples/area-stacked-percent/index.htm
Normal file
77
high/highcharts/examples/area-stacked-percent/index.htm
Normal file
@ -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/>',
|
||||||
|
split: 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>
|
||||||
82
high/highcharts/examples/area-stacked/index.htm
Normal file
82
high/highcharts/examples/area-stacked/index.htm
Normal file
@ -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: {
|
||||||
|
split: 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>
|
||||||
138
high/highcharts/examples/arearange-line/index.htm
Normal file
138
high/highcharts/examples/arearange-line/index.htm
Normal file
@ -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>
|
||||||
65
high/highcharts/examples/arearange/index.htm
Normal file
65
high/highcharts/examples/arearange/index.htm
Normal file
@ -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; max-width: 800px; height: 400px; margin: 0 auto"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
81
high/highcharts/examples/areaspline/index.htm
Normal file
81
high/highcharts/examples/areaspline/index.htm
Normal file
@ -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>
|
||||||
84
high/highcharts/examples/bar-basic/index.htm
Normal file
84
high/highcharts/examples/bar-basic/index.htm
Normal file
@ -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>
|
||||||
94
high/highcharts/examples/bar-negative-stack/index.htm
Normal file
94
high/highcharts/examples/bar-negative-stack/index.htm
Normal file
@ -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>
|
||||||
58
high/highcharts/examples/bar-stacked/index.htm
Normal file
58
high/highcharts/examples/bar-stacked/index.htm
Normal file
@ -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>
|
||||||
95
high/highcharts/examples/box-plot/index.htm
Normal file
95
high/highcharts/examples/box-plot/index.htm
Normal file
@ -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>
|
||||||
98
high/highcharts/examples/bubble-3d/index.htm
Normal file
98
high/highcharts/examples/bubble-3d/index.htm
Normal file
@ -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>
|
||||||
138
high/highcharts/examples/bubble/index.htm
Normal file
138
high/highcharts/examples/bubble/index.htm
Normal file
@ -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>
|
||||||
88
high/highcharts/examples/column-basic/index.htm
Normal file
88
high/highcharts/examples/column-basic/index.htm
Normal file
@ -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>
|
||||||
275
high/highcharts/examples/column-drilldown/index.htm
Normal file
275
high/highcharts/examples/column-drilldown/index.htm
Normal file
@ -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>
|
||||||
47
high/highcharts/examples/column-negative/index.htm
Normal file
47
high/highcharts/examples/column-negative/index.htm
Normal file
@ -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>
|
||||||
83
high/highcharts/examples/column-parsed/index.htm
Normal file
83
high/highcharts/examples/column-parsed/index.htm
Normal file
@ -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>
|
||||||
97
high/highcharts/examples/column-placement/index.htm
Normal file
97
high/highcharts/examples/column-placement/index.htm
Normal file
@ -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>
|
||||||
93
high/highcharts/examples/column-rotated-labels/index.htm
Normal file
93
high/highcharts/examples/column-rotated-labels/index.htm
Normal file
@ -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>
|
||||||
59
high/highcharts/examples/column-stacked-percent/index.htm
Normal file
59
high/highcharts/examples/column-stacked-percent/index.htm
Normal file
@ -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>
|
||||||
81
high/highcharts/examples/column-stacked/index.htm
Normal file
81
high/highcharts/examples/column-stacked/index.htm
Normal file
@ -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: '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'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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>
|
||||||
89
high/highcharts/examples/columnrange/index.htm
Normal file
89
high/highcharts/examples/columnrange/index.htm
Normal file
@ -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>
|
||||||
96
high/highcharts/examples/combo-dual-axes/index.htm
Normal file
96
high/highcharts/examples/combo-dual-axes/index.htm
Normal file
@ -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>
|
||||||
153
high/highcharts/examples/combo-histogram/index.htm
Normal file
153
high/highcharts/examples/combo-histogram/index.htm
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
<!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 {
|
||||||
|
max-width: 800px;
|
||||||
|
height: 400px;
|
||||||
|
margin: 1em auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script type="text/javascript">
|
||||||
|
$(function () {
|
||||||
|
|
||||||
|
var data = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
|
||||||
|
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
|
||||||
|
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
|
||||||
|
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
|
||||||
|
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
|
||||||
|
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
|
||||||
|
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
|
||||||
|
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
|
||||||
|
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
|
||||||
|
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
|
||||||
|
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
|
||||||
|
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
|
||||||
|
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
|
||||||
|
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
|
||||||
|
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
|
||||||
|
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
|
||||||
|
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
|
||||||
|
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
|
||||||
|
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
|
||||||
|
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
|
||||||
|
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
|
||||||
|
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
|
||||||
|
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
|
||||||
|
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
|
||||||
|
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
|
||||||
|
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
|
||||||
|
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
|
||||||
|
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
|
||||||
|
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
|
||||||
|
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
|
||||||
|
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
|
||||||
|
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
|
||||||
|
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
|
||||||
|
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
|
||||||
|
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
|
||||||
|
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
|
||||||
|
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
|
||||||
|
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
|
||||||
|
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
|
||||||
|
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
|
||||||
|
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
|
||||||
|
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
|
||||||
|
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
|
||||||
|
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
|
||||||
|
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
|
||||||
|
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
|
||||||
|
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
|
||||||
|
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
|
||||||
|
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
|
||||||
|
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
|
||||||
|
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
|
||||||
|
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get histogram data out of xy data
|
||||||
|
* @param {Array} data Array of tuples [x, y]
|
||||||
|
* @param {Number} step Resolution for the histogram
|
||||||
|
* @returns {Array} Histogram data
|
||||||
|
*/
|
||||||
|
function histogram(data, step) {
|
||||||
|
var histo = {},
|
||||||
|
x,
|
||||||
|
i,
|
||||||
|
arr = [];
|
||||||
|
|
||||||
|
// Group down
|
||||||
|
for (i = 0; i < data.length; i++) {
|
||||||
|
x = Math.floor(data[i][0] / step) * step;
|
||||||
|
if (!histo[x]) {
|
||||||
|
histo[x] = 0;
|
||||||
|
}
|
||||||
|
histo[x]++;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Make the histo group into an array
|
||||||
|
for (x in histo) {
|
||||||
|
if (histo.hasOwnProperty((x))) {
|
||||||
|
arr.push([parseFloat(x), histo[x]]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Finally, sort the array
|
||||||
|
arr.sort(function (a, b) {
|
||||||
|
return a[0] - b[0];
|
||||||
|
});
|
||||||
|
|
||||||
|
return arr;
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#container').highcharts({
|
||||||
|
chart: {
|
||||||
|
type: 'column'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'Highcharts Histogram'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
gridLineWidth: 1
|
||||||
|
},
|
||||||
|
yAxis: [{
|
||||||
|
title: {
|
||||||
|
text: 'Histogram Count'
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
opposite: true,
|
||||||
|
title: {
|
||||||
|
text: 'Y value'
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
series: [{
|
||||||
|
name: 'Histogram',
|
||||||
|
type: 'column',
|
||||||
|
data: histogram(data, 10),
|
||||||
|
pointPadding: 0,
|
||||||
|
groupPadding: 0,
|
||||||
|
pointPlacement: 'between'
|
||||||
|
}, {
|
||||||
|
name: 'XY data',
|
||||||
|
type: 'scatter',
|
||||||
|
data: data,
|
||||||
|
yAxis: 1,
|
||||||
|
marker: {
|
||||||
|
radius: 1.5
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||||
|
<div id="container"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
791
high/highcharts/examples/combo-meteogram/index.htm
Normal file
791
high/highcharts/examples/combo-meteogram/index.htm
Normal file
@ -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>
|
||||||
129
high/highcharts/examples/combo-multi-axes/index.htm
Normal file
129
high/highcharts/examples/combo-multi-axes/index.htm
Normal file
@ -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>
|
||||||
56
high/highcharts/examples/combo-regression/index.htm
Normal file
56
high/highcharts/examples/combo-regression/index.htm
Normal file
@ -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>
|
||||||
422
high/highcharts/examples/combo-timeline/index.htm
Normal file
422
high/highcharts/examples/combo-timeline/index.htm
Normal file
@ -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>
|
||||||
87
high/highcharts/examples/combo/index.htm
Normal file
87
high/highcharts/examples/combo/index.htm
Normal file
@ -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>
|
||||||
89
high/highcharts/examples/dynamic-click-to-add/index.htm
Normal file
89
high/highcharts/examples/dynamic-click-to-add/index.htm
Normal file
@ -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>
|
||||||
260
high/highcharts/examples/dynamic-master-detail/index.htm
Normal file
260
high/highcharts/examples/dynamic-master-detail/index.htm
Normal file
@ -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>
|
||||||
97
high/highcharts/examples/dynamic-update/index.htm
Normal file
97
high/highcharts/examples/dynamic-update/index.htm
Normal file
@ -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>
|
||||||
98
high/highcharts/examples/error-bar/index.htm
Normal file
98
high/highcharts/examples/error-bar/index.htm
Normal file
@ -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>
|
||||||
64
high/highcharts/examples/funnel/index.htm
Normal file
64
high/highcharts/examples/funnel/index.htm
Normal file
@ -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>
|
||||||
191
high/highcharts/examples/gauge-activity/index.htm
Normal file
191
high/highcharts/examples/gauge-activity/index.htm
Normal file
@ -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) {
|
||||||
|
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>
|
||||||
206
high/highcharts/examples/gauge-clock/index.htm
Normal file
206
high/highcharts/examples/gauge-clock/index.htm
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
<!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();
|
||||||
|
|
||||||
|
if (chart.axes) { // not destroyed
|
||||||
|
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>
|
||||||
126
high/highcharts/examples/gauge-dual/index.htm
Normal file
126
high/highcharts/examples/gauge-dual/index.htm
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
<!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 () {
|
||||||
|
if (chart.axes) { // not destroyed
|
||||||
|
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>
|
||||||
176
high/highcharts/examples/gauge-solid/index.htm
Normal file
176
high/highcharts/examples/gauge-solid/index.htm
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
<!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-yaxis-grid .highcharts-grid-line {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</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,
|
||||||
|
tickAmount: 2,
|
||||||
|
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
|
||||||
|
setInterval(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>
|
||||||
137
high/highcharts/examples/gauge-speedometer/index.htm
Normal file
137
high/highcharts/examples/gauge-speedometer/index.htm
Normal file
@ -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>
|
||||||
157
high/highcharts/examples/gauge-vu-meter/index.htm
Normal file
157
high/highcharts/examples/gauge-vu-meter/index.htm
Normal file
@ -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>
|
||||||
8951
high/highcharts/examples/heatmap-canvas/index.htm
Normal file
8951
high/highcharts/examples/heatmap-canvas/index.htm
Normal file
File diff suppressed because it is too large
Load Diff
81
high/highcharts/examples/heatmap/index.htm
Normal file
81
high/highcharts/examples/heatmap/index.htm
Normal file
@ -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: 'heatmap',
|
||||||
|
marginTop: 40,
|
||||||
|
marginBottom: 80,
|
||||||
|
plotBorderWidth: 1
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: 'Sales per employee per weekday'
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
|
||||||
|
},
|
||||||
|
|
||||||
|
yAxis: {
|
||||||
|
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
||||||
|
title: null
|
||||||
|
},
|
||||||
|
|
||||||
|
colorAxis: {
|
||||||
|
min: 0,
|
||||||
|
minColor: '#FFFFFF',
|
||||||
|
maxColor: Highcharts.getOptions().colors[0]
|
||||||
|
},
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
align: 'right',
|
||||||
|
layout: 'vertical',
|
||||||
|
margin: 0,
|
||||||
|
verticalAlign: 'top',
|
||||||
|
y: 25,
|
||||||
|
symbolHeight: 280
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
formatter: function () {
|
||||||
|
return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
|
||||||
|
this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [{
|
||||||
|
name: 'Sales per employee',
|
||||||
|
borderWidth: 1,
|
||||||
|
data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
color: '#000000'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||||||
|
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
|
||||||
|
<script src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
135
high/highcharts/examples/line-ajax/index.htm
Normal file
135
high/highcharts/examples/line-ajax/index.htm
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
<!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 CSV and create the chart
|
||||||
|
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {
|
||||||
|
|
||||||
|
$('#container').highcharts({
|
||||||
|
|
||||||
|
data: {
|
||||||
|
csv: csv
|
||||||
|
},
|
||||||
|
|
||||||
|
title: {
|
||||||
|
text: 'Daily visits at www.highcharts.com'
|
||||||
|
},
|
||||||
|
|
||||||
|
subtitle: {
|
||||||
|
text: 'Source: Google Analytics'
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
tickInterval: 7 * 24 * 3600 * 1000, // one week
|
||||||
|
tickWidth: 0,
|
||||||
|
gridLineWidth: 1,
|
||||||
|
labels: {
|
||||||
|
align: 'left',
|
||||||
|
x: 3,
|
||||||
|
y: -3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
yAxis: [{ // left y axis
|
||||||
|
title: {
|
||||||
|
text: null
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
align: 'left',
|
||||||
|
x: 3,
|
||||||
|
y: 16,
|
||||||
|
format: '{value:.,0f}'
|
||||||
|
},
|
||||||
|
showFirstLabel: false
|
||||||
|
}, { // right y axis
|
||||||
|
linkedTo: 0,
|
||||||
|
gridLineWidth: 0,
|
||||||
|
opposite: true,
|
||||||
|
title: {
|
||||||
|
text: null
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
align: 'right',
|
||||||
|
x: -3,
|
||||||
|
y: 16,
|
||||||
|
format: '{value:.,0f}'
|
||||||
|
},
|
||||||
|
showFirstLabel: false
|
||||||
|
}],
|
||||||
|
|
||||||
|
legend: {
|
||||||
|
align: 'left',
|
||||||
|
verticalAlign: 'top',
|
||||||
|
y: 20,
|
||||||
|
floating: true,
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
shared: true,
|
||||||
|
crosshairs: true
|
||||||
|
},
|
||||||
|
|
||||||
|
plotOptions: {
|
||||||
|
series: {
|
||||||
|
cursor: 'pointer',
|
||||||
|
point: {
|
||||||
|
events: {
|
||||||
|
click: function (e) {
|
||||||
|
hs.htmlExpand(null, {
|
||||||
|
pageOrigin: {
|
||||||
|
x: e.pageX || e.clientX,
|
||||||
|
y: e.pageY || e.clientY
|
||||||
|
},
|
||||||
|
headingText: this.series.name,
|
||||||
|
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
|
||||||
|
this.y + ' visits',
|
||||||
|
width: 200
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
marker: {
|
||||||
|
lineWidth: 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [{
|
||||||
|
name: 'All visits',
|
||||||
|
lineWidth: 4,
|
||||||
|
marker: {
|
||||||
|
radius: 4
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: 'New visitors'
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<!-- Additional files for the Highslide popup effect -->
|
||||||
|
<script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
|
||||||
|
<script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css" />
|
||||||
|
|
||||||
|
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
69
high/highcharts/examples/line-basic/index.htm
Normal file
69
high/highcharts/examples/line-basic/index.htm
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!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: 'Monthly Average Temperature',
|
||||||
|
x: -20 //center
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
text: 'Source: WorldClimate.com',
|
||||||
|
x: -20
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||||
|
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Temperature (°C)'
|
||||||
|
},
|
||||||
|
plotLines: [{
|
||||||
|
value: 0,
|
||||||
|
width: 1,
|
||||||
|
color: '#808080'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
valueSuffix: '°C'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
layout: 'vertical',
|
||||||
|
align: 'right',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
borderWidth: 0
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'Tokyo',
|
||||||
|
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]
|
||||||
|
}, {
|
||||||
|
name: 'New York',
|
||||||
|
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
|
||||||
|
}, {
|
||||||
|
name: 'Berlin',
|
||||||
|
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
|
||||||
|
}, {
|
||||||
|
name: 'London',
|
||||||
|
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</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>
|
||||||
57
high/highcharts/examples/line-labels/index.htm
Normal file
57
high/highcharts/examples/line-labels/index.htm
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!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: 'line'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'Monthly Average Temperature'
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
text: 'Source: WorldClimate.com'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Temperature (°C)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
line: {
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true
|
||||||
|
},
|
||||||
|
enableMouseTracking: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'Tokyo',
|
||||||
|
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
|
||||||
|
}, {
|
||||||
|
name: 'London',
|
||||||
|
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</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>
|
||||||
48
high/highcharts/examples/line-log-axis/index.htm
Normal file
48
high/highcharts/examples/line-log-axis/index.htm
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
<!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: 'Logarithmic axis demo'
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis: {
|
||||||
|
tickInterval: 1
|
||||||
|
},
|
||||||
|
|
||||||
|
yAxis: {
|
||||||
|
type: 'logarithmic',
|
||||||
|
minorTickInterval: 0.1
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
headerFormat: '<b>{series.name}</b><br />',
|
||||||
|
pointFormat: 'x = {point.x}, y = {point.y}'
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [{
|
||||||
|
data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
|
||||||
|
pointStart: 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>
|
||||||
81
high/highcharts/examples/line-time-series/index.htm
Normal file
81
high/highcharts/examples/line-time-series/index.htm
Normal file
@ -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 () {
|
||||||
|
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
|
||||||
|
|
||||||
|
$('#container').highcharts({
|
||||||
|
chart: {
|
||||||
|
zoomType: 'x'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'USD to EUR exchange rate over time'
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
text: document.ontouchstart === undefined ?
|
||||||
|
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'datetime'
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Exchange rate'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
area: {
|
||||||
|
fillColor: {
|
||||||
|
linearGradient: {
|
||||||
|
x1: 0,
|
||||||
|
y1: 0,
|
||||||
|
x2: 0,
|
||||||
|
y2: 1
|
||||||
|
},
|
||||||
|
stops: [
|
||||||
|
[0, Highcharts.getOptions().colors[0]],
|
||||||
|
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
|
||||||
|
]
|
||||||
|
},
|
||||||
|
marker: {
|
||||||
|
radius: 2
|
||||||
|
},
|
||||||
|
lineWidth: 1,
|
||||||
|
states: {
|
||||||
|
hover: {
|
||||||
|
lineWidth: 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
threshold: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [{
|
||||||
|
type: 'area',
|
||||||
|
name: 'USD to EUR',
|
||||||
|
data: 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>
|
||||||
75
high/highcharts/examples/pie-basic/index.htm
Normal file
75
high/highcharts/examples/pie-basic/index.htm
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<!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: {
|
||||||
|
plotBackgroundColor: null,
|
||||||
|
plotBorderWidth: null,
|
||||||
|
plotShadow: false,
|
||||||
|
type: 'pie'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'Browser market shares January, 2015 to May, 2015'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
allowPointSelect: true,
|
||||||
|
cursor: 'pointer',
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
|
||||||
|
style: {
|
||||||
|
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'Brands',
|
||||||
|
colorByPoint: true,
|
||||||
|
data: [{
|
||||||
|
name: 'Microsoft Internet Explorer',
|
||||||
|
y: 56.33
|
||||||
|
}, {
|
||||||
|
name: 'Chrome',
|
||||||
|
y: 24.03,
|
||||||
|
sliced: true,
|
||||||
|
selected: true
|
||||||
|
}, {
|
||||||
|
name: 'Firefox',
|
||||||
|
y: 10.38
|
||||||
|
}, {
|
||||||
|
name: 'Safari',
|
||||||
|
y: 4.77
|
||||||
|
}, {
|
||||||
|
name: 'Opera',
|
||||||
|
y: 0.91
|
||||||
|
}, {
|
||||||
|
name: 'Proprietary or Undetectable',
|
||||||
|
y: 0.2
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</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>
|
||||||
163
high/highcharts/examples/pie-donut/index.htm
Normal file
163
high/highcharts/examples/pie-donut/index.htm
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
<!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 colors = Highcharts.getOptions().colors,
|
||||||
|
categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'],
|
||||||
|
data = [{
|
||||||
|
y: 56.33,
|
||||||
|
color: colors[0],
|
||||||
|
drilldown: {
|
||||||
|
name: 'MSIE versions',
|
||||||
|
categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0', 'MSIE 10.0', 'MSIE 11.0'],
|
||||||
|
data: [1.06, 0.5, 17.2, 8.11, 5.33, 24.13],
|
||||||
|
color: colors[0]
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
y: 10.38,
|
||||||
|
color: colors[1],
|
||||||
|
drilldown: {
|
||||||
|
name: 'Firefox versions',
|
||||||
|
categories: ['Firefox v31', 'Firefox v32', 'Firefox v33', 'Firefox v35', 'Firefox v36', 'Firefox v37', 'Firefox v38'],
|
||||||
|
data: [0.33, 0.15, 0.22, 1.27, 2.76, 2.32, 2.31, 1.02],
|
||||||
|
color: colors[1]
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
y: 24.03,
|
||||||
|
color: colors[2],
|
||||||
|
drilldown: {
|
||||||
|
name: 'Chrome versions',
|
||||||
|
categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0', 'Chrome v33.0', 'Chrome v34.0',
|
||||||
|
'Chrome v35.0', 'Chrome v36.0', 'Chrome v37.0', 'Chrome v38.0', 'Chrome v39.0', 'Chrome v40.0', 'Chrome v41.0', 'Chrome v42.0', 'Chrome v43.0'
|
||||||
|
],
|
||||||
|
data: [0.14, 1.24, 0.55, 0.19, 0.14, 0.85, 2.53, 0.38, 0.6, 2.96, 5, 4.32, 3.68, 1.45],
|
||||||
|
color: colors[2]
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
y: 4.77,
|
||||||
|
color: colors[3],
|
||||||
|
drilldown: {
|
||||||
|
name: 'Safari versions',
|
||||||
|
categories: ['Safari v5.0', 'Safari v5.1', 'Safari v6.1', 'Safari v6.2', 'Safari v7.0', 'Safari v7.1', 'Safari v8.0'],
|
||||||
|
data: [0.3, 0.42, 0.29, 0.17, 0.26, 0.77, 2.56],
|
||||||
|
color: colors[3]
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
y: 0.91,
|
||||||
|
color: colors[4],
|
||||||
|
drilldown: {
|
||||||
|
name: 'Opera versions',
|
||||||
|
categories: ['Opera v12.x', 'Opera v27', 'Opera v28', 'Opera v29'],
|
||||||
|
data: [0.34, 0.17, 0.24, 0.16],
|
||||||
|
color: colors[4]
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
y: 0.2,
|
||||||
|
color: colors[5],
|
||||||
|
drilldown: {
|
||||||
|
name: 'Proprietary or Undetectable',
|
||||||
|
categories: [],
|
||||||
|
data: [],
|
||||||
|
color: colors[5]
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
browserData = [],
|
||||||
|
versionsData = [],
|
||||||
|
i,
|
||||||
|
j,
|
||||||
|
dataLen = data.length,
|
||||||
|
drillDataLen,
|
||||||
|
brightness;
|
||||||
|
|
||||||
|
|
||||||
|
// Build the data arrays
|
||||||
|
for (i = 0; i < dataLen; i += 1) {
|
||||||
|
|
||||||
|
// add browser data
|
||||||
|
browserData.push({
|
||||||
|
name: categories[i],
|
||||||
|
y: data[i].y,
|
||||||
|
color: data[i].color
|
||||||
|
});
|
||||||
|
|
||||||
|
// add version data
|
||||||
|
drillDataLen = data[i].drilldown.data.length;
|
||||||
|
for (j = 0; j < drillDataLen; j += 1) {
|
||||||
|
brightness = 0.2 - (j / drillDataLen) / 5;
|
||||||
|
versionsData.push({
|
||||||
|
name: data[i].drilldown.categories[j],
|
||||||
|
y: data[i].drilldown.data[j],
|
||||||
|
color: Highcharts.Color(data[i].color).brighten(brightness).get()
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create the chart
|
||||||
|
$('#container').highcharts({
|
||||||
|
chart: {
|
||||||
|
type: 'pie'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
text: 'Browser market share, January, 2015 to May, 2015'
|
||||||
|
},
|
||||||
|
subtitle: {
|
||||||
|
text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>'
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
title: {
|
||||||
|
text: 'Total percent market share'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
pie: {
|
||||||
|
shadow: false,
|
||||||
|
center: ['50%', '50%']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
valueSuffix: '%'
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
name: 'Browsers',
|
||||||
|
data: browserData,
|
||||||
|
size: '60%',
|
||||||
|
dataLabels: {
|
||||||
|
formatter: function () {
|
||||||
|
return this.y > 5 ? this.point.name : null;
|
||||||
|
},
|
||||||
|
color: '#ffffff',
|
||||||
|
distance: -30
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: 'Versions',
|
||||||
|
data: versionsData,
|
||||||
|
size: '80%',
|
||||||
|
innerSize: '60%',
|
||||||
|
dataLabels: {
|
||||||
|
formatter: function () {
|
||||||
|
// display only if larger than 1
|
||||||
|
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</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="width: 600px; height: 400px; margin: 0 auto"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user