I have a map (K, V) of dates and values that I'd like to display in a bar chart using chart.js. Date being on the x-axis and the count/number on the y-axis. The dates are sporatic so I want to hide all of the dates that don't have values (i.e. count = 0). In other words, I only care about showing dates that have data.
I'm kind of new to chart.js so I've tried messing with some of the scales chart options but not finding great api documentation of what all of the options are to configure.
You may try to filter your data before passing it into chart.js with function filter.
Related
Lets say I have this table for instance, which shows the values and what colour it is for July 1st 2020:
Currently the column chart looks like so:
Is there a way to sum up val and group by the RAG column and represent this as a column chart?
So it will still show one chart but it will segment it into how much of that total was in the red zone, how much was in the amber zone and how much was in the green zone.
Note: I have tried adding RAG on the axis but this splits the chart rather I need them to be in one bar but showing the split between each RAG
Try using the Stacked Bar Chart visual and put RAG in as the legend.
I have charts I want to sort descending. I've read there's a "more options" option if you click on the chart, which should give you ability to sort.
In chart below, there is no sorting option:
Here is the field the chart is based on (it's a single field):
And here's the way I set up the chart:
I click 'more options' and yet see no option to sort. Who knew such a simple task could be that difficult in PowerBI.
My best guess at this point is that you are using two different fields for Male and Female numbers. If this is the case, you won't get the sorting option since the values are coming from two different fields. If you simply want to interchange the position, you can do so in the values section. If this is not the case, please provide further details, so that we can look into it further.
Edit:
I don't think there is a sorting option without having a value in Axis. However, you can adjust the Inner Padding of the Y-axis (in the formatting pane), to get the visual you are looking for. Setting inner padding to 0% will remove all the gap between the two bars. Also, you can do the sorting now, since there is a value in the Axis box.
Note: If you want different colors, add the field in legend as well.
You are using a clustered bar chart. The columns are arranged alphabetically and can't be changed.
If you want to sort the bars by their values, use a regular stacked bar chart and put the "demo_female" in the Axis, not the Legend.
Not sure how to even define this question, so bear with me!
First, I want to display multiple unrelated datasets, side by side.
Second, for each dataset, I'd like to have column-based lables (default for each column), then an overall "grouped" label for the dataset.
I can "fake" the appearance of this chart by entering a "zero" column entry, creating the gap between the "datasets" I have (even though in ChartJS is just one dataset).
The text line one is default behaviour with ChartJS to display the column label. However getting a "grouped" label to appear is beating me! What I've ended up doing is generating the chart label-less, then doing some funky HTML hacks to get the labels back with the grouped text I need. This approach is not scalable.
Can anyone point me in the right direction for this? Doesn't have to be ChartJS powered.
I have a dataset that looks something like this
I want to plot a given "owners" spend over time. So basically I want to groupby owner and plot their total spend throughout the year. However when I try to do this in powerBI it wants to put the owners on the X Axis for some reason. Normally in Excel you can address this by simply selecting "swap axis" but don't see a way to do that in powerbi.
If you expand the Visualizations pane (on the right) and select the Fields button (a white bar chart icon, beneath the table of Visualization types), then you can drag the data fields into any "Field Well" (e.g. Axis, Legend, Value).
That said, I suspect that you will need to reshape your data back in the Query layer, using an Unpivot transformation to cover the monthly columns (e.g. Jul-15, Aug-15 etc) into a pair of Attribute (Month) and Value ($) columns. This will allow charting Months on an Axis and filtering by date (e.g. last 6 months).
Other than using the Column chart and naming appropriately is it possible to create histograms in google chart api?
To add to mattedgod's answer,
The column chart can now be created with the bars spaced tightly together, use the option:
bar: {groupWidth:"100%"};
Google introduced a couple of days ago an histogram chart : link
Google Charts does not have a histogram chart, since it is just a visualization library you will have to modify the Column Chart to suit your needs. However, I suspect the reason you are not satisfied with column chart is because of the column spacing, which doesn't look very histogram-like. So I will answer this question first:
Can you control the spacing between columns in a Column Chart?
No, not at this time. See this quote from the Google Charts Community
There's no support in the API for controlling the spacing between bars. You might be able to hack it if you're willing to dig into the chart's SVG.
So it is do-able but will take some extra work from you. You can also play around with the chartArea configuration option which will have some influence on the column spacing.
However, the original question may have a different answer actually.
Can you create a histogram-like chart using a Column Chart?
While you cannot control the spacing between sets of columns in a Column Chart, you can get the columns pressed up almost to one another by specifying them as different columns, and then setting each column's color to the same color in the configuration options.
Here is a simple 3-column histogram:
var data = google.visualization.arrayToDataTable([
['x', '1-10', '11-20', '21-30'],
['', 3, 5, 4]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"My Histogram",
width:600, height:400,
hAxis: {title: null},
colors: ['red','red','red'],
legend: {position: 'none'}
}
);
Notice you have 1 row with 3 columns that are each colored 'red'. The downside to this is that you lose out on the labels along the x-axis telling you which column represents what. Again, you will have to have some sort of logic to construct this histogram and populate the data the way you want as well.
So the long story short is Google Charts doesn't have a Histogram and while it is possible with a Column Chart, you might consider looking into a different library.