I'm creating a dashboard that needs to show the current temp/humidity of a sensor on a chart and display it in relation to a defined static polygon. The polygon represents the acceptable temp/humidity area. I do not need to show previous values, just current temp/humidity point.
I'm trying to create something like this:
What google chart can accommodate something like this? Is there a better library that can handle this? I can display the data with a scatter chart but I'm not sure how to approach the polygon:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Humidity', 'Temp'],
[ 51, 68],
]);
var options = {
title: 'Temp Humidity ',
hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(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" style="width: 900px; height: 500px;"></div>
Fiddle
you can use the ComboChart, with a line series for the polygon.
add a third column for the polygon's y-axis values.
then add rows for each corner of the poylgon,
with one additional row to connect the polygon back to the first corner.
use null for the column values of the "other" series.
var data = google.visualization.arrayToDataTable([
['Humidity', 'Temp', 'poly'],
// scatter point
[51, 68, null],
// polygon
[54, null, 70],
[58, null, 70],
[58, null, 72],
[54, null, 72],
[54, null, 70],
]);
in the options, set the series options as follows...
var options = {
title: 'Temp Humidity ',
hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
legend: 'none',
seriesType: 'scatter',
series: {
1: {
color: '#000000',
type: 'line'
}
}
};
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function drawChart() {
var data = google.visualization.arrayToDataTable([
['Humidity', 'Temp', 'poly'],
// scatter point
[51, 68, null],
// polygon
[54, null, 70],
[58, null, 70],
[58, null, 72],
[54, null, 72],
[54, null, 70],
]);
var options = {
title: 'Temp Humidity ',
hAxis: {title: 'Relative Humidity', minValue: 45, maxValue: 65},
vAxis: {title: 'Temperature (F)', minValue: 64, maxValue: 80},
legend: 'none',
seriesType: 'scatter',
series: {
1: {
color: '#000000',
type: 'line'
}
}
};
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>
Related
I was working on the combo chart (bar + scatter chart) of Google charts. I was not able to change the opacity of the data point and the fill area inside the bars. There was not much information provided in the documentation and I tried to change opacity using methods mentioned for other charts but nothing seemed to work.
Here is the link to the chart I was trying to work on- jsFiddle
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Average', {
role: 'style'
}],
['2004/05', 450, 614.6, sett],
['2005/06', 288, 682, sett],
['2006/07', 397, 623, sett],
['2007/08', 215, 609.4, sett],
['2008/09', 366, 569.6, sett],
['2009/05', 450, 614.6, sett],
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
legend: 'none',
fillOpacity: 0.3,
pointShape: {
type: 'triangle',
rotation: 180
},
pointSize: 7,
series: {
0: {
type: 'bars',
areaOpacity: 0.3
},
1: {
type: 'scatter',
opacity: 0.5,
color: 'blue'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
you can use a 'style' column role to change the opacity,
which it appears you have
however, the style role must follow each series column to which you want to apply the style
so to make the columns opaque, add the style following the second column,
see following working snippet...
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var sett = 'fill-color: #76A7FA; fill-opacity: 0.5; stroke-color: #76A7FA; stroke-width: 1;';
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', {role: 'style'}, 'Average', {role: 'style'}],
['2004/05', 450, sett, 614.6, sett],
['2005/06', 288, sett, 682, sett],
['2006/07', 397, sett, 623, sett],
['2007/08', 215, sett, 609.4, sett],
['2008/09', 366, sett, 569.6, sett],
['2009/05', 450, sett, 614.6, sett],
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
legend: 'none',
fillOpacity: 0.3,
pointShape: {
type: 'triangle',
rotation: 180
},
pointSize: 7,
series: {
0: {
type: 'bars',
areaOpacity: 0.3
},
1: {
type: 'scatter',
opacity: 0.5,
color: 'blue'
}
}
};
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" style="width: 100%; height: 500px;"></div>
I was facing the same issue and found an easier way to control the opacity of bar charts in Google Charts.
I found an easy way of doing this and want to contribute my answer for those who come next!
We can control the opacity of individual series (including bars) by using dataOpacity:
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Average'],
['2004/05', 450, 614.6],
['2005/06', 288, 682],
['2006/07', 397, 623],
['2007/08', 215, 609.4],
['2008/09', 366, 569.6],
['2009/05', 450, 614.6],
]);
var options = {
title: 'Monthly Coffee Production by Country',
vAxis: {
title: 'Cups'
},
hAxis: {
title: 'Month'
},
legend: 'none',
pointShape: {
type: 'triangle',
rotation: 180
},
pointSize: 7,
series: {
0: {
type: 'bars',
dataOpacity: 0.3
},
1: {
type: 'scatter',
color: 'blue',
dataOpacity: 0.6
}
}
};
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" style="width: 100%; height: 500px;"></div>
Find the sample issue in the screenshot below. When we load the graph UI using google charts, the legends data are coming but not displayed properly. The frequency of this issue is less in laptops but frequency is high in desktops. Please guide.
this problem is the result of drawing the chart in a hidden container
to demonstrate, see following working snippet,
the chart remains hidden while it is drawn,
then shown when the chart's 'ready' event is fired
the result is similar to the image posted
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Annual Sales', id: 'Sales', type: 'number'},
{label: 'Annual Expenses', id: 'Expenses', type: 'number'},
{label: 'Annual Profit', id: 'Profit', type: 'number'}],
[{v:new Date('2014'), f:'2014'}, 0, 400, 200],
[{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
[{v:new Date('2015'), f:'2015'}, 0, 460, 250],
[{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
[{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
[{v:new Date('2016'), f:'2016'}, 600, 0, 0],
[{v:new Date('2017'), f:'2017'}, 0, 540, 350],
[{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal',
hAxis: {
format: 'decimal'
},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {
groupWidth: '90%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
google.visualization.events.addListener(chart, 'ready', function () {
$(container).removeClass('hidden');
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>
to correct this issue,
make sure the chart's container is visible,
before drawing for the first time
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[ {label: 'Year', id: 'year', type: 'date'},
{label: 'Annual Sales', id: 'Sales', type: 'number'},
{label: 'Annual Expenses', id: 'Expenses', type: 'number'},
{label: 'Annual Profit', id: 'Profit', type: 'number'}],
[{v:new Date('2014'), f:'2014'}, 0, 400, 200],
[{v:new Date('2014'), f:'2014'}, 1000, 0, 0],
[{v:new Date('2015'), f:'2015'}, 0, 460, 250],
[{v:new Date('2015'), f:'2015'}, 1170, 0, 0],
[{v:new Date('2016'), f:'2016'}, 0, 1120, 300],
[{v:new Date('2016'), f:'2016'}, 600, 0, 0],
[{v:new Date('2017'), f:'2017'}, 0, 540, 350],
[{v:new Date('2017'), f:'2017'}, 1030, 0, 0]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal',
hAxis: {
format: 'decimal'
},
vAxis: {
format: 'yyyy'
},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3'],
isStacked: true,
bar: {
groupWidth: '90%'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
choose to use "use row 1 as headers" from the edit chart "Data" tab
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></div>
I am using google charts and following is the script that is available on google.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
What I want is that on mouse click when I click the position of the dots and change it to new location then that position gets updated on the chart and corresponding array values also gets updated.How to approach this sort of problem? only a generic idea would suffice for me.
http://savedbythegoog.appspot.com/?id=d6fd6426f4f93a21e2ef806a2a88e6cc0576434e
Please check the link above. I want to make the last column labeled "mud weight" a straight line and keep the other lines smooth but I always get either straight or smooth for all the lines.
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['depth', 'pore pressure', 'pore +SM', 'frac. pressure', 'frac. -SM', 'mud weight'],
[10500, 9.75, 10.25, 16.95, 16.45, 12],
[11100, 11.5, 12, 17.35, 16.85, 12],
[11099, 11.5, 12, 17.35, 16.85, 16.85],
[12000, 15, 15.5, 17.8, 17.2, 16.85],
[13000, 16, 16.5, 18.1, 17.6, 16.85],
[14000, 16.35, 16.85, 18.4, 17.9, 16.85],
[13999, 16.35, 16.85, 18.4, 17.9, 17.9],
[16000, 16.8, 17.3, 18.7, 18.2, 17.9],
[18000, 17.2, 17.7, 18.9, 18.4, 17.9],
[19000, 17.4, 17.9, 19, 18.5, 17.9]
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'pore pressure and fracture pressure',
width: 600,
height: 400,
vAxis: {title: "Cups",direction:-1},
hAxis: {title: "Month"},
orientation: 'vertical',
seriesType: "line",
'smoothLine': true,
series: {5: {type: "line",'smoothLine': false}}
});
}
google.setOnLoadCallback(drawVisualization);
<div id="visualization" style="width: 600px; height: 400px;"></div>
Instead of 'smoothLine':true/false you should use curveType:'function'/'none'.
Also you are indexing that series incorrectly - the series are zero-indexed, but your depth column doesn't count towards this indexing, so the mud weight series is actually index 4.
Here is the updated code which should replace your ac.draw(data, {...}):
ac.draw(data, {
title : 'pore pressure and fracture pressure',
width: 600,
height: 400,
vAxis: {title: "Cups",direction:-1},
hAxis: {title: "Month"},
orientation: 'vertical',
seriesType: "line",
curveType: 'function',
series: {4: {curveType: 'none'}}
});