Related
I have a Google Chart (column-chart) showing a single dated (Jan-2010 = 2010-01-01) column - but the resulting column seems to run from 1-Jul-09 through to 1-Jul-10 (note this seems to change depending on the width of the screen); how can I fix this so that the column sits only on the 01-Jan-2010 date? (**Note, the dates/values are variable and can include one or hundreds of column values so we CANNOT simply hard code this or change the column type from 'date' to 'string').
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
A demonstrator for this can be found on https://jsfiddle.net/Abeeee/d5fojtp2/34/
you can add custom ticks to ensure each column "sits" on the correct date.
the ticks option expects an array of values.
we can use DataTable method --> getDistinctValue(colIndex)
to return the date values from the data table.
var xTicks = data.getDistinctValues(0);
hAxis: {
slantedText: false,
format: 'd.MMM.yy', <---- changed from 'd/MMM/yy' to avoid line breaks
ticks: xTicks
},
see following working snippet...
function doTest() {
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var xTicks = data.getDistinctValues(0);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
ticks: xTicks
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
}
window.addEventListener('resize', doTest);
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(doTest);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Google Charts</h1>
<div id="chart_div"></div>
I am trying to display Google line chart with some values. My minimum value is 0 and my maximum value is 100. My graph has 2 lines, not only a single line.
I use curveType: 'function' for the graph options, and for some reason in the chart - the minimum is being set to -100 and the maximum value is being set to +200. Please run the script and look at the number to the left of the graph - these are the values I'm asking about and wishes to control them.
What am I doing wrong?
Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="LineChart"></div>
</body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
minValue:0,
maxValue:100
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
google.visualization.events.addListener(chart7, 'ready', afterDraw);
}
</script>
</html>
not sure why minValue and maxValue do not work.
however, you can use viewWindow instead...
viewWindow: {
min:0,
max:100
}
see following working snippet...
// Load google charts
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Draw the chart and set the chart values
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn('number', 'Value2');
data.addRows([
['5/21/2019',50,50],
['5/21/2019',100,0],
['5/21/2019',89,11],
['5/21/2019',90,10],
['5/21/2019',90,10],
['5/22/2019',90,10],
['5/22/2019',76,24],
['5/23/2019',76,24],
['5/23/2019',76,24]
]);
var Lineoptions = {
title: 'Overall success',
lineWidth: 4,
colors: ['#c9e3f4','#ea4c4c'],
curveType: 'function',
legend:{position:'none'},
fontSize:23,
hAxis : {
textStyle : {
fontSize: 16
}
},
vAxis : {
textStyle : {
fontSize: 16
},
viewWindow: {
min:0,
max:100
}
},
annotations: {
textStyle: {
fontSize: 25,
bold: true,
italic: false,
color: '#000000',
opacity: 1
},
alwaysOutside: true
}
};
var Linechart = new google.visualization.LineChart(document.getElementById('LineChart'));
Linechart.draw(data, Lineoptions);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="LineChart"></div>
How to add a point inside the Google Charts Visualization: Area chart like the red point in the picture shown above and can i put some label above or beside the point?
Here is the code that outputs the chart above
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
<?php echo"['', 2, null],"; ?>
<?php echo"['', 2, '1 Kpa ---------->'],"; ?>
<?php echo"['2', 1, '<---------- 2'],"; ?>
<?php echo"['3 σ', 0, '<---------- 3 σ']"; ?>
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] }
};
var chart = new google.visualization.AreaChart(document.getElementById('total_stress'));
chart.draw(data, options);
}
you can use a ComboChart to combine series types
add another column to the data table for the point
in the options, define the series types, use 'scatter' for points
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number', 'Scatter');
data.addRows([
['', 2, null, null],
['', 2, '1 Kpa ---------->', 1],
['2', 1, '<---------- 2', null],
['3 s', 0, '<---------- 3 s', null]
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] },
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've created a google chart and the data is pulled from a database and structured to meet the requirements of the chart, however, for some reason, whenever I try change the options for the chart it just wont work.
I need to move the legend to below the chart and make the point size on the chart 30 pixels.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility ', 11.5, 10, 11.5]]);
var options =
{
legend: { position: 'bottom' },
chart: {title: 'Student Results'},
legend:{position: 'bottom', textStyle: {color: 'black', fontSize: 16}},
pointSize:30,
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style='width:calc(100% - 80px); height:400px; margin:auto;'></div>
Any suggestions on why the legend wont move or point size wont change, the chart data can have many aspects (x axis value), I need to point-size to change so that it wont look blank with just a aspect (x axis value)
there are several options that simply don't work in Material charts
and it appears Line requires two data points per series before drawing anything
I would recommend using 'corechart' instead
there is an option for theme: 'material' to get the base look and feel close to a Material chart
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Aspect');
data.addColumn('number', 'Leaner');
data.addColumn('number', 'Norm');
data.addColumn('number', 'Grade');
data.addRows([['Agility 1', 11.5, 10, 11.5]]);
var options = {
chartArea: {
width: '90%'
},
height: 600,
legend: {
position: 'bottom',
textStyle: {
color: 'black',
fontSize: 16
}
},
pointSize: 30,
theme: 'material',
title: 'Student Results',
vAxis: {
viewWindow: {
min: 0,
max: 15
}
},
width: '100%'
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages:['line', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div"></div>
<div>Material Chart</div>
<div id="line_chart"></div>
I'm having some trouble with Google charts. I have a Google area chart:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday','time');
data.addColumn('number','temp');
data.addRows([
[[8,0,0],7.875],
[[8,15,0],7.9399996],
[[8,30,0],8.1],
[[8,45,0],8.160001],
[[9,0,0],8.139999],
// data every quarter of an hour
[[7,15,0],9.26],
[[7,30,0],9.26],
[[7,45,0],9.18]
]);
var options = {
title: 'Title',
vAxis: {
title: 'AvgTemp',
titleTextStyle: {color: 'red'},
}
hAxis: {
title: 'Time',
titleTextStyle: {color: 'red'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
</script>
Now, when I load my page, the hAxis of the chart starts at 0:00 and ends at 24:00, and it destroys the chart. How can I make it so that the chart starts at 8:00 and ends at 7:45?
I've tried some things with view window but I can't seem to make it work.
Thanks.
The answer was to use a datetime instead of a time of the day, this way you need to add a date and thats how the api knows which time comes first.
like this:
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('datetime','time');
data.addColumn('number','temp');
data.addRows([
[new Date(2012,11,3,8,0,0),7.875],
[new Date(2012,11,3,8,15,0),7.9399996],
[new Date(2012,11,3,8,30,0),8.1],
[new Date(2012,11,3,8,45,0),8.160001],
[new Date(2012,11,3,9,0,0),8.139999],
//new data every quarter of an hour
[new Date(2012,11,4,7,0,0),9.42],
[new Date(2012,11,4,7,15,0),9.26],
[new Date(2012,11,4,7,30,0),9.26],
[new Date(2012,11,4,7,45,0),9.18]
]);
var options = {
title: 'Title',
vAxis: { title: 'AvgTemp',
titleTextStyle: {color: 'red'},
},
hAxis: { title: 'Time',
titleTextStyle: {color: 'red'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
</script>
#oaklodge
producerCountDatatable = new google.visualization.DataTable();
// producerCountDatatable.addColumn('timeofday', 'Timestamp');
producerCountDatatable.addColumn('datetime', 'Time of day(Hours:Minutes)');
producerCountDatatable.addColumn('number', 'ProducerCount');
for(var i = 0; i < hours.length; i++){
//If you use timeofday //producerCountDatatable.addRow([[parseInt(hours[i]),parseInt(minutes[i]),parseInt(seconds[i])],newProducerData[i]]);
//the following is for datetime
producerCountDatatable.addRow([new Date(timeStampData[i]),newProducerData[i]]);
}