I want to show some data in the title of my highchart (i.e. point.total).
I have tried
title: {
text: 'Project Status Approved,Unapproved and Revised<br/>{value.total}',
},
but it shows {value.total} instead of total data.
Please tell me what to do.
Thanks in advance
data.reduce(function (i, a) { return i + a; })
Related
Hi I am developing admin page with Active Admin.
I made a batch action and now I try to show the number of 'selected' column. but I cannot find the way.
This is the batch actions what I wanted (by NG-admin).
Can I make '3 Batch Actions' instead of just 'Batch Actions'? Or can I display the number of selected column in different way?
Thanks
oh I use this.
// app/assets/javascripts/active_admin.js
$(document).ready(function() {
$('input.collection_selection').on("click", countChecked);
$('input.toggle_all').on("click", countChecked);
});
let countChecked = function() {
let menuButton = $('a.dropdown_menu_button');
setTimeout(function() {
let count = $('input.collection_selection:checked').length;
menuButton.find("span").remove();
if (count > 0) { menuButton.append("<span> (" + count + ")</span>"); }
});
}
I'm using Highcharts csvURL to import a .csv file and create a line graph. The points all seem fine, but many of my series titles are undefined. My client has 22 series. I wonder if there is a limit. I'm using the example code from highcharts:
Highcharts.chart('container', {
chart: {
type: 'line'
},
data: {
csvURL: 'Ozone-4th-Highest-8hr-Front.csv'
},
title: {
text: 'Ozone 4th Highest 8-hr Concentration Wasatch Front'
},
yAxis: {
title: {
text: '(Ozone PPM)'
}
}
});
Here is what my csv looks like:
Part of a line with hash is interpreted as a comment:
https://github.com/highcharts/highcharts/blob/master/ts/modules/data.src.ts#L1121
To avoid that, you can use a quote:
<pre id="csv" style="display:none">Year,Annual mean,"#5 year mean"
1880,-0.31,
...</pre>
Live example: https://jsfiddle.net/BlackLabel/a8e9yg0x/
My client had hashtags in her series names. Once I removed them, csvURL worked as expected. Now I need to learn how to keep the hashtags without breaking the script!
https://jsfiddle.net/rcvwsbdm/
var data = [{"name":"Adult Emergency","y":2},{"name":"Adult Social Care and Health","y":1},{"name":"Anaesthetics","y":1},{"name":"Audiology","y":2}];
var chart_options = {
"chart": { "type":"bar", "height":"700" },
"xAxis":{ "categories":[""] },
"series":[{"data": data}]
};
$('#main').highcharts(chart_options);
jQuery: 2.2.4
Highcharts: 4.4.2
Right now inside your options.categories you have an empty string:
categories: ['']
This is the reason why you have first label as an empty string. To avoid this situation you can use an empty array instead:
categories: []
Here you can see an example how it can work:
https://jsfiddle.net/rcvwsbdm/1/
Best regards.
I'm using Knockout 3 with the plugin jqAutocomplete by Ryan Niemeyer. I have a problem with this model:
var ViewModel = function() {
var self = this;
self.myOptionsObs = ko.observableArray([
{ id: ko.observable(1), name: ko.observable("item 1 o"), description: ko.observable("item label 1 o") },
{ id: ko.observable(2), name: ko.observable("item 2 o"), description: ko.observable("item label 2 o") },
{ id: ko.observable(3), name: ko.observable("item 3 o"), description: ko.observable("item label 3 o") }
]);
self.myValueObs = ko.observable();
};
ko.applyBindings(new ViewModel());
<input data-bind="jqAuto: { source: myOptionsObs, value: myValueObs, inputProp: 'name', template: 'itemTmpl' }" />
As you can see, there is an observable array and each element is also an observable.
The autocomplete don't work well. As you can see in this Fiddle, the left column has an observable array but its elements aren't observable. If you click in the left box and write something, a list of options appear.
But in the right column, you have the same, but the element's are all observable. If you click in the right box and write something, when the list appear, if you move the cursor up and down, you could see that the row 'name' gets deleted and filled with zeros.
What I have to change in my data-bind attribute?
This question is related with this question.
I have to say that this solution works ok for me. But the updated plugin don't.
Thanks !!
The jqAutoComplete plugin isn't setup to work with observable properties (although it could be enhanced to do so without much work).
For now, I think that your best bet is to create a computed that will always return a plain and up-to-date version of your options.
self.myOptionsObs.plain = ko.computed(function() {
return ko.toJS(self.myOptionsObs);
});
Sample: http://jsfiddle.net/rniemeyer/45cepL9b/
I'll try to take a look at some point about supporting observable properties. Shouldn't take many changes.
ExtJS4 grid anticipates appropriate editor (cellEditor or rowEditor) per column.
If a column's header field is dateField - date selector will be applied on every row in that column.
What I need is an editor with different field editors per row, not per column.
The Extjs3 solution is provided here - unfortunately doesn't fit in Extjs4 case.
(please check that link to see explanatory images, cause I can't post images yet)
There's also a single column solution called property grid, but again - it supports only one column and is very deviated from the standard Ext.grid component
I have tried manually changing grid editor by customizing column.field and reloading grid.editingPlugin.editor, but always get a blank rowEditor panel with no fields.
//by default rowEditor applies textField to all cells - I'm trying to force custom numberFiled on apropriate row
var numberField=Ext.form.field.Number();
grid.columns[0].field=numberField;
//destroy current rowEditor's instance
delete grid.editingPlugin.editor;
//now, upon doubleClick on apropriate cell it should reinitialize itself (initEditor()) - and it does, but is an empty panel
what am I missing here? once I delete editingPlugin.editor everything should start from the beginning like during the first time rowEditor is called, but it looses all the fields
Solution for Ext4:
I was looking for a solution for this and this guy said the property grid has this behavior.
I have adapted it to work in a clean way for me
on initComponent I declared:
this.editors = {
'date' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Date', {selectOnFocus: true})}),
'string' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Text', {selectOnFocus: true})}),
'number' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'int' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.Number', {selectOnFocus: true})}),
'boolean' : Ext.create('Ext.grid.CellEditor', { field: Ext.create('Ext.form.field.ComboBox', {
editable: false,
store: [[ true, 'Sim' ], [false, 'Não' ]]
})})
};
I used these functions to help me (copied):
this.renderCell = function(val, meta, rec) {
var result = val;
if (Ext.isDate(val)) {
result = me.renderDate(val);
} else if (Ext.isBoolean(val)) {
result = me.renderBool(val);
}
return Ext.util.Format.htmlEncode(result);
};
this.getCellEditor = function(record, column) {
return this.editors[record.get('type')];
};
And finally, associate these functions to the column:
{text: "Valor", name : 'colunaValor', width: 75, sortable: true, dataIndex: 'valor', width:200,
renderer: Ext.Function.bind(this.renderCell, this),
getEditor: Ext.Function.bind(this.getCellEditor, this)
}