Per my company's requirements, we want our column labels to be along the bottom of the chart. In Google Charts, you can accomplish this with the following:
view.setColumns([0,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
1,
]);
Notice that the annotation role comes before the bars that it will be labeling. Thus, the annotation is annotating the horizontal axis, and voila! Your annotations are along the bottom of the chart.
Here's where my problem comes in. I actually want this particular chart to have TWO annotations. One for my columns (along the bottom), and another annotation for a second line. I thought this would be a simple matter of something like this:
view.setColumns([0,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
1,
3,
{ calc: "stringify",
sourceColumn: 4,
type: "string",
role: "annotation" },
]);
However, doing this seemingly simple setup resulted in "Failed to execute 'replaceChild' on 'Node'" error from Google Charts. With a little testing I realized that the failure was the combination of trying to have the first annotation on the horizontal axis + have a second annotation.
Unfortunately, my work demands that this be exactly how these charts look. How can I have two annotations on the same chart where one annotation is along the horizontal axis, and the other annotation is in its usual spot?
Related
As i am pretty new to Charting libraries and in my case i have been asked to implement a Chartjs library for my requirement. So i have chosen a chartjs library.
The use case i must want to know if anybody can help me then it would be a great time saver for me. Actually i am googleling since morning for this.
The actual use case is i have doughnut chart in which i am trying to show the data of a single value. As i have gone through the documentation the chartjs works on a array of data values. But my API is having only one value, means in my case its a counter variable. Assume if my maximum counter limit is say 5000 then i have to show that 5000 as a maximum counter and as the current counter is say 100 then i have to show it in the doughnut arc in red color. Means how much the graph has consumed the data something like that.
Assume total runs 5000
If runs became any count like 100 then we need to do minus from total runs - current runs count = 4900 inside the doughnut circle. As the runs increases then we need to show the reduced count runs inside the doughnut circle graph.
Once if the current runs count comes to total runs the show the circle in red color and make the count to 0.
Is this possible using Chartjs? See below picture.
There is no built-in support for doing this in Chart.js, however, it can be achieved using a very simple hack. Look at the code and try to understand, if any issues feel free to comment.
I have used chartjs-datalabels plugin to show datalabels on the pieChart.
Hope it helps!
Fiddle -> http://jsfiddle.net/y6mnkz84/7/
function drawPieChart(value, maxValue) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Consumed"],
datasets: [{
data: [value, maxValue - value],
backgroundColor: ['green', 'red'],
}]
},
options: {
tooltips: {
enabled: false,
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
display: function(context) {
var dataset = context.dataset;
var value = dataset.data[context.dataIndex];
return value > 0;
},
color: 'white'
}
}
}
});
}
drawPieChart(5000, 5000);
I'am writing an application for budget management and i am using angular-chart.js.
i want to use a dataset to override the initial data(mainly to add new data to the graph and give diffrent color for each bar,label etc.)and set label and colors according to the value of the data.
currently,i tried to do that hard coded but only the first value is being override.
here is the code i am using :
angular.module("app2", ["chart.js"]).controller("MixedChartCtrl",
function($scope) {
$scope.colors = ['#45b7cd', '#ff6384', '#ff8e72'];
$scope.labels = ['', ''];
$scope.data = [65, 11];
$scope.datasetOverride = [
{
label: 'Override Series A',
borderWidth: 1,
type: 'bar',
data: [345]
},
{
label: "Bar chart1",
borderWidth: 1,
type: 'bar',
data: [45]
}
];
});
Hoping that yourquestion is, you want a fill color/label/something to each individual data (for each bar).
Above (your) code snippet is used when you have two data sets.
All these dataset properties will accept String when the same property value has to set for all data, and they will also accept Array[String] - when you want to set different property values for different data in the same dataset. (like below).
$scope.data = [65,11];
$scope.datasetOverride = [
{
label: ['something', 'otherthing'],
borderWidth: [1,2],
backgroundColor: ['#FF4242','#2291ff']
}
]
so now I understood that you might be adding dynamically data.
so you have to push data into DATASET something like this:
$scope.data.push(345);
So if you want to set different properties for these you need to push the properties (arrays).
$scope.datasetOverride[0][label].push('someother thing');
$scope.datasetOverride[0][borderWidth].push(2);
$scope.datesetOverride[0][backgroundColor].push('#46bfb8');
This will add a bar with new color/label/etc beside the previous bars.
I hope I understood your question and this will help.
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.
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
Using the Org Chart in the Google Visualization API, is there a way to flip the chart to a vertical layout instead of horizontal.
Unfortunately no. It is not possible at the moment.
This feature has been requested in Issue #47 on the Google Visualization API issue tracker.
You may want to star the issue to let Google know about your interest in this feature.
GetOrgChart jQuery widget has oeriantation option to show vertical org chart
Orientation of the GetOrgChart widget.
getOrgChart.RO_TOP
getOrgChart.RO_BOTTOM
getOrgChart.RO_RIGHT
getOrgChart.RO_LEFT
Default value: getOrgChart.RO_TOP
Code examples:
$("#people").getOrgChart({
orientation: getOrgChart.RO_LEFT,
dataSource: [
{ id: 1, parentId: null, Name: "Amber McKenzie"},
{ id: 2, parentId: 1, Name: "Ava Field"},
{ id: 3, parentId: 1, Name: "Evie Johnson"}]
});
JSFIDDLE Demo