In AgGrid multi-group column scenario, how to display first column to have count number of second column.?
In a below example, United states shows (1109) rows in it, but i want to show (7), count of years in it.
So it should show United States (7) .How to achieve this ?
Seems like defining a custom innerRenderer inside the group settings might be right solution here.
Add autoGroupColumnDef attribute inside gridOptions as configuration used by the auto group columns
var gridOptions = {
autoGroupColumnDef: {
width: 200,
headerName: 'Group', //header name of the group
cellRenderer: 'agGroupCellRenderer', //default cell renderer for groupings
// provide extra params to the cellRenderer
cellRendererParams: {
suppressCount: true, // turn off the row count (in order to skip default stack counting)
innerRenderer: customInnerRenderer, //our inner renderer in charge of child nodes counting
}
},
//other settings
columnDefs: columnDefs,
animateRows: true,
enableRangeSelection: true,
rowData: null
};
Define customInnerRenderer that will handle the counting display
function customInnerRenderer(params){
//this verification is necessary, otherwise the grid will brake down
//when last level without grouping will be reached (if exists)
if (params.node.group) {
var label = params.value ? params.value : '-';
return label + ' (' + params.node.childrenAfterFilter.length + ')';
}
}
I have created a Stockchart using Amcharts available in https://codepen.io/Volabos/pen/PyzmYd
Where everything looks good, I however want to get rid of the Thousand-k suffix from Y-axis lables as well as from Baloon, instead I desire to have Thousand seperator + rounded value upto 2.
Is there any possibility to achieve such?
Besides, I also want to set various CSS properties of the div class = 'Right' dynamically based on the value of "value2" e.g. if its value is greater than 500 then Font-color would be green otherwise red.
Any pointer would be highly appreciated.
For the y-axis, change usePrefixes in your panelSettings to false:
"panelsSettings": {
"usePrefixes": false
},
For the balloon, implement balloonFunction to customize the formatting:
stockGraphs: [{
"id": "g1",
...
"balloonFunction": function(graphDataItem, graph) {
var value = graphDataItem.values.value;
return "<div>Value<br/>" + Math.round(value).toLocaleString('en-us'); + "</div>";
}
}]
Updated pen
EDIT
Here is the updated pen to include dynamic balloon colors based on value2. The new balloonFunction looks like this:
function(graphDataItem, graph) {
var value = graphDataItem.values.value;
var value2 = graphDataItem.dataContext.rawData[0].value2;
return "<div style='color:" + (value2 > 500 ? 'green' : 'red') + "'>Value<br/>" +
Math.round(value).toLocaleString('en-us'); +
"</div>";
}
You can clean this up with string interpolation and CSS classes as well, but this is basically the technique.
I have a data set which looks something like this.
var toolTip = [ ["IN001", "IN002"], "IN003", "IN004", ["IN005", "IN006", "IN007"] ];
I have a scatter plot which uses these tooltips to show data in it.
{
type: 'scatter',
name: 'incidents',
yAxis: 1,
data: [ [0,100],[1,100],[2,100],[3,100] ],
tooltip: {
pointFormatter: function(){
return "Incident " + toolTip[this.series.data.indexOf( this )] ;
}
}
},
Now this shows the data in a line in tooltip. I want a next line in case there is more than one data in a tooltip. For example
IN0001
IN0002
instead of IN0001, IN0002.
How do i get the next line. I don't know how to parse this data in this case.
One more doubt i have is, Each name should be a hyperlink.
How do i make every word in the toolTip array to appear as a link in the tooltip?
Any help is appreciated.
Here is a working model of the following.
jsFiddle
You can change your pointFormatter function so you will meet your requirements. You can add breaking lines using 'br' and you can add links using 'a' like in normal HTML. You can use Highcharts.each() for iterating over your array and adding next elements to your string.
pointFormatter: function() {
var string = '';
Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
string += '' + p + '<br>'
})
return "Incident<br>" + string + "<br />";
}
Here you can see an example how it can work: http://jsfiddle.net/o2zmLngr/5/
I need to create a varying amount of the same morris js graphs depending on the data I pull from the database, i.e everything will stay the same except form the actual data. My code works perfectly for one graph but when I try and loop through an array to make new graphs it all messes up, any ides how to fix this?
Here is my code, I have just hardcoded values as I still need to work out how to automatically create variable and add them to an array:
<script>
var jsonVMs= [{"y":"2015-03-10 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-11 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-12 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-13 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-14 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-15 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-16 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-17 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-18 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-19 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-20 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-21 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-22 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-23 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-24 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-25 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-26 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-27 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-28 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-29 00:00:00","a":"20.00","b":"0.0000000"},{"y":"2015-03-30 00:00:00","a":"20.00","b":"0.0000000"}];
var jsonVMs1= [{"y":"2015-03-11 00:00:00","a":"3","b":"3"},{"y":"2015-03-12 00:00:00","a":"5","b":"1"},{"y":"2015-03-13 00:00:00","a":"4","b":"0"},{"y":"2015-03-14 00:00:00","a":"4","b":"0"},{"y":"2015-03-15 00:00:00","a":"4","b":"0"},{"y":"2015-03-16 00:00:00","a":"6","b":"1"},{"y":"2015-03-17 00:00:00","a":"12","b":"5"},{"y":"2015-03-18 00:00:00","a":"14","b":"5"},{"y":"2015-03-19 00:00:00","a":"14","b":"2"},{"y":"2015-03-20 00:00:00","a":"14","b":"3"},{"y":"2015-03-21 00:00:00","a":"15","b":"2"},{"y":"2015-03-22 00:00:00","a":"15","b":"2"},{"y":"2015-03-23 00:00:00","a":"15","b":"4"},{"y":"2015-03-24 00:00:00","a":"17","b":"6"},{"y":"2015-03-25 00:00:00","a":"17","b":"6"},{"y":"2015-03-26 00:00:00","a":"19","b":"9"},{"y":"2015-03-27 00:00:00","a":"17","b":"6"},{"y":"2015-03-28 00:00:00","a":"17","b":"6"},{"y":"2015-03-29 00:00:00","a":"17","b":"6"},{"y":"2015-03-30 00:00:00","a":"18","b":"6"}];
var a = [jsonVMs,jsonVMs1];
</script>
<div id="VMsDiv1" ></div>
<script type="text/javascript">
var index =0;
while (index < a.length) {
new Morris.Line({
// ID of the element in which to draw the chart.
element: 'VMsDiv1',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data:a[index],
// The name of the data record attribute that contains x-values.
xkey: 'y',
// A list of names of data record attributes that contain y-values.
ykeys: ['a','b'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
xLabelFormat: function(d) {
return d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear();},
labels: ['Total VMs','Powered On'],
dateFormat: function(date) {
d = new Date(date);
return d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear();
},
hideHover: true
});
index++
}
As per my comment, you need to separate the div where the charts will be rendered.
As such, add another div like so:
<div id="VMsDiv0" ></div>
And change the line to this:
while (index < a.length) {
new Morris.Line({
// ...
element: 'VMsDiv'+index,
// ...
});
}
I have a table with php-generated content, which should be sort and filtered by the client, using jQuery Tablesorter. For various numeric values I'm using jQueryUI sliders, but due to layout reasons not in the table header, but in a separate section. Additionally, there is a "fulltext"-search, searching in all (also hidden) rows.
Now the problem is, typing in the global input field overrides all previously applied filters.
This is what I'm doing so far:
var filters = [];
$('table').tablesorter({
// some stuff here
widgets: ['zebra', 'filter'],
widgetOptions: {
filter_external: '.search',
filter_columnFilters: false
}
});
$('.slider').slider({
range: true,
min: 1,
max: 42,
values: [12, 28],
slide: function(event, ui){
var col = $(this).data('filter-column'),
txt = ui.values[0] + " - " + ui.values[1];
// every slider move updates a global filter array
filters[col] = txt;
},
stop: function(event, ui){
// after the slider is released, the previously defined filter
// is being applied to the table
$.tablesorter.setFilters($('table.hasFilters'), filters, true);
}
});
<div class="slider" data-filter-column="2"></div>
<input type="text" class="search" data-column="all">
The second filter (data-column="all") should filter only the result set of the slider, not the whole table.
Any ideas?
When you set data-column="all" on an input, that tells the filter widget to use that input to search the entire table for a match.
As of version 2.15, the $.tablesorter.setFilters() function will accept one additional search parameter to match any column (ref; it's probably not obvious enough, but look near the bottom for "As of ... v2.15")
Anyway, try this code (demo) - it isn't an optimal solution, but it works:
HTML
<div class="slider" data-filter-column="1"></div>
<div class="display"></div>
<input type="text" class="search" data-column="all">
Script
var columns,
filters = [],
$table = $('table'),
$display = $('.display'),
$searchAll = $('.search'),
initialValues = [12, 28],
update = function (event, ui) {
var col = $(this).data('filter-column'),
// ui is undefined in create event
txt = ui.values ? ui.values[0] + " - " + ui.values[1] : initialValues.join(' - ');
// every slider move updates a global filter array
filters[col] = txt;
// get searchAll input value;
filters[columns] = $searchAll.val() || '';
$display.html(txt);
// set filters # creation
if (!ui.values) {
setFilters();
}
},
setFilters = function () {
$.tablesorter.setFilters($table, filters, true);
};
$table.tablesorter({
sortList: [[1, 0]],
// some stuff here
widgets: ['zebra', 'filter'],
widgetOptions: {
filter_external: '.search',
filter_columnFilters: false
},
initialized : function(){
// set number of columns
columns = $table[0].config.columns;
}
});
$('.slider').slider({
range: true,
min: 1,
max: 42,
values: initialValues,
create: update,
slide: update,
stop: setFilters
});