I am new to google charts. I am using ChartWrapper to draw my chart and I am passing a chart wrapper arguments to the constructor when creating a chart like this:
var chartWrapperArgs = {
chartType: "LineChart",
dataTable: dataTable,
options: { // <<<< where to find a documentations about this property ?
"width": 900,
"height": 800,
"is3D": true,
"title": "Явление на числата ",
"isStacked": "false",
// "fill": 20,
"displayExactValues": false,
"vAxis": {
"title": "явление"
},
"hAxis": {
"title": "число"
}
},
containerId: containerId
};
var chartWrapper = new google.visualization.ChartWrapper(chartWrapperArgs);
My question is where to get a documentations about the "options" parameter ? what option can I pass to "options" ?
I checked out Google documentation here
but they only describe what option, give simple example and thats all. However I found that in some of there, and others, code example other parameters are used !
The options that are appropriate depend on the chartType, and the documentation for the options is together with the other documentation about the chartType. See the list at https://developers.google.com/chart/interactive/docs/gallery
For the LineChart, the options are documented here: https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options
Related
I have an embedded report in which I want to set the theme of the visuals according to the even and odd number of visuals. I am able to check the number of visuals by getting count of all the filters. Can anyone suggest how can I apply the theme to the visuals ?
To apply themes to the visuals, please find the below code snippet:
Create customized themes:
var themes = [
{
"name": "light",
"dataColors": ["#93A299","#057BE0","#848058"],
"background": "#FFFFFF",
"foreground": "#CF543F",
"tableAccent": "#93A299"
},
{
"name": "dark",
"dataColors": ["#31B6FD","#4584D3", "#5BD078"],
"background": "#000000",
"foreground": "#4584D3",
"tableAccent": "#31B6FD"
}
]
Get the number of visuals:
const visuals = await page.getVisuals();
const num_of_visuals = visuals.length;
Use applyTheme API to apply themes to visuals:
// Apply the custom theme for even number of visuals
if(num_of_visuals % 2 == 0){
report.applyTheme({ themeJson: themes.find(theme => theme.name ==="light")});
}
else { // Apply the custom theme for odd number of visuals
report.applyTheme({ themeJson: themes.find(theme => theme.name === "dark") });
}
You Can find the reference from the below links
https://learn.microsoft.com/javascript/api/overview/powerbi/get-visuals
https://learn.microsoft.com/javascript/api/overview/powerbi/apply-report-themes
I'm hoping to find a way, using Keen's visualization library, to integrate Google Chart's ChartRangeFilter (https://developers.google.com/chart/interactive/docs/gallery/controls#chartrangefilter). The section in Keen's docs (https://github.com/keen/keen-js/blob/master/docs/visualization.md#line-chart) related to line charts doesn't seem to afford any chart wrappers or controls.
In short, is there any way to render a line chart with a ChartRangeFilter using Keen out of the box? Or would I have to ask for the raw data and do the charting for myself?
Looking at the sample code and Google chart's instructions from https://developers.google.com/chart/interactive/docs/gallery/controls#using-controls--and-dashboards you'll need to combine code from Google into the charting portion after your result is computed from Keen.
You will first prepare your data (in your case, using the data result returned from Keen IO), then create a dashboard, and lastly draw/render the components (including the chartRangeFilter). Drawing the range filter for the chart is a modification to the existing visualization that can be graphed with Keen IO.
// Load the Google Visualization API and the controls package.
google.charts.load('current', {packages:['corechart', 'table', 'gauge', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(init);
function init(){
client
//Run your Keen Query/Analysis Call
.query('count', {
event_collection: 'add_to_carts',
timeframe: {
start: '2016-09-01',
end: '2016-09-12'
},
interval: 'hourly',
timezone: 'US/Pacific'
//group_by: 'product_name'
})
.then(function(res){
var chart = new Dataviz()
.data(res)
drawDashboard(chart.data());
})
.catch(function(err){
console.log('err');
});
}
// Callback that creates and populates a data table,
// instantiates a dashboard, a range slider and a pie chart,
// passes in the data and draws it.
function drawDashboard(keenDataTable) {
// Create our data table.
var data = google.visualization.arrayToDataTable(keenDataTable);
// Create a dashboard.
var dashboardEl = document.getElementById('dashboard_div');
var dashboard = new google.visualization.Dashboard(dashboardEl);
// Create a range slider, passing some options
var chartRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'ChartRangeFilter',
'containerId': 'control_div',
'options': {
'filterColumnIndex': 1,
'ui': {
'chartType': 'LineChart',
'chartOptions': {
'chartArea': {'height': '20%', 'width': '90%'},
'hAxis': {'baselineColor': 'none'}
}
}
}
});
// Create a pie chart, passing some options
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
// Use the same chart area width as the control for axis alignment.
'chartArea': {'height': '80%', 'width': '90%'},
'hAxis': {'slantedText': false},
'vAxis': {'viewWindow': {'min': 0, 'max': 50}},
'legend': {'position': 'none'}
}
});
// Establish dependencies, declaring that 'filter' drives 'lineChart',
// so that the chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(chartRangeSlider, lineChart);
// Draw the dashboard.
dashboard.draw(data);
Here's a link to a JavaScript fiddle that runs this code and shows the Keen analysis result being rendered along with the Google range finder component:
http://jsfiddle.net/kuqod2ya/4/
This code sample uses the newest keen-analysis.js & keen-dataviz.js libraries. To access the Google Chart additional options include loader.js.
Here is my jsfiddle explaining the issue I am facing. I want to basically pass the options object (to disable fill and bezier curves) like I could have done in the older versions...
https://jsfiddle.net/xjdvngwe/
Basically I want to achieve passing an options to the chart
function at the time of chart creation
var options = { fill:false,tension:0, lineTension :0.1};
var chart_testChart = new Chart.Line(ctx,
{
data: data,
options: options
});
And in the latest version 2.1.6, I cannot get this to work
If I pass them like this, they work fine but I am looking for a way to pass them as options object
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
It is because you misunderstood how the chart is built :
You supposed that fill and tension attributes were both directly in the root of the options, but they are actually in options.element.line.
For more information, check the Chart.js doc about element configuration (Scroll until Line Configuration in your case).
But be careful !! Don't mix up :
Editing one element (as you managed to do in the second part of your question) by editing the dataset you pass to the chart data :
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
// ...
}]
Editing all the elements of the same type (here, the line chart) by editing the chart options :
var options = { elements: { line: { /*options */ } } };
As stated in the documentation I gave above :
Options can be configured for four different types of elements; arc, lines, points, and rectangles. When set, these options apply to all objects of that type unless specifically overridden by the configuration attached to a dataset.
So make sure you actually want to edit all the line charts before editing these attributes directly in the options.
Now if you still want to edit in the options, you will have to build your options var like this :
var options = { elements: { line: { fill: false, tension: 0.1 } } };
var chart_testChart = new Chart.Line(ctx,
{
data: data,
options: options
});
Here is a working fiddle if you want to see the result.
I am having a problem , that dataView object having the unique values or rows in the table .
i have tried, giving the dataRoles of kind: powerbi.VisualDataRoleKind to Grouping,Measure and GroupingorMeasure. I have even tried out giving the dataViewMappings to categorical(dataReductionAlgorithm: { top: {} }) as well as values(select: [{ bind: { to: 'Y' } }]).I have tried by giving Do not summarize option,keep duplicates option, changed the type of the table to whole number ,text,decimal,etc .,but nothing worked for me. what iam missing and what i have to do to bind the entire table as it is in powerbi dev tool.
Below my code,
public static capabilities: VisualCapabilities = {
// This is what will appear in the 'Field Wells' in reports
dataRoles: [
{
displayName: 'Category',
name: 'Category',
kind: powerbi.VisualDataRoleKind.Grouping,
},
{
displayName: 'Y Axis',
name: 'Y',
kind: powerbi.VisualDataRoleKind.Measure,
},
],
// This tells power bi how to map your roles above into the dataview you will receive
dataViewMappings: [{
categorical: {
categories: {
for: { in: 'Category' },
dataReductionAlgorithm: { top: {} }
},
values: {
select: [{ bind: { to: 'Y' } }]
},
}
}],
// Objects light up the formatting pane
objects: {
general: {
displayName: data.createDisplayNameGetter('Visual_General'),
properties: {
formatString: {
type: { formatting: { formatString: true } },
},
},
},
}
};
Thanks in advance.
Power BI pretty much will always summarize in a categorical data view. You can try to work around it by asking for categorical values you think will be unique. but it's subject to your user's judgement.
Switching to a Table data view might be an option, I think you'll see do not summarize take effect there. It has it's own challenges, like identifying which field goes where, and the need to do the math yourself for aggregates.
You might submit an idea at https://ideas.powerbi.com with your desired scenario.
I know this post is old, but it took me forever to find the answer for this same problem. So I did end up using the table format, but it is still a little quirky. Let me give you my example and explain a little:
{
"dataRoles": [
{
"displayName": "Legend",
"name": "legend",
"kind": "GroupingOrMeasure"
},
{
"displayName": "Priority",
"name": "priority",
"kind": "GroupingOrMeasure"
},
{
"displayName": "SubPriority",
"name": "subpriority",
"kind": "GroupingOrMeasure"
}
],
"dataViewMappings": [
{
"table": {
"rows": {
"select": [{
"for": {
"in": "legend"
}
},
{
"for": {
"in": "priority"
}
},
{
"for": {
"in": "subpriority"
}
}
]
}
}
}
]
}
So I want my dataRoles to be GroupingOrMeasures, but I don't believe that is necessary here.
OK, so in the dataViewMappings, I have it marked as "I want my data in a table, in rows constisting of legend values, priority values, and subpriority values."
There are two quirky parts to this. First, your data will be sorted by default in the order in which you declare these things. So if you bring in your legend values first, that is how this table is sorted (by the matching order in which your first columns's values are). And second, it will only save unique rows to the table.
So if I had two rows of:
Legend Priority Subpriority
Canada Recyclables Plastic
Canada Recyclables Plastic
Then there would appear only one value in the table. Also, this means that if you were trying to get all rows of Legend, but only have the legend value selected for the table, you will be getting only one value of each, because repeated values will not make a unique row.
So if you have two rows of:
Canada
Canada
You would get only one row value with the entry of Canada.
And I would also caution you against incomplete data, namely null values. In my above example of Legend Priority Subpriority, if there are repeated values of "blank", only one row will show if all other fields match as well.
The only way to totally guarantee you will get back each individual row, no matter what, is to ensure that each row is unique. In my own work, I was going to just add a unique key column (primary key - indexing the rows - 1, 2, 3, etc.), but I found that priority and subpriority act as a combined unique key. If there are shared priorities, subpriorities are guaranteed to be different.
After knowing this and including these, I can add anything else I want and know that I will get all values back for each individual row.
To see the hierarchy of how to access the data from this point, after you drag in the appropriate values, just use the "Show DataView" tool under or above your visual (it is next to the reload / toggle autoreload icons).
This information was enough for my final solution, so I hope this answer helps others as well.
Does igGrid support column edit/new templates?
I have a grid defined as below. But the template won't work when editing/adding a new row.
The "ChooseEmployee" function displays a popup dialog for users to choose employee's from.
$(function() {
var employees = [{
Id: 1,
"Name": "John, Smith",
"DirectReports": "Mary, Ann;David,Lowe"
}, {
Id: 2,
"Name": "Mary, Ann",
"DirectReports": "Kelly,Walsh;Kevin, Edwards;Terri, Gibson"
}];
$('#grid1').igGrid({
dataSource: employees,
primaryKey: "Id",
autGenerateColumns: false,
width: "100%",
columns[{
headerText: "Id",
key: "Id",
dataType: "number",
width: 100
}, {
headerText: "Name",
key: "Name",
dataType: "string",
width: 120
}, {
headerText: "Reports",
key: "DirectReports",
dataType: "object",
width: 300,
template: "<div style='clear:both'><div style='overflow:hidden;white-space:wrap;max-width:320px;width:320px;float:left;'>${DirectReports}</div><input type='button' onclick='chooseEmployees(${Id});' value='...' style='float:left;' /></div>"
}],
features: [ {name: "Updating", enableAddRow: true, editMode: "row" } ]
});
});
<table id="grid1"></table>
Basically you would have to cancel the original row editing that the igGrid is performing and you would have to invoke row updating and row adding programmatically. Also this template will work for rows that already exist, but would not be applied when adding a new row. You can try the Row Edit Template feature of the igGrid as it provides in the box editing dialog. If you want to choose from a list of values for this specific column, then you can use a combo editor provider for this column.
Option for configuring editor provider for the column.
updateRow API method.
addRow API method.
Setting up a row edit template.