I want to draw a line in front of a candlesticks chart with google combo chart.
With this code, the line chart is drawn behind the candlesticks chart like the image below.
How can I change the z-axis of charts?
<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(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month', 'Low', 'Open', 'Close', 'High', 'Line'],
['2004/05', 80, 100, 90, 120, 1.2],
['2004/06', 70, 120, 95, 150, 1.8],
['2004/07', 60, 110, 80, 140, 1.9],
['2004/08', 85, 130, 92, 190, 2.8],
]);
var options = {
title : 'Candlesticks with line chart',
hAxis: {title: 'Month'},
seriesType: 'candlesticks',
series: {
1: {type: 'line', targetAxisIndex: 1}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Related
Look at this simple google chart. I would like to get rid of the unnecessary padding space between the hr tag and the upper part of the graph.
(I guess it is for title but i'm not using titles.)
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle : {
fontSize:1
},
title: null,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
EDIT
I've accepted wahab memon's answer because it addresses directly my original question.
However, solving my original problem introduces - or reveals, instead - another vertical spacing problem at the bottom.
Look at this very tall graph (tall graph makes sense eg. for bar charts with many independent values). The 'spacing' up and down to the horizontal axis title is unnecessarily big:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 1200px;"></div>
<hr/>
There should be a way to tell to Charts to apply these rules:
do not use title at all (omit the space as well)
use a sane horizontal axis labelling at the bottom (with the label's native size)
use all the remaining space for graph itself.
I wonder if it is possible in any way.
You can provide chartArea config in options which take height and width of chart. By using that the extra spacing will be utilized by your chart view.
Refer the code below or fiddle:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
titleTextStyle: {
fontSize: 1
},
chartArea: {
width: '80%',
height: '80%',
top: 10
},
title: null,
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<hr/>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
<hr/>
How can i hide the line (in chartjs 2.x) as soon it goes outside the scale boundries?
i came across this question/answer:
How do I hide values past the x-axis in chartjs 2.0?
There they will filter all points outside the scale boundries. But that will only work if you have a point on the min/max, and the curve of the line (if any) will not be correct.
In my situation there isn't always a point for the min and/or max and line is also curved.
I have a situation like this jsfiddle:
https://jsfiddle.net/gyotsv07/1/
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
</head>
<body><iframe class="chartjs-hidden-iframe" tabindex="-1" style="width: 100%; display: block; border: 0px; height: 0px; margin: 0px; position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;"></iframe>
<canvas id="canvas" height="566" style="display: block; width: 849px; height: 566px;" width="849"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
/*
var cleanOutPlugin = {
beforeInit: function(chart) {
// Replace `ticks.min` by `time.min` if time-type chart
var min = chart.config.options.scales.xAxes[0].ticks.min;
// Same here with `ticks.max`
var max = chart.config.options.scales.xAxes[0].ticks.max;
var ticks = chart.config.data.labels;
var idxMin = ticks.indexOf(min);
var idxMax = ticks.indexOf(max);
if (idxMin == -1 || idxMax == -1)
return;
var data = chart.config.data.datasets[0].data;
data.splice(idxMax + 1, ticks.length - idxMax);
data.splice(0, idxMin);
ticks.splice(idxMax + 1, ticks.length - idxMax);
ticks.splice(0, idxMin);
}
};
Chart.pluginService.register(cleanOutPlugin);*/
var scatterChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Scatter Dataset',
data: [{
x: -10,
y: 0
}, {
x: 0,
y: 6
}, {
x: 10,
y: 5
}]
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom',
ticks: {
min: -5,
max: 5
}
}]
}
}
});
</script>
</body></html>
is there a solution to prevent drawing outside the scale boundries?
A quick fix to your issue is to remove everything drawn outside of the chart surface.
The following plugin can help you doing it :
Chart.plugins.register({
beforeDatasetsDraw: function(chartInstance) {
var ctx = chartInstance.chart.ctx;
var chartArea = chartInstance.chartArea;
ctx.save();
ctx.beginPath();
ctx.rect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
ctx.clip();
},
afterDatasetsDraw: function(chartInstance) {
chartInstance.chart.ctx.restore();
},
});
Check your updated fiddle here and its result :
Good morning:
I want to display my bar charts tick mark labels at an angle. Is that possible? My code, using a simple chart from Google is included.
Thanks for your assistance,
Natalie
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!--Load the AJAX API-->
<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([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]);
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300,
'hAxis':{
ticks: [250, 300,],
gridlines: {color: 'blue'},
textStyle:{color: 'blue',}
},
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
just add slantedText: true to your configuration options
if you need a specific angle, use slantedTextAngle: number
see following example...
google.charts.load('current', {
callback: function () {
new google.visualization.BarChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Topping', 'Slices',],
['Mushrooms', 300],
['Onions', 100],
['Olives', 500],
['Zucchini', 200],
['Pepperoni', 100]
]),
{
title: 'How Much Pizza I Ate Last Night',
width: 400,
height: 300,
hAxis: {
ticks: [250, 300],
gridlines: {color: 'blue'},
// slant hAxis labels
slantedText: true,
slantedTextAngle: 33,
textStyle: {color: 'blue'}
}
}
);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I would like to customize values of vertical axis in google chart. In their documentation I've found property for this.It's placed between comments (// ---additionaly added..) in the code, but the graph is not being drawn. Does anyone knows what could be the problem?
<link rel="shortcut icon" href="images/superGear.ico">
<link rel="icon" type="image/png" href="images/superGear.png">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
// ADDITIONALY ADDED--------------
vAxis: {
viewWindowMode:'explicit',
viewWindow:{ min:90, max :100 }
//---------------------------------
};
var chart = new google.visualization.AreaChart(document.getElementById('lastMonth'));
chart.draw(data, options);
}
</script>
And div placed into body for displaying the graph
<div id="lastMonth" style="height: 500px;"></div>
You are missing the closing } for the vAxis option:
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
min:90,
max: 100
}
}
The following code makes a horizontal stacked barchart that looks like this:
If I change the height attribute to 50 and the groupWidth to 40%, the legend disappears and the chart looks like this:
Question 1: How can I set the height of the bar and still show the legend?
Question 2: How can I get the horizontal and vertical axis to disappear?
What I am really trying to accomplish is a picture like this:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[' ', 'Sales', 'Expenses'],
[0 , 1000, 400],
]);
var options = {
isStacked: true,
width: 200,
height: 60,
vAxis: {gridlines: {count: 0}},
hAxis: {gridlines: {count: 0}},
bar: {groupWidth: "90%"},
legend: {position: 'top'}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" ></div>
</body>
</html>
Set the chartArea.top option to move the chart area down and give the legend room to draw:
chartArea: {
top: 15
}
jsfiddle