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.
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 have a dataset that has 1-2 entries per day and I don't want that many labels on the x-axis so I am going through them and only showing every 5th or 10nth one. My issue is I do want to show the label for each one in the tooltips. I have a second array or data with the original label set that I want to use for tooltips but can't seem to figure it out. I assume there should be a fairly simple solution for this.
Below is a simple example. I tried adding the cutom option on tooltips with the second dataset but no luck.
var labels = ["10-23-2017", "", "10-25-2017", ""];
var labels2 = ["10-23-2017", "10-24-2017", "10-25-2017", "10-26-2017"];
var chart = document.getElementById('chart').getContext('2d');
var myChart = new Chart(chart, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
label: "Readings",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data,
}]
},
// Configuration options go here
options: {
tooltip: [{
enabled: true,
custom: labels2
}]
}
});
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.
I've been trying to create an object to use in a jtable as the options (for a select list).
I don't seem to have the format correct. The jtable.org website says it will take an array:
From the jtable.org website:
http://jtable.org/ApiReference#fopt-options
PhoneType: {
title: 'Phone type',
options: [{ Value: '1', DisplayText: 'Home phone' }, { Value: '2', DisplayText: 'Office phone' }, { Value: '2', DisplayText: 'Cell phone' }]
}
However, when I create an object like that:
var optionsObject = [];
optionsObject.push({Value: i, DisplayText: 'Hello' + i});
and then use it as a variable for the options in my jtable:
key: true,
options: optionsObject,
I don't get the items in the select list drop down. I do get something in the select list, but that looks like '[object Object]' instead of the actual items.
I'm not really sure what I'm doing wrong.
If I send an object that looks like this:
object.push('hello' + i);
I will get an item in the select list that looks like this 'hello0', as expected, but then the display text is also used as the value. I need to have an object with separate display texts and values.
Has anybody had any success with doing this?
After much trial and error, and debugger stops in the jtable scripting files, I learned that in order to use an object for the 'options' property of a field in jtable, the object must be in the following format
var optionsObject = new Object();
optionsObject[Value] = DisplayText;