Related
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>
So... my problem is that the google chart is not displaying the bottom legend and vAxis values.
It should have, for example, on the left red box, the values 100, 200, 300...
And the bottom should have (orange box) "Solar energy" and (red line) "solar consumption" written on it.
I am printing it on jsPDF plugin, so its a hidden container, i cant display it on the screen
The html:
<div id="chart_div" style="display: none;"></div>
The js:
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var dataChart1 = new google.visualization.DataTable();
dataChart1.addColumn('string', 'Mês');
dataChart1.addColumn('number', 'Fora Ponta');
dataChart1.addColumn('number', 'Geração Solar');
dataChart1.addRows([
['JAN', 0, 0],
['FEV', 1, 1],
['MAR', 2, 2],
['ABR', 3, 3],
['MAI', 4, 4],
['JUN', 5, 5],
['JUL', 6, 6],
['AGO', 7, 7],
['SET', 8, 8],
['OUT', 9, 9],
['NOV', 10, 10],
['DEZ', 11, 11]
]);
var optionsChart1 = {
titlePosition: 'none',
vAxis: {title: 'Valores'},
hAxis: {
format: 'decimal'
},
legend: {
position: "bottom"
},
seriesType: 'bars',
series: { 1: { type: 'line' } },
height: 300,
width: 800,
colors: ['orange', 'red']
};
chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dataChart1, optionsChart1);
});
After a few tests, i manage to work it out removing:
display:none;
from my chart div and adding:
position: absolute;z-index: -1;
So it will not appear on the screen and still avoid the bug of not showing the legend correctly because of the hidden content.
I'm struggling to find out why geochart map cuts top of the map when using the Europe region.
For example Finland does not show up completely.
Has anyone ever encountered such problem?
Code
$(document).ready(function() {
google.charts.load('visualization', '1', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'ColorIndex'],
['fi', 2],
['ee', 1],
['gb', 2],
['at', 2],
['dk', 2],
['es', 2]
]);
var opts = {
region: '150',
displayMode: 'regions',
resolution: 'countries',
width: 480,
height: 320,
enableRegionInteractivity: true,
backgroundColor: 'transparent',
datalessRegionColor: 'transparent',
legend: 'none',
tooltip : { trigger : 'none' },
colorAxis: {
values: [1, 2, 3],
colors: ['#050b55', '#003399', '#eb5f0f']
}
};
var container = document.getElementById('visualization');
var geochart = new google.visualization.GeoChart(container);
geochart.draw(data, opts);
}
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization" style="width:100%; height:200px"></div>
I'm trying to work with Google charts API, but I get an error I can't understand:
When I uses a single chart it shows very well the chart, but when I
add the second graph I receive the following error:
TypeError: google.charts.Bar is not a constructor
Here is my code:
<div class="row">
<div class="col-md-12" style="padding-left:3px; padding-right:3px">
<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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'val1', 'val2' , 'val3', 'val4'],
[ '09', 12, 5, 9, 2],
[ '10', 32, 19, 16, 9],
[ '11', 2, 7, 5, 12],
[ '12', 23, 11, 9, 18],
[ '13', 5, 7, 4, 12],
[ '14', 21, 16, 12, 43],
[ '15', 2, 1, 2, 3],
[ '16', 9, 12, 18, 32],
]);
var options = {
height: 400,
title: 'Viste journalière',
intervals: { 'style':'area' },
hAxis: {title: 'Jour', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 420px;"></div>
</body>
</html>
</div>
<div class="row">
<div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
<html>
<head>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Titre', 'Comment', 'like', 'no'],
[ 'text1', 7, 10, 3],
[ 'text2', 2, 4, 5],
[ 'text3', 4, 3, 2],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options)); }
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
</div>
</div>
Your HTML markup is strange, and I'm not sure if that is intentional or not. According to the docs, you should load everything in a single call to google.charts.load() and you should be loading both the corechart and bar packages there. All of your javascript should also be in the same <script></script> tag.
Here's a working example with two charts on the same page:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
google.charts.setOnLoadCallback(drawChartTwo);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'val1', 'val2' , 'val3', 'val4'],
[ '09', 12, 5, 9, 2],
[ '10', 32, 19, 16, 9],
[ '11', 2, 7, 5, 12],
[ '12', 23, 11, 9, 18],
[ '13', 5, 7, 4, 12],
[ '14', 21, 16, 12, 43],
[ '15', 2, 1, 2, 3],
[ '16', 9, 12, 18, 32],
]);
var options = {
height: 400,
title: 'Viste journalière',
intervals: { 'style':'area' },
hAxis: {title: 'Jour', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function drawChartTwo() {
var data = google.visualization.arrayToDataTable([
['Titre', 'Comment', 'like', 'no'],
[ 'text1', 7, 10, 3],
[ 'text2', 2, 4, 5],
[ 'text3', 4, 3, 2],
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<div class="row">
<div class="col-md-12" style="padding-left:3px; padding-right:3px">
<div id="chart_div" style="width: 100%; height: 420px;"></div>
</div>
</div>
<div class="row">
<div class="col-md-4" style="margin-left:10px; padding-left:3px; padding-right:3px">
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</div>
</div>
Edit: Example works now and added a jsfiddle
This is code for chart Displaying along with data but i need to delete selected point in the scatter chart.yell me the logic how to proceed this one..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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([
['Age', 'Weight'],
[ 8, 12],
[ 4, 60],
[ 11, 14],
[ 4, 80],
[ 3, 40],
[ 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);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
i want to delete selected point from the scatter chart can i know the logic of how to proceed this one