I call updateChart(d) functions via ajax and pass new data.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var chart;
var dataTable;
var options;
var i = 1;
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
dataTable = google.visualization.arrayToDataTable([
['Amplitude', 'time'],
['0', 0]
]);
options = {
title: '',
curveType: 'function',
legend: { position: 'bottom' }
};
chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(dataTable, options);
}
function updateChart(d) {
i++;
dataTable.setValue(i, d); // Вот тут
chart.draw(dataTable, options);
}
</script>
When I try to add the next value for the chart, it throws an error:
Uncaught Error: Invalid row index 2. Should be in the range [0-0]
I did not find any solutions on the Internet (This is for a robot, it swears that there is not enough text).
function updateChart(d) {
i++;
console.log(i+"======"+d);
//data.setValue(i,1,d);
data.addRow([String(i), Number(d)]);
chart.draw(data, options);
}
Related
It is just a simple script project that is supposed to create a pie chart from the data in a spreadsheet. I had it working when I built the DataTable within the HTML file, but I tried to adjust it with a query in order to pull the data from a spreadsheet and make the dashboard dynamic with changes to the spreadsheet.
Whenever I deploy it however, it just shows up as a blank screen. Any help/thoughts is appreciated! I will get it eventually...
HTML File Code:
<html>
<head>
<!--Load the AJAX API-->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function initialize() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
}
// Send the query with a callback function.
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
}
//enter alert on user screen when clicking on section of chart
function selectHandler() {
var selectedItem = chart.getSelection()[0];
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div" style="width:400; height:300"></div>
</body>
</html>
JS File Code:
function doGet() {
return HtmlService.createHtmlOutputFromFile('webappchartv2');
}
Missing query.send(handleQueryResponse);
setOnLoadCallback is not set properly
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var opts = {sendMethod: 'auto'};
// Replace the data source URL on next line with your data source URL.
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1BiNoiV10xrAU8PwdJfgldneLwFuCnY5GhQRDEIzftd8/edit#gid=0', opts);
query.send(handleQueryResponse);
}
...
I have the following div on a page where I would like a google chart to load on a button click:
html:
<div class="row">
<div class="col-lg-12">
<div class="card mb-3">
<div class="card-header"><b>System Voltage</b></div>
<div class="card-body">
<div class="row">
<div class="col-md-12" id="line_chart" style="width:100%;height:360px;">
<!-- SHOW GOOGLE GRAPH HERE --> <button class="btn">Plot chart!</button>
</div>
</div>
</div>
</div>
</div>
</div>
Google Chart:
<script type="text/javascript">
$(document).ready(function() {
$(".btn").click(function() {
google.charts.load('current', {
packages: ['corechart'], callback: drawChart
}).then(function drawChart() {
<?php
$imei = $bboxx_imei;
$result = shell_exec('Daily_Data_Retriever_ishackweb.py ' . $imei);
$resultdata = json_decode($result, true);
?>
var jsonData = <?php echo $result; ?> //{"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}};
var chartData = [];
Object.keys(jsonData).forEach(function (column) {
chartData.push(['Datetime', column]);
Object.keys(jsonData[column]).forEach(function (dateValue) {
chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
});
});
var data = google.visualization.arrayToDataTable(chartData);
var options = {
chartArea: {width:'90%', height:'65%'},
title: 'Battery Voltage',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
});
});
});
</script>
At the moment, the button appears, but nothing is happening on the click.
I am trying to follow this example.
EDIT:
I have updated the google charts to exclude the callback statement, and also added libraries I am using. The chart shows up perfectly well when not using the button, but I would like it to show only when the button is pressed.
<script type="text/javascript">
$(document).ready(function() {
$(".btn").click(function() {
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
<?php
$imei = $bboxx_imei;
$result = shell_exec('Daily_Data_Retriever_ishackweb.py ' . $imei);
$resultdata = json_decode($result, true);
?>
var jsonData = {"Battery Voltage, (A)":{"2017-11-11T00:00:00.000Z":12.3,"2017-11-11T00:01:00.000Z":12.35,"2017-11-11T00:02:00.000Z":12.6,"2017-11-11T00:03:00.000Z":12.7,"2017-11-11T00:04:00.000Z":12.8},"Battery Current, (A)":{"2017-11-11T00:00:00.000Z":1.3,"2017-11-11T00:01:00.000Z":1.4,"2017-11-11T00:02:00.000Z":1.5,"2017-11-11T00:03:00.000Z":1.6,"2017-11-11T00:04:00.000Z":1.7}};
var chartData = [];
Object.keys(jsonData).forEach(function (column) {
chartData.push(['Datetime', column]);
Object.keys(jsonData[column]).forEach(function (dateValue) {
chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
});
});
var data = google.visualization.arrayToDataTable(chartData);
var options = {
chartArea: {width:'90%', height:'65%'},
title: 'Battery Voltage',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
});
});
});
</script>
Libraries:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
when using the promise returned from the load statement,
the callback is not needed...
change the load statement as follows...
google.charts.load('current', {
packages: ['corechart'],
}).then(function () {
also need to ensure the library is included...
<script src="https://www.gstatic.com/charts/loader.js"></script>
EDIT
note: the following library is old and should no longer be used, you can remove it.
<script src="https://www.google.com/jsapi"></script>
see the release notes for more info...
the load statement will wait for the document to load,
no need for --> $(document).ready
recommend loading google first, then wait for the button click...
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
$(".btn").click(function() {
var jsonData = {"Battery Voltage, (V)":{"2017-10-09T00:00:00.000Z":12.5,"2017-10-09T00:01:00.000Z":12.44,"2017-10-09T00:02:00.000Z":12.43}};
var chartData = [];
Object.keys(jsonData).forEach(function (column) {
chartData.push(['Datetime', column]);
Object.keys(jsonData[column]).forEach(function (dateValue) {
chartData.push([new Date(dateValue), jsonData[column][dateValue]]);
});
});
var data = google.visualization.arrayToDataTable(chartData);
var options = {
chartArea: {width:'90%', height:'65%'},
title: 'Battery Voltage',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input class="btn" type="button" value="Draw Chart" />
<div id="line_chart"></div>
Add <script type="text/javascript" src="https://www.google.com/jsapi"> to the head of your html page to load the library for the chart
Maybe you forgot to import all the necessary files. Make sure you are importing the jquery cdn (or download the file to your server)
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
and google chart cdn
<script src="https://www.google.com/jsapi"></script>
and check if you need an API key to use the plugin.
In my home.scala.html page's head I have a comprehensive javascript to call a google chart, using a map passed from scala using the java play framework.
<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('date', 'xVariable');
data.addColumn('number', 'yVariable');
var mapVariable = #mapFromScala;
console.log("Hello world");
for (var mapKey in mapVariable) {
data.addRows([
[new Date(mapKey) , mapVariable[mapKey]]
]);
}
var options = {
chart: {
title: 'This is my map',
subtitle: 'it has a subtitle'
},
width: 1000,
height: 600
};
var chart = new google.charts.Line(document.getElementById('chartId'));
chart.draw(data, options);
}
</script>
and in body
<div id="chartId"></div>
Why don't I get anything back? Even the 'Hello world' console.log doesn't seem to show in SBT console.
The map variable must be brought in as a String. JSON can be used for this but
var mapVariable = "#mapFromScala"
Also works, although the process to convert from String back into a Map is inelegant.
This process is described here, except the data types are different and
data.addRows([[xVariable, yVariable]])
is invoked instead of
jsArray.xVariable = yVariable;
I had a deep look at somewhat similar questions asked here and here. I tried their implementation. It didn't work !
Then I had a look at following link by Google : tow charts in one page. Followed the same procedure but still ended up showing only one chart at a time.
Below is my code :
<script type = "text/javascript" src = "https://www.google.com/jsapi" ></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--Load the Ajax API-->
<script type="text/javascript">
google.load("visualization", "1", {packages:["line"]});
google.setOnLoadCallback(drawChart);
google.setOnLoadCallback(drawOutputChart);
function drawChart() {
var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>);
var options = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart = new google.charts.Line(document.getElementById('analogchart'));
chart.draw(data, options);
}
function drawOutputChart(){
var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>);
var options2 = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart2 = new google.charts.Line(document.getElementById('outputChart'));
chart2.draw(data2, options2);
}
</script>
**HTML Code to call it : **
<table>
<tr>
<td>
<div id="analogchart" >
</div>
</td>
<td>
<div id="outputChart" >
</div>
</td>
</tr>
</table>
I seriously have no idea what is going wrong as it is able to show one chart at a time, but not both !
it is recommended to use loader.js vs. the older library jsapi
and don't need both for a Line chart
also, setOnLoadCallback should only be called once per page
which can be included in the load statement, as in the following example
try something like this...
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart();
drawOutputChart();
},
packages: ['line']
});
function drawChart() {
var data = new google.visualization.DataTable(<?= $jsonAnalogTable ?>);
var options = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart = new google.charts.Line(document.getElementById('analogchart'));
chart.draw(data, options);
}
function drawOutputChart(){
var data2 = new google.visualization.DataTable(<?= $jsonOutputTable ?>);
var options2 = {
chart: {
title: ' Data ',
is3D: 'true'
},
width: 550,
height: 350,
};
var chart2 = new google.charts.Line(document.getElementById('outputChart'));
chart2.draw(data2, options2);
}
</script>
I want to integrate google chart in my laravel5.0 application. The data is in mysql database. As far I've done researching over internet is given bellow
controller part
public function index(){
$barChart= DB::table('clients')
->select('clients.ClientName','clients.Price')
->get();
$bar = json_encode($barChart);
return view('home')
->with('bar', $bar);
}
If I print $bar , the result is
[{"ClientName":"nayeem","Price":1000},{"ClientName":"Tusher","Price":1000},
{"ClientName":"Nirjon","Price":1000},{"ClientName":"Remon","Price":1000},
{"ClientName":"Navid","Price":1000},{"ClientName":"Erfan","Price":1000},
{"ClientName":"Sazzad","Price":1000},{"ClientName":"Farin","Price":2000},
{"ClientName":"Arman","Price":1000},{"ClientName":"Sohan","Price":1000},
{"ClientName":"romi vai","Price":9000},{"ClientName":"tasif","Price":1000},
{"ClientName":"trina","Price":1000},{"ClientName":"Nuru Vai","Price":1000}]
view part
<div class="panel-body" id="barChart"> </div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?=$bar?>);
var options = {
title: 'My Bar chart',
is3D: 'true'
};
var chart = new google.visualization.PieChart(document.getElementById('barChart'));
chart.draw(data, options);
}
But it shows "table has no column" . I know I haven't create any column and I also understand that simply writing this google.visualization.DataTable(<?=$bar?>) will not create any column. I've tried many ways to create column but can not find any solution. How can I create data table from this?
I also tried chartWraper
<script type="text/javascript">
google.load('visualization', '1.0');
function drawInventoryChart() {
var wrapper = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
dataTable: [], //don't know how to put $bar here
option: {title: 'test'}
});
wrapper.draw('barChart');
}
google.setOnLoadCallback(drawInventoryChart);
</script>
This also does not work as I can not properly have the value of dataTable[] .
you can use array.forEach to load the data into the data table.
see following example...
google.charts.load('current', {
callback: function () {
// use the following
//var sqlData = <?=$bar?>;
// for example
var sqlData = [
{"ClientName":"nayeem","Price":1000},{"ClientName":"Tusher","Price":1000},
{"ClientName":"Nirjon","Price":1000},{"ClientName":"Remon","Price":1000},
{"ClientName":"Navid","Price":1000},{"ClientName":"Erfan","Price":1000},
{"ClientName":"Sazzad","Price":1000},{"ClientName":"Farin","Price":2000},
{"ClientName":"Arman","Price":1000},{"ClientName":"Sohan","Price":1000},
{"ClientName":"romi vai","Price":9000},{"ClientName":"tasif","Price":1000},
{"ClientName":"trina","Price":1000},{"ClientName":"Nuru Vai","Price":1000}
];
// create data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'Client');
data.addColumn('number', 'Price');
// load data table
sqlData.forEach(function(row) {
data.addRow([row.ClientName, row.Price]);
});
var chart = new google.visualization.BarChart(document.getElementById('barChart'));
chart.draw(data, {
title: 'My Bar chart',
is3D: 'true'
});
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barChart"></div>