I am trying to draw Motion Chart using Fusion table API. The error message I am receiving is:
"Could not parse query."
I had my fusion table format to be text on first column, date on second column, as required by the visualization type. This is my code, underneath. Please, what am I doing wrong.
google.load("visualization", "1", {packages:["motionchart"]}); google.setOnLoadCallback(drawVisualization); function drawVisualization() { google.visualization.drawChart({ "containerId": "scatter", "dataSourceUrl": "//www.google.com/fusiontables/gvizdata?tq=", "query": "SELECT 'Nationality','Date','StatusofStudentship','Gender','ModeofAdmission','CourseofStudy','ProgrammeofStudy','CGPA','Race','EnglishLanguageProficiency','Disability','ModeofStudy','InternshipLength','SoftskillQuality','HealthSoundness','Employability','DefermentLength','Religion','Mode of Sponsorship',FROM " + "19mRBx3ysm3VfJQ746j8obWldgjxpw1-sBNdQy4kQ#rows:id=1", "refreshInterval": 20, "chartType": "MotionChart", "options": {} }); options['state'] = chart.draw(data, {width: 900, height:400}); '{"colorOption":"4","iconKeySettings":[],"nonSelectedAlpha":0.4,"orderedByX":false,"iconType":"BUBBLE","yAxisOption":"3","uniColorForNonSelected":false,"yZoomedDataMin":150,"dimensions":{"iconDimensions":["dim0"]},"orderedByY":false,"xZoomedIn":false,"yZoomedDataMax":617,"duration":{"multiplier":1,"timeUnit":"D"},"showTrails":true,"xAxisOption":"2","xZoomedDataMax":1200,"time":"1988","xZoomedDataMin":300,"playDuration":15000,"yLambda":1,"sizeOption":"_UNISIZE","yZoomedIn":false,"xLambda":1};'; options['width'] = 900; options['height'] = 400; } google.setOnLoadCallback(drawVisualization);
That error means your query is invalid. The 'ModeofSponsorship' column does not have spaces in its name:
"query": "SELECT 'Nationality','Date','StatusofStudentship','Gender','ModeofAdmission','CourseofStudy','ProgrammeofStudy','CGPA','Race','EnglishLanguageProficiency','Disability','ModeofStudy','InternshipLength','SoftskillQuality','HealthSoundness','Employability','DefermentLength','Religion','Mode of Sponsorship',FROM " + "19mRBx3ysm3VfJQ746j8obWldgjxpw1-sBNdQy4kQ#rows:id=1",
should be:
"query": "SELECT 'Nationality','Date','StatusofStudentship','Gender','ModeofAdmission','CourseofStudy','ProgrammeofStudy','CGPA','Race','EnglishLanguageProficiency','Disability','ModeofStudy','InternshipLength','SoftskillQuality','HealthSoundness','Employability','DefermentLength','Religion','ModeofSponsorship',FROM " + "19mRBx3ysm3VfJQ746j8obWldgjxpw1-sBNdQy4kQ#rows:id=1",
This also looks wrong:
19mRBx3ysm3VfJQ746j8obWldgjxpw1-sBNdQy4kQ#rows:id=1
probably need to remove the #rows:id=1 from the end.
Related
I'm migrating from ChartJS 2.9.3 to 4.2.1 (current). By following the 3.x and 4.x migration guides, I've sorted most things out, but I've come across a problem that I don't see a solution for.
One of my charts is a stacked bar chart. There are two datasets for it:
let chartData = {
// other stuff...
datasets: [
{ label: "Has thing", data: [200, 250, etc] },
{ label: "Does not has thing", data: [10, 4, etc] },
]
}
In my tooltips, I was accessing both datasets to create a custom tooltip with the percent representation of each part of each stack. For instance, the tooltips for the first stack might say: "Has thing: 200 (95.2%)" and "Does not has thing: 10 (4.8%)". My callback function looked like this:
// other stuff
callbacks: {
label: function(tooltipItem, data) {
let dataset = data.datasets[tooltipItem.datasetIndex];
let count_with = data.datasets[0].data[tooltipItem.index]
let count_without = data.datasets[1].data[tooltipItem.index]
let total = count_with + count_without
let this_dataset_count = dataset.data[tooltipItem.index]
let this_dataset_perc = (this_dataset_count / total * 100).toFixed(1)
let label = dataset.label + ": "
label += this_dataset_count + " (" + this_dataset_perc + "%)"
return label;
}
}
Looking at the 3.x migration guide, it appears they removed the data parameter from the tooltip callback, opting instead to add the item's dataset directly to the tooltipItem. Unfortunately, they don't seem to specify how I can access other datasets.
Has this functionality simply been removed completely, or is there a different way to access it?
As #kikon pointed out, data is accessible via context.chart.data. For some reason, that doesn't show up for me when I console.dir() the context object so I was just completely overlooking it.
Anyway, for anyone this might help in the future, here's the working version:
callbacks: {
label: function(context) {
const datasets = context.chart.data.datasets
const countWith = datasets[0].data[context.dataIndex]
const countWithout = datasets[1].data[context.dataIndex]
const perc = (context.raw / (countWith + countWithout) * 100).toFixed(1)
return `${context.dataset.label}: ${context.formattedValue} (${perc}%)`
}
}
Imagine a simple line graph plotting a person count (y-axis) against a custom time value (x-axis), as such:
Suppose you have another dimension, say specific groupings of people, how do you draw a separate line on this graph for each group?
You have to use the PivotConfig here an example I used in Angular
(EDIT) Here is the Query
Query = {
measures: ['Admissions.count'],
timeDimensions: [
{
dimension: 'Admissions.createdDate',
granularity: 'week',
dateRange: 'This quarter',
},
],
dimensions: ['Admissions.status'],
order: {
'Admissions.createdDate': 'asc',
},
}
(END EDIT)
PivotConfig = {
x: ['Admissions.createdDate.day'],
y: ['Admissions.status', 'measures'],
fillMissingDates: true,
joinDateRange: false,
}
Code to extract data from resultset :
let chartData = resultSet.series(this.PivotConfig).map(item => {
return {
label: item.title.split(',')[0], //title contains "ADMIS, COUNT"
data: item.series.map(({ value }) => value),
}
})
Result Object (not the one in the chart):
[{
"label": "ADMIS",
"data": [2,1,0,0,0,0,0]
},{
"label": "SORTIE",
"data": [2,1,0,0,0,0,0]
}]
Here is what the output looks like!
The chart renderer in the Developer Playground is meant to be quite simplistic; I'd recommend creating a dashboard app or using one of our frontend integrations in an existing project to gain complete control over chart rendering.
I have power bi client filter code below:
const basicFilter: pbi.models.IBasicFilter = {
$schema: "http://powerbi.com/product/schema#basic",
target: {
table: "Store",
column: "Count"
},
operator: "In",
values: [1,2,3,4],
filterType: pbi.models.FilterType.BasicFilter
}
in my scenario a table can have multiple columns, so if I want to filter by multiple columns of the table then how can I do? In the above code only one column like Count is working, but how to configure for multiple columns?
You must define a filter for each of your conditions and pass an array with all your filters in ReportConfiguration.filters property:
var embedConfig = {
...
filters: [basicFilter1, basicFilter2, filter3]
};
or to report.setFilters method:
report.setFilters([basicFilter1, basicFilter2, filter3])
.catch(errors => {
// Handle error
});
I am running into an issue with calling the customer record from a passed value on my mapped section of my mapreduce script. It is sending me a debug error of "TypeError: Cannot find function load in object 262059". Where 262059 is the internal ID of the customer passed from the getInputData function.
NetSuite debug image...
Here is the coding of the function that is throwing this error.
function removeLine(r,recordId){
try{
log.audit({title:"removeLine"});
var customerRecord = r.Load({
"type": r.Type.CUSTOMER,
"id": recordId,
"isDynamic": true
});
log.debug({details:"recordId = " + recordId});
var index = rec.getLineCount('item');
log.debug({detaisl:"index = " + index});
for (var cnt = 0; cnt < lineCount; cnt++)
{
log.audit({details:"Round " + cnt})
rec.selectLine({
sublistId: "item",
line: cnt
});
rec.removeLine({
sublistId: "item",
line: cnt
});
}
log.debug(recordId + " Item Pricing has been removed.");
record.save();
}catch(exception){
log.debug("removeLine Error Message:",exception);
}
}
What am I missing or not understanding? I appreciate your guidance.
Brad
I believe the problem lies where you load the record:
var customerRecord = r.Load({
"type": r.Type.CUSTOMER,
"id": recordId,
"isDynamic": true
});
It should be r.load, not r.Load as JavaScript is case-sensitive.
I am using Ignite UI grid.
The columns is dynamically build from the database like this:-
$.post('/Main/GetColumns',function(data){
$("#mygrid").igGrid({
columns: data,
width: "100%",
height: "100%",
})
});
The problem is that i dont know which of the column will be of datatype number since data is comming from database for columns and i have to right align the numeric columns.
The only code i have found is
args.owner.element.find("tr td:nth-child(3)").css("text-align", "right");
to set 3rd column as right align.
Since i dont know the column order, i am only left to check for datatype and right align the column,
Is there any way to align column on basis of datatype or any other method to do this?
The data type if the column is used for it's representation(formatting) and editing behavior, but there's no extra markup generated that you can use to target with styling.
However, you are building column definitions server side, where you know exactly what type each column is while creating its definition, no?
Update: It's been a while since the original answer and for future reference you can use the columnCssClass to apply your class to the actual TD rather than the template. The latter is still a valid option for advanced tinkering.
Easiest way I can think of is through Column templates - this way you can add whatever styling / formatting to the columns. For example, based of whatever logic you need, you return some columns as:
{
key: 'status',
dataType: 'bool',
headerText: 'Status',
template: '<div class="rightAlign"> ${status} </div>'
}
You apply "text-align:right;" though the class and skip adding template for columns that should be with default look. Since this definition is generated on the server (imagine my example uses Node.js :P ) you can have those templates static, or create them differently each time - it's up to you.
JSFiddle: http://jsfiddle.net/damyanpetev/wsZ8c/
Note: Make sure you use a block (div,p) in this case as you need something that will take up the entire grid cell in order to align text inside.
If that solution doesn't fit, you will have to go through columns and apply styling on the client in a similar way you were thinking of.
Here is how I dynamically align the text in the columns in the infragistics igHierarchicalGrid according to their data types:
$("#grid1").on("iggriddatarendered", function (event, args) {
var columns = $("#grid1").igHierarchicalGrid("option", "columns");
//var RDate = $("#grid1").igHierarchicalGrid("getCellValue", 1, 1);
var columnIndex = 0;
var trtd = 2;
for (var idx = 0; idx < columns.length; idx++) {
if (columns[idx].dataType == "number" || columns[idx].dataType == "double")
args.owner.element.find("tr td:nth-child(" + trtd + ")").css("text-align", "right");
if (columns[idx].dataType == "string" || columns[idx].dataType == "date")
args.owner.element.find("tr td:nth-child(" + trtd + ")").css("text-align", "left");
columnIndex++;
trtd = columnIndex + 2;
}
});
As you see I am starting with vartd = 2 and this is because there are 2 elements in the table
(I use hierachcical grid) before the columns in the grid are available. You must debug and investigate if in your case
the columns of the grid are coming after the second DOM element or after the first.
In easy way you can add css into columnCssClass property and applied into grid where you were define column information
Style:
<style>
.right-align {
text-align: right;
}
.left-align {
text-align: left;
}
.center-align {
text-align: center;
}
</style>
and grid code snippet:
{ headerText: 'Option', key: "Option", dataType: "string", width: "10%", hidden: true },
{ headerText: 'ID', key: "Program_Id", dataType: "string", width: "10%", columnCssClass: "right-align" },
{ headerText: 'Desc', key: "Program_Des", dataType: "string", width: "10%", columnCssClass: "left-align" },
{ headerText: 'Status', key: "program_Status", dataType: "Bool", width: "10%", columnCssClass: "center-align" },