I have a pie chart using BIRT. Works fine but the problem is it only shows data that is "fitted" in the chart's size. Is there a "can grow" property equivalent for pie charts? I mean all data shows only if I resize the pie chart into larger one. But if I choose a larger amount of data, it won't fit again. I need the size to be "auto resize" according to how many data to be displayed.
I tried modifying the advanced settings but nothing worked
Format - Overflow: Auto, Scroll and Visible
Push down - set to true
I do not see any other properties related to pie chart formatting. Can anyone point me to right direction? thanks.
nevermind, found it here but I tweaked it a bit. OnRender event of the chart itself type this:
function afterDataSetFilled(series, dataSet, icsc)
{
if( series.getSeriesIdentifier() == "categorySeries" ){
if( dataSet.getValues().length <= 4 ){
icsc.getChartInstance().getBlock().getBounds().setWidth(450);
icsc.getChartInstance().getBlock().getBounds().setHeight(250);
}
if( dataSet.getValues().length > 4 && dataSet.getValues().length < 8 ){
icsc.getChartInstance().getBlock().getBounds().setWidth(450);
icsc.getChartInstance().getBlock().getBounds().setHeight(400);
}
if( dataSet.getValues().length > 8 ){
icsc.getChartInstance().getBlock().getBounds().setWidth(450);
icsc.getChartInstance().getBlock().getBounds().setHeight(600);
}
}
}
"categorySeries" is the title of the "simple series" type that can be found in "Format Chart" tab when chart is double clicked.
Related
I want to widen the popup window in Kendo UI grid. So that also the elements in it fill the window.
In the answer How do I Change window size on kendo grid editor template? only the window is made wider, but not also the elements contained in it.
Simple provide the width in your grid definition: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.window or see https://stackoverflow.com/a/30778406/4944034 for a practical example.
in the area of kendoGrid add the following code to the event edit:
jQuery("#grid").kendoGrid({
...
edit: function(e){
kendoUi_popUpEditWindow_setWidth('950px');
},
...
})
and the corresponding function:
function kendoUi_popUpEditWindow_setWidth(width){
if(typeof(width) != "string" || (width + '').indexOf("px") == -1 ){
width = "800px";
}
left = (jQuery( window ).width() - parseInt(width)) / 2;
left = left + "px";
jQuery(".k-widget.k-window").css('left', left);
jQuery(".k-edit-form-container").attr('style', 'width:' + width);
jQuery(".k-edit-form-container .k-edit-field").children().attr('style', 'width:100%');
}
Can't figure out how I change the text colour of tooltips. For my column chart I tried:
series.tooltip.label.fill = am4core.color("#FFFFFF");
But it doesnt work. Curious also how I do it for the pie charts? Is there one place that I can update to affect all chart types, or do each need to be handled independently?
The tooltip label gets a calculated color that contrasts with the tooltip background. You need to set autoTextColor to false in order to the fill color to take effect.
series.tooltip.autoTextColor = false;
series.tooltip.label.fill = am4core.color("#FFFFFF");
The same is valid for pie charts.
You can create your own theme but that could be more than what you need.
You can use more than one theme, which allows you to use one default theme and then override just what you need:
am4core.useTheme(am4themes_animated);
am4core.useTheme(function customTheme (object) {
// Identify the instances
if (object instanceof am4core.Tooltip && object.label) {
object.autoTextColor = false;
object.label.fill = am4core.color("#FFFFFF");
}
});
After a lengthy search, I got the Below Line of code as successful line
pieSeries.labels.template.fill = am4core.color("white");
I have added above line of code if you are using axis range you can use that however as I can see your problem please take a look below line of code will solve your problem
series.tooltip.getFillFromObject = false;
series.tooltip.label.propertyFields.fill = "color";
series.tooltip.background.propertyFields.stroke = "color";
https://www.amcharts.com/docs/v4/concepts/tooltips/
I'm very new to chart building with c3 and d3. I've done a search, but I can't find an answer - could anyone help? how can I force the x axis to display every tick mark - it is currently displaying every other one. I want the chart to be dynamic, so I don't want to have to hard wire in the tick count (it is pulling data from elsewhere).
I hope I've made sense! Grateful for any suggestions.
You need to adjust culling option:
axis: {
x: {
tick: {
culling: false
}
}
}
See docs.
Also, you can force visibility of first and last tick value with little css hack:
.c3-axis-x g.tick:nth-last-child(2) text,
.c3-axis-x g.tick:nth-child(2) text {
display: block !important;
}
I am experimenting with an NVD3 chart, and though it renders correctly in shiny dashboard, the div which contains the chart overflows shiny dashboards box() container (does not fit snugly into the box). Explicitly setting height and width for the chart changes the charts size but not the containing div, which continues to overflow the box container; I seemingly have no control over the divs size? Code is as below:
app.R
library(shiny)
library(shinydashboard)
library(rCharts)
library(curl)
consent <- read.csv(curl("https://raw.githubusercontent.com/kilimba/data/master/consent.csv"))
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
fluidRow(
box(showOutput("distPlot2"),width = 6)
)
)
)
server <- function(input, output) {
output$distPlot2 <- renderChart2({
p2 <- nPlot(HIVConsentRate ~ Year,
group = 'HIVRefused',
data = consent,
type = 'stackedAreaChart',
height = 250,
width = 450)
return(p2)
})
}
shinyApp(ui, server)
Any help appreciated,
Tumaini
I tested your code and added the library argument nvd3 to the UI section like this: box(showOutput("distPlot2",'nvd3'),width = 6) to load the javascript library. I was able to adjust the width of the box on the ui side and/or the width of the chart on the server side.
Sorry guys, still not sure what was the matter, but the tried and tested "switch it off and switch it back on again" worked for me here. Note that I had also forgotten to add the lib variable in showOutput() (at least in this code pasted here, though I had tested with the lib variable set to "nvd3" privately and it had stil proved problematic as far as sizing was concerned. however it works now :)
I am trying to filter data on my choropleth chart from a bargraph. Strange thing is that it is not showing correct value on selecting a bar from the accompanying bar chart.
Here is the jsfiddle: https://jsfiddle.net/anmolkoul/jk8LammL/
The script code begins from line 4794
If i select WIN004 from the bar chart, it should highlight only five states and the tooltip should reflect the values for the data. Some states are highlighted for whom WIN004 does not exist.
I changed the properties of the choropleth from
.colors(d3.scale.quantize().range(["#F90D00", "#F63F00", "#F36F01", "#F09E01", "#EDCB02", "#DDEA03", "#ADE703", "#7EE404", "#50E104", "#24DE05", "#05DB11"]))
.colorDomain([-1, 1])
To
.colors(d3.scale.linear().range(["green", "white", "red"]))
.colorDomain([-2, 0, 2])
But i get a lot of white states where its hard to discern what has been highlighted. The tool tip for some white-ed-out states show -0.00 :/
Here is the fiddle http://jsfiddle.net/anmolkoul/jk8LammL/1/
So i guess either its a problem with my color range or how my data is getting parsed.
I would ideally like to specify the data ranges in the .colorDomain based on the top and bottom values of the riskIndicator dimension. My functions are not working though. Should i use d3.max or riskIndicator.top here?
EDIT:
I got the color domain dynamic by using the min and max values but still the graph is not performing as expected? Could this be an issue with the geochoropleth chart? I further took a working geochoropleth example and ported my data to it and even that gave me the same issue of representing data incorrectly. I thoughit could be a data problem but i validated using a couple of good BI tools and their map charts displayed data correctly.
Could this be an issue with the dc choropleth?
Thank you.
Anmol
This has the same root cause as the issue in this question:
Crossfilter showing negative numbers on dc.js with no negative numbers in the dataset
In short, floating point numbers don't always cancel out to zero when added and subtracted. This "fake group" will ensure they snap to zero when they get close:
function snap_to_zero(source_group) {
return {
all:function () {
return source_group.all().map(function(d) {
return {key: d.key,
value: (Math.abs(d.value)<1e-6) ? 0 : d.value};
});
}
};
}
Added it to the FAQ!