Hi all,
I'm looking forward to create a chart like below attached. I'm googling to find out which chart have the option to create like this type of chart, no exactly similar like the text text inside each arc, but with empty.
Primarily i was looking in chartjs, since i'm new to use any chart library, i'm yet to understand the options in it, mean while if any one has suggestions, it will be help to me.
Thanks all
If you want to use another library d3.js. You should look into this:
https://github.com/amanjain325/angular-d3-charts/tree/master/src/app/doughnut-chart
Edit the radius value as per your requirement.
let pie = d3.layout.pie()
.startAngle(Math.PI / 2)
.endAngle(Math.PI * 2 + Math.PI / 2)
.value((d) => {
return d.value;
}).sort(null);
let arc = d3.svg.arc()
.outerRadius(150)
.innerRadius(70);
let g = svg.selectAll('.arc')
.data(pie(piedata))
.enter().append('g')
.attr('class', 'arc');
You can use ECharts. There is also a vue version for this. They have exactly this type of chart.
Another possibility would be to create a chartjs plugin for this kind of chart.
Related
I am trying to calculate the number of coloured cells in a column where the check box is also marked.
For example, in column F, there are 2 green cells in rows with marked check boxes. I have failed to work out a formula that would help me do this. I am using the function by colour add-on to count number of coloured cells.
Any help would be greatly appreciated.
Sheet
Explanation:
I would use a custom function to do that and then use it as a formula in the sheet.
Please read more about custom functions and their limitations.
They are not refreshed as regular formulas but only when an argument changes. Please look online for workarounds on this issue if it is a bottleneck in your project.
Solution:
Click on Tools => Script editor on the top menu of the spreadsheet file, copy & paste the below code into a blank script and click on save.
function countColors(checkboxesColumn,colorColumn,hexCode) {
const ss = SpreadsheetApp.getActive();
const sh = ss.getActiveSheet();
const values = sh.getRange(checkboxesColumn).getValues().flat();
const colors = sh.getRange(colorColumn).getBackgrounds().flat();
return values.filter((v,i)=>v==true && colors[i]==hexCode).length;
}
then you can use that function in your sheet as =countColors("C3:C","F3:F","#b7e1cd"):
I'm new to chartjs and couldn't find any example on this...
Is there a way to stack these charts vertically (same x-axis) with one long y-axis instead of 3 scales/y-axes ?
From this:
To something like this : (just an example)
here an example:
https://jsfiddle.net/Developer2011/ogjewLuz/34/
Thanks
Soo I did some research about it and there is a lot of people with this problem.
The solution that I'm giving to you will have some problems interacting with the final user but if it's just for display maybe this is what you want.
Right here is the example where you can ofcourse add your own format and specifications:
https://jsfiddle.net/4th6rbcw/3/
This question already has answers here:
How to add data labels to a bar chart in Bokeh?
(2 answers)
Closed 3 years ago.
I am currently using this example to create bar chart with Bokeh: http://docs.bokeh.org/en/0.11.0/docs/gallery/stacked_bar_chart.html
Everything works so far, however I couldn't find a way to add data value to each bar like this chart:
http://docs.bokeh.org/en/latest/docs/gallery/elements.html
The Bokeh.Charts.Bar class does not have the .text() function like Bokeh.Plotting.Figure. Is there anyway for me to add in the data like the elements chart to the bar chart? I have tried digging around all the codes below the classes and could not find any solution. Help is really appreciated. Thanks in advance.
A few comments:
First, in the near future (possibly in 0.12 but not certainly) the Chart class will be made a subclass of Figure so that all of the "glyph methods" like Figure.text will also work on charts as well.
Regardless of that, Chart is always a subclass of Plot which means that you can use "low level" glyph objects and Plot.add_glyph anytime. This looks basically like:
from bokeh.models.glyphs import Text
text_glyph = Text(x="x", y="y", x_offset=10, text="foo")
text_renderer = plot.add_glyph(data_source, text_glyph)
A complete example (from version 0.11.1) using the Text glyph can be seen here.
Finally, just today a new PR was merged to add a proper Label annotation to Bokeh, that will make this kind of thing even easier. You can see the PR here:
https://github.com/bokeh/bokeh/pull/4106
This work will be part of the 0.12 release.
this was originally asked on Google groups but since I received no replies, I'm asking here on SO.
I am plotting basic data like temperature, various counts and such with date time and I like to append a third column as a further description.
E.g.
time, value, description
time, value, description
time, value, description
So I am looking at the simplest way of plotting that, as full screen as possible, as minimally (least LOC) as possible.
So far with https://jsfiddle.net/kaihendry/q1mczqc1/2/ I have not figured how to show the description (is it a infobox/selection? not sure on terminology), which in my example is the kernel version, when I click a point.
Furthermore I don't understand why on the right of the graph there are these null value labels:
http://s.natalian.org/2015-06-16/1434449447_1054x1058.png
And any tips to make http://s.natalian.org/2015-06-16/foo.html scale to fill the whole screen? I especially want to make it usable on my iPhone.
I have not figured how to show the description (is it a infobox/selection? not sure on terminology)
In web development, this is called a tooltip. In Google charts, you can add a tooltip by replacing the commented line with the following one :
//data.addColumn('string', 'kernel');
data.addColumn({type: 'string', role: 'tooltip'});
So, the 3rd column will not be handled as a data series, but as a tooltip.
Furthermore I don't understand why on the right of the graph there are these null value labels
The null values are shown, because (as previously stated), you have inserted 2 series of data ('Date' and 'kernel'). If you make the replacement mentioned before, the null values will be replaced
And any tips to make .. scale to fill the whole screen ?
You can add the following option to configure the dimensions of the chart :
var options = {
chartArea: {width: '80%', height: '80%'}
};
Furthermore, since the version of line charts you are using are slightly obsolete, you shoud replace
var chart = new google.charts.Line(document.getElementById('linechart_material'));
with
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
In the following jsfiddle, you can find a final working version
(with some more fixes, like horizontal axis range and legend positioning).
If I understand right you want to add third column as a description for each point.
If you add 3rd column like this
data.addColumn('string', 'kernel');
Google chart takes this as another series and because the data are string it can't draw the series and shows null.
You can add 3rd column as a tooltip.
data.addColumn({type: 'string', role: 'tooltip'});
But for tooltip to work you need to change the line chart to visualization line chart
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
To make chart fill the screen you can change the div style.
<div id="linechart_material" style="height:100%;"></div>
I am trying to create a Stacked Bar Chart. My requirement is I need percentage composition inside the bar and total count on top of the Bar. Please suggest solutions.
My Requirement:
Sample : http://www.jfree.org/jfreechart/api/javadoc/images/StackedBarRenderer3DSample.png
I want percentage composition inside the bar and total composition on the top of the bar.
It's not clear what you are doing now, but using a StackedBarRenderer with setRenderAsPercentages(true) will display the percentages. To get the total, extend StackedBarRenderer, loop through the dataset for each column, and override drawItem() to draw the result. An example may be found in the JFreeChart Demo as part of StackedBarChartDemo3.
As an alternative, consider a custom CategoryToolTipGenerator, added via setBaseToolTipGenerator().
Addendum: You linked to an example using StackedBarRenderer3D, which also has a setRenderAsPercentages() method. It can be extended similarly.
I ran into the same problem too. For some reason the latest version of JFreeChart does not display the percentage composition inside the bar. Here's how I got it to work:
StackedBarRenderer br = new StackedBarRenderer(true); //enable perc. display
br.setBarPainter(new StandardBarPainter());
br.setBaseItemLabelGenerator(new StandardCategoryItemLabelGenerator());
br.setBaseItemLabelsVisible(true);
chart.getCategoryPlot().setRenderer(br);
Hope this helps