Google Dashboard with external JSON input - json

I have external file with JSON data, and it works properly when I try to generate different charts. Now, I want the data is presented in an interactive way in a dashboard, and I try the Control feature in Google Visualization. Now the chart doesn't show up. What could be the mistake? I test it in a very simple dashboard as follow:
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var json3 = (function () {
var json3 = [];
$.ajax({
'async': false,
'global': false,
'url': "Geo.json",
'dataType': "json",
'success': function (data3) {
json3 = data3.rows;
}
});
console.log("Number of message rows: " + json3.length);
return json3;
})();
var readings3 = [];
if (json3.length > 0)
var readings3 = json3;
else
readings3=[
{"Time":"10:00:00 CEST 2013","Lat":58.02794563,"Long":5.45527353,"Speed":12, ...},
{"Time":"13:40:52 CEST 2013","Lat":58.16435456,"Long":5.98108809, "Speed":12, ...}
]
var data3 = new google.visualization.DataTable();
data3.addColumn('string', 'Time');
data3.addColumn('number', 'Lat');
data3.addColumn('number', 'Long');
data3.addColumn('number', 'Speed');
...
...
...
for (var i = 0; i < 1000; i++) {
data3.addRow([
readings3[i].Time,
readings3[i].Lat,
readings3[i].Long,
readings3[i].Speed,
...
...
...
]);
}
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var sensordataRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Time'
}
});
var lineChart1 = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'visualization1',
'dataTable': 'data3',
'options': {
'width': 300,
'height': 300,
'legend': 'right'
},
'view': {'columns': [0, 5]}
});
dashboard.bind(sensordataRangeSlider, lineChart1);
dashboard.draw(data3);
}
Thanks in advance.

Related

Forge Vewer v7 - Search in Default UI

I'm trying to use Autodesk.InViewerSearch extension in Forge viewer v7, but I keep getting error that new Autodesk.Viewing.A360ViewingApplication('forgeViewer', options) is not a constructor. Does this extension work in viewer v7? If I set new Autodesk.Viewing.GuiViewer3D(htmlDiv, config3d) my app works, but Autodesk.InViewerSearch is not registered.
This is my Autodesk.Viewing.Initializer:
Autodesk.Viewing.Initializer(options, function onInitialized() {
// var randomId = makeid(36);
var documentId = 'urn:' + urn;
console.log(documentId);
var config3d = {
loaderExtensions: { svf: "Autodesk.MemoryLimited" },
extensions: [
'Autodesk.DocumentBrowser',
'Autodesk.Viewing.MarkupsCore',
'Autodesk.Viewing.MarkupsGui',
'Autodesk.VisualClusters',
'Autodesk.InViewerSearch',
'ToolbarExtension',
'BoundingBoxExtension',
],
inViewerSearchConfig: {
uiEnabled: false,
relatedItemsTab: {
enabled: true, //If false, the tab is hidden.
displayName: 'This Item',
pageSize: 20
},
loadedModelTab: {
enabled: true, //If false, the tab is hidden.
displayName: 'This View',
pageSize: 50
}
}
};
//viewerApp = new Autodesk.Viewing.A360ViewingApplication('forgeViewer', options);
//viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.GuiViewer3D, config3d);
// viewerApp.loadDocumentWithItemAndObject(documentId);
//viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, config3d);
//viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv, config3d);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
var documentId = 'urn:' + urn;
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
My options file looks like this
var options = {
env: 'AutodeskProduction',
getAccessToken: getForgeToken,
api: 'derivativeV2' + (atob(urn.replace('_', '/')).indexOf('emea') > -1 ? '_EU' : ''),
/*memory: {
limit: 1024 // in MB
}*/
};
And in my index.html I've included:
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/three.min.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
I haven't found the A360ViewingApplication class nor the Autodesk.InViewerSearch extension in the Forge Viewer codebase so I'm afraid these have been removed in version 7. Let us know what exactly you wanted to achieve with the extension, I'm sure there is a different way of implementing that goal with the viewer version 7.

geochart regions clickable urls

We want to embed a really basic interactive map on our website, where clicking a region will take you to a specific page on our site. We would like to use the regions in google geochart
This is the map we are working with
https://jsfiddle.net/tyvnfxf4/
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['England', 400],
['Wales', 300],
['Scotland', 400],
['Ireland', 600],
]);
var options = {
region: 'GB',
resolution: 'provinces',
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
And we would want:
Wales to link to www.example.com/wales
Ireland to link to www.example.com/ireland
etc
Can any help?
Many thanks
there are a number of ways to handle, but the key is using the 'select' event
keep in mind, the 'select' event is fired both when something is selected and de-selected,
so make sure length > 0
recommend using a column in the DataTable to store the URLs
use a DataView to hide the column from the chart
then get the URL based on the chart selection
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity', 'Domain'],
['England', 400, 'www.example.com/England'],
['Wales', 300, 'www.example.com/Wales'],
['Scotland', 400, 'www.example.com/Scotland'],
['Ireland', 600, 'www.example.com/Ireland'],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
region: 'GB',
resolution: 'provinces'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
console.log(data.getValue(selection[0].row, 2));
//window.open('http://' + data.getValue(selection[0].row, 2), '_blank');
}
});
chart.draw(view, options);
},
packages:['geochart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="regions_div" style="width: 600px; height: 500px;"></div>

How can I get Selection in dashboard with ChartWrapper

I´m trying to get an event in a google dashboard ChartWrapper.
I need that when I select a row i can throw an event and get the selected value.
Can anyone help me or say me how can I get it?
Here´s my code:
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
var data;
var table;
var dash_container;
var myDashboard;
var stringFilter;
var myTable;
function draw() {
// To see the data that this visualization uses, browse to
// http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ
data = new google.visualization.Query(
'http://spreadsheets.google.com/tq?key=0Ai3BbtO5JfaodGluSWw0UVFvZ3BDak1nYzVac0RPWGc&pub=1');
// Send the query with a callback function.
data.send(handleQueryResponse);
}
//fin de draw
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
table = response.getDataTable();
// Create a dashboard.
dash_container = document.getElementById('dashboard'),
myDashboard = new google.visualization.Dashboard(dash_container);
// Define a StringFilter control for the 'Name' column
stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter',
'options': {'filterColumnLabel': 'nombre'}
});
// Table visualization
myTable = new google.visualization.ChartWrapper({
'chartType' : 'Table',
'containerId' : 'table',
'view': {'columns': [0]} ,
'dataTable': table
});
// Register a listener to be notified once the dashboard is ready.
google.visualization.events.addListener(myDashboard, 'ready', dashboardReady);
myDashboard.bind(stringFilter, myTable);
myDashboard.draw(table);
}
**Here´s where I have the problems, because I can get the selection row
function dashboardReady() {
google.visualization.events.addListener(myTable, 'select', function(event) {
var selection = myTable.getChart().getSelection();
// iterate over all selected rows
for (var i = 0; i < selection.length; i++) {
// do something with selection[i].row
var item = selection[i];
}
alert('Fila seleccionada es: '+item.row +' y la Columna: '+item.column);
});
}
google.setOnLoadCallback(draw);
To do that, you need to do two things after the chart is drawn:
Add a 'ready' event listener to your chart wrapper;
Add a 'select' event listener to the table when the chart wrapper is ready.
So, add the following two lines after myDashboard.draw(table); in your code
google.visualization.events.addListener(myTable , 'ready', function(){
google.visualization.events.addListener(myTable ,'select', tableSelectHandler);
});
function tableSelectHandler(){
var selection = myTable.getChart().getSelection();
alert(data.getValue(selection[0].row,0));
}
There will be about 3 seconds delay for the ready function to be triggered, due to a bug I think, see here for more details about the bug report of this issue: https://code.google.com/p/google-visualization-api-issues/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Stars%20Modified%20Type%20Status%20Priority%20Milestone%20Owner%20Summary&groupby=&sort=&id=1470
With Wrapper you have to add one more function to get selected item i.e. getChart()
Like:
var selectedItem = wrapper.getChart().getSelection()
Remember, Without Wrapper you was getting it by:
var selectedItem = chart.getSelection()
The code working ...
google.setOnLoadCallback(draw);
function draw() {
var data = [
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
];
var table = google.visualization.arrayToDataTable(data);
// Create a dashboard.
var dash_container = document.getElementById('dashboard');
var myDashboard = new google.visualization.Dashboard(dash_container);
// Define a StringFilter control.
var stringFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter',
'options': {'filterColumnLabel': 'Year'}
});
// Table visualization
var myTable = new google.visualization.ChartWrapper({
'chartType' : 'Table',
'containerId' : 'table',
'view': {'columns': [0, 1]} ,
'dataTable': table,
});
myDashboard.bind(stringFilter, myTable);
myDashboard.draw(table);
google.visualization.events.addListener(myTable , 'ready', function(){
google.visualization.events.addListener(myTable ,'select', tableSelectHandler);
});
function tableSelectHandler(e){
var selection = myTable.getChart().getSelection();
var t=table.getValue(selection[0].row, 0);
document.getElementById('label1').innerHTML = t;
}
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('visualization', '1.1', {packages: ['controls']});</script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="filter"></div>
<br>
<div id="table"></div>
<br>
<div id="label1"></div>
</body>
</html>

jQuery Mobile don't' execute function after pageshow

I have in my Phonegap app this JQM; I create a Google map and I load markers from json file.
When i launch page2, i see the first console.log (coordinates) and the last console.log (2222222) - The intermediate console.log that contains numberOfElements is displays only the first time. If I see the map and i return back the whole script isn't loaded.
Why?
$(document).on('pageshow', '#page2', function () {
var latnow = Number(localStorage.getItem("lat"));
var lngnow = Number(localStorage.getItem("lng"));
var coordinate = new google.maps.LatLng(latnow, lngnow);
console.log(latnow + ' ' + lngnow);
$('#map_canvas').gmap({
'center': coordinate,
'disableDefaultUI': true,
'zoom': 5,
'scrollwheel': false,
'panControl': false
});
$('#map_canvas').gmap().bind('init', function () {
var images = "img/icon.png";
var images2 = "img/icon2.png";
$.getJSON('http://www.site.com/app/json.php?lat=' + latnow + '&lat=' + lngnow + '', function (data) {
var myObject = data;
var numberOfElements = data.markers.length;
console.log(numberOfElements); // <- !!!!!!
if (numberOfElements == 0) {
alert("no result");
$.mobile.changePage("#home");
}
var myObject = JSON.stringify(myObject);
localStorage.setItem("json_near", myObject);
$('#map_canvas').gmap('addMarker', {
'position': coordinate,
'icon': images2,
'bounds': true
});
//marker da json
$.each(data.markers, function (i, marker) {
$('#map_canvas').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'draggable': false,
'bounds': true,
'icon': images
}).click(function () {
$('#map_canvas').gmap('openInfoWindow', {
'content': marker.content,
'maxWidt': 200,
'maxHeight': 400,
'autoScroll': true
}, this);
});
});
});
});
map_element = document.getElementById("map_canvas");
var mapwidth = $(window).width();
var mapheight = $(window).height();
$("#map_canvas").height(mapheight);
$("#map_canvas").width(mapwidth);
google.maps.event.trigger(map_element, 'resize');
console.log("2222222");
});
I assume you are using this plugin - http://code.google.com/p/jquery-ui-map/ , right?
I think it is not a problem of jquery mobile. The pageshow event is called as you can see from those console.log messages.
Try to stick console.log("xxx") into the gmap init handler. I think this is the one which is NOT called at the second time.
Something like
$('#map_canvas').gmap().bind('init', function () {
console.log("xxxxxx");
var images = "img/icon.png";
var images2 = "img/icon2.png";
...
...
});
do you see xxxxxxx in the console every time you get in the page?
If not, try to find the way how to check whether the map was already initialized (second, third, fourth time, etc.) and then, call getJSON directly.

Highchart Basicline

According to my own question
i have tried something, and my fiddle is link
But i want to be output as like below
i.e x axis contains monthly reports
my ajax code is
$.ajax({
url: "/echo/json/",
data: data,
type: "POST",
success: function(point) {
var chartSeriesData = [];
var chartCategory = [];
$.each(point, function(i, item) {
var series_name = item.resultDate;
var series_data = item.y;
var cagory = series_name;
var series = {
name: series_name,
data: item.y
};
chartSeriesData.push(series);
chartCategory.push(series_name);
});
var chartingOptions = {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline'
},
xAxis: {
categories: chartCategory
},
series: chartSeriesData
};
chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);
chart = new Highcharts.Chart(chartingOptions);
}
});
Thanking you....
In your parser, you create many series, because you initialize series in points loop. So you should prepare series earlier than points loop. Then add points to correct serie (in this case first or second serie).