Google charts candlestick strip out every thing but the candle bar - html

I find that the google documents are i bit limited in explaining if this is possible
how would you strip out all the empty space in a google candlestick chart.
Then fit the candlestick over a background element
code
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
//label,low,opening,closing,high
['09', 1.14799, 1.15027, 1.14848, 1.15275],
//['15', 1.14775, 1.15027, 1.14776, 1.15275],
//['20', 1.14772, 1.15027, 1.14807, 1.15275],
//1.15275 1.14799 1.15027 1.14
// Treat first row as data as well.
], true);
var options = {
legend:'none',
backgroundColor: { fill:'#515151' },
'width': 100,
'height': 340,
chartArea:{left:50,top:20,width:'50%',height:'75%'},
candlestick: {
risingColor: {stroke: '#4CAF50', fill: '#4CAF50'},
fallingColor: {stroke: '#F44336', fill: '#F44336'}
},
colors: ['white'],
hAxis: {title: 'get rid of this space', textPosition: 'none', gridlines: {color: '#515151', count: 0}},
vAxis: {title: 'get rid of this space', textPosition: 'none', gridlines: {color: '#515151', count: 0}},
title: 'get rid of this space'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<style>
.background01{background-image: url("../img/Candle_Box_Tag.png")}
</style>
</head>
<body>
<div class="background01" id="chart_div"></div>
</body>
</html>


use the chartArea option to stretch the chart to the edges of the container
chartArea: {
backgroundColor: 'transparent',
top: 0,
left: 0,
bottom: 0,
right: 0,
height: '100%',
width: '100%',
},
set the background and various other colors to 'transparent',
then you can apply any background to the <div> element
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
//label,low,opening,closing,high
['09', 1.14799, 1.15027, 1.14848, 1.15275],
//['15', 1.14775, 1.15027, 1.14776, 1.15275],
//['20', 1.14772, 1.15027, 1.14807, 1.15275],
//1.15275 1.14799 1.15027 1.14
// Treat first row as data as well.
], true);
var options = {
chartArea: {
backgroundColor: 'transparent',
top: 0,
left: 0,
bottom: 0,
right: 0,
height: '100%',
width: '100%',
},
backgroundColor: { fill:'transparent' },
legend:'none',
width: 50,
height: 340,
candlestick: {
risingColor: {stroke: '#4CAF50', fill: '#4CAF50'},
fallingColor: {stroke: '#F44336', fill: '#F44336'}
},
colors: ['white'],
hAxis: {textPosition: 'none'},
vAxis: {
textPosition: 'none',
gridlines: {color: 'transparent', count: 0},
minorGridlines: {color: 'transparent', count: 0}
}
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
#chart_div {
background: #515151;
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Related

Can't understand why Konva text do not hide

I want hide and show a Konva.text when I drag a rect -> show text and drag end hide the text but I can't understand why when I drag end the Konva.text do not hide.
var stage = new Konva.Stage({ container: 'container', width: 400, height: 250 });
var layer2 = new Konva.Layer(); var groupe = new Konva.Group({})
var lineV = new Konva.Rect({ x: 50, y: 50, width: 70, height: 50, draggable: true, stroke: 'black'}); groupe.add(lineV)
var info = new Konva.Text({
text: 'info',
visible: false,
stroke: '#fff', fontSize: 35, fontFamily: 'Calibri', fill: '#000', align: 'center', name: "infoBulle"});
layer2.add(info);
groupe.on('dragstart', function () {
console.log("drag")
info.visible(true);
});
groupe.on('dragend', function () {
console.log("drop");
info.visible(false)
console.log(info.isVisible());
});
stage.add(layer2.add(groupe))
stage.draw();
<script src="https://unpkg.com/konva#2.4.2/konva.min.js"></script>
<div id="container" width="400" height="250" style="border: 2px solid red;"></div>

You need to redraw a layer every time you update something on it. The first time you show the text update is visible, because Konva updates layer automatically on dragmove action.
var stage = new Konva.Stage({ container: 'container', width: 400, height: 250 });
var layer2 = new Konva.Layer(); var groupe = new Konva.Group({})
var lineV = new Konva.Rect({ x: 50, y: 50, width: 70, height: 50, draggable: true, stroke: 'black'}); groupe.add(lineV)
var info = new Konva.Text({
text: 'info',
visible: false,
stroke: '#fff', fontSize: 35, fontFamily: 'Calibri', fill: '#000', align: 'center', name: "infoBulle"});
layer2.add(info);
groupe.on('dragstart', function () {
console.log("drag")
info.visible(true);
layer2.batchDraw();
});
groupe.on('dragend', function () {
console.log("drop");
info.visible(false)
layer2.batchDraw();
console.log(info.isVisible());
});
stage.add(layer2.add(groupe))
stage.draw();
<script src="https://unpkg.com/konva#2.4.2/konva.min.js"></script>
<div id="container" width="400" height="250" style="border: 2px solid red;"></div>

Adding a Y Axis to a google stacked column chart

I have been creating column charts using the google chart tool, but am struggling to add a Y axis to my charts. I just need a standard series of values to appear on the axis on the left hand side of the chart.
I am able to create and manipulate the X axis but the Y axis will not appear for some reason. I'm sure there is something simple I am missing here.
Also apologies if the following code is messy, I am pretty new to this.
<head>
<script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
</script>
<script type = "text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
<script language = "JavaScript">
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
chartArea: { width: "100%"},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}}
};
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('publicbarchart'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="publicbarchart" style="width: 900px; height: 300px;"></div>
</body>
Thanks in Advance,

the y-axis is being hidden by chart option --> chartArea: {width: "100%"}
chartArea controls the size of the center section where the bars are,
and does not include the labels on either axis or at the top
use height & width outside of chartArea for the entire chart
if you want to maximize the chart area, then set limits on left, bottom, top, and / or right,
recommend replacing with the following...
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Year','Orange','Orange2','Blue','Blue2','Green','Green2','Purple','Purple2','Brown','Brown2','Grey', 'Grey2', {role: 'annotation'}],
['2007',0,2,0,0,0,0,0,0,0,0,0,0,''],
['2008',0,0,0,1,0,0,0,0,0,0,1,0,''],
['2009',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2010',0,0,0,1,0,0,1,0,0,0,0,1,''],
['2011',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2012',0,0,0,0,0,0,0,0,1,0,5,0,''],
['2013',0,0,2,0,0,0,0,0,3,0,0,0,''],
['2014',0,0,0,0,0,0,0,0,0,0,0,0,''],
['2015',0,0,0,2,0,0,0,0,1,0,1,0,''],
['2016',0,2,0,0,0,1,0,0,4,0,0,0,''],
['2017',1,0,0,1,0,0,0,2,0,0,0,0,'']
]);
var colors = [
{ color: 'ff884d' },
{ color: 'ffddcc' },
{ color: '3366ff' },
{ color: '99b3ff' },
{ color: '33ff77' },
{ color: 'b3ffcc' },
{ color: 'd633ff' },
{ color: 'f0b3ff' },
{ color: 'e6ccb3' },
{ color: 'ac7339' },
{ color: 'c0c0c0' },
{ color: 'e6e6e6' },
];
var options = {
isStacked:true,
series: colors,
bar: {groupWidth: "90%"},
legend: {position:'top', textStyle: {fontSize: 9}},
axes: {
y: {
0: { side: 'left', label: 'Count'}
}
},
height: '100%',
width: '100%',
chartArea: {
top: 32,
left: 32,
bottom: 32,
right: 12,
height: '100%',
width: '100%'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

how to place infowindow for the label on google map

I am plotting the markers on google map using infobox.js not using https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple which is working fine the code is as shown below
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<style>
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
</style>
<script>
var map;
var AutoCircle = [
{
"latitude": '21.170931',
"longitude": '72.855607',
},
{
"latitude": '21.192533',
"longitude": '72.848750',
},
{
"latitude": '21.190178',
"longitude": '72.797578',
}
];
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat:21.181272, lng:72.835066},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
// Construct the circle for each value in citymap.
// Note: We scale the area of the circle based on the population.
function addLabel(circleArray){
for (var i=0;i<circleArray.length;i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Add the circle for this city to the map.
var myOptions = {
content: 300+"*"+"<br>autos",
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
google.maps.event.addDomListener(window, "load", initMap);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
how to add the infowindow which we click on the label
Please help

I couldn't make it work with a dynamically rendered div from a text string (if you use the domready event, you should be able to access the node by its id, not sure why that doesn't work), If I create the <div> as a DOM node, I can add a listener to it.
code snippet:
function addLabel(circleArray) {
for (var i = 0; i < circleArray.length; i++) {
var circleData = circleArray[i]
var circleLatlng = new google.maps.LatLng(circleData.latitude, circleData.longitude);
// Create div for infoBubble
var div = document.createElement("div");
// create text node
var text = document.createTextNode(300 + "*" + "\nautos\n" + circleData.content);
// append text to div
div.appendChild(text);
// add click listener to div
google.maps.event.addDomListener(div, 'click', (function(i, latLng) {
return function() {
infowindow.setContent('clicked on ' + i);
infowindow.setPosition(latLng);
infowindow.open(map);
}
}(i, circleLatlng)));
var myOptions = {
content: div, // use DOM node for content
boxStyle: {
background: '#FFFFFF',
color: 'red',
textAlign: "center",
fontSize: "8pt",
width: "50px"
},
disableAutoPan: true,
pixelOffset: new google.maps.Size(-25, -10), // left upper corner of the label
position: new google.maps.LatLng(circleArray[i].latitude,
circleArray[i].longitude),
closeBoxURL: "",
isHidden: false,
pane: "floatPane",
zIndex: 100,
enableEventPropagation: true
};
var ib = new InfoBox(myOptions);
ib.open(map);
}
}
var map;
var infowindow = new google.maps.InfoWindow();
function initMap() {
// Create the map.
map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {
lat: 21.181272,
lng: 72.835066
},
mapTypeId: google.maps.MapTypeId.TERRAIN
});
addLabel(AutoCircle);
}
google.maps.event.addDomListener(window, "load", initMap);
var AutoCircle = [{
"latitude": '21.170931',
"longitude": '72.855607',
"content": "content0"
}, {
"latitude": '21.192533',
"longitude": '72.848750',
"content": "content1"
}, {
"latitude": '21.190178',
"longitude": '72.797578',
"content": "content2"
}];
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map"></div>

If I understand your code correctly, the 'label' you refer to is an instance of the InfoBox class, which according to its docs, "fires the same events as a google.maps.InfoWindow":
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
So you should be able to do something like:
var infowindow = new google.maps.InfoWindow({
content: 'foo'
});
ib.addListener('click', function() {
infowindow.open(map, this);
});

KineticJS Group

I am making an interactive world map in HTML5. I am using KineticJS to create the polygons of the countries, I currently have Australia and New Zealand. However I want it so if the mouse is over either Australia or New Zealand, they both will be highlighted. I don't know how to use Groups in KineticJS but this is how I tried (i used ellipses for the points because there are a lot of coordinates):
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
background-image: url('world_map.png');
width: 1026px;
height: 540px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"> </script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 1026,
height: 540
});
var layer = new Kinetic.Layer();
var nznorth = new Kinetic.Polygon({
points: [...],
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1
});
var nzsouth = new Kinetic.Polygon({
points: [...],
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1
});
var ausmain = new Kinetic.Polygon({
points: [...],
fill: '#ffffff',
stroke: 'black',
strokeWidth: 1
});
var aus = new Kinetic.Group();
aus.add(ausmain);
aus.add(nznorth);
aus.add(nzsouth);
aus.on('mouseover', function() {
this.setFill('blue');
layer.draw();
});
aus.on('mouseout', function() {
this.setFill('#ffffff');
layer.draw();
});
layer.add(aus);
stage.add(layer);
</script>
</body>
</html>
How should I implement the group in KineticJS?

You just about have it !
When you handle your mouse events, set the fill on both Australia and New Zealand—not on the group.
group.on("mouseover",function(){
australia.setFill("blue");
newzealand.setFill("blue");
layer.draw();
console.log("over");
});
group.on("mouseout",function(){
australia.setFill("skyblue");
newzealand.setFill("skyblue");
layer.draw();
console.log("out");
});
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/LXvkg/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
stage.draw();
var group=new Kinetic.Group();
layer.add(group);
var australia = new Kinetic.Rect({
x: 20,
y: 20,
width: 150,
height: 100,
fill: "skyblue",
stroke: "lightgray",
strokeWidth: 3
});
group.add(australia);
var newzealand = new Kinetic.Rect({
x: 250,
y: 110,
width: 20,
height: 50,
fill: "skyblue",
stroke: "lightgray",
strokeWidth: 3
});
group.add(newzealand);
layer.draw();
group.on("mouseover",function(){
australia.setFill("blue");
newzealand.setFill("blue");
layer.draw();
console.log("over");
});
group.on("mouseout",function(){
australia.setFill("skyblue");
newzealand.setFill("skyblue");
layer.draw();
console.log("out");
});
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>

This tutorial should help you to implement Kinetic groups.
http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/

How to set datalabels as vertical in Highcharts

I want to create a graph "stacked column" using Highcharts plugin with the data in a XML file. (See here)
My XML file is:
<?xml version="1.0" encoding="utf-8"?>
<chart>
<categories>
<item>2000</item>
<item>2001</item>
<item>2002</item>
.... </categories>
<series>
<name>Impots locaux</name>
<data>
<point>231</point>
<point>232</point>
.... </data>
</series>
<series>
<name>Autres impots et taxes</name>
<data>
<point>24</point>
<point>27</point>
<point>37</point>
.....</data>
</series>
<series>
<name>Dotation globale de fonctionnement</name>
<data>
<point>247</point>
<point>254</point>
....</data>
</series>
</chart>
The HTML coding is:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mazet</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<script type="text/javascript" src="../js/themes/gray.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Produits de fonctionnement du Mazet-Saint-Voy'
},
subtitle: {
text: 'Source : Ministère de l\'économie et des finances'
},
tooltip: {
formatter: function () {
return '' + this.y + ' €/hab. en ' + this.x;
}
},
plotOptions: {
column: {
/* pointPadding: 0.2,
borderWidth: 0,*/
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
title: {
text: 'En euros par habitant'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
series: []
};
// Load the data from the XML file
$.get('../xml/43130.xml', function(xml) {
// Split the lines
var $xml = $(xml);
// push categories
$xml.find('categories item').each(function(i, category) {
options.xAxis.categories.push($(category).text());
});
// push series
$xml.find('series').each(function(i, series) {
var seriesOptions = {
name: $(series).find('name').text(),
data: []
};
// push data points
$(series).find('data point').each(function(i, point) {
seriesOptions.data.push(
parseInt($(point).text())
);
});
// add it to the options
options.series.push(seriesOptions);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Where and how code 'dataLabels' to data of my 3 series is vertical?
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
Merci.

You can set rotation to 90. demo
Or you can set useHTML to true and style it using css.
.highcharts-data-labels span {
width: 7px;
white-space: normal !Important;
}
Then your dataLabels formatter should be:
formatter: function() {
return this.y.toString().split('').join(' ');
}
This way you'll get the labels the following way.
9
0
0
demo