First time working with some Graph JS Library.
I am using Google Charts which is pretty cool but my graph is all over the place - https://jsfiddle.net/gcwebsites/5ae9fhj0/1/
This is my script code with my array/loop.
`
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Temperature');
data.addRows([
<?php foreach($daily_temperature_array as $dtemp): ?>[<?php echo $dtemp['time']; ?>,<?php echo $dtemp['temp']; ?>],<?php endforeach; ?>
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Temperature'
}
};
var chart = new google.visualization.LineChart(document.getElementById('temperaturechart'));
chart.draw(data, options);
}
</script>`
I am trying to create a line graph of time and temperature from weather station data I have in a database query.
Anyone able to assist and see why my graph is all over the joint?
Thanks.
Replicated the original Google Code https://jsfiddle.net/api/post/library/pure/ / https://developers.google.com/chart/interactive/docs/gallery/linechart#examples and was expecting a perfect line graph.......
Related
I'm trying to create a ComboChart including three columns types string, timeofday, number but I Facing an error "All series on a given axis must be of the same data type" even the column types is there, how to fix that ?
please check the link: https://jsfiddle.net/minamagdy666/2jfn1uec/3/
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day');
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
['eee',[8, 30, 45], 5],
['eee',[9, 0, 0], 10],
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450,
series: {0:{type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
first, need to define the seriesType for the chart.
'line', 'area', 'bars', 'candlesticks', or 'steppedArea'
seriesType: 'bars'
next, if each series is not the same type,
(in this case one is number, the other timeofday)
then each series must be on its own y-axis...
1: {targetAxisIndex: 1}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Time of Day');
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Emails Received');
data.addRows([
['eee',[8, 30, 45], 5],
['eee',[9, 0, 0], 10],
]);
var options = {
title: 'Total Emails Received Throughout the Day',
height: 450,
seriesType: 'bars',
series: {
0:{
type: 'line'
},
1: {
targetAxisIndex: 1
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I've got a chart Google bar chart with currency values and I simply want to have the Y-axis formatted with £s. I've tried to explicitly set the locale using 'en' but it still displays as $. If I set other locales it does then display in the local currency for that locale ... but it doesn't seem to work for English £s.
google.charts.load('current', {packages:['corechart'], language: 'en'});
e.g. https://jsfiddle.net/ynsqwe6o/5/
use language code --> 'en-GB'
see following working snippet...
google.charts.load('current', {
packages: ['corechart'],
language: 'en-GB'
});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'GDP');
data.addRows([
['US', 16768100],
['China', 9181204],
['Japan', 4898532],
['Germany', 3730261],
['France', 2678455]
]);
var options = {
chartArea: {
left: 108
},
title: 'GDP of selected countries, in \u00A3pounds',
width: 500,
height: 300,
legend: 'none',
bar: {
groupWidth: '95%'
},
vAxis: {
format: "currency",
gridlines: {
count: 4
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="number_format_chart"></div>
I want to show data values on the line chart, i.e. which appear on mouse over, i need them all displayed by default. I tried the solution here Google Charts API: Always show the Data Point Values in Graph
data.addColumn({type: 'number', role: 'annotation'});
I added this to my code (I'm not sure where to put it exactly) but It didn't make any change.
Here is part of my code:
<!DOCTYPE html>
<html>
<head>
<title>Week/Orders</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = new google.visualization.DataTable();
var data = google.visualization.arrayToDataTable([
['Week','Orders'],
<?php
while($row = mysqli_fetch_assoc($aresult)){
echo "['".$row["Week"]."', ".$row["Orders"]."],";
}
?>
]);
var options = {
title: 'Week Vs Orders',
'width':1700,
'height':600,
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="curvechart" style="width: 900px; height: 400px"></div>
</body>
</html>
I have two values; Week and Orders. I need only the "Order" value displayed on the graph by default. How can I do this? Thanks.
you can use a DataView to add annotations to the chart
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
var data = google.visualization.arrayToDataTable([
['Week','Orders'],
['1', 5],
['2', 6],
['3', 4]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: 'Week Vs Orders',
width: 1700,
height: 600,
legend: {position: 'bottom'}
};
var chart = new google.visualization.LineChart(document.getElementById('curvechart'));
chart.draw(view, options); // <-- use data view
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curvechart"></div>
If I have a single data row like this:
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'User');
data.addRows([
[new Date(), 41],
]);
var options = {
chart: {
title: 'Active Users',
},
width: 900,
height: 500
};
var chart = new google.charts.Line(document.getElementById('linechart_material'));
chart.draw(data, options);
}
How to display a point in such kind of situation? Right now, the point is there but it is not highlighted.This problem is only in material chart not in classic.
the option for pointSize needs to be set for a single row of data
however, it is among the several options that do not work on Material charts
see this issue --> Tracking Issue for Material Chart Feature Parity #2143
instead, recommend using Core chart, with following option...
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'User');
data.addRows([
[new Date(), 41],
]);
var options = {
height: 500,
theme: 'material',
title: 'Active Users',
width: 900
};
if (data.getNumberOfRows() === 1) {
options.pointSize = 5;
}
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am implementing google charts and I want to give style to x-axis data. I found there the following code to do this.
hAxis:{
title: 'Month',
textStyle :{
fontSize : 10
}
}
I want to underline the text data and change cursor style to the pointer. I searched on the google chart website but didn't get.
you can modify the text elements directly,
when the 'ready' event fires on the chart
you can select which axis labels to modify by using the 'text-anchor' attribute
x-axis labels have a value of 'middle', y-axis 'end'
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
data.addRows([
['Category A', 200],
['Category B', 110],
['Category D', 310],
['Category E', 280],
['Category F', 175]
]);
var options = {
hAxis: {
textStyle: {
fontSize : 10
},
title: 'Month'
},
height: 400,
width: 600
};
var chartContainer = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(chartContainer);
google.visualization.events.addListener(chart, 'ready', function () {
// modify x-axis labels
var labels = chartContainer.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
label.style.textDecoration = 'underline';
label.style.cursor = 'pointer';
}
});
});
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>