1.1 修改ip数据库为ipip.net 部分细节优化

This commit is contained in:
空樱酱 2016-03-28 14:45:00 +08:00
parent aa6428bc92
commit 1326571cbf
86 changed files with 322 additions and 20006 deletions

View File

@ -11,31 +11,33 @@ class Access_Extend
private static $_instance = null;
public $action;
public $title;
public $logs = array();
public $logs = array();
public $overview = array();
public function __construct()
{
$this->db = Typecho_Db::get();
$this->prefix = $this->db->getPrefix();
$this->table = $this->prefix . 'access';
$this->config = Typecho_Widget::widget('Widget_Options')->plugin('Access');
$this->request = Typecho_Request::getInstance();
$this->db = Typecho_Db::get();
$this->prefix = $this->db->getPrefix();
$this->table = $this->prefix . 'access';
$this->config = Typecho_Widget::widget('Widget_Options')->plugin('Access');
$this->request = Typecho_Request::getInstance();
$this->pageSize = $this->config->pageSize;
$this->isDrop = $this->config->isDrop;
if ($this->pageSize == null || $this->isDrop == null) {
$this->isDrop = $this->config->isDrop;
if ($this->pageSize == null || $this->isDrop == null)
{
throw new Typecho_Plugin_Exception('请先设置插件!');
}
switch ($this->request->get('action')) {
switch ($this->request->get('action'))
{
case 'logs':
default:
$this->action = 'logs';
$this->title = '访问日志';
$this->title = '访问日志';
$this->parseLogs();
break;
case 'overview':
$this->action = 'overview';
$this->title = '访问概览';
$this->title = '访问概览';
$this->parseOverview();
break;
}
@ -90,7 +92,8 @@ class Access_Extend
public static function getInstance()
{
if (!(self::$_instance instanceof self)) {
if (!(self::$_instance instanceof self))
{
self::$_instance = new self();
}
return self::$_instance;
@ -99,87 +102,152 @@ class Access_Extend
public function parseUA($ua)
{
$os = null;
if ($this->isSpider($ua)) {
if ($this->isSpider($ua))
{
$os = '爬虫';
} elseif (preg_match('/Windows NT 6.0/i', $ua)) {
}
elseif (preg_match('/Windows NT 6.0/i', $ua))
{
$os = "Windows Vista";
} elseif (preg_match('/Windows NT 6.1/i', $ua)) {
}
elseif (preg_match('/Windows NT 6.1/i', $ua))
{
$os = "Windows 7";
} elseif (preg_match('/Windows NT 6.2/i', $ua)) {
}
elseif (preg_match('/Windows NT 6.2/i', $ua))
{
$os = "Windows 8";
} elseif (preg_match('/Windows NT 6.3/i', $ua)) {
}
elseif (preg_match('/Windows NT 6.3/i', $ua))
{
$os = "Windows 8.1";
} elseif (preg_match('/Windows NT 10.0/i', $ua)) {
}
elseif (preg_match('/Windows NT 10.0/i', $ua))
{
$os = "Windows 10";
} elseif (preg_match('/Windows NT 5.1/i', $ua)) {
}
elseif (preg_match('/Windows NT 5.1/i', $ua))
{
$os = "Windows XP";
} elseif (preg_match('/Windows NT 5.2/i', $ua) && preg_match('/Win64/i', $ua)) {
}
elseif (preg_match('/Windows NT 5.2/i', $ua) && preg_match('/Win64/i', $ua))
{
$os = "Windows XP 64 bit";
} elseif (preg_match('/Android ([0-9.]+)/i', $ua, $matches)) {
}
elseif (preg_match('/Android ([0-9.]+)/i', $ua, $matches))
{
$os = "Android " . $matches[1];
} elseif (preg_match('/iPhone OS ([_0-9]+)/i', $ua, $matches)) {
}
elseif (preg_match('/iPhone OS ([_0-9]+)/i', $ua, $matches))
{
$os = 'iPhone ' . $matches[1];
} elseif (preg_match('/Ubuntu/i', $ua, $matches)) {
}
elseif (preg_match('/Ubuntu/i', $ua, $matches))
{
$os = 'Ubuntu ';
} elseif (preg_match('/Mac OS X ([0-9_]+)/i', $ua, $matches)) {
}
elseif (preg_match('/Mac OS X ([0-9_]+)/i', $ua, $matches))
{
$os = 'Mac OS ' . $matches[1];
} elseif (preg_match('/Linux/i', $ua, $matches)) {
}
elseif (preg_match('/Linux/i', $ua, $matches))
{
$os = 'Linux';
} else {
}
else
{
$os = '未知';
}
if ($this->isSpider($ua)) {
if ($this->isSpider($ua))
{
$browser = '爬虫';
} elseif (preg_match('#(Camino|Chimera)[ /]([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#(Camino|Chimera)[ /]([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'Camino ' . $matches[2];
} elseif (preg_match('#SE 2([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#SE 2([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = '搜狗浏览器 2' . $matches[1];
} elseif (preg_match('#360([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#360([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = '360浏览器 ' . $matches[1];
} elseif (preg_match('#Maxthon( |\/)([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#Maxthon( |\/)([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'Maxthon ' . $matches[2];
} elseif (preg_match('#Chrome/([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#Chrome/([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'Chrome ' . $matches[1];
} elseif (preg_match('#XiaoMi/MiuiBrowser/([0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#XiaoMi/MiuiBrowser/([0-9.]+)#i', $ua, $matches))
{
$browser = '小米浏览器 ' . $matches[1];
} elseif (preg_match('#Safari/([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#Safari/([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'Safari ' . $matches[1];
} elseif (preg_match('#opera mini#i', $ua)) {
}
elseif (preg_match('#opera mini#i', $ua))
{
preg_match('#Opera/([a-zA-Z0-9.]+)#i', $ua, $matches);
$browser = 'Opera Mini ' . $matches[1];
} elseif (preg_match('#Opera.([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#Opera.([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'Opera ' . $matches[1];
} elseif (preg_match('#TencentTraveler ([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#TencentTraveler ([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = '腾讯TT浏览器 ' . $matches[1];
} elseif (preg_match('#UCWEB([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#UCWEB([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'UCWEB ' . $matches[1];
} elseif (preg_match('#MSIE ([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#MSIE ([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'Internet Explorer ' . $matches[1];
} elseif (preg_match('#Trident#', $ua, $matches)) {
}
elseif (preg_match('#Trident#', $ua, $matches))
{
$browser = 'Internet Explorer 11';
} elseif (preg_match('#Edge/12.0#i', $ua, $matches)) {
}
elseif (preg_match('#Edge/12.0#i', $ua, $matches))
{
//win10中spartan浏览器
$browser = 'Spartan';
} elseif (preg_match('#(Firefox|Phoenix|Firebird|BonEcho|GranParadiso|Minefield|Iceweasel)/([a-zA-Z0-9.]+)#i', $ua, $matches)) {
}
elseif (preg_match('#(Firefox|Phoenix|Firebird|BonEcho|GranParadiso|Minefield|Iceweasel)/([a-zA-Z0-9.]+)#i', $ua, $matches))
{
$browser = 'Firefox ' . $matches[2];
} else {
}
else
{
$browser = '未知';
}
return $os . " | " . $browser;
return $os . " / " . $browser;
}
public function isSpider($ua)
{
$ua = strtolower($ua);
if (!empty($ua)) {
foreach ($this->spiderArray as $val) {
if (!empty($ua))
{
foreach ($this->spiderArray as $val)
{
$str = strtolower($val);
if (strpos($ua, $str) !== false) {
if (strpos($ua, $str) !== false)
{
return true;
}
}
} else {
}
else
{
return false;
}
}
@ -187,11 +255,13 @@ class Access_Extend
protected function getWhere($type)
{
$where_str = '';
foreach ($this->spiderArray as $value) {
foreach ($this->spiderArray as $value)
{
$where_str .= "ua {1} LIKE " . "'%{$value}%' {2} ";
}
$where_str = rtrim($where_str, '{2} ');
switch ($type) {
switch ($type)
{
case 1:
$where = str_replace('{1}', 'NOT', $where_str);
$where = str_replace('{2}', 'and', $where);
@ -211,36 +281,36 @@ class Access_Extend
protected function parseLogs()
{
$type = $this->request->get('type', 1);
$p = $this->request->get('page', 1);
$type = $this->request->get('type', 1);
$p = $this->request->get('page', 1);
$offset = (max(intval($p), 1) - 1) * $this->pageSize;
$where = $this->getWhere($type);
$where = $this->getWhere($type);
$this->logs['list'] = $this->db->fetchAll("SELECT * FROM {$this->table} {$where} ORDER BY id DESC LIMIT {$this->pageSize} OFFSET {$offset}");
$this->logs['rows'] = count($this->db->fetchAll("SELECT * FROM {$this->table} {$where}"));
include_once dirname(__FILE__) . '/lib/Page.php';
$pager = new Page($this->pageSize, $this->logs['rows'], $p, 10);
$pager = new Page($this->pageSize, $this->logs['rows'], $p, 10);
$this->logs['page'] = $pager->show();
}
protected function parseOverview()
{
//$where = $this->getWhere(1);
$where = 'WHERE 1=1';
$this->overview['ip']['today']['total'] = 0;
$this->overview['uv']['today']['total'] = 0;
$this->overview['pv']['today']['total'] = 0;
$this->overview['ip']['today']['total'] = 0;
$this->overview['uv']['today']['total'] = 0;
$this->overview['pv']['today']['total'] = 0;
$this->overview['ip']['yesterday']['total'] = 0;
$this->overview['uv']['yesterday']['total'] = 0;
$this->overview['pv']['yesterday']['total'] = 0;
for ($i = 0; $i < 24; $i++) {
$today = date("Y-m-d");
$start = strtotime(date("{$today} {$i}:00:00"));
$end = strtotime(date("{$today} {$i}:59:59"));
for ($i = 0; $i < 24; $i++)
{
$today = date("Y-m-d");
$start = strtotime(date("{$today} {$i}:00:00"));
$end = strtotime(date("{$today} {$i}:59:59"));
$this->overview['ip']['today']['hours'][] = count($this->db->fetchAll("SELECT DISTINCT ip FROM {$this->table} {$where} AND date BETWEEN {$start} AND {$end}"));
$this->overview['ip']['today']['total'] += $this->overview['ip']['today']['hours'][$i];
$this->overview['uv']['today']['hours'][] = count($this->db->fetchAll("SELECT DISTINCT ip,ua FROM {$this->table} {$where} AND date BETWEEN {$start} AND {$end}"));
@ -249,10 +319,11 @@ class Access_Extend
$this->overview['pv']['today']['total'] += $this->overview['pv']['today']['hours'][$i];
}
for ($i = 0; $i < 24; $i++) {
$yesterday = date("Y-m-d", time() - 24 * 60 * 60);
$start = strtotime(date("{$yesterday} {$i}:00:00"));
$end = strtotime(date("{$yesterday} {$i}:59:59"));
for ($i = 0; $i < 24; $i++)
{
$yesterday = date("Y-m-d", time() - 24 * 60 * 60);
$start = strtotime(date("{$yesterday} {$i}:00:00"));
$end = strtotime(date("{$yesterday} {$i}:59:59"));
$this->overview['ip']['yesterday']['hours'][] = count($this->db->fetchAll("SELECT DISTINCT ip FROM {$this->table} {$where} AND date BETWEEN {$start} AND {$end}"));
$this->overview['ip']['yesterday']['total'] += $this->overview['ip']['yesterday']['hours'][$i];
$this->overview['uv']['yesterday']['hours'][] = count($this->db->fetchAll("SELECT DISTINCT ip,ua FROM {$this->table} {$where} AND date BETWEEN {$start} AND {$end}"));
@ -261,15 +332,15 @@ class Access_Extend
$this->overview['pv']['yesterday']['total'] += $this->overview['pv']['yesterday']['hours'][$i];
}
$this->overview['ip']['all']['total'] = count($this->db->fetchAll("SELECT DISTINCT ip FROM {$this->table} {$where}"));
$this->overview['uv']['all']['total'] = count($this->db->fetchAll("SELECT DISTINCT ip,ua FROM {$this->table} {$where}"));
$this->overview['pv']['all']['total'] = count($this->db->fetchAll("SELECT ip FROM {$this->table} {$where}"));
$this->overview['ip']['all']['total'] = count($this->db->fetchAll("SELECT DISTINCT ip FROM {$this->table} {$where}"));
$this->overview['uv']['all']['total'] = count($this->db->fetchAll("SELECT DISTINCT ip,ua FROM {$this->table} {$where}"));
$this->overview['pv']['all']['total'] = count($this->db->fetchAll("SELECT ip FROM {$this->table} {$where}"));
$this->overview['chart']['title']['text'] = date("Y-m-d 统计");
$this->overview['chart']['title']['text'] = date("Y-m-d 统计");
$this->overview['chart']['xAxis']['categories'] = $this->buildObject(array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23), true);
$this->overview['chart']['series']['pv'] = $this->buildObject($this->overview['pv']['today']['hours'], false);
$this->overview['chart']['series']['uv'] = $this->buildObject($this->overview['uv']['today']['hours'], false);
$this->overview['chart']['series']['ip'] = $this->buildObject($this->overview['ip']['today']['hours'], false);
$this->overview['chart']['series']['pv'] = $this->buildObject($this->overview['pv']['today']['hours'], false);
$this->overview['chart']['series']['uv'] = $this->buildObject($this->overview['uv']['today']['hours'], false);
$this->overview['chart']['series']['ip'] = $this->buildObject($this->overview['ip']['today']['hours'], false);
}
@ -277,179 +348,14 @@ class Access_Extend
{
$obj = json_encode($array);
$obj = str_replace("\"", "'", $obj);
if ($quote) {
if ($quote)
{
return $obj;
} else {
}
else
{
return str_replace("'", '', $obj);
}
}
public function getAddress($ip)
{
if (!filter_var($ip, FILTER_VALIDATE_IP)) {
return 'Invalid IP address';
}
$ipdatafile = dirname(__FILE__) . '/lib/qqwry.dat';
if (!$fd = @fopen($ipdatafile, 'rb')) {
return 'Invalid IP data file';
}
$ip = explode('.', $ip);
$ipNum = $ip[0] * 16777216 + $ip[1] * 65536 + $ip[2] * 256 + $ip[3];
if (!($DataBegin = fread($fd, 4)) || !($DataEnd = fread($fd, 4))) {
return;
}
@$ipbegin = implode('', unpack('L', $DataBegin));
if ($ipbegin < 0) {
$ipbegin += pow(2, 32);
}
@$ipend = implode('', unpack('L', $DataEnd));
if ($ipend < 0) {
$ipend += pow(2, 32);
}
$ipAllNum = ($ipend - $ipbegin) / 7 + 1;
$BeginNum = $ip2num = $ip1num = 0;
$ipAddr1 = $ipAddr2 = '';
$EndNum = $ipAllNum;
while ($ip1num > $ipNum || $ip2num < $ipNum) {
$Middle = intval(($EndNum + $BeginNum) / 2);
fseek($fd, $ipbegin + 7 * $Middle);
$ipData1 = fread($fd, 4);
if (strlen($ipData1) < 4) {
fclose($fd);
return 'System Error';
}
$ip1num = implode('', unpack('L', $ipData1));
if ($ip1num < 0) {
$ip1num += pow(2, 32);
}
if ($ip1num > $ipNum) {
$EndNum = $Middle;
continue;
}
$DataSeek = fread($fd, 3);
if (strlen($DataSeek) < 3) {
fclose($fd);
return 'System Error';
}
$DataSeek = implode('', unpack('L', $DataSeek . chr(0)));
fseek($fd, $DataSeek);
$ipData2 = fread($fd, 4);
if (strlen($ipData2) < 4) {
fclose($fd);
return 'System Error';
}
$ip2num = implode('', unpack('L', $ipData2));
if ($ip2num < 0) {
$ip2num += pow(2, 32);
}
if ($ip2num < $ipNum) {
if ($Middle == $BeginNum) {
fclose($fd);
return 'Unknown';
}
$BeginNum = $Middle;
}
}
$ipFlag = fread($fd, 1);
if ($ipFlag == chr(1)) {
$ipSeek = fread($fd, 3);
if (strlen($ipSeek) < 3) {
fclose($fd);
return 'System Error';
}
$ipSeek = implode('', unpack('L', $ipSeek . chr(0)));
fseek($fd, $ipSeek);
$ipFlag = fread($fd, 1);
}
if ($ipFlag == chr(2)) {
$AddrSeek = fread($fd, 3);
if (strlen($AddrSeek) < 3) {
fclose($fd);
return 'System Error';
}
$ipFlag = fread($fd, 1);
if ($ipFlag == chr(2)) {
$AddrSeek2 = fread($fd, 3);
if (strlen($AddrSeek2) < 3) {
fclose($fd);
return 'System Error';
}
$AddrSeek2 = implode('', unpack('L', $AddrSeek2 . chr(0)));
fseek($fd, $AddrSeek2);
} else {
fseek($fd, -1, SEEK_CUR);
}
while (($char = fread($fd, 1)) != chr(0)) {
$ipAddr2 .= $char;
}
$AddrSeek = implode('', unpack('L', $AddrSeek . chr(0)));
fseek($fd, $AddrSeek);
while (($char = fread($fd, 1)) != chr(0)) {
$ipAddr1 .= $char;
}
} else {
fseek($fd, -1, SEEK_CUR);
while (($char = fread($fd, 1)) != chr(0)) {
$ipAddr1 .= $char;
}
$ipFlag = fread($fd, 1);
if ($ipFlag == chr(2)) {
$AddrSeek2 = fread($fd, 3);
if (strlen($AddrSeek2) < 3) {
fclose($fd);
return 'System Error';
}
$AddrSeek2 = implode('', unpack('L', $AddrSeek2 . chr(0)));
fseek($fd, $AddrSeek2);
} else {
fseek($fd, -1, SEEK_CUR);
}
while (($char = fread($fd, 1)) != chr(0)) {
$ipAddr2 .= $char;
}
}
fclose($fd);
if (preg_match('/http/i', $ipAddr2)) {
$ipAddr2 = '';
}
$ipaddr = "$ipAddr1 $ipAddr2";
$ipaddr = preg_replace('/^\s*/is', '', $ipaddr);
$ipaddr = preg_replace('/\s*$/is', '', $ipaddr);
if (preg_match('/http/i', $ipaddr) || $ipaddr == '') {
$ipaddr = 'Unknown';
}
$charset = mb_detect_encoding($ipaddr, array('UTF-8', 'GBK', 'GB2312'));
$charset = strtolower($charset);
if ('cp936' == $charset) {
$charset = 'GBK';
}
if ("utf-8" != $charset) {
$ipaddr = iconv($charset, "UTF-8//IGNORE", $ipaddr);
}
return $ipaddr;
}
}

37
Action.php Normal file
View File

@ -0,0 +1,37 @@
<?php
class Access_Action implements Widget_Interface_Do
{
private $response;
private $request;
public function __construct()
{
$this->response = Typecho_Response::getInstance();
$this->request = Typecho_Request::getInstance();
}
public function execute()
{
}
public function action()
{
}
public function ipip()
{
$ip = $this->request->get('ip');
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://www.ipip.net/ip.html');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('ip' => $ip)));
curl_setopt($ch, CURLOPT_REFERER, 'http://www.ipip.net/ip.html');
$result = curl_exec($ch);
curl_close($ch);
echo $result;
}
}

View File

@ -4,7 +4,7 @@
*
* @package Access
* @author Kokororin
* @version 1.0
* @version 1.1
* @link https://kotori.love
*/
class Access_Plugin implements Typecho_Plugin_Interface
@ -14,6 +14,7 @@ class Access_Plugin implements Typecho_Plugin_Interface
{
$msg = Access_Plugin::install();
Helper::addPanel(1, self::$panel, 'Access控制台', 'Access插件控制台', 'subscriber');
Helper::addRoute("access_ipip", "/access/i/ipip", "Access_Action", 'ipip');
Typecho_Plugin::factory('Widget_Archive')->header = array('Access_Plugin', 'start');
return _t($msg);
}
@ -22,12 +23,14 @@ class Access_Plugin implements Typecho_Plugin_Interface
{
$config = Typecho_Widget::widget('Widget_Options')->plugin('Access');
$isDrop = $config->isDrop;
if ($isDrop == 0) {
$db = Typecho_Db::get();
if ($isDrop == 0)
{
$db = Typecho_Db::get();
$prefix = $db->getPrefix();
$db->query("DROP TABLE `" . $prefix . "access`", Typecho_Db::WRITE);
}
Helper::removePanel(1, self::$panel);
Helper::removeRoute("access_ipip");
}
public static function config(Typecho_Widget_Helper_Form $form)
@ -45,18 +48,20 @@ class Access_Plugin implements Typecho_Plugin_Interface
}
public static function personalConfig(Typecho_Widget_Helper_Form $form)
{}
{
}
public static function install()
{
if (substr(trim(dirname(__FILE__), '/'), -6) != 'Access') {
if (substr(trim(dirname(__FILE__), '/'), -6) != 'Access')
{
throw new Typecho_Plugin_Exception('插件目录名必须为Access');
}
$installDb = Typecho_Db::get();
$type = explode('_', $installDb->getAdapterName());
$type = array_pop($type);
$prefix = $installDb->getPrefix();
$scripts = "CREATE TABLE `typecho_access` (
$type = explode('_', $installDb->getAdapterName());
$type = array_pop($type);
$prefix = $installDb->getPrefix();
$scripts = "CREATE TABLE `typecho_access` (
`id` int(10) unsigned NOT NULL auto_increment,
`ua` varchar(255) default NULL,
`url` varchar(64) default NULL,
@ -68,44 +73,77 @@ class Access_Plugin implements Typecho_Plugin_Interface
$scripts = str_replace('%charset%', 'utf8', $scripts);
$scripts = explode(';', $scripts);
try {
foreach ($scripts as $script) {
foreach ($scripts as $script)
{
$script = trim($script);
if ($script) {
if ($script)
{
$installDb->query($script, Typecho_Db::WRITE);
}
}
return '成功创建数据表,插件启用成功';
} catch (Typecho_Db_Exception $e) {
}
catch (Typecho_Db_Exception $e)
{
$code = $e->getCode();
if (('Mysql' == $type && $code == (1050 || '42S01'))) {
if (('Mysql' == $type && $code == (1050 || '42S01')))
{
$script = 'SELECT * from `' . $prefix . 'access`';
$installDb->query($script, Typecho_Db::READ);
return '数据表已存在,插件启用成功';
} else {
}
else
{
throw new Typecho_Plugin_Exception('数据表建立失败,插件启用失败。错误号:' . $code);
}
}
}
public static function hasLogin()
{
$cookieUid = Typecho_Cookie::get('__typecho_uid');
if (null !== $cookieUid)
{
$db = Typecho_Db::get();
$user = $db->fetchRow($db->select()->from('table.users')
->where('uid = ?', intval($cookieUid))
->limit(1));
$cookieAuthCode = Typecho_Cookie::get('__typecho_authCode');
if ($user && Typecho_Common::hashValidate($user['authCode'], $cookieAuthCode))
{
return true;
}
Typecho_Cookie::delete('__typecho_uid');
Typecho_Cookie::delete('__typecho_authCode');
}
return false;
}
public static function start()
{
if (self::hasLogin())
{
return;
}
$config = Typecho_Widget::widget('Widget_Options')->plugin('Access');
$request = new Typecho_Request;
$ip = $request->getIp();
$url = $_SERVER['REQUEST_URI'];
if ($ip == null) {
$request = Typecho_Request::getInstance();
$ip = $request->getIp();
$url = $_SERVER['REQUEST_URI'];
if ($ip == null)
{
$ip = 'UnKnow';
}
$options = Typecho_Widget::widget('Widget_Options');
$options = Typecho_Widget::widget('Widget_Options');
$timeStamp = $options->gmtTime;
$offset = $options->timezone - $options->serverTimezone;
$gtime = $timeStamp + $offset;
$db = Typecho_Db::get();
$rows = array(
'ua' => $_SERVER['HTTP_USER_AGENT'],
'url' => $url,
'ip' => $ip,
$offset = $options->timezone - $options->serverTimezone;
$gtime = $timeStamp + $offset;
$db = Typecho_Db::get();
$rows = array(
'ua' => $request->getAgent(),
'url' => $url,
'ip' => $ip,
'date' => $gtime,
);
$db->query($db->insert('table.access')->rows($rows));

View File

@ -1,3 +1,9 @@
### Typecho Access 插件
## Typecho Access 插件
提供简易的访客记录查看。
提供简易的访客记录查看。
### 功能简介/更新说明
* 查看IP/UV/PV
* ip归属地使用ipip.net
* 管理员登录时不记录日志

View File

@ -7,7 +7,6 @@ class Page
private $sub_pages; //每次显示的页数
private $pageNums; //总页数
private $page_array = array(); //用来构造分页的数组
private $subPage_link; //每个分页的链接
/**
*
* __construct是SubPages的构造函数用来在创建类的时候自动运行.
@ -15,7 +14,6 @@ class Page
* @nums 总条目数
* @current_num 当前被选中的页
* @sub_pages 每次显示的页数
* @subPage_link 每个分页的链接
* @subPage_type 显示分页的类型
*
* @subPage_type=1的时候为普通分页模式
@ -26,18 +24,18 @@ class Page
public function __construct($each_disNums, $nums, $current_page, $sub_pages)
{
$this->each_disNums = intval($each_disNums);
$this->nums = intval($nums);
if (!$current_page) {
$this->nums = intval($nums);
if (!$current_page)
{
$this->current_page = 1;
} else {
}
else
{
$this->current_page = intval($current_page);
}
$this->sub_pages = intval($sub_pages);
$this->pageNums = ceil($nums / $each_disNums);
$uri = $_SERVER['REQUEST_URI'];
$uri = str_replace('&page=' . $this->current_page, '', $uri);
$uri = str_replace('?page=' . $this->current_page, '', $uri);
$this->subPage_link = trim(Typecho_Widget::widget('Widget_Options')->siteUrl, '/') . $uri . "&page=";
$this->sub_pages = intval($sub_pages);
$this->pageNums = ceil($nums / $each_disNums);
}
/*
@ -51,14 +49,14 @@ class Page
unset($sub_pages);
unset($pageNums);
unset($page_array);
unset($subPage_link);
}
/*
用来给建立分页的数组初始化的函数。
*/
public function initArray()
{
for ($i = 0; $i < $this->sub_pages; $i++) {
for ($i = 0; $i < $this->sub_pages; $i++)
{
$this->page_array[$i] = $i;
}
return $this->page_array;
@ -69,23 +67,35 @@ class Page
*/
public function construct_num_Page()
{
if ($this->pageNums < $this->sub_pages) {
if ($this->pageNums < $this->sub_pages)
{
$current_array = array();
for ($i = 0; $i < $this->pageNums; $i++) {
for ($i = 0; $i < $this->pageNums; $i++)
{
$current_array[$i] = $i + 1;
}
} else {
}
else
{
$current_array = $this->initArray();
if ($this->current_page <= 3) {
for ($i = 0; $i < count($current_array); $i++) {
if ($this->current_page <= 3)
{
for ($i = 0; $i < count($current_array); $i++)
{
$current_array[$i] = $i + 1;
}
} elseif ($this->current_page <= $this->pageNums && $this->current_page > $this->pageNums - $this->sub_pages + 1) {
for ($i = 0; $i < count($current_array); $i++) {
}
elseif ($this->current_page <= $this->pageNums && $this->current_page > $this->pageNums - $this->sub_pages + 1)
{
for ($i = 0; $i < count($current_array); $i++)
{
$current_array[$i] = ($this->pageNums) - ($this->sub_pages) + 1 + $i;
}
} else {
for ($i = 0; $i < count($current_array); $i++) {
}
else
{
for ($i = 0; $i < count($current_array); $i++)
{
$current_array[$i] = $this->current_page - 2 + $i;
}
}
@ -99,31 +109,49 @@ class Page
public function show()
{
$str = "";
if ($this->current_page > 1) {
$firstPageUrl = $this->subPage_link . "1";
$prevPageUrl = $this->subPage_link . ($this->current_page - 1);
if ($this->current_page > 1)
{
$firstPageUrl = $this->buildUrl(1);
$prevPageUrl = $this->buildUrl($this->current_page - 1);
$str .= '<li><a href="' . $prevPageUrl . '">&laquo;</a></li>';
} else {
}
else
{
$str .= '';
}
$a = $this->construct_num_Page();
for ($i = 0; $i < count($a); $i++) {
for ($i = 0; $i < count($a); $i++)
{
$s = $a[$i];
if ($s == $this->current_page) {
if ($s == $this->current_page)
{
$url = Typecho_Request::getInstance()->getRequestUrl();
$str .= '<li class="current"><a href="' . $url . '">' . $s . '</a></li>';
} else {
$url = $this->subPage_link . $s;
}
else
{
$url = $this->buildUrl($s);
$str .= '<li><a href="' . $url . '">' . $s . '</a></li>';
}
}
if ($this->current_page < $this->pageNums) {
$lastPageUrl = $this->subPage_link . $this->pageNums;
$nextPageUrl = $this->subPage_link . ($this->current_page + 1);
if ($this->current_page < $this->pageNums)
{
$lastPageUrl = $this->buildUrl($this->pageNums);
$nextPageUrl = $this->buildUrl($this->current_page + 1);
$str .= '<li><a href="' . $nextPageUrl . '">&raquo;</a></li>';
} else {
}
else
{
$str .= '';
}
return $str;
}
private function buildUrl($page)
{
$url = Typecho_Common::url('extending.php?' . http_build_query(array('panel' => Access_Plugin::$panel, 'action' => 'logs', 'page' => $page)), Typecho_Widget::widget('Widget_Options')->adminUrl);
return $url;
}
}

View File

@ -1,84 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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',
margin: 75,
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() {
$('#R0-value').html(chart.options.chart.options3d.alpha);
$('#R1-value').html(chart.options.chart.options3d.beta);
}
// Activate the sliders
$('#R0').on('change', function () {
chart.options.chart.options3d.alpha = this.value;
showValues();
chart.redraw(false);
});
$('#R1').on('change', function () {
chart.options.chart.options3d.beta = this.value;
showValues();
chart.redraw(false);
});
showValues();
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container"></div>
<div id="sliders">
<table>
<tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
<tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
</table>
</div>
</body>
</html>

View File

@ -1,64 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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',
margin: 75,
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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>

View File

@ -1,92 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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
},
marginTop: 80,
marginRight: 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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>

View File

@ -1,59 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>

View File

@ -1,68 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>

View File

@ -1,134 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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,
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 (e) {
e = chart.pointer.normalize(e);
var posX = e.pageX,
posY = e.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
</body>
</html>

View File

@ -1,90 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,83 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,83 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,47 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,77 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,82 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
},
tooltip: {
shared: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,138 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,65 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('http://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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,81 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,84 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,94 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,58 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,95 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
</body>
</html>

View File

@ -1,98 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto;"></div>
</body>
</html>

View File

@ -1,139 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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: {
align: 'middle',
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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,88 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,275 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,47 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,83 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/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>

View File

@ -1,97 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,93 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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],
['Instanbul', 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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,77 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,59 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,84 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -30,
verticalAlign: 'top',
y: 25,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,89 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,96 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,791 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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(
'http://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 sprite, 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]);
meteogram.symbolNames.push(time.symbol['@attributes'].name);
meteogram.temperatures.push({
x: from,
y: parseInt(time.temperature['@attributes'].value),
// 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 = 'http://www.yr.no/place/' + place + '/forecast_hour_by_hour.xml';
}
// Then get the XML file through Highcharts' jsonp provider, see
// https://github.com/highslide-software/highcharts.com/blob/master/samples/data/jsonp.php
// for source code.
$.getJSON(
'http://www.highcharts.com/samples/data/jsonp.php?url=' + location.hash.substr(1) + '&callback=?',
function (xml) {
var meteogram = new Meteogram(xml, 'container');
}
);
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<link href="http://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>

View File

@ -1,129 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,56 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,422 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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(
'http://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="../../js/highstock.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container"></div>
</body>
</html>

View File

@ -1,87 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,89 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 700px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,260 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('http://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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,97 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,99 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
var chart;
$(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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>
</body>
</html>

View File

@ -1,64 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/funnel.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,198 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
/**
* Get the current time
*/
function getNow() {
var now = new Date();
return {
hours: now.getHours() + now.getMinutes() / 60,
minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
seconds: now.getSeconds() * 12 / 60
};
}
/**
* Pad numbers
*/
function pad(number, length) {
// Create an array of the remaining length + 1 and join it with 0's
return new Array((length || 2) + 1 - String(number).length).join(0) + number;
}
var now = getNow();
// Create the chart
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
height: 200
},
credits: {
enabled: false
},
title: {
text: 'The Highcharts clock'
},
pane: {
background: [{
// default background
}, {
// reflex for supported browsers
backgroundColor: Highcharts.svg ? {
radialGradient: {
cx: 0.5,
cy: -0.4,
r: 1.9
},
stops: [
[0.5, 'rgba(255, 255, 255, 0.2)'],
[0.5, 'rgba(200, 200, 200, 0.2)']
]
} : null
}]
},
yAxis: {
labels: {
distance: -20
},
min: 0,
max: 12,
lineWidth: 0,
showFirstLabel: false,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 5,
minorTickPosition: 'inside',
minorGridLineWidth: 0,
minorTickColor: '#666',
tickInterval: 1,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
title: {
text: 'Powered by<br/>Highcharts',
style: {
color: '#BBB',
fontWeight: 'normal',
fontSize: '8px',
lineHeight: '10px'
},
y: 10
}
},
tooltip: {
formatter: function () {
return this.series.chart.tooltipText;
}
},
series: [{
data: [{
id: 'hour',
y: now.hours,
dial: {
radius: '60%',
baseWidth: 4,
baseLength: '95%',
rearLength: 0
}
}, {
id: 'minute',
y: now.minutes,
dial: {
baseLength: '95%',
rearLength: 0
}
}, {
id: 'second',
y: now.seconds,
dial: {
radius: '100%',
baseWidth: 1,
rearLength: '20%'
}
}],
animation: false,
dataLabels: {
enabled: false
}
}]
},
// Move
function (chart) {
setInterval(function () {
now = getNow();
var hour = chart.get('hour'),
minute = chart.get('minute'),
second = chart.get('second'),
// run animation unless we're wrapping around from 59 to 0
animation = now.seconds === 0 ?
false :
{
easing: 'easeOutElastic'
};
// 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);
});
});
// Extend jQuery with some easing (copied from jQuery UI)
$.extend($.easing, {
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
}
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,125 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Speedometer with dual axes'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: [{
min: 0,
max: 200,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -25,
lineWidth: 2,
labels: {
distance: -20,
rotation: 'auto'
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}, {
min: 0,
max: 124,
tickPosition: 'outside',
lineColor: '#933',
lineWidth: 2,
minorTickPosition: 'outside',
tickColor: '#933',
minorTickColor: '#933',
tickLength: 5,
minorTickLength: 5,
labels: {
distance: 12,
rotation: 'auto'
},
offset: -20,
endOnTick: false
}],
series: [{
name: 'Speed',
data: [80],
dataLabels: {
formatter: function () {
var kmh = this.y,
mph = Math.round(kmh * 0.621);
return '<span style="color:#339">' + kmh + ' km/h</span><br/>' +
'<span style="color:#933">' + mph + ' mph</span>';
},
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' km/h'
}
}]
},
// Add some life
function (chart) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,175 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/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>

View File

@ -1,137 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,157 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
</body>
</html>

File diff suppressed because it is too large Load Diff

View File

@ -1,81 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/heatmap.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,135 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Get the CSV and create the chart
$.getJSON('http://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="../../js/highcharts.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide-full.min.js"></script>
<script src="http://www.highcharts.com/joomla/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/joomla/media/com_demo/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,69 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,57 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,48 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,81 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$.getJSON('http://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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,75 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,163 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,188 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
subtitle: {
text: 'Click the slices to view versions. Source: netmarketshare.com.'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {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="../../js/highcharts.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version. Download as tsv. -->
<pre id="tsv" style="display:none">Browser Version Total Market Share
Microsoft Internet Explorer 8.0 26.61%
Microsoft Internet Explorer 9.0 16.96%
Chrome 18.0 8.01%
Chrome 19.0 7.73%
Firefox 12 6.72%
Microsoft Internet Explorer 6.0 6.40%
Firefox 11 4.72%
Microsoft Internet Explorer 7.0 3.55%
Safari 5.1 3.53%
Firefox 13 2.16%
Firefox 3.6 1.87%
Opera 11.x 1.30%
Chrome 17.0 1.13%
Firefox 10 0.90%
Safari 5.0 0.85%
Firefox 9.0 0.65%
Firefox 8.0 0.55%
Firefox 4.0 0.50%
Chrome 16.0 0.45%
Firefox 3.0 0.36%
Firefox 3.5 0.36%
Firefox 6.0 0.32%
Firefox 5.0 0.31%
Firefox 7.0 0.29%
Proprietary or Undetectable 0.29%
Chrome 18.0 - Maxthon Edition 0.26%
Chrome 14.0 0.25%
Chrome 20.0 0.24%
Chrome 15.0 0.18%
Chrome 12.0 0.16%
Opera 12.x 0.15%
Safari 4.0 0.14%
Chrome 13.0 0.13%
Safari 4.1 0.12%
Chrome 11.0 0.10%
Firefox 14 0.10%
Firefox 2.0 0.09%
Chrome 10.0 0.09%
Opera 10.x 0.09%
Microsoft Internet Explorer 8.0 - Tencent Traveler Edition 0.09%</pre>
</body>
</html>

View File

@ -1,83 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
// Build the chart
$('#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'
},
connectorColor: 'silver'
}
}
},
series: [{
name: "Brands",
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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,77 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
// Build the chart
$('#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: false
},
showInLegend: true
}
},
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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,77 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Make monochrome colors and set them as default for all pies
Highcharts.getOptions().plotOptions.pie.colors = (function () {
var colors = [],
base = Highcharts.getOptions().colors[0],
i;
for (i = 0; i < 10; i += 1) {
// Start out with a darkened base color (negative brighten), and end
// up with a much brighter color
colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
}
return colors;
}());
// Build the chart
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
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',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
data: [
{name: "Microsoft Internet Explorer", y: 56.33},
{name: "Chrome", y: 24.03},
{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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,76 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Browser<br>shares<br>2015',
align: 'center',
verticalAlign: 'middle',
y: 40
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
distance: -50,
style: {
fontWeight: 'bold',
color: 'white',
textShadow: '0px 1px 2px black'
}
},
startAngle: -90,
endAngle: 90,
center: ['50%', '75%']
}
},
series: [{
type: 'pie',
name: 'Browser share',
innerSize: '50%',
data: [
['Firefox', 10.38],
['IE', 56.33],
['Chrome', 24.03],
['Safari', 4.77],
['Opera', 0.91],
{
name: 'Proprietary or Undetectable',
y: 0.2,
dataLabels: {
enabled: false
}
}
]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,77 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: [43000, 19000, 60000, 35000, 17000, 10000],
pointPlacement: 'on'
}, {
name: 'Actual Spending',
data: [50000, 39000, 42000, 31000, 26000, 14000],
pointPlacement: 'on'
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,299 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
// Parse the data from an inline table using the Highcharts Data plugin
$('#container').highcharts({
data: {
table: 'freq',
startRow: 1,
endRow: 17,
endColumn: 7
},
chart: {
polar: true,
type: 'column'
},
title: {
text: 'Wind rose for South Shore Met Station, Oregon'
},
subtitle: {
text: 'Source: or.water.usgs.gov'
},
pane: {
size: '85%'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
tickmarkPlacement: 'on'
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Frequency (%)'
},
labels: {
formatter: function () {
return this.value + '%';
}
},
reversedStacks: false
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPlacement: 'on'
}
}
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/data.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<div style="display:none">
<!-- Source: http://or.water.usgs.gov/cgi-bin/grapher/graph_windrose.pl -->
<table id="freq" border="0" cellspacing="0" cellpadding="0">
<tr nowrap bgcolor="#CCCCFF">
<th colspan="9" class="hdr">Table of Frequencies (percent)</th>
</tr>
<tr nowrap bgcolor="#CCCCFF">
<th class="freq">Direction</th>
<th class="freq">&lt; 0.5 m/s</th>
<th class="freq">0.5-2 m/s</th>
<th class="freq">2-4 m/s</th>
<th class="freq">4-6 m/s</th>
<th class="freq">6-8 m/s</th>
<th class="freq">8-10 m/s</th>
<th class="freq">&gt; 10 m/s</th>
<th class="freq">Total</th>
</tr>
<tr nowrap>
<td class="dir">N</td>
<td class="data">1.81</td>
<td class="data">1.78</td>
<td class="data">0.16</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">3.75</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">NNE</td>
<td class="data">0.62</td>
<td class="data">1.09</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">1.71</td>
</tr>
<tr nowrap>
<td class="dir">NE</td>
<td class="data">0.82</td>
<td class="data">0.82</td>
<td class="data">0.07</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">1.71</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">ENE</td>
<td class="data">0.59</td>
<td class="data">1.22</td>
<td class="data">0.07</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">1.88</td>
</tr>
<tr nowrap>
<td class="dir">E</td>
<td class="data">0.62</td>
<td class="data">2.20</td>
<td class="data">0.49</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">3.32</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">ESE</td>
<td class="data">1.22</td>
<td class="data">2.01</td>
<td class="data">1.55</td>
<td class="data">0.30</td>
<td class="data">0.13</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">5.20</td>
</tr>
<tr nowrap>
<td class="dir">SE</td>
<td class="data">1.61</td>
<td class="data">3.06</td>
<td class="data">2.37</td>
<td class="data">2.14</td>
<td class="data">1.74</td>
<td class="data">0.39</td>
<td class="data">0.13</td>
<td class="data">11.45</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">SSE</td>
<td class="data">2.04</td>
<td class="data">3.42</td>
<td class="data">1.97</td>
<td class="data">0.86</td>
<td class="data">0.53</td>
<td class="data">0.49</td>
<td class="data">0.00</td>
<td class="data">9.31</td>
</tr>
<tr nowrap>
<td class="dir">S</td>
<td class="data">2.66</td>
<td class="data">4.74</td>
<td class="data">0.43</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">7.83</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">SSW</td>
<td class="data">2.96</td>
<td class="data">4.14</td>
<td class="data">0.26</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">7.37</td>
</tr>
<tr nowrap>
<td class="dir">SW</td>
<td class="data">2.53</td>
<td class="data">4.01</td>
<td class="data">1.22</td>
<td class="data">0.49</td>
<td class="data">0.13</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">8.39</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">WSW</td>
<td class="data">1.97</td>
<td class="data">2.66</td>
<td class="data">1.97</td>
<td class="data">0.79</td>
<td class="data">0.30</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">7.70</td>
</tr>
<tr nowrap>
<td class="dir">W</td>
<td class="data">1.64</td>
<td class="data">1.71</td>
<td class="data">0.92</td>
<td class="data">1.45</td>
<td class="data">0.26</td>
<td class="data">0.10</td>
<td class="data">0.00</td>
<td class="data">6.09</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">WNW</td>
<td class="data">1.32</td>
<td class="data">2.40</td>
<td class="data">0.99</td>
<td class="data">1.61</td>
<td class="data">0.33</td>
<td class="data">0.00</td>
<td class="data">0.00</td>
<td class="data">6.64</td>
</tr>
<tr nowrap>
<td class="dir">NW</td>
<td class="data">1.58</td>
<td class="data">4.28</td>
<td class="data">1.28</td>
<td class="data">0.76</td>
<td class="data">0.66</td>
<td class="data">0.69</td>
<td class="data">0.03</td>
<td class="data">9.28</td>
</tr>
<tr nowrap bgcolor="#DDDDDD">
<td class="dir">NNW</td>
<td class="data">1.51</td>
<td class="data">5.00</td>
<td class="data">1.32</td>
<td class="data">0.13</td>
<td class="data">0.23</td>
<td class="data">0.13</td>
<td class="data">0.07</td>
<td class="data">8.39</td>
</tr>
<tr nowrap>
<td class="totals">Total</td>
<td class="totals">25.53</td>
<td class="totals">44.54</td>
<td class="totals">15.07</td>
<td class="totals">8.52</td>
<td class="totals">4.31</td>
<td class="totals">1.81</td>
<td class="totals">0.23</td>
<td class="totals">&nbsp;</td>
</tr>
</table>
</div>
</body>
</html>

View File

@ -1,81 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
title: {
text: 'Highcharts Polar Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return this.value + '°';
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45
},
column: {
pointPadding: 0,
groupPadding: 0
}
},
series: [{
type: 'column',
name: 'Column',
data: [8, 7, 6, 5, 4, 3, 2, 1],
pointPlacement: 'between'
}, {
type: 'line',
name: 'Line',
data: [1, 2, 3, 4, 5, 6, 7, 8]
}, {
type: 'area',
name: 'Area',
data: [1, 8, 2, 7, 3, 6, 4, 5]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,125 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
title: {
text: 'Height vs Weight'
},
subtitle: {
text: 'Polygon series in Highcharts'
},
xAxis: {
gridLineWidth: 1,
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70],
[180, 60], [173, 52], [166, 45]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: false
}, {
name: 'Observations',
type: 'scatter',
color: Highcharts.getOptions().colors[1],
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]]
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,58 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'pyramid',
marginRight: 100
},
title: {
text: 'Sales pyramid',
x: -50
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
softConnector: true
}
}
},
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="../../js/highcharts.js"></script>
<script src="../../js/modules/funnel.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 410px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,268 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
backgroundColor: 'white',
events: {
load: function () {
// Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];
// Separator, client from service
ren.path(['M', 120, 40, 'L', 120, 330])
.attr({
'stroke-width': 2,
stroke: 'silver',
dashstyle: 'dash'
})
.add();
// Separator, CLI from service
ren.path(['M', 420, 40, 'L', 420, 330])
.attr({
'stroke-width': 2,
stroke: 'silver',
dashstyle: 'dash'
})
.add();
// Headers
ren.label('Web client', 20, 40)
.css({
fontWeight: 'bold'
})
.add();
ren.label('Web service / CLI', 220, 40)
.css({
fontWeight: 'bold'
})
.add();
ren.label('Command line client', 440, 40)
.css({
fontWeight: 'bold'
})
.add();
// SaaS client label
ren.label('SaaS client<br/>(browser or<br/>script)', 10, 82)
.attr({
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'white'
})
.add()
.shadow(true);
// Arrow from SaaS client to Phantom JS
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.translate(95, 95)
.add();
ren.label('POST options in JSON', 90, 75)
.css({
fontSize: '10px',
color: colors[3]
})
.add();
ren.label('PhantomJS', 210, 82)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
// Arrow from Phantom JS to Batik
ren.path(['M', 250, 110, 'L', 250, 185, 'L', 245, 180, 'M', 250, 185, 'L', 255, 180])
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.add();
ren.label('SVG', 255, 120)
.css({
color: colors[3],
fontSize: '10px'
})
.add();
ren.label('Batik', 210, 200)
.attr({
r: 5,
width: 100,
fill: colors[1]
})
.css({
color: 'white',
fontWeight: 'bold'
})
.add();
// Arrow from Batik to SaaS client
ren.path(['M', 235, 185, 'L', 235, 155, 'C', 235, 130, 235, 130, 215, 130,
'L', 95, 130, 'L', 100, 125, 'M', 95, 130, 'L', 100, 135])
.attr({
'stroke-width': 2,
stroke: colors[3]
})
.add();
ren.label('Rasterized image', 100, 110)
.css({
color: colors[3],
fontSize: '10px'
})
.add();
// Browser label
ren.label('Browser<br/>running<br/>Highcharts', 10, 180)
.attr({
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'white',
width: '100px'
})
.add()
.shadow(true);
// Arrow from Browser to Batik
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(95, 205)
.add();
ren.label('POST SVG', 110, 185)
.css({
color: colors[1],
fontSize: '10px'
})
.add();
// Arrow from Batik to Browser
ren.path(leftArrow)
.attr({
'stroke-width': 2,
stroke: colors[1]
})
.translate(95, 215)
.add();
ren.label('Rasterized image', 100, 215)
.css({
color: colors[1],
fontSize: '10px'
})
.add();
// Script label
ren.label('Script', 450, 82)
.attr({
fill: colors[2],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5
})
.css({
color: 'white',
width: '100px'
})
.add()
.shadow(true);
// Arrow from Script to PhantomJS
ren.path(leftArrow)
.attr({
'stroke-width': 2,
stroke: colors[2]
})
.translate(330, 90)
.add();
ren.label('Command', 340, 70)
.css({
color: colors[2],
fontSize: '10px'
})
.add();
// Arrow from PhantomJS to Script
ren.path(rightArrow)
.attr({
'stroke-width': 2,
stroke: colors[2]
})
.translate(330, 100)
.add();
ren.label('Rasterized image', 330, 100)
.css({
color: colors[2],
fontSize: '10px'
})
.add();
}
}
},
title: {
text: 'Highcharts export server overview',
style: {
color: 'black'
}
}
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,195 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
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]]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
[181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
[180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
[184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
[176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
[178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
[183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
[170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
[186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
[182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
[169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
[163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
[177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
[167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
[171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
[174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
[180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
[180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
[175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
[176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
[184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
[157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
[165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
[185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
[177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
[188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
[166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
[185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
[190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
[176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
[172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
[167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
[172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
[193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
[167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
[188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
[171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
[182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
[188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
[175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
[177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
[174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
[167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
[175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
[177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
[174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
[174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
[180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
[170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
[180.3, 83.2], [180.3, 83.2]]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,675 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
#result {
text-align: right;
color: gray;
min-height: 2em;
}
#table-sparkline {
margin: 0 auto;
border-collapse: collapse;
}
th {
font-weight: bold;
text-align: left;
}
td, th {
padding: 5px;
border-bottom: 1px solid silver;
height: 20px;
}
thead th {
border-top: 2px solid gray;
border-bottom: 2px solid gray;
}
.highcharts-tooltip>span {
background: white;
border: 1px solid silver;
border-radius: 3px;
box-shadow: 1px 1px 2px #888;
padding: 8px;
}
</style>
<script type="text/javascript">
$(function () {
/**
* Create a constructor for sparklines that takes some sensible defaults and merges in the individual
* chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
*/
Highcharts.SparkLine = function (options, callback) {
var defaultOptions = {
chart: {
renderTo: (options.chart && options.chart.renderTo) || this,
backgroundColor: null,
borderWidth: 0,
type: 'area',
margin: [2, 0, 2, 0],
width: 120,
height: 20,
style: {
overflow: 'visible'
},
skipClone: true
},
title: {
text: ''
},
credits: {
enabled: false
},
xAxis: {
labels: {
enabled: false
},
title: {
text: null
},
startOnTick: false,
endOnTick: false,
tickPositions: []
},
yAxis: {
endOnTick: false,
startOnTick: false,
labels: {
enabled: false
},
title: {
text: null
},
tickPositions: [0]
},
legend: {
enabled: false
},
tooltip: {
backgroundColor: null,
borderWidth: 0,
shadow: false,
useHTML: true,
hideDelay: 0,
shared: true,
padding: 0,
positioner: function (w, h, point) {
return { x: point.plotX - w / 2, y: point.plotY - h};
}
},
plotOptions: {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
},
column: {
negativeColor: '#910000',
borderColor: 'silver'
}
}
};
options = Highcharts.merge(defaultOptions, options);
return new Highcharts.Chart(options, callback);
};
var start = +new Date(),
$tds = $("td[data-sparkline]"),
fullLen = $tds.length,
n = 0;
// Creating 153 sparkline charts is quite fast in modern browsers, but IE8 and mobile
// can take some seconds, so we split the input into chunks and apply them in timeouts
// in order avoid locking up the browser process and allow interaction.
function doChunk() {
var time = +new Date(),
i,
len = $tds.length,
$td,
stringdata,
arr,
data,
chart;
for (i = 0; i < len; i += 1) {
$td = $($tds[i]);
stringdata = $td.data('sparkline');
arr = stringdata.split('; ');
data = $.map(arr[0].split(', '), parseFloat);
chart = {};
if (arr[1]) {
chart.type = arr[1];
}
$td.highcharts('SparkLine', {
series: [{
data: data,
pointStart: 1
}],
tooltip: {
headerFormat: '<span style="font-size: 10px">' + $td.parent().find('th').html() + ', Q{point.x}:</span><br/>',
pointFormat: '<b>{point.y}.000</b> USD'
},
chart: chart
});
n += 1;
// If the process takes too much time, run a timeout to allow interaction with the browser
if (new Date() - time > 500) {
$tds.splice(0, i + 1);
setTimeout(doChunk, 0);
break;
}
// Print a feedback on the performance
if (n === fullLen) {
$('#result').html('Generated ' + fullLen + ' sparklines in ' + (new Date() - start) + ' ms');
}
}
}
doChunk();
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<div id="result"></div>
<table id="table-sparkline">
<thead>
<tr>
<th>State</th>
<th>Income</th>
<th>Income per quarter</th>
<th>Costs</th>
<th>Costs per quarter</th>
<th>Result</th>
<th>Result per quarter</th>
</tr>
</thead>
<tbody id="tbody-sparkline">
<tr>
<th>Alabama</th>
<td>254</td>
<td data-sparkline="71, 78, 39, 66 "/>
<td>296</td>
<td data-sparkline="68, 52, 80, 96 "/>
<td>-42</td>
<td data-sparkline="3, 26, -41, -30 ; column"/>
</tr>
<tr>
<th>Alaska</th>
<td>246</td>
<td data-sparkline="87, 44, 74, 41 "/>
<td>181</td>
<td data-sparkline="29, 54, 73, 25 "/>
<td>65</td>
<td data-sparkline="58, -10, 1, 16 ; column"/>
</tr>
<tr>
<th>Arizona</th>
<td>101</td>
<td data-sparkline="56, 12, 8, 25 "/>
<td>191</td>
<td data-sparkline="69, 14, 53, 55 "/>
<td>-90</td>
<td data-sparkline="-13, -2, -45, -30 ; column"/>
</tr>
<tr>
<th>Arkansas</th>
<td>303</td>
<td data-sparkline="81, 50, 78, 94 "/>
<td>76</td>
<td data-sparkline="36, 15, 14, 11 "/>
<td>227</td>
<td data-sparkline="45, 35, 64, 83 ; column"/>
</tr>
<tr>
<th>California</th>
<td>200</td>
<td data-sparkline="61, 80, 10, 49 "/>
<td>217</td>
<td data-sparkline="100, 8, 52, 57 "/>
<td>-17</td>
<td data-sparkline="-39, 72, -42, -8 ; column"/>
</tr>
<tr>
<th>Colorado</th>
<td>118</td>
<td data-sparkline="13, 48, 21, 36 "/>
<td>273</td>
<td data-sparkline="98, 86, 8, 81 "/>
<td>-155</td>
<td data-sparkline="-85, -38, 13, -45 ; column"/>
</tr>
<tr>
<th>Connecticut</th>
<td>201</td>
<td data-sparkline="6, 64, 44, 87 "/>
<td>148</td>
<td data-sparkline="60, 13, 73, 2 "/>
<td>53</td>
<td data-sparkline="-54, 51, -29, 85 ; column"/>
</tr>
<tr>
<th>Delaware</th>
<td>161</td>
<td data-sparkline="7, 27, 49, 78 "/>
<td>298</td>
<td data-sparkline="19, 90, 100, 89 "/>
<td>-137</td>
<td data-sparkline="-12, -63, -51, -11 ; column"/>
</tr>
<tr>
<th>District of Columbia</th>
<td>106</td>
<td data-sparkline="18, 39, 27, 22 "/>
<td>185</td>
<td data-sparkline="62, 97, 24, 2 "/>
<td>-79</td>
<td data-sparkline="-44, -58, 3, 20 ; column"/>
</tr>
<tr>
<th>Florida</th>
<td>249</td>
<td data-sparkline="51, 24, 90, 84 "/>
<td>244</td>
<td data-sparkline="47, 40, 74, 83 "/>
<td>5</td>
<td data-sparkline="4, -16, 16, 1 ; column"/>
</tr>
<tr>
<th>Georgia</th>
<td>183</td>
<td data-sparkline="36, 80, 39, 28 "/>
<td>212</td>
<td data-sparkline="43, 25, 52, 92 "/>
<td>-29</td>
<td data-sparkline="-7, 55, -13, -64 ; column"/>
</tr>
<tr>
<th>Hawaii</th>
<td>232</td>
<td data-sparkline="73, 34, 74, 51 "/>
<td>172</td>
<td data-sparkline="1, 83, 49, 39 "/>
<td>60</td>
<td data-sparkline="72, -49, 25, 12 ; column"/>
</tr>
<tr>
<th>Idaho</th>
<td>166</td>
<td data-sparkline="25, 43, 31, 67 "/>
<td>152</td>
<td data-sparkline="30, 30, 75, 17 "/>
<td>14</td>
<td data-sparkline="-5, 13, -44, 50 ; column"/>
</tr>
<tr>
<th>Illinois</th>
<td>336</td>
<td data-sparkline="56, 84, 98, 98 "/>
<td>151</td>
<td data-sparkline="61, 12, 77, 1 "/>
<td>185</td>
<td data-sparkline="-5, 72, 21, 97 ; column"/>
</tr>
<tr>
<th>Indiana</th>
<td>216</td>
<td data-sparkline="52, 87, 64, 13 "/>
<td>216</td>
<td data-sparkline="2, 47, 94, 73 "/>
<td>0</td>
<td data-sparkline="50, 40, -30, -60 ; column"/>
</tr>
<tr>
<th>Iowa</th>
<td>135</td>
<td data-sparkline="41, 45, 19, 30 "/>
<td>159</td>
<td data-sparkline="17, 34, 45, 63 "/>
<td>-24</td>
<td data-sparkline="24, 11, -26, -33 ; column"/>
</tr>
<tr>
<th>Kansas</th>
<td>184</td>
<td data-sparkline="52, 43, 65, 24 "/>
<td>215</td>
<td data-sparkline="20, 42, 97, 56 "/>
<td>-31</td>
<td data-sparkline="32, 1, -32, -32 ; column"/>
</tr>
<tr>
<th>Kentucky</th>
<td>289</td>
<td data-sparkline="85, 74, 98, 32 "/>
<td>219</td>
<td data-sparkline="37, 38, 93, 51 "/>
<td>70</td>
<td data-sparkline="48, 36, 5, -19 ; column"/>
</tr>
<tr>
<th>Louisiana</th>
<td>257</td>
<td data-sparkline="89, 18, 87, 63 "/>
<td>201</td>
<td data-sparkline="19, 54, 35, 93 "/>
<td>56</td>
<td data-sparkline="70, -36, 52, -30 ; column"/>
</tr>
<tr>
<th>Maine</th>
<td>194</td>
<td data-sparkline="17, 68, 61, 48 "/>
<td>133</td>
<td data-sparkline="44, 35, 42, 12 "/>
<td>61</td>
<td data-sparkline="-27, 33, 19, 36 ; column"/>
</tr>
<tr>
<th>Maryland</th>
<td>204</td>
<td data-sparkline="74, 12, 74, 44 "/>
<td>157</td>
<td data-sparkline="65, 58, 22, 12 "/>
<td>47</td>
<td data-sparkline="9, -46, 52, 32 ; column"/>
</tr>
<tr>
<th>Massachusetts</th>
<td>172</td>
<td data-sparkline="44, 35, 69, 24 "/>
<td>115</td>
<td data-sparkline="26, 3, 69, 17 "/>
<td>57</td>
<td data-sparkline="18, 32, 0, 7 ; column"/>
</tr>
<tr>
<th>Michigan</th>
<td>177</td>
<td data-sparkline="99, 26, 13, 39 "/>
<td>185</td>
<td data-sparkline="20, 37, 99, 29 "/>
<td>-8</td>
<td data-sparkline="79, -11, -86, 10 ; column"/>
</tr>
<tr>
<th>Minnesota</th>
<td>99</td>
<td data-sparkline="34, 30, 16, 19 "/>
<td>137</td>
<td data-sparkline="49, 43, 24, 21 "/>
<td>-38</td>
<td data-sparkline="-15, -13, -8, -2 ; column"/>
</tr>
<tr>
<th>Mississippi</th>
<td>205</td>
<td data-sparkline="38, 75, 31, 61 "/>
<td>179</td>
<td data-sparkline="0, 68, 100, 11 "/>
<td>26</td>
<td data-sparkline="38, 7, -69, 50 ; column"/>
</tr>
<tr>
<th>Missouri</th>
<td>135</td>
<td data-sparkline="37, 48, 2, 48 "/>
<td>202</td>
<td data-sparkline="41, 64, 17, 80 "/>
<td>-67</td>
<td data-sparkline="-4, -16, -15, -32 ; column"/>
</tr>
<tr>
<th>Montana</th>
<td>195</td>
<td data-sparkline="48, 81, 38, 28 "/>
<td>237</td>
<td data-sparkline="44, 33, 86, 74 "/>
<td>-42</td>
<td data-sparkline="4, 48, -48, -46 ; column"/>
</tr>
<tr>
<th>Nebraska</th>
<td>286</td>
<td data-sparkline="98, 55, 82, 51 "/>
<td>232</td>
<td data-sparkline="89, 54, 28, 61 "/>
<td>54</td>
<td data-sparkline="9, 1, 54, -10 ; column"/>
</tr>
<tr>
<th>Nevada</th>
<td>221</td>
<td data-sparkline="66, 4, 57, 94 "/>
<td>214</td>
<td data-sparkline="59, 39, 94, 22 "/>
<td>7</td>
<td data-sparkline="7, -35, -37, 72 ; column"/>
</tr>
<tr>
<th>New Hampshire</th>
<td>136</td>
<td data-sparkline="32, 21, 1, 82 "/>
<td>306</td>
<td data-sparkline="88, 85, 65, 68 "/>
<td>-170</td>
<td data-sparkline="-56, -64, -64, 14 ; column"/>
</tr>
<tr>
<th>New Jersey</th>
<td>194</td>
<td data-sparkline="31, 40, 24, 99 "/>
<td>147</td>
<td data-sparkline="7, 45, 12, 83 "/>
<td>47</td>
<td data-sparkline="24, -5, 12, 16 ; column"/>
</tr>
<tr>
<th>New Mexico</th>
<td>207</td>
<td data-sparkline="66, 93, 18, 30 "/>
<td>261</td>
<td data-sparkline="97, 28, 79, 57 "/>
<td>-54</td>
<td data-sparkline="-31, 65, -61, -27 ; column"/>
</tr>
<tr>
<th>New York</th>
<td>316</td>
<td data-sparkline="48, 95, 76, 97 "/>
<td>193</td>
<td data-sparkline="68, 5, 97, 23 "/>
<td>123</td>
<td data-sparkline="-20, 90, -21, 74 ; column"/>
</tr>
<tr>
<th>North Carolina</th>
<td>175</td>
<td data-sparkline="31, 71, 2, 71 "/>
<td>188</td>
<td data-sparkline="93, 5, 81, 9 "/>
<td>-13</td>
<td data-sparkline="-62, 66, -79, 62 ; column"/>
</tr>
<tr>
<th>North Dakota</th>
<td>181</td>
<td data-sparkline="3, 90, 62, 26 "/>
<td>288</td>
<td data-sparkline="70, 63, 82, 73 "/>
<td>-107</td>
<td data-sparkline="-67, 27, -20, -47 ; column"/>
</tr>
<tr>
<th>Ohio</th>
<td>189</td>
<td data-sparkline="70, 50, 6, 63 "/>
<td>163</td>
<td data-sparkline="21, 94, 4, 44 "/>
<td>26</td>
<td data-sparkline="49, -44, 2, 19 ; column"/>
</tr>
<tr>
<th>Oklahoma</th>
<td>188</td>
<td data-sparkline="66, 46, 53, 23 "/>
<td>172</td>
<td data-sparkline="26, 25, 35, 86 "/>
<td>16</td>
<td data-sparkline="40, 21, 18, -63 ; column"/>
</tr>
<tr>
<th>Oregon</th>
<td>165</td>
<td data-sparkline="82, 31, 38, 14 "/>
<td>257</td>
<td data-sparkline="91, 9, 80, 77 "/>
<td>-92</td>
<td data-sparkline="-9, 22, -42, -63 ; column"/>
</tr>
<tr>
<th>Pennsylvania</th>
<td>268</td>
<td data-sparkline="33, 88, 82, 65 "/>
<td>129</td>
<td data-sparkline="30, 29, 41, 29 "/>
<td>139</td>
<td data-sparkline="3, 59, 41, 36 ; column"/>
</tr>
<tr>
<th>Rhode Island</th>
<td>164</td>
<td data-sparkline="8, 86, 32, 38 "/>
<td>182</td>
<td data-sparkline="88, 8, 18, 68 "/>
<td>-18</td>
<td data-sparkline="-80, 78, 14, -30 ; column"/>
</tr>
<tr>
<th>South Carolina</th>
<td>91</td>
<td data-sparkline="24, 18, 0, 49 "/>
<td>193</td>
<td data-sparkline="72, 62, 21, 38 "/>
<td>-102</td>
<td data-sparkline="-48, -44, -21, 11 ; column"/>
</tr>
<tr>
<th>South Dakota</th>
<td>184</td>
<td data-sparkline="73, 17, 64, 30 "/>
<td>221</td>
<td data-sparkline="21, 91, 57, 52 "/>
<td>-37</td>
<td data-sparkline="52, -74, 7, -22 ; column"/>
</tr>
<tr>
<th>Tennessee</th>
<td>233</td>
<td data-sparkline="92, 24, 25, 92 "/>
<td>131</td>
<td data-sparkline="5, 18, 42, 66 "/>
<td>102</td>
<td data-sparkline="87, 6, -17, 26 ; column"/>
</tr>
<tr>
<th>Texas</th>
<td>211</td>
<td data-sparkline="33, 80, 68, 30 "/>
<td>225</td>
<td data-sparkline="86, 58, 36, 45 "/>
<td>-14</td>
<td data-sparkline="-53, 22, 32, -15 ; column"/>
</tr>
<tr>
<th>Utah</th>
<td>362</td>
<td data-sparkline="89, 98, 96, 79 "/>
<td>225</td>
<td data-sparkline="35, 51, 88, 51 "/>
<td>137</td>
<td data-sparkline="54, 47, 8, 28 ; column"/>
</tr>
<tr>
<th>Vermont</th>
<td>119</td>
<td data-sparkline="4, 19, 56, 40 "/>
<td>152</td>
<td data-sparkline="17, 66, 27, 42 "/>
<td>-33</td>
<td data-sparkline="-13, -47, 29, -2 ; column"/>
</tr>
<tr>
<th>Virginia</th>
<td>127</td>
<td data-sparkline="24, 27, 41, 35 "/>
<td>71</td>
<td data-sparkline="30, 2, 36, 3 "/>
<td>56</td>
<td data-sparkline="-6, 25, 5, 32 ; column"/>
</tr>
<tr>
<th>Washington</th>
<td>165</td>
<td data-sparkline="40, 11, 63, 51 "/>
<td>245</td>
<td data-sparkline="46, 41, 94, 64 "/>
<td>-80</td>
<td data-sparkline="-6, -30, -31, -13 ; column"/>
</tr>
<tr>
<th>West Virginia</th>
<td>248</td>
<td data-sparkline="66, 56, 97, 29 "/>
<td>171</td>
<td data-sparkline="65, 53, 37, 16 "/>
<td>77</td>
<td data-sparkline="1, 3, 60, 13 ; column"/>
</tr>
<tr>
<th>Wisconsin</th>
<td>183</td>
<td data-sparkline="24, 55, 21, 83 "/>
<td>224</td>
<td data-sparkline="80, 64, 13, 67 "/>
<td>-41</td>
<td data-sparkline="-56, -9, 8, 16 ; column"/>
</tr>
<tr>
<th>Wyoming</th>
<td>231</td>
<td data-sparkline="52, 49, 97, 33 "/>
<td>251</td>
<td data-sparkline="96, 50, 23, 82 "/>
<td>-20</td>
<td data-sparkline="-44, -1, 74, -49 ; column"/>
</tr>
</tbody>
</table>
</body>
</html>

View File

@ -1,79 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: true
},
title: {
text: 'Atmosphere Temperature by Altitude'
},
subtitle: {
text: 'According to the Standard Atmosphere Model'
},
xAxis: {
reversed: false,
title: {
enabled: true,
text: 'Altitude'
},
labels: {
formatter: function () {
return this.value + 'km';
}
},
maxPadding: 0.05,
showLastLabel: true
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
lineWidth: 2
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x} km: {point.y}°C'
},
plotOptions: {
spline: {
marker: {
enable: false
}
}
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,132 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: "Winter 2012-2013",
// Define the data points. All series have a dummy year
// of 1970/71 in order to be compared on the same x axis. Note
// that in JavaScript, months start at 0 for January, 1 for February etc.
data: [
[Date.UTC(1970, 9, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: "Winter 2013-2014",
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: "Winter 2014-2015",
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,151 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
// Data retrieved from http://vikjavev.no/ver/index.php?spenn=2d&sluttid=16.06.2015.
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
title: {
text: 'Wind speed during two days'
},
subtitle: {
text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
}
},
yAxis: {
title: {
text: 'Wind speed (m/s)'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null,
plotBands: [{ // Light air
from: 0.3,
to: 1.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Light air',
style: {
color: '#606060'
}
}
}, { // Light breeze
from: 1.5,
to: 3.3,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Light breeze',
style: {
color: '#606060'
}
}
}, { // Gentle breeze
from: 3.3,
to: 5.5,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Gentle breeze',
style: {
color: '#606060'
}
}
}, { // Moderate breeze
from: 5.5,
to: 8,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Moderate breeze',
style: {
color: '#606060'
}
}
}, { // Fresh breeze
from: 8,
to: 11,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'Fresh breeze',
style: {
color: '#606060'
}
}
}, { // Strong breeze
from: 11,
to: 14,
color: 'rgba(0, 0, 0, 0)',
label: {
text: 'Strong breeze',
style: {
color: '#606060'
}
}
}, { // High wind
from: 14,
to: 15,
color: 'rgba(68, 170, 213, 0.1)',
label: {
text: 'High wind',
style: {
color: '#606060'
}
}
}]
},
tooltip: {
valueSuffix: ' m/s'
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
},
pointInterval: 3600000, // one hour
pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
}
},
series: [{
name: 'Hestavollane',
data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]
}, {
name: 'Vik',
data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
}],
navigation: {
menuItemStyle: {
fontSize: '10px'
}
}
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,85 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
},
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'
},
labels: {
formatter: function () {
return this.value + '°';
}
}
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
series: [{
name: 'Tokyo',
marker: {
symbol: 'square'
},
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
y: 26.5,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
}
}, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
marker: {
symbol: 'diamond'
},
data: [{
y: 3.9,
marker: {
symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)'
}
}, 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="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,156 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
.chart {
min-width: 320px;
max-width: 800px;
height: 220px;
margin: 0 auto;
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<script type="text/javascript">
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked
through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
$(function () {
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove', function (e) {
var chart,
point,
i;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
e = chart.pointer.normalize(e); // Find coordinates within the chart
point = chart.series[0].searchPoint(e, true); // Get the hovered point
if (point) {
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max);
}
}
});
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highslide-software/highcharts.com/blob/master/samples/data/activity.json
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, i) {
return [activity.xData[i], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
// zoomType: 'x',
// pinchType: null // Disable zoom on touch devices
},
title: {
text: dataset.name,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
crosshair: true,
events: {
setExtremes: syncExtremes
},
labels: {
format: '{value} km'
}
},
yAxis: {
title: {
text: null
}
},
tooltip: {
positioner: function () {
return {
x: this.chart.chartWidth - this.label.width, // right aligned
y: -1 // align to title
};
},
borderWidth: 0,
backgroundColor: 'none',
pointFormat: '{point.y}',
headerFormat: '',
shadow: false,
style: {
fontSize: '18px'
},
valueDecimals: dataset.valueDecimals
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<div id="container"></div>
</body>
</html>

View File

@ -1,68 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
colorAxis: {
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
data: [{
name: 'A',
value: 6,
colorValue: 1
}, {
name: 'B',
value: 6,
colorValue: 2
}, {
name: 'C',
value: 4,
colorValue: 3
}, {
name: 'D',
value: 3,
colorValue: 4
}, {
name: 'E',
value: 2,
colorValue: 5
}, {
name: 'F',
value: 2,
colorValue: 6
}, {
name: 'G',
value: 1,
colorValue: 7
}]
}],
title: {
text: 'Highcharts Treemap'
}
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/heatmap.js"></script>
<script src="../../js/modules/treemap.js"></script>
<div id="container"></div>
</body>
</html>

View File

@ -1,980 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(function () {
var data = {
"South-East Asia": {
"Sri Lanka": {
"Communicable & other Group I": "75.5",
"Injuries": "89.0",
"Noncommunicable diseases": "501.2"
},
"Bangladesh": {
"Noncommunicable diseases": "548.9",
"Injuries": "64.0",
"Communicable & other Group I": "234.6"
},
"Myanmar": {
"Communicable & other Group I": "316.4",
"Injuries": "102.0",
"Noncommunicable diseases": "708.7"
},
"Maldives": {
"Injuries": "35.0",
"Noncommunicable diseases": "487.2",
"Communicable & other Group I": "59.2"
},
"Democratic People's Republic of Korea": {
"Injuries": "91.9",
"Noncommunicable diseases": "751.4",
"Communicable & other Group I": "117.3"
},
"Bhutan": {
"Injuries": "142.2",
"Noncommunicable diseases": "572.8",
"Communicable & other Group I": "186.9"
},
"Thailand": {
"Injuries": "72.8",
"Communicable & other Group I": "123.3",
"Noncommunicable diseases": "449.1"
},
"Nepal": {
"Noncommunicable diseases": "678.1",
"Injuries": "88.7",
"Communicable & other Group I": "251.8"
},
"Timor-Leste": {
"Injuries": "69.2",
"Noncommunicable diseases": "670.5",
"Communicable & other Group I": "343.5"
},
"India": {
"Communicable & other Group I": "253.0",
"Injuries": "115.9",
"Noncommunicable diseases": "682.3"
},
"Indonesia": {
"Injuries": "49.3",
"Noncommunicable diseases": "680.1",
"Communicable & other Group I": "162.4"
}
},
"Europe": {
"Hungary": {
"Communicable & other Group I": "16.8",
"Noncommunicable diseases": "602.8",
"Injuries": "44.3"
},
"Poland": {
"Communicable & other Group I": "22.6",
"Noncommunicable diseases": "494.5",
"Injuries": "48.9"
},
"Israel": {
"Communicable & other Group I": "31.2",
"Noncommunicable diseases": "311.2",
"Injuries": "20.8"
},
"France": {
"Communicable & other Group I": "21.4",
"Noncommunicable diseases": "313.2",
"Injuries": "34.6"
},
"Turkey": {
"Injuries": "39.1",
"Communicable & other Group I": "43.9",
"Noncommunicable diseases": "555.2"
},
"Kyrgyzstan": {
"Communicable & other Group I": "65.8",
"Injuries": "65.1",
"Noncommunicable diseases": "835.4"
},
"Croatia": {
"Communicable & other Group I": "12.2",
"Noncommunicable diseases": "495.8",
"Injuries": "40.1"
},
"Portugal": {
"Injuries": "25.2",
"Communicable & other Group I": "39.9",
"Noncommunicable diseases": "343.3"
},
"Greece": {
"Injuries": "26.5",
"Noncommunicable diseases": "365.0",
"Communicable & other Group I": "24.1"
},
"Italy": {
"Injuries": "20.1",
"Communicable & other Group I": "15.5",
"Noncommunicable diseases": "303.6"
},
"Belgium": {
"Communicable & other Group I": "27.8",
"Injuries": "38.9",
"Noncommunicable diseases": "356.8"
},
"Lithuania": {
"Noncommunicable diseases": "580.6",
"Communicable & other Group I": "25.5",
"Injuries": "76.4"
},
"Uzbekistan": {
"Communicable & other Group I": "85.8",
"Injuries": "47.4",
"Noncommunicable diseases": "810.9"
},
"Serbia": {
"Communicable & other Group I": "19.4",
"Injuries": "32.0",
"Noncommunicable diseases": "657.7"
},
"Austria": {
"Noncommunicable diseases": "359.5",
"Injuries": "30.6",
"Communicable & other Group I": "12.6"
},
"Bosnia and Herzegovina": {
"Injuries": "42.4",
"Noncommunicable diseases": "512.5",
"Communicable & other Group I": "20.0"
},
"Slovakia": {
"Injuries": "39.1",
"Communicable & other Group I": "35.3",
"Noncommunicable diseases": "532.5"
},
"The former Yugoslav republic of Macedonia": {
"Injuries": "24.0",
"Communicable & other Group I": "16.9",
"Noncommunicable diseases": "636.5"
},
"Sweden": {
"Communicable & other Group I": "19.3",
"Noncommunicable diseases": "333.5",
"Injuries": "26.1"
},
"Russian Federation": {
"Noncommunicable diseases": "790.3",
"Communicable & other Group I": "73.8",
"Injuries": "102.8"
},
"Republic of Moldova": {
"Noncommunicable diseases": "787.6",
"Injuries": "75.7",
"Communicable & other Group I": "44.5"
},
"Ireland": {
"Injuries": "31.8",
"Communicable & other Group I": "21.5",
"Noncommunicable diseases": "343.9"
},
"Estonia": {
"Injuries": "47.0",
"Communicable & other Group I": "18.5",
"Noncommunicable diseases": "510.7"
},
"Cyprus": {
"Noncommunicable diseases": "333.0",
"Injuries": "26.6",
"Communicable & other Group I": "16.2"
},
"Kazakhstan": {
"Noncommunicable diseases": "949.7",
"Injuries": "101.6",
"Communicable & other Group I": "55.3"
},
"Netherlands": {
"Noncommunicable diseases": "355.2",
"Injuries": "22.3",
"Communicable & other Group I": "25.5"
},
"Finland": {
"Noncommunicable diseases": "366.6",
"Injuries": "38.7",
"Communicable & other Group I": "9.0"
},
"Romania": {
"Noncommunicable diseases": "612.2",
"Injuries": "40.7",
"Communicable & other Group I": "38.5"
},
"Albania": {
"Noncommunicable diseases": "671.6",
"Injuries": "48.0",
"Communicable & other Group I": "46.5"
},
"Iceland": {
"Injuries": "29.0",
"Noncommunicable diseases": "311.7",
"Communicable & other Group I": "14.0"
},
"Azerbaijan": {
"Noncommunicable diseases": "664.3",
"Injuries": "33.6",
"Communicable & other Group I": "70.8"
},
"Tajikistan": {
"Injuries": "51.6",
"Communicable & other Group I": "147.7",
"Noncommunicable diseases": "752.6"
},
"Bulgaria": {
"Communicable & other Group I": "33.4",
"Injuries": "36.4",
"Noncommunicable diseases": "638.2"
},
"United Kingdom of Great Britain and Northern Ireland": {
"Communicable & other Group I": "28.5",
"Injuries": "21.5",
"Noncommunicable diseases": "358.8"
},
"Spain": {
"Communicable & other Group I": "19.1",
"Injuries": "17.8",
"Noncommunicable diseases": "323.1"
},
"Ukraine": {
"Communicable & other Group I": "69.3",
"Injuries": "67.3",
"Noncommunicable diseases": "749.0"
},
"Norway": {
"Noncommunicable diseases": "336.6",
"Communicable & other Group I": "25.2",
"Injuries": "25.6"
},
"Denmark": {
"Injuries": "22.5",
"Communicable & other Group I": "29.5",
"Noncommunicable diseases": "406.1"
},
"Belarus": {
"Noncommunicable diseases": "682.5",
"Communicable & other Group I": "28.3",
"Injuries": "91.3"
},
"Malta": {
"Noncommunicable diseases": "364.5",
"Injuries": "19.0",
"Communicable & other Group I": "23.6"
},
"Latvia": {
"Noncommunicable diseases": "623.7",
"Injuries": "54.5",
"Communicable & other Group I": "26.0"
},
"Turkmenistan": {
"Injuries": "93.0",
"Communicable & other Group I": "115.8",
"Noncommunicable diseases": "1025.1"
},
"Switzerland": {
"Communicable & other Group I": "14.5",
"Noncommunicable diseases": "291.6",
"Injuries": "25.4"
},
"Luxembourg": {
"Injuries": "31.1",
"Noncommunicable diseases": "317.8",
"Communicable & other Group I": "20.5"
},
"Georgia": {
"Injuries": "32.2",
"Communicable & other Group I": "39.3",
"Noncommunicable diseases": "615.2"
},
"Slovenia": {
"Noncommunicable diseases": "369.2",
"Communicable & other Group I": "15.4",
"Injuries": "44.2"
},
"Montenegro": {
"Communicable & other Group I": "18.7",
"Noncommunicable diseases": "571.5",
"Injuries": "41.2"
},
"Armenia": {
"Noncommunicable diseases": "847.5",
"Communicable & other Group I": "45.0",
"Injuries": "49.2"
},
"Germany": {
"Injuries": "23.0",
"Communicable & other Group I": "21.6",
"Noncommunicable diseases": "365.1"
},
"Czech Republic": {
"Injuries": "39.1",
"Noncommunicable diseases": "460.7",
"Communicable & other Group I": "27.0"
}
},
"Africa": {
"Equatorial Guinea": {
"Communicable & other Group I": "756.8",
"Injuries": "133.6",
"Noncommunicable diseases": "729.0"
},
"Madagascar": {
"Noncommunicable diseases": "648.6",
"Communicable & other Group I": "429.9",
"Injuries": "89.0"
},
"Swaziland": {
"Communicable & other Group I": "884.3",
"Injuries": "119.5",
"Noncommunicable diseases": "702.4"
},
"Congo": {
"Noncommunicable diseases": "632.3",
"Communicable & other Group I": "666.9",
"Injuries": "89.0"
},
"Burkina Faso": {
"Communicable & other Group I": "648.2",
"Noncommunicable diseases": "784.0",
"Injuries": "119.3"
},
"Guinea-Bissau": {
"Communicable & other Group I": "869.8",
"Noncommunicable diseases": "764.7",
"Injuries": "111.6"
},
"Democratic Republic of the Congo": {
"Noncommunicable diseases": "724.4",
"Injuries": "137.1",
"Communicable & other Group I": "920.7"
},
"Mozambique": {
"Injuries": "175.3",
"Noncommunicable diseases": "593.7",
"Communicable & other Group I": "998.1"
},
"Central African Republic": {
"Communicable & other Group I": "1212.1",
"Injuries": "107.9",
"Noncommunicable diseases": "550.8"
},
"United Republic of Tanzania": {
"Noncommunicable diseases": "569.8",
"Communicable & other Group I": "584.2",
"Injuries": "129.2"
},
"Cameroon": {
"Communicable & other Group I": "768.8",
"Injuries": "106.0",
"Noncommunicable diseases": "675.2"
},
"Togo": {
"Noncommunicable diseases": "679.0",
"Communicable & other Group I": "681.8",
"Injuries": "93.0"
},
"Eritrea": {
"Injuries": "118.7",
"Communicable & other Group I": "506.0",
"Noncommunicable diseases": "671.9"
},
"Namibia": {
"Injuries": "76.4",
"Noncommunicable diseases": "580.2",
"Communicable & other Group I": "356.6"
},
"Senegal": {
"Noncommunicable diseases": "558.1",
"Injuries": "89.3",
"Communicable & other Group I": "587.7"
},
"Chad": {
"Communicable & other Group I": "1070.9",
"Injuries": "114.5",
"Noncommunicable diseases": "712.6"
},
"Benin": {
"Injuries": "98.0",
"Noncommunicable diseases": "761.5",
"Communicable & other Group I": "577.3"
},
"Zimbabwe": {
"Communicable & other Group I": "711.3",
"Injuries": "82.5",
"Noncommunicable diseases": "598.9"
},
"Rwanda": {
"Noncommunicable diseases": "585.3",
"Injuries": "106.3",
"Communicable & other Group I": "401.7"
},
"Zambia": {
"Noncommunicable diseases": "587.4",
"Injuries": "156.4",
"Communicable & other Group I": "764.3"
},
"Mali": {
"Injuries": "119.5",
"Communicable & other Group I": "588.3",
"Noncommunicable diseases": "866.1"
},
"Ethiopia": {
"Injuries": "94.5",
"Communicable & other Group I": "558.9",
"Noncommunicable diseases": "476.3"
},
"South Africa": {
"Communicable & other Group I": "611.6",
"Injuries": "103.5",
"Noncommunicable diseases": "710.9"
},
"Burundi": {
"Injuries": "146.6",
"Communicable & other Group I": "704.8",
"Noncommunicable diseases": "729.5"
},
"Cabo Verde": {
"Injuries": "54.4",
"Noncommunicable diseases": "482.1",
"Communicable & other Group I": "141.9"
},
"Liberia": {
"Noncommunicable diseases": "656.9",
"Injuries": "83.3",
"Communicable & other Group I": "609.1"
},
"Uganda": {
"Noncommunicable diseases": "664.4",
"Communicable & other Group I": "696.7",
"Injuries": "166.8"
},
"Mauritius": {
"Noncommunicable diseases": "576.5",
"Injuries": "44.1",
"Communicable & other Group I": "61.8"
},
"Algeria": {
"Noncommunicable diseases": "710.4",
"Injuries": "53.8",
"Communicable & other Group I": "97.8"
},
"C\u00f4te d'Ivoire": {
"Noncommunicable diseases": "794.0",
"Injuries": "124.0",
"Communicable & other Group I": "861.3"
},
"Malawi": {
"Injuries": "97.7",
"Communicable & other Group I": "777.6",
"Noncommunicable diseases": "655.0"
},
"Botswana": {
"Injuries": "87.9",
"Noncommunicable diseases": "612.2",
"Communicable & other Group I": "555.3"
},
"Guinea": {
"Injuries": "96.0",
"Noncommunicable diseases": "681.1",
"Communicable & other Group I": "679.6"
},
"Ghana": {
"Injuries": "76.1",
"Noncommunicable diseases": "669.9",
"Communicable & other Group I": "476.0"
},
"Kenya": {
"Noncommunicable diseases": "514.7",
"Injuries": "101.1",
"Communicable & other Group I": "657.5"
},
"Gambia": {
"Noncommunicable diseases": "629.6",
"Injuries": "96.0",
"Communicable & other Group I": "590.5"
},
"Angola": {
"Injuries": "137.8",
"Noncommunicable diseases": "768.4",
"Communicable & other Group I": "873.3"
},
"Sierra Leone": {
"Communicable & other Group I": "1327.4",
"Noncommunicable diseases": "963.5",
"Injuries": "149.5"
},
"Mauritania": {
"Communicable & other Group I": "619.1",
"Injuries": "83.4",
"Noncommunicable diseases": "555.1"
},
"Comoros": {
"Communicable & other Group I": "494.6",
"Injuries": "132.4",
"Noncommunicable diseases": "695.5"
},
"Gabon": {
"Noncommunicable diseases": "504.6",
"Injuries": "77.4",
"Communicable & other Group I": "589.4"
},
"Niger": {
"Injuries": "97.6",
"Communicable & other Group I": "740.0",
"Noncommunicable diseases": "649.1"
},
"Lesotho": {
"Communicable & other Group I": "1110.5",
"Injuries": "142.5",
"Noncommunicable diseases": "671.8"
},
"Nigeria": {
"Noncommunicable diseases": "673.7",
"Communicable & other Group I": "866.2",
"Injuries": "145.6"
}
},
"Americas": {
"Canada": {
"Noncommunicable diseases": "318.0",
"Injuries": "31.3",
"Communicable & other Group I": "22.6"
},
"Bolivia (Plurinational State of)": {
"Communicable & other Group I": "226.2",
"Noncommunicable diseases": "635.3",
"Injuries": "100.0"
},
"Haiti": {
"Communicable & other Group I": "405.4",
"Noncommunicable diseases": "724.6",
"Injuries": "89.3"
},
"Belize": {
"Noncommunicable diseases": "470.7",
"Injuries": "82.0",
"Communicable & other Group I": "104.6"
},
"Suriname": {
"Injuries": "70.5",
"Communicable & other Group I": "83.7",
"Noncommunicable diseases": "374.8"
},
"Argentina": {
"Communicable & other Group I": "68.7",
"Injuries": "50.7",
"Noncommunicable diseases": "467.3"
},
"Mexico": {
"Injuries": "63.2",
"Communicable & other Group I": "57.0",
"Noncommunicable diseases": "468.3"
},
"Jamaica": {
"Injuries": "51.5",
"Communicable & other Group I": "97.0",
"Noncommunicable diseases": "519.1"
},
"Peru": {
"Noncommunicable diseases": "363.5",
"Injuries": "47.9",
"Communicable & other Group I": "121.3"
},
"Brazil": {
"Injuries": "80.2",
"Communicable & other Group I": "92.8",
"Noncommunicable diseases": "513.8"
},
"Venezuela (Bolivarian Republic of)": {
"Communicable & other Group I": "58.2",
"Injuries": "103.2",
"Noncommunicable diseases": "410.6"
},
"Paraguay": {
"Noncommunicable diseases": "485.5",
"Communicable & other Group I": "77.3",
"Injuries": "67.6"
},
"Chile": {
"Noncommunicable diseases": "366.5",
"Communicable & other Group I": "36.3",
"Injuries": "41.2"
},
"Trinidad and Tobago": {
"Noncommunicable diseases": "705.3",
"Communicable & other Group I": "80.4",
"Injuries": "98.4"
},
"Colombia": {
"Noncommunicable diseases": "377.3",
"Communicable & other Group I": "55.0",
"Injuries": "72.6"
},
"Cuba": {
"Injuries": "45.3",
"Noncommunicable diseases": "421.8",
"Communicable & other Group I": "33.2"
},
"El Salvador": {
"Noncommunicable diseases": "474.9",
"Injuries": "157.7",
"Communicable & other Group I": "96.2"
},
"Honduras": {
"Injuries": "80.8",
"Communicable & other Group I": "117.5",
"Noncommunicable diseases": "441.5"
},
"Ecuador": {
"Noncommunicable diseases": "409.7",
"Injuries": "83.7",
"Communicable & other Group I": "97.3"
},
"Costa Rica": {
"Communicable & other Group I": "30.5",
"Noncommunicable diseases": "391.8",
"Injuries": "46.5"
},
"Dominican Republic": {
"Noncommunicable diseases": "396.0",
"Injuries": "66.4",
"Communicable & other Group I": "76.8"
},
"Nicaragua": {
"Communicable & other Group I": "75.2",
"Injuries": "64.4",
"Noncommunicable diseases": "546.6"
},
"Barbados": {
"Noncommunicable diseases": "404.5",
"Injuries": "28.0",
"Communicable & other Group I": "60.8"
},
"Uruguay": {
"Noncommunicable diseases": "446.0",
"Injuries": "53.8",
"Communicable & other Group I": "46.2"
},
"Panama": {
"Communicable & other Group I": "86.1",
"Injuries": "67.4",
"Noncommunicable diseases": "372.9"
},
"Bahamas": {
"Noncommunicable diseases": "465.2",
"Injuries": "45.7",
"Communicable & other Group I": "122.0"
},
"Guyana": {
"Communicable & other Group I": "177.2",
"Noncommunicable diseases": "1024.2",
"Injuries": "150.0"
},
"United States of America": {
"Noncommunicable diseases": "412.8",
"Injuries": "44.2",
"Communicable & other Group I": "31.3"
},
"Guatemala": {
"Communicable & other Group I": "212.7",
"Noncommunicable diseases": "409.4",
"Injuries": "111.0"
}
},
"Eastern Mediterranean": {
"Egypt": {
"Communicable & other Group I": "74.3",
"Noncommunicable diseases": "781.7",
"Injuries": "33.5"
},
"South Sudan": {
"Injuries": "143.4",
"Communicable & other Group I": "831.3",
"Noncommunicable diseases": "623.4"
},
"Sudan": {
"Injuries": "133.6",
"Noncommunicable diseases": "551.0",
"Communicable & other Group I": "495.0"
},
"Libya": {
"Injuries": "62.8",
"Noncommunicable diseases": "550.0",
"Communicable & other Group I": "52.6"
},
"Jordan": {
"Noncommunicable diseases": "640.3",
"Injuries": "53.5",
"Communicable & other Group I": "52.5"
},
"Pakistan": {
"Communicable & other Group I": "296.0",
"Noncommunicable diseases": "669.3",
"Injuries": "98.7"
},
"Djibouti": {
"Noncommunicable diseases": "631.1",
"Communicable & other Group I": "626.0",
"Injuries": "106.0"
},
"Syrian Arab Republic": {
"Communicable & other Group I": "41.0",
"Injuries": "308.0",
"Noncommunicable diseases": "572.7"
},
"Morocco": {
"Noncommunicable diseases": "707.7",
"Communicable & other Group I": "131.5",
"Injuries": "47.0"
},
"Yemen": {
"Communicable & other Group I": "515.0",
"Noncommunicable diseases": "626.9",
"Injuries": "84.3"
},
"Bahrain": {
"Injuries": "33.5",
"Noncommunicable diseases": "505.7",
"Communicable & other Group I": "48.5"
},
"United Arab Emirates": {
"Noncommunicable diseases": "546.8",
"Injuries": "31.5",
"Communicable & other Group I": "35.6"
},
"Lebanon": {
"Noncommunicable diseases": "384.6",
"Injuries": "40.6",
"Communicable & other Group I": "30.5"
},
"Saudi Arabia": {
"Noncommunicable diseases": "549.4",
"Injuries": "41.1",
"Communicable & other Group I": "71.3"
},
"Iran (Islamic Republic of)": {
"Injuries": "74.9",
"Communicable & other Group I": "56.2",
"Noncommunicable diseases": "569.3"
},
"Iraq": {
"Communicable & other Group I": "87.0",
"Noncommunicable diseases": "715.5",
"Injuries": "128.5"
},
"Qatar": {
"Communicable & other Group I": "28.3",
"Injuries": "41.0",
"Noncommunicable diseases": "407.0"
},
"Afghanistan": {
"Communicable & other Group I": "362.7",
"Injuries": "169.2",
"Noncommunicable diseases": "846.3"
},
"Somalia": {
"Noncommunicable diseases": "550.7",
"Communicable & other Group I": "927.2",
"Injuries": "188.5"
},
"Kuwait": {
"Communicable & other Group I": "82.5",
"Injuries": "25.4",
"Noncommunicable diseases": "406.3"
},
"Oman": {
"Injuries": "52.8",
"Noncommunicable diseases": "478.2",
"Communicable & other Group I": "84.2"
},
"Tunisia": {
"Noncommunicable diseases": "509.3",
"Communicable & other Group I": "65.0",
"Injuries": "39.1"
}
},
"Western Pacific": {
"Mongolia": {
"Injuries": "69.4",
"Noncommunicable diseases": "966.5",
"Communicable & other Group I": "82.8"
},
"Cambodia": {
"Injuries": "62.2",
"Communicable & other Group I": "227.5",
"Noncommunicable diseases": "394.0"
},
"Japan": {
"Injuries": "40.5",
"Noncommunicable diseases": "244.2",
"Communicable & other Group I": "33.9"
},
"Brunei Darussalam": {
"Injuries": "44.6",
"Noncommunicable diseases": "475.3",
"Communicable & other Group I": "56.1"
},
"Solomon Islands": {
"Communicable & other Group I": "230.6",
"Injuries": "75.1",
"Noncommunicable diseases": "709.7"
},
"Viet Nam": {
"Communicable & other Group I": "96.0",
"Injuries": "59.0",
"Noncommunicable diseases": "435.4"
},
"Lao People's Democratic Republic": {
"Communicable & other Group I": "328.7",
"Injuries": "75.2",
"Noncommunicable diseases": "680.0"
},
"China": {
"Communicable & other Group I": "41.4",
"Noncommunicable diseases": "576.3",
"Injuries": "50.4"
},
"New Zealand": {
"Injuries": "32.9",
"Noncommunicable diseases": "313.6",
"Communicable & other Group I": "18.0"
},
"Papua New Guinea": {
"Injuries": "100.1",
"Communicable & other Group I": "554.3",
"Noncommunicable diseases": "693.2"
},
"Philippines": {
"Communicable & other Group I": "226.4",
"Noncommunicable diseases": "720.0",
"Injuries": "53.8"
},
"Malaysia": {
"Injuries": "62.8",
"Noncommunicable diseases": "563.2",
"Communicable & other Group I": "117.4"
},
"Australia": {
"Communicable & other Group I": "13.7",
"Noncommunicable diseases": "302.9",
"Injuries": "28.2"
},
"Fiji": {
"Noncommunicable diseases": "804.0",
"Injuries": "64.0",
"Communicable & other Group I": "105.2"
},
"Singapore": {
"Communicable & other Group I": "66.2",
"Noncommunicable diseases": "264.8",
"Injuries": "17.5"
},
"Republic of Korea": {
"Injuries": "53.1",
"Communicable & other Group I": "33.8",
"Noncommunicable diseases": "302.1"
}
}
},
points = [],
region_p,
region_val,
region_i,
country_p,
country_i,
cause_p,
cause_i,
cause_name = [],
region,
country,
cause;
cause_name['Communicable & other Group I'] = 'Communicable diseases';
cause_name['Noncommunicable diseases'] = 'Non-communicable diseases';
cause_name.Injuries = 'Injuries';
region_i = 0;
for (region in data) {
if (data.hasOwnProperty(region)) {
region_val = 0;
region_p = {
id: "id_" + region_i,
name: region,
color: Highcharts.getOptions().colors[region_i]
};
country_i = 0;
for (country in data[region]) {
if (data[region].hasOwnProperty(country)) {
country_p = {
id: region_p.id + "_" + country_i,
name: country,
parent: region_p.id
};
points.push(country_p);
cause_i = 0;
for (cause in data[region][country]) {
if (data[region][country].hasOwnProperty(cause)) {
cause_p = {
id: country_p.id + "_" + cause_i,
name: cause_name[cause],
parent: country_p.id,
value: Math.round(+data[region][country][cause])
};
region_val += cause_p.value;
points.push(cause_p);
cause_i = cause_i + 1;
}
}
country_i = country_i + 1;
}
}
region_p.value = Math.round(region_val / country_i);
points.push(region_p);
region_i = region_i + 1;
}
}
$('#container').highcharts({
series: [{
type: "treemap",
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true
},
borderWidth: 3
}],
data: points
}],
subtitle: {
text: 'Click points to drill down. Source: <a href="http://apps.who.int/gho/data/node.main.12?lang=en">WHO</a>.'
},
title: {
text: 'Global Mortality Rate 2012, per 100 000 population'
}
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/heatmap.js"></script>
<script src="../../js/modules/treemap.js"></script>
<div id="container"></div>
</body>
</html>

View File

@ -1,102 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
#container {
min-width: 300px;
max-width: 600px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
series: [{
type: "treemap",
layoutAlgorithm: 'stripes',
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'sliceAndDice',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}],
data: [{
id: 'A',
name: 'Apples',
color: "#EC2500"
}, {
id: 'B',
name: 'Bananas',
color: "#ECE100"
}, {
id: 'O',
name: 'Oranges',
color: '#EC9800'
}, {
name: 'Anne',
parent: 'A',
value: 5
}, {
name: 'Rick',
parent: 'A',
value: 3
}, {
name: 'Peter',
parent: 'A',
value: 4
}, {
name: 'Anne',
parent: 'B',
value: 4
}, {
name: 'Rick',
parent: 'B',
value: 10
}, {
name: 'Peter',
parent: 'B',
value: 1
}, {
name: 'Anne',
parent: 'O',
value: 1
}, {
name: 'Rick',
parent: 'O',
value: 3
}, {
name: 'Peter',
parent: 'O',
value: 3
}, {
name: 'Susanne',
parent: 'Kiwi',
value: 2,
color: '#9EDE00'
}]
}],
title: {
text: 'Fruit consumption'
}
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/treemap.js"></script>
<div id="container"></div>
</body>
</html>

View File

@ -1,93 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<style type="text/css">
${demo.css}
</style>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'waterfall'
},
title: {
text: 'Highcharts Waterfall'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'USD'
}
},
legend: {
enabled: false
},
tooltip: {
pointFormat: '<b>${point.y:,.2f}</b> USD'
},
series: [{
upColor: Highcharts.getOptions().colors[2],
color: Highcharts.getOptions().colors[3],
data: [{
name: 'Start',
y: 120000
}, {
name: 'Product Revenue',
y: 569000
}, {
name: 'Service Revenue',
y: 231000
}, {
name: 'Positive Balance',
isIntermediateSum: true,
color: Highcharts.getOptions().colors[1]
}, {
name: 'Fixed Costs',
y: -342000
}, {
name: 'Variable Costs',
y: -233000
}, {
name: 'Balance',
isSum: true,
color: Highcharts.getOptions().colors[1]
}],
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
style: {
color: '#FFFFFF',
fontWeight: 'bold',
textShadow: '0px 0px 3px black'
}
},
pointPadding: 0
}]
});
});
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>

View File

@ -1,121 +0,0 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highcharts Examples</title>
</head>
<body>
<h1>Highcharts Examples</h1>
<h4>Line charts</h4>
<ul>
<li><a href="examples/line-basic/index.htm">Basic line</a></li>
<li><a href="examples/line-ajax/index.htm">Ajax loaded data, clickable points</a></li>
<li><a href="examples/line-labels/index.htm">With data labels</a></li>
<li><a href="examples/line-time-series/index.htm">Time series, zoomable</a></li>
<li><a href="examples/spline-inverted/index.htm">Spline with inverted axes</a></li>
<li><a href="examples/spline-symbols/index.htm">Spline with symbols</a></li>
<li><a href="examples/spline-plot-bands/index.htm">Spline with plot bands</a></li>
<li><a href="examples/spline-irregular-time/index.htm">Time data with irregular intervals</a></li>
<li><a href="examples/line-log-axis/index.htm">Logarithmic axis</a></li>
</ul>
<h4>Area charts</h4>
<ul>
<li><a href="examples/area-basic/index.htm">Basic area</a></li>
<li><a href="examples/area-negative/index.htm">Area with negative values</a></li>
<li><a href="examples/area-stacked/index.htm">Stacked area</a></li>
<li><a href="examples/area-stacked-percent/index.htm">Percentage area</a></li>
<li><a href="examples/area-missing/index.htm">Area with missing points</a></li>
<li><a href="examples/area-inverted/index.htm">Inverted axes</a></li>
<li><a href="examples/areaspline/index.htm">Area-spline</a></li>
<li><a href="examples/arearange/index.htm">Area range</a></li>
<li><a href="examples/arearange-line/index.htm">Area range and line</a></li>
<li><a href="examples/sparkline/index.htm">Sparkline charts</a></li>
</ul>
<h4>Column and bar charts</h4>
<ul>
<li><a href="examples/bar-basic/index.htm">Basic bar</a></li>
<li><a href="examples/bar-stacked/index.htm">Stacked bar</a></li>
<li><a href="examples/bar-negative-stack/index.htm">Bar with negative stack</a></li>
<li><a href="examples/column-basic/index.htm">Basic column</a></li>
<li><a href="examples/column-negative/index.htm">Column with negative values</a></li>
<li><a href="examples/column-stacked/index.htm">Stacked column</a></li>
<li><a href="examples/column-stacked-and-grouped/index.htm">Stacked and grouped column</a></li>
<li><a href="examples/column-stacked-percent/index.htm">Stacked percentage column</a></li>
<li><a href="examples/column-rotated-labels/index.htm">Column with rotated labels</a></li>
<li><a href="examples/column-drilldown/index.htm">Column with drilldown</a></li>
<li><a href="examples/column-placement/index.htm">Fixed placement columns</a></li>
<li><a href="examples/column-parsed/index.htm">Data defined in a HTML table</a></li>
<li><a href="examples/columnrange/index.htm">Column range</a></li>
</ul>
<h4>Pie charts</h4>
<ul>
<li><a href="examples/pie-basic/index.htm">Pie chart</a></li>
<li><a href="examples/pie-legend/index.htm">Pie with legend</a></li>
<li><a href="examples/pie-donut/index.htm">Donut chart</a></li>
<li><a href="examples/pie-semi-circle/index.htm">Semi circle donut</a></li>
<li><a href="examples/pie-drilldown/index.htm">Pie with drilldown</a></li>
<li><a href="examples/pie-gradient/index.htm">Pie with gradient fill</a></li>
<li><a href="examples/pie-monochrome/index.htm">Pie with monochrome fill</a></li>
</ul>
<h4>Scatter and bubble charts</h4>
<ul>
<li><a href="examples/scatter/index.htm">Scatter plot</a></li>
<li><a href="examples/bubble/index.htm">Bubble chart</a></li>
<li><a href="examples/bubble-3d/index.htm">3D bubbles</a></li>
</ul>
<h4>Combinations</h4>
<ul>
<li><a href="examples/synchronized-charts/index.htm">Synchronized charts</a></li>
<li><a href="examples/combo/index.htm">Column, line and pie</a></li>
<li><a href="examples/combo-dual-axes/index.htm">Dual axes, line and column</a></li>
<li><a href="examples/combo-multi-axes/index.htm">Multiple axes</a></li>
<li><a href="examples/combo-regression/index.htm">Scatter with regression line</a></li>
<li><a href="examples/combo-meteogram/index.htm">Meteogram</a></li>
<li><a href="examples/combo-timeline/index.htm">Advanced timeline</a></li>
</ul>
<h4>Dynamic charts</h4>
<ul>
<li><a href="examples/dynamic-update/index.htm">Spline updating each second</a></li>
<li><a href="examples/dynamic-click-to-add/index.htm">Click to add a point</a></li>
<li><a href="examples/dynamic-master-detail/index.htm">Master-detail chart</a></li>
</ul>
<h4>3D charts</h4>
<ul>
<li><a href="examples/3d-column-interactive/index.htm">3D column</a></li>
<li><a href="examples/3d-column-null-values/index.htm">3D column with null and 0 values</a></li>
<li><a href="examples/3d-column-stacking-grouping/index.htm">3D column with stacking and grouping</a></li>
<li><a href="examples/3d-pie/index.htm">3D pie</a></li>
<li><a href="examples/3d-pie-donut/index.htm">3D donut</a></li>
<li><a href="examples/3d-scatter-draggable/index.htm">3D scatter chart</a></li>
</ul>
<h4>Gauges</h4>
<ul>
<li><a href="examples/gauge-speedometer/index.htm">Angular gauge</a></li>
<li><a href="examples/gauge-solid/index.htm">Solid gauge</a></li>
<li><a href="examples/gauge-clock/index.htm">Clock</a></li>
<li><a href="examples/gauge-dual/index.htm">Gauge with dual axes</a></li>
<li><a href="examples/gauge-vu-meter/index.htm">VU meter</a></li>
</ul>
<h4>Heat and tree maps</h4>
<ul>
<li><a href="examples/heatmap/index.htm">Heat map</a></li>
<li><a href="examples/heatmap-canvas/index.htm">Large heat map</a></li>
<li><a href="examples/treemap-coloraxis/index.htm">Tree map with color axis</a></li>
<li><a href="examples/treemap-with-levels/index.htm">Tree map with levels</a></li>
<li><a href="examples/treemap-large-dataset/index.htm">Large tree map</a></li>
</ul>
<h4>More chart types</h4>
<ul>
<li><a href="examples/polar/index.htm">Polar chart</a></li>
<li><a href="examples/polar-spider/index.htm">Spiderweb</a></li>
<li><a href="examples/polar-wind-rose/index.htm">Wind rose</a></li>
<li><a href="examples/box-plot/index.htm">Box plot</a></li>
<li><a href="examples/error-bar/index.htm">Error bar</a></li>
<li><a href="examples/waterfall/index.htm">Waterfall</a></li>
<li><a href="examples/funnel/index.htm">Funnel chart</a></li>
<li><a href="examples/pyramid/index.htm">Pyramid chart</a></li>
<li><a href="examples/polygon/index.htm">Polygon series</a></li>
<li><a href="examples/renderer/index.htm">General drawing</a></li>
</ul>
</body>
</html>

Binary file not shown.

View File

@ -1,5 +1,5 @@
<?php
include 'common.php';
include_once 'common.php';
include 'header.php';
include 'menu.php';
require dirname(__FILE__) . '/../Access.php';
@ -77,7 +77,7 @@ $extend = Access_Extend::getInstance();
<td><input type="checkbox" value="<?php echo $log['id']; ?>" name="id[]"/></td>
<td><a href="<?php echo str_replace("%23", "#", $log['url']); ?>"><?php echo urldecode(str_replace("%23", "#", $log['url'])); ?></a></td>
<td><a data-action="ua" href="#" title="<?php echo $log['ua'];?>"><?php echo $extend->parseUA($log['ua']); ?></a></td>
<td><a data-action="ip" data-address="<?php echo $extend->getAddress($log['ip']);?>" href="#"><?php echo $log['ip']; ?></a></td>
<td><a data-action="ip" target="_blank" href="<?php echo rtrim(Helper::options()->index, '/').'/access/i/ipip';?>?ip=<?php echo $log['ip'];?>"><?php echo $log['ip']; ?></a></td>
<td><?php echo date('Y-m-d H:i:s',$log['date']); ?></td>
</tr>
<?php endforeach; ?>
@ -183,11 +183,6 @@ include 'table-js.php';
?>
<script type="text/javascript">
$(document).ready(function() {
$('a[data-action="ip"]').click(function() {
alert($(this).data('address'));
return false;
});
$('a[data-action="ua"]').click(function() {
alert($.trim($(this).attr('title')));
return false;