Is it possible to arrange list items horizontally with Webix and preserve all customization and functionality?
I need to create something like this:
http://jsfiddle.net/YbrX3/1296/ - this is not my own snippet, just for example.
You can simply set the layout arrangement with the layout:"x" parameter
webix.ui({
view:"list",
scroll:"x",
layout:"x",
select:true,
data: ...
});
Here's the explanation:
http://docs.webix.com/desktop__xlist.html
Related
I've got 2 pie charts with data like:
data: [
{diseaseType: 'Cancer', diseaseDetails: 'Lung cancer', quantity: 100},
{diseaseType: 'Diebetes', diseaseDetails: 'Unspecific', quantity: 650},
{diseaseType: 'Cancer', diseaseDetails: 'Breast cancer', quantity: 80}
]
i'm tying to get list of filters and able to remove them by user like (it's only controlled test code):
this.diseasePieChart.filters().splice(0, 1)
dc.renderAll()
it's updating first chart, but second (connected with first) not, it's stay like it was before remove filter.
Second chart i'm rendering like this:
self.diseasePieChart.on('filtered.monitor', function (chart) {
// create dimensions etc and render second chart
}
I also tried to do again crossfilter(data) after filter remove. When i'm calling dc.filterAll all filters are reset.
thanks for any help !
The correct entry points for changing filters are chart.filter() or chart.replaceFilter(), depending on whether you are trying to toggle individual items or change the entire array of filters at once.
As you found out, manipulating the array of filters inside the chart might affect the way the chart draws, but it won't convey the change to the crossfilter dimension and the other charts.
Note that as documented in the link above, the accepted type for the parameter for each of these functions is a little surprising:
The filter parameter can take one of these forms:
A single value: the value will be toggled (added if it is not present in the current filters, removed if it is present)
An array containing a single array of values ([[value,value,value]]): each value is toggled
When appropriate for the chart, a dc filter object such as
dc.filters.RangedFilter for the dc.coordinateGridMixin charts
dc.filters.TwoDimensionalFilter for the heat map
dc.filters.RangedTwoDimensionalFilter for the scatter plot
null: the filter will be reset using the resetFilterHandler
So if you want to get the array, remove an item, and then set it back, you could either:
var filters = chart.filters().slice(0); // copy the array of filters
filters.splice(0,1)
chart.replaceFilter([filters])
.redrawGroup();
or (using the toggle feature):
chart.filter(chart.filters()[0])
.redrawGroup();
Note that you usually want to redraw, not render, after changing a filter. This will allow the animated transitions to display, and is a little bit quicker.
Also, chart.redrawGroup is the same as dc.redrawAll() but it's a little safer in case you have more chart groups in the future.
I want to have different tooltips in different columns on a kendo ui grid.
I am examine the example
http://dojo.telerik.com/#pfilipov/iGetO/2
but I can't find the way to do it.
Do you require Angular syntax as in example? - I don't speak Angular, but here is basic solution where I do not need to.
Dojo example
Also there is content function where you can catch and react according to attributes - in that case Title. So if you need calculate some equation (for example) you can create condition if(title == Tooltip1) and do what you need.
You can do like below:
$("#Kendo-grid-div-id").kendoTooltip({
filter: "td:nth-child(2),td:nth-child(3)", //comma separated multiple columns
position: "bottom", //possible values: bottom,top,left,right,center
content: function(e){
var content = e.target.html();
return content;
}
}).data("kendoTooltip");
This works for me!!!
I am trying to create a generic style for all rows in my data table. I have been looking around and there seems to be a function I can use named rownum.
I tired to create the style like this...
row["__rownum"] Less than 0
then colour = Red
But this is not right. Can someone tell me the right way to do this so I can apply the style to multiple cells in my table.
Also where can i find documentation on what sort of functions like this are available?
thanks
I know two ways how you can specify conditional styles in BIRT:
You can write an "onRender" eventHandler (either in Java or JavaScript) for your row. In JavaScript it could looks as follow:
if (row["__rownum"] % 2 == 0) {
this.getStyle().backgroundColor = "red";
} else {
this.getStyle().color = "red";
}
Or create a new BIRT style with a highlight-rule like follows:
row["__rownum"] % 2 equals to 0 then
Set Color or whatever or apply another style
Instead of creating a new style, that you will have to assign to target elements, you can also modify one of the predefined styles, if you find a one matching your targets.
Both EventHandler and Styles can be assigned to various element: Cells, Rows, Tables, Report...
Links you may find helpful:
https://www.eclipse.org/birt/phoenix/deploy/reportScripting.php
http://help.eclipse.org/helios/index.jsp?topic=%2Forg.eclipse.birt.doc.isv%2Fmodel%2Fapi%2Forg%2Feclipse%2Fbirt%2Freport%2Fmodel%2Fapi%2FElementFactory.html
BIRT: Alternating row Color in a table group
I'm using the stacked area chart in NVD3. By default, it has the control options "Stacked, Stream, and Expanded", (see chart in this related, but not identical question: NVD3 - removing options for stackedAreaChart).
I would like only the two options "Stacked" and "Expanded" to appear. How can that be achieved?
chart._options.controlOptions = ['Stacked', 'Expanded'];
How to Remove control options from NVD3.js Stacked Area Chart
There's no option to disable just that, but you can remove the control after the graph has been drawn:
d3.selectAll("g.nv-series")
.filter(function() {
return d3.select(this).select("text").text() == "Stream";
})
.remove();
This will leave a gap where the control used to be, which you could adjust by selecting the other element and changing its position in a similar way.
A better solution is to use the option controlOptions
chart: {
...
controlOptions: ['Stacked', 'Expanded'],
controlLabels: {"stacked": "Default", "expanded": "Percentage"},
...
}
You can use chart.controlOptions(["Stacked","Expanded"]); for more information https://nvd3-community.github.io/nvd3/examples/documentation.html#stackedAreaChart
I've a Highstock chart (Line with markers and shadow) and would like to show a highstock tooltip programmatically, i.e. when i select, for example, a row on some table (that contains chart data) i would like to show the corresponding highstock tooltip.
Is that possible?
For StockChart this solution doesn't work:
In this example you have to replace this:
chart.tooltip.refresh(chart.series[0].data[i]);
to this:
chart.tooltip.refresh([chart.series[0].points[i]]);
The solution is available here.
If what you want is to trigger tooltip on the plot near ith data point, then probaly you can use this answer, which suggest to do something like
chart.series[0].data[i].setState('hover');
where chart is the result of your new Highcharts.Chart. (jsfiddle from the comments to that answer).
I guess that if you want to do it on <tr> click, than your js could finally look like this
var chart = new Highcharts.Chart({ <your options> });
$('#yourTableId tr').click(function(){
var i = $(this).index(); // `this` points to <tr>, get its index
chart.series[0].data[i].setState('hover');
});