Reputation: 765
I'm trying to make a line graph that goes behind the price converter divs. I don't want it to have any axes, how can I remove them and have the line reach both ends of the page? I also want the line to be behind the price boxes if possible.
Here is what I've got right now:
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawAxisTickColors);
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Price');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], [12, 35], [13, 35], [14, 35], [15, 35], [16, 35], [17, 35], [18, 35], [19, 35], [20, 35], [21, 35], [22, 35], [23, 35]
]);
var options = {
hAxis: {
gridlines: {
color: '#ffffff'
},
},
vAxis: {
gridlines: {
color: '#ffffff'
},
},
colors: ['blue', '#ffffff'],
legend: 'none'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<center>
<div class = "ratesBox">
<div class = "bitcoin">
<div class = "rateboxy"><input value = "1" type="text" name = "btc" id="btc" class="rate" onchange="btcConvert(this);" onkeyup ="btcConvert(this);"/></div>
</div>
<div class= "unitBox">
<div class = "smallUnitBox" onclick="satoshiConvert(btc);" id="satoshiBox">sat</div>
<div class = "smallUnitBox" onclick="bitConvert(btc);" id="bitBox">bit</div>
<div class = "smallUnitBox" onclick="mBTCConvert(btc);"id="mBTCBox">mBTC</div>
<div class = "smallUnitBox2" onclick="bitcoinConversion(btc);" id="BTCBox">BTC</div>
</div>
<p id = "equals">=</p>
<div class = "rateboxy"><input value = "<?php echo $bitcoinPrice; ?>"type="text" name="cur" id="cur" class="rate" onchange="usdConvert(this);" onkeyup ="usdConvert(this);"/></div>
</div>
</center>
<div id="chart_div"></div>
</body>
</html>
Styling for the line chart
#chart_div {
position:absolute;
top:0;
left:0;
width:100%;
}
Upvotes: 0
Views: 136
Reputation: 17966
I think this is what you're after.
var options = {
chartArea: {
left: 0,
top: 0,
right: 0,
bottom: 0,
width: "100%",
height: "100%"
},
hAxis: {
textPosition: 'none',
baselineColor: 'none',
gridlines: {
color: 'none'
},
},
vAxis: {
textPosition: 'none',
baselineColor: 'none',
gridlines: {
color: 'none'
}
},
colors: ['blue', '#ffffff'],
legend: 'none'
};
Upvotes: 1