I have dynamically create charts on div class col-sm 4 which append on #container div, and now I am trying to zoom highchart as fullscreen when I click on it. Like is it on this fiddle below text. I done something similar but have no idea why is not working,Can someone help me pls ?
In my example when i click on chart everything disappears
I would like to have zoom method like is it from this example http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-container/
My example: https://codepen.io/anon/pen/rZjJbq
chart.blade.php
#extends('index.app')
#section('main')
<style type="text/css">
.col-sm-4 {
margin-bottom: 20px;
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
.modal{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.7);
}
.modal .col-sm-4 {
height: 90%;
width: 90%;
max-width: none;
}
</style>
<h2 class="text-center" >{{$user->first_name}} Charts </h2>
<div id="main2">
<div id="col-sm-4" id="col-sm-4"></div>
</div>
<script type="text/javascript">
$.getJSON( "http://localhost:8000/api/devices", function( res) {
var result = [];
var namesDev = new Array();
console.log(res);
$.each(res, function(c) {
var deviceNames = res[c].clientAllias;
var clientId = res[c].clientId;
clientNames.push(namesDev);
$.each(res[c].clientData, function(g) {
$.each(data[c].clientData[g], function(key, val) {
clientId2 = data[c].clientData[g].clientId;
var cpu = data[c].clientData[g].cpuUsage;
var time_usages = data[c].clientData[g].timestamp;
final= [];
final.push(time_usages, cpu, clientId2);
result.push(final);
});
});
});
result.sort();
console.log('result', result);console.log('result', result);
var mappedClientsAllias = _.map(_.uniqBy(data, "clientAllias"), "clientAllias");
var mappedClients = _.map(_.uniqBy(data, "clientId"), "clientId");
var clients = [];
_.forEach(mappedClients, function(clientId, clientAllias) {
var tempClient = {
Allias:mappedClientsAllias[clientAllias],
name: clientId,
data: []
};
_.forEach(data, function(tempData) {
if (clientId === tempData.clientId) {
_.forEach(tempData.clientData, function(clientData) {
tempClient.data.push(
[clientData.timestamp, clientData.cpuUsage, clientId]
);
})
}
});
clients.push(tempClient);
});
console.log("clients", clients);
var a =_.forEach(clients, function(client) {
$('<div class="col-sm-4">').css('position','relative')
.appendTo('#container')
.highcharts('StockChart',{
marker: {
states: {
enabled: true
}
},
time: {
timezoneOffset: -2 * 60
},
rangeSelector: {
y: 15,
buttons: [
{
count: 1,
type: "minute",
text: "Sec"
},
],
title: "sat",
inputEnabled: true,
_selected: 1
},
title: {
text: client.Allias
},
xAxis: {
title: {
enabled: true,
text: "Processor unit USAGE"
},
type: "datetime",
dateTimeLabelFormats: {
second: "%H:%M:%S",
minute: "%H:%M",
hour: "%H:%M",
day: "%e. %b"
}
},
plotOptions: {
series: {
marker: {
enabled: false,
}
}
},
series: [
{
name: "Process unit USAGE",
data: client.data.sort()
}
],
chart: {
renderTo: "main"
},
events: {
}
});
})
});
$('#main').bind('mousedown', function () {
$(this).toggleClass('modal');
$('#main', this).highcharts().reflow();
});
</script>
#endsection
app.php.blade.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash#4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
#include('file.hed')
#include('file.bar')
<div class="container ">
#include('file._info')
#yield('main')
</div> <!-- /container -->
#include('file.down')
</body>
</html>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
Add this to the CSS :
.col-sm-4.modal {
position: fixed !important;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display:block;
max-width: none;
padding:1%;
}
JS
$(".col-sm-4").bind("mousedown", function() {
$(this).toggleClass("modal");
$(this).highcharts().reflow();
});
Pen edited
Related
Here is the code for the looping cloud, the animation loops from right to left and I would like to make the cloud resize-able when clicked on but I do not know how to do it...
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="clouds">
<img border="0" alt="animated clouds" src="clouds.png">
<script>
$(document).ready(function() {
function loop() {
$('#clouds').css({right:0});
$('#clouds').animate ({right: '+=1400'}, 5000, 'linear', function() {
loop();
});
}
loop();
});
</script>
</div>
</body>
</html>
Here is what I tried for resizing the cloud:
$("#clouds").click(function() {
$("size").animate({"height" : "350"}, 500);
});
And the CSS:
#clouds {
position:absolute;
z-index:500;
right:0px;
top:10px;
}
In this code we animate the divisions in such a way that it animate from left to right and then right to left
$(document).ready(function() {
function loop() {
$('.bouncer').animate({'left': '500'}, {
duration: 1000,
complete: function() {
$('.bouncer').animate({left: 0}, {
duration: 1000,
complete: loop});
}});
$('<div/>').text('exiting loop').appendTo($('.results'));
}
loop();
$("#clouds").click(function() {
console.log("click");
$("#clouds").animate({"height" : "350"}, 500);
});
});
.bouncer {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
.results {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</head>
<body>
<div class="bouncer">
<img id="clouds" border="0" alt="animated clouds" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsi7hhTHPPcliUGlq2tVlaPu5cmw5QHJOVyQyugHTZOnqLECHLGL9S-qU">
</div>
</html>
I have the following code that make a simple line chart of price during the day
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flot Line Graph</title>
<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h4 { width: 450px; margin-left:200px; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative;}
.legend table, .legend > div { height: 50px !important; opacity: 1 !important; right: -55px; top: 10px; width: 80px !important; }
.legend table { border: 3px solid #555; padding: 5px; font-weight:800; }
.col-md-1{width:50px !important;;
padding:0px !important;;}
.col-md-4{padding: 0px !important;;}
form{font-weight: 800;}
</style>
<!--[if lte IE 8]><script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.symbol.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class = "col-md-1" style="width:100px; margin-left:100px; margin-top:40px">
<form>
<input id="price_cat" type="radio" name="price_val" value="0" checked> LMP<br>
<input id="price_cat" type="radio" name="price_val" value="1"> MLC<br>
<input id="price_cat" type="radio" name="price_val" value="2">MCC
</form>
</div>
<div class="col-md-4">
<h4 id ="title"></h4>
<div id="placeholder" style = "width:850px; height:450px"></div>
<h4>Hour</h4>
</div>
</div>
</body>
<script type="text/javascript">
//Rome, Italy
var mkt_data = $.getJSON('https://bc2.demo.socrata.com/resource/9kzc-t3jm.json', function(response) {
console.log(response);
});
$.when(mkt_data).then(function(data) {
var price_data = data
var collection = []
var lmp_c =[]
var mcc_c = []
var mlc_c = []
var series = []
data.forEach(function(a) {
var lmp_s = []
var mcc_s = []
var mlc_s = []
lmp_s.push(Number(a.hour.replace("HE","")),Number(a.lmp));
lmp_c.push(lmp_s);
mcc_s.push(Number(a.hour.replace("HE","")), Number(a.mcc));
mcc_c.push(mcc_s)
mlc_s.push(Number(a.hour.replace("HE","")), Number(a.mlc));
mlc_c.push(mlc_s)
})
series.push({label:"LMP", data: lmp_c},{label:"MLC", data: mlc_c},{label:"MCC", data: mcc_c})
console.log(series[0].label);
$("#title").html("Average LMP per hour of the Day Jan - June 2016")
$.plot($("#placeholder"), [series[0]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
$("input:radio[name=price_val]").change(function(){
var price_series = Number($('input:radio[name=price_val]:checked').val());
console.log(price_series, typeof price_series);
$("#title").html("Average "+series[price_series].label+" per hour of the Day Jan - June 2016")
$.plot($("#placeholder").fadeIn(500), [series[price_series]], {xaxis: {
min:0,
max:24,
tickSize: [1]
},
legend: {
labelBoxBorderColor: "none",
position: "right"
},
series: {lines: { show: true },
points: {
radius: 3,
show: true,
fill: true
}
}
});
});
});
the chart work and so does the change listener but I can't get the fade in to work properly. I would usually attached it to the element selector but the flot libraries $.plot() function is making it unclear to me where I should put the call to fadeIn(). I just want to achieve a smoother transition when changing datasets. The fade in call is at line 114.
For the below script, how do I position <div id="blocker"> beneath <div id="mceu_13" class="mce-tinymce mce-container mce-panel"> without setting the z-index of #mceu_13? As seen, the z-indez of #mceu_13 is auto.
http://jsbin.com/bujixoyoga
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQueryUI Dialog Overlay</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<style type="text/css">
#blocker{margin: 0; padding: 0; width: 100%; height: 100%; top: 0; left: 0; background-color: rgb(0, 0, 0); opacity: 0.4; position: absolute;}
#dialog{position: relative;}
</style>
<script type="text/javascript">
tinymce.init({
selector: '#editor',
setup: function(ed) {
ed.on('init', function(e) {
e.target.hide();
});
}
});
$(function(){
$('#edit').click(function() {
var dialog=$("#dialog").parent().append($('<div>',{id:'blocker'}));
console.log(dialog,$(this).next(),$(this).next().css('z-index'))
//$(this).next().css('z-index',parseInt(dialog.css('zIndex'), 10)+1)
tinymce.get('editor').show();
});
$("#open").click(function(){$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
resizable : false,
height : 400,
width : 400,
modal : true,
open : function() {
$('#editor').html('Some data obtained from the DB.');
}
});
});
</script>
</head>
<body>
<button id='open'>Open</button>
<div id="dialog" title="dialog title">
Edit
<div id="editor"></div>
</div>
</body>
</html>
Give it a negative z-index:
#blocker {
z-index: -1;
}
#blocker{
z-index: -1;
}
This works because #mceu_13 is set to auto which means that element gets z-index from its parent and has default z-index:0.
I have the below chart that fills the width and height of the display. The Height is always just a little bigger than the screen so a scroll bar appears to show the bottom 20 px or so.
Is there a way to make Kendo UI show 100%, not 105% height?
Online example: http://SandApps.com/SOF.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.k-chart { overflow: hidden; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div class="chart-wrapper">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>
<script>
$(function () {
$("#chart").kendoChart({
legend: {
visible: false
},
seriesDefaults: {
type: "column",
opacity: .7
},
series: [{
data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000],
color: "#005984"
}],
valueAxis: {
labels: {
format: "{0:C0}"
},
line: {
visible: false
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0:C0}",
template: " #= value #"
}
});
});
$(window).on("resize", function () {
kendo.resize($(".chart-wrapper"));
});
</script>
</body>
</html>
I found this to be the solution:
Add this to the CSS:
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; }
Here's the full HTML if you need a 100% width and height html solution for android and ios
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
html {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
}
.k-chart { overflow: hidden; }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<!-- NOTE: Leave the styles here as Kendo will do funny things with a css class -->
<div class="chart-wrapper" style="height: 100%; min-height: 100%; width: 100%;">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>
<script>
$(function() { $("#chart").kendoChart({ legend: { visible: false }, seriesDefaults: { type: "column", opacity: .7 }, series: [{ data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000], color: "#005984" }], valueAxis: { labels: { format: "{0:C0}" }, line: { visible: false } }, categoryAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], majorGridLines: { visible: false } }, tooltip: { visible: true, format: "{0:C0}", template: " #= value #" } }); });
$(window).on("resize", function() { kendo.resize($(".chart-wrapper")); });
</script>
</body>
</html>
I use Highcharts Bubble as example from its official website and try to modified it using Framework CodeIgniter.
I run it in GoogleChrome and Firefox but not show anything.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>STATISTIK</title>
</head>
<link href="http://10.16.107.77/statistik/public/css/main.css" rel="stylesheet">
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-1.9.1.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/jquery.validate.js"></script>
<style>
#content {
position: relative;
}
#content img {
position: absolute;
top: 0px;
right: 10px;
}
</style>
<body>
<div id="content">
</div>
<!--link rel="stylesheet" type="text/css" href="http://10.16.107.77/statistik/public/css/CreativeCSS3AnimationMenus/css/demo.css" /-->
<script src="http://10.16.107.77/statistik/public/jquery/highcharts.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/highcharts-more.js"></script>
<script src="http://10.16.107.77/statistik/public/jquery/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
title: {
text: 'Formasi Tenaga Kerja'
},
series: [{
data: [[97,36,1000]],
name: 'Area Medan'
}, {
data: [[25,10,1000]],
name: 'Area Lubuk Pakam'
}, {
data: [[47,47,1000]],
name: 'Area Binjai'
}, {
data: [[75,80,1000]],
name: 'Area Sibolga'
}, {
data: [[60,25,1000]],
name: 'Area Rantau Prapat'
}, {
data: [[100,80,1000]],
name: 'Area Padang Sidempuan'
}, {
data: [[80,55,1000]],
name: 'Area Nias'
}, {
data: [[75,80,1000]],
name: 'Area Pematang Siantar'
}]
});
});
</script></body>
</html>
Thnks for every reply.
regards
try importing highcharts-more.js file.
Look at the working example here :
DEMO
code:
HTML:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>