Google Visualization Meteor Implementation - mongodb

help me in upper or lower code problem must be appreciated
i want to make a bar chart and populate it from my collection from meteor i
want to print exercises with there status
but when i return one record from db it is working well graph is coming but
when coming two records its not working kindly help in it
Just help me that how i can make a correct JSON format for "google visualization graph" from meteor mongodb
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
console.log("graphData==========",graphData)
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var data = new google.visualization.DataTable();
data.addColumn({ type: 'string', id: 'Room' });
data.addColumn({ type: 'string', id: 'Name' });
data.addRows([
[ myDoc.status, myDoc.patientExerciseName]
])
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}
Note : Foreach function when return two rows from database it not works
as i also try this
when i give JSON to my graph it is giving error "Invalid data table format:
must have at least 2 columns".
how i can make a JSON format which support Google visualization charts
please help me mine code is there
function drawChart() {
var status=Session.get('status');
var graphData=Session.get("graphId");
patientLog.find({patientId: graphData},{fields:
{patientExerciseName:1,status:1,_id:0}}).forEach(function (myDoc) {
var Mydoc=JSON.stringify(myDoc)
var data = new google.visualization.DataTable(Mydoc)
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
})
}

1) Check that the data is received: in Meteor it is sometimes tricky as publications may not be ready when you draw your chart. You need to make sure you wait for the publication to be ready. (Use console log to log the data and see if it's there, as within the debugger the data will be there by the time you look it up
2) once you are sure the data is there, read the GoogleChart docs: it is a fairly extensive library with lots of examples, so just make sure you data matches the right format.
this question and answer should help:
Building array and formatting JSON for Google Charting API

Related

Google Bar charts - ToolTips not showing

I have created a bar chart using google charts, this is a CORE Chart
I have tried getting the bar chart to change colours and adding an additional tooltip information to it, so that the tooltip shows a bit more information
I have gone through the google documentation and i cant see what i am doing wrong
For easy reading this is the output of my code on the source
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var exams = [["Date", "Score",({type: 'string', role: 'tooltip'})], ["18 Oct", 39,"TEST"], ["26 Oct", 20,"TEST"], ["26 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"], ["27 Oct", 0,"TEST"]];
if(exams.length > 1){
var data = google.visualization.arrayToDataTable(exams);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1]);
var options = {
title: "Results",
width: 1170,
height: 700,
bar: {groupWidth: "95%"},
legend: { position: "none" }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
else{
$("#columnchart_values").html('No Data found to show graph');
}
}
This is the google documentation i have been following, its slightly different
to mine as i am getting my data from a database, but it should give the same output.
I have gone through many examples and i am replicating them as close as possible and just not having any luck
https://developers.google.com/chart/interactive/docs/customizing_tooltip_content
I also have the exact same problem with color, i cant get colors on bar charts to change both having the same problem that it just doesn't do anything
Am i missing something??
the tooltip column is not being included in the data view.
view.setColumns([0, 1]);
to add the tooltip...
view.setColumns([0, 1, 2]);

Binding/Displaying OData data in a sap.m.Table control

I'm running into issue binding OData in a table control and I'm hoping one of you experts can spare a millisecond to tell me where I'm screwing up.
I can get the OData info from the backend server - step one is I just want to display it in a table with columns and step two is to present users with a segmented button to enable/disable processing of a countries data. Lets just get the data displayed now.
Here is the OData that is returned from the backed
backend odata
Here is my createContent code - I want to do it in JavaScript:
var oTable = new Table({
height: '100%',
firstVisibleRow: 0,
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
selectionMode: sap.ui.table.SelectionMode.None,
selectionBehavior: sap.ui.table.SelectionBehavior.RowOnly
}).addStyleClass('suggCompTableStyle');
var oColName = new sap.ui.table.Column().setLabel('{i18n>txt_countryName}').bindElement("/data>LANDX");
oTable.addColumn(oColName);
var oModel = sap.ui.getCore().getModel();
oModel.callFunction("/getCountryActiveList",
"GET",
{SPRAS: 'E'},
null,
function(oData, oResponse)
{ oTable.setModel( new sap.ui.model.json.JSONModel({data : oData.results}));
oTable.bindRows("/data");
alert("ok"); },
function(oError) {alert("err"); });
/* eslint-enable no-alert */
oTable.placeAt("content");
var oPage = new sap.m.Page({
title: "{i18n>title}",
content: [
oTable
]
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}/* end createContent function */
My table is created with the correct number of rows but not displaying the column data. I guess I'm confused on how to bind the column data?
Thanks for the assistance.
Steve
The issue is in your binding oTable.bindRows("/data");.
The bindRows method is expecting a row template control of the type sap.ui.table.Row.
You can look into https://sapui5.hana.ondemand.com/#/api/sap.ui.base.ManagedObject/methods/bindAggregation for more information. The bindRows method expects an input parameter equal to the oBindingInfo of the bindAggregation method from the link I above.

SAPUI5: Showing pie chart or Bar chart using OData service from HANA DB

I am working on SAP HANA Development project where I need to develop an UI application using SAPUI5 and Odata service.
I need a help on getting the data from HANA table and display in the Pie or Bar Chart.
I am getting the data to a table(oTable) using odata service but not able to display it in the Pie Chart.
Please find below the code snippet:
{
var oModel = sap.ui.model.odata.ODataModel('link of the .xsodata' false);
var oTable = new sap.ui.table.Table({tableId: "tableID", visibleRowCount: 10});
oTable.setTitle("Transactions");
oTable.setModel(oModel);
oTable.bindRows('/Transactions');
var dataset = new sap.service.visualization.dataset.SimpleDMDataset();
dataset.setDataTable(oTable);
var pie = new sap.service.visualization.chart.Pie("myPie", {
width: "700px",
height: "400px",
allDeSelectable: true,
legendFirst: true,
selectionMode: 'single',
legendDirection: 'right',
title: 'Transactions',
titleHorizontalAlign: 'center',
subTitle: 'Q1 - 2012',
subTitleHorizontalAlign: 'center',
showTitle: true,
defaultSelectedSliceIndexes: [5],
legendFormatString: ['0.00%'],
tooltipTextFormatString: ['0.00%'],
tooltipMainValueFormatString: ['#,##0'],
tooltipSubValueFormatString: ['0.00%'],
showLegend: true,
pieType: 'pie',
dataset: dataset
});
pie.placeAt("uiAreaForMyControls");
}
Please help me in getting the Pie chart displayed with the data as I am new and in learning phase.
I noticed you were trying to use sap.service.visualization charts with datasets, different to previous answer, here are a couple of simple examples using Northwind OData services
JSBin: Viz Pie Chart example
JSBin: Viz Bar Chart example - more advanced uses a filter on dataset
The following is a very simple Pie Chart using the NorthWind OData service, same format as XSODATA
It shows the percentage of Products per Category an Expand is used to get the CategoryName - live demo
var sURI = 'http://services.odata.org/v3/Northwind/Northwind.svc/';
var oModel = new sap.ui.model.odata.ODataModel(sURI, true);
// Pie Chart
var oChart = new sap.makit.Chart({
width : "100%",
height: "80%",
type : sap.makit.ChartType.Pie,
legendPosition : sap.makit.LegendPosition.Top,
valueAxis: new sap.makit.ValueAxis({}),
categoryAxis: new sap.makit.CategoryAxis({}),
category : new sap.makit.Category({
column : "category",
}),
values : [new sap.makit.Value({
expression : "products",
format : "number",
})],
});
oChart.addColumn(new sap.makit.Column({name:"category", value:"{Category/CategoryName}"}));
oChart.addColumn(new sap.makit.Column({name:"products", value:"{ProductID}", type:"number"}));
oChart.setModel(oModel);
oChart.bindRows({
path: "/Products",
parameters: {select: 'ProductID,Category/CategoryName',expand: 'Category'}
});
oChart.placeAt("content");

Different colors for column chart

I am using ExtJS to render charts, but my column chart is getting with the same color for all series. I need different colors for the series. Only happens with column, bar and area charts, the line chart is working fine.
My code:
Ext.Ajax.request({
method: 'get',
url: Webapp.link('chart/' + key),
success: function(response){
var resposta = Ext.JSON.decode(response.responseText);
var chart = Ext.create('Hemisphere.view.chart.Chart', {
axes: resposta.chart.axes,
series: resposta.chart.series,
store: store (The store is defined previously)
});
panel.removeAll();
panel.add(chart);
}
}
});
Anyone could help me? Thanks.
One serie code example.
You can change the color using a renderer on your series.
Ext documentation has a working example of this:
http://docs.sencha.com/ext-js/4-1/#!/example/charts/Column2.html
series: [{
type: 'column',
renderer: function(sprite, storeItem, barAttr, i, store) {
barAttr.fill = colors[i % colors.length];
return barAttr;
}
.
.
}]

Reloading of data not happening for the second request

I have EnhancedGrid which loads data after getting response from AJAX call based on my query to database.When i make the first request i can see the data to be populated in grid correctly. However, i change my query it still loads the previous data. My response returns correct data from database in JSON.
I tried in all possible ways and debugged using firebug but unable to get the output. I tried searching the similar post but still it didn't work for me.Any help would be much appreciated. I am pasting my code below.
_initialiseGrid:function(){
var layout = [
{'name': 'Project Name', 'field': 'projectName', 'width': '200px'},
{'name': 'Date Created', 'field': 'createdDate', 'width': '100px',formatter:this.formatDate},
{'name': 'Comments', 'field': 'senderComments', 'width': '250px',editable:true}
];
dataGrid = new dojox.grid.EnhancedGrid({
id: 'JoinProjectGrid',
structure: layout,
rowSelector: '20px',
plugins: {indirectSelection: {headerSelector:true}}},
document.createElement('div'));
}
_loadData:function(response){
var projectList=response.retrievedList;
var rowData = {
identifier: "projectId",
items: projectList
};
dataStore = new dojo.data.ItemFileWriteStore({data: rowData});
dataGrid.set("store",dataStore);
dojo.byId("gridDivForJoin").appendChild(dataGrid.domNode);
dataGrid.startup();
}
i tried using :
dataGrid.setStore(dataStore)
which is not working for the second request so,
i used dataGrid.set("store",dataStore) which is not loading the new data but shows previous one.I also tried :
clearOnClose:true, urlPreventCache:true
to refresh the grid and used below code also to clear the store on second request.
var newStore = new dojo.data.ItemFileReadStore({data: { identifier: "", items: []}});
dataGrid.setStore(newStore);
i got it worked after adding
dataGrid.render()