I am having an issuing changing the title dynamically in a chart. I am following the workaround here to change the chart title in such a way that the change is reflected when exporting the chart. This workaround is referenced in the bug report here. However, when you click the "Set Title" twice in the workaround example the chart tile loses its formatting. Is there any way to work around this?
chart.setTitle( { text: 'Head Count Terminations' }, { text: 'Sales' } );
chart.options.title = {
text: 'Head Count Terminations'
};
chart.options.subtitle = {
text: 'Sales'
}
Thanks in advance.
It probably loses its formatting because the entire title object is replaced. What about only setting the text property?
chart.setTitle( { text: 'Head Count Terminations' }, { text: 'Sales' } );
chart.options.title.text = 'Head Count Terminations';
chart.options.subtitle.text = 'Sales';
You can avoid that issue, by overwriting exportin buttons and options for export.
Example: http://jsfiddle.net/HvHVU/
Function:
function exportActualChart() {
this.exportChart({}, {
title: {
text: this.title.text
},
subtitle: {
text: this.subtitle.text
}
});
}
Chart options
exporting: {
buttons: {
exportButton: {
menuItems: [{
text: 'Standard export',
onclick: function () {
this.exportChart();
}
}, {
text: 'With new title',
onclick: exportActualChart
},
null,
null]
}
}
}
Related
I have an API which returns JSON data like this:
[
{
"name":"Something",
"data":[
{
"x":1541096421,
"y":2
},{
"x":1541436378,
"y":4
},{
"x":1553621371,
"y":2
}
]
},{
"name":"Something else",
"data":[
{
"x":1541096421,
"y":2
},{
"x":1541436378,
"y":4
},{
"x":1553621371,
"y":2
}
]
}
]
The x axis represents date/time and the y axis is a score. It's plotted on a chart like this, using some formatting to convert the date from millisecond timestamp to a readable date format:
function renderChart(data) {
$('#chartContainer').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: chartTitle()
},
xAxis: {
allowDecimals: false,
title: {
text: 'Date completed',
scalable: false
},
type: 'datetime',
labels: {
formatter: function () {
if (true) {
return Highcharts.dateFormat('%d-%b-%y', moment.unix(this.value));
}
else {
if (this.value > 0 && this.value < 24) {
return this.value;
}
else
return 0;
}
}
},
tickPixelInterval: 100
},
yAxis: {
title: {
text: 'Score'
}
},
plotOptions: {
scatter: {
marker: {
radius: 5
}
}
},
series: data,
exporting: {
buttons: {
contextButton: {
menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.filter(item => item !== 'openInCloud')
}
}
// Tried adding this but it doesn't make any difference:
/*,
csv: {
dateFormat: '%d/%m/%Y'
}*/
},
tooltip: {
formatter: function () {
return 'Score of <b>' + this.y + '</b> posted on <b>' + Highcharts.dateFormat('%d-%b-%y', moment.unix(this.x)) + '</b>';
}
}
});
}
This works fine. However, when I click 'export to CSV' in the Highchart graph on the front-end it outputs a CSV file where the date is always showing as "18/01/1970". Obviously it's something to do with the fact that the API is returning a timestamp value, but I don't see how I can modify the format in the CSV similar to how it's done in the chart rendering code.
Can anyone advise how (preferably without modifying the data returned by the API) to get the CSV to output a correct date in day/month/year format?
Many thanks
It can be done easily by wrapping Highcharts.Chart.prototype.getDataRows method and map the data array which is used for export. Check demo and code posted below.
Code:
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows = rows.map(row => {
if (row.x) {
row[0] = Highcharts.dateFormat('%d-%b-%y', row.x * 1000);
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/yafx8cb1/1/
Docs:
https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
As per #Core972's comment, the issue here is related to the timestamp in the API returning the date as seconds rather than milliseconds. I don't believe there is a way to manipulate the date format in the CSV export specifically so it will require a change to the API which returns the data.
Wojciech Chmiel's answer demonstrates how to override Highchart's output to re-format the date from a non-ideal source.
How can I change textbox height and width in a popup on devexpress mvc datagrid? I am using
#(Html.DevExtreme().DataGrid().Columns(c => {
c.Add().DataField("MyField").Visible(true).AllowGrouping(true);
}
I tried c.Add().DataField("Myfield").Width(100) but it is only working in datagrid; it does not work in popup element
First of all you need to know that you are treating with a Form and not with a simple grid, so you basically have to configure the form EditorOptions
So in jQuery it would be like this
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": { items: [{dataField:"yourField",editorOptions:"width:100%"}]}
}
});
The previous answer is a little old and doesn't work now so I'll give an updated answer.
This would change the width for a field in the popup form:
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": {
items: [{
dataField:"yourField",
editorOptions: {
width: "100%"
}
]}
}
});
Also if you wanted to have more control and use groups and set things, like height, you could use:
$("#datagrid").dxDataGrid({
editing: {
mode: "popup",
allowUpdating: true,
popup: {
showTitle: true,
title: "Message",
labelLocation: "top"
},
form: {
items: [
{
itemType: "group",
caption: "My Fields",
items: [
{
dataField: "Field1",
editorOptions: {
height: 200
}
},
{
dataField: "Field2",
editorOptions: {
value: true
}
}
]
}, {
itemType: "group",
caption: "My other fields",
items: [
{
dataField: "field3",
helpText: "Example: +1(111)111-1111"
}
]
}
]
}
}
});
Notice that with and without grouping both use the editorOptions to control each field.
I need to remove the Flag title from a chart created with Highchart. Any ideas how this can be done?
Is no title is set or set to null it shows A by default.
type : 'flags',
name: 'Notable Event',
legend: 'Notable Event',
title: {
text: null, // OR if no title is set it displays A
},
You can also set transparent color, by rgba.
{
type : 'flags',
data : [{
x : Date.UTC(2015, 5, 8),
title : '',
style:{
color: 'rgba(0,0,0,0)'
}
}]
}
Example: http://jsfiddle.net/95ce3n2q/
Try removing the title with this plotOptions:
plotOptions: {
flags: {
title: ''
}
}
Check this documentation for more info:
http://api.highcharts.com/highstock#plotOptions.flags.title
I am generating a Project Cumulative Flow Chart, which is based on the Project name that I fetch using a "find," however I can't get it working.
Here is the Problem:
1) The "Find" in my code is just fetching one kind of project name, "FE," however, I have a lot of other Project name such as FE, BE, VisualRF, etc. I am not sure what's going on
2) I return this to "storeConfig" inside the chart and then I want try to give "Name" to the "stateFieldName." This is not working! I don't see any graph at all.
Here is the code.
_chart2: function() {
var projectName = this.getContext().getProject()._refObjectName;
console.log("========");
console.log(projectName); <<<<<<<<<< This always prints one name'FE' (My project name are FE, BE, etc)
this.chart = {
xtype: 'rallychart',
storeType: 'Rally.data.lookback.SnapshotStore',
storeConfig: this._getStoreForChart2(),
calculatorType: 'Rally.example.CFDCalculator',
calculatorConfig: {
stateFieldName: this.getContext().getProject()._refObjectName, <<<<< I think usage is not fetching name of all projects
stateFieldValues: ['FE','BE','VisualRF']
},
width: 1000,
height: 600,
chartConfig: this._getChart2Config()
};
this.chartContainer.add(this.chart);
},
_getStoreForChart2: function() {
var obj1 = {
find: {
_TypeHierarchy: { '$in' : [ 'Defect' ] },
Children: null,
_ProjectHierarchy: this.getContext().getProject().ObjectID,
_ValidFrom: {'$gt': Rally.util.DateTime.toIsoString(Rally.util.DateTime.add(new Date(), 'day', -30)) },
State: "Open",
},
fetch: ['Severity','Project','ObjectID','FormattedID'],
hydrate: ['Severity','Project','ObjectID','FormattedID'],
sort: {
_ValidFrom: 1
},
context: this.getContext().getDataContext(),
limit: Infinity,
val: this.Name,
};
return obj1;
},
Though this should not matter but here is the code for the high chart function I am calling above
_getChart2Config: function() {
console.log("starting chart config");
return {
chart: {
zoomType: 'xy'
},
title: {
text: 'Chart2'
},
xAxis: {
tickmarkPlacement: 'on',
tickInterval: 20,
title: {
text: 'Date'
}
},
yAxis: [
{
title: {
text: 'Count'
}
}
],
plotOptions: {
series: {
marker: {
enabled: false
}
},
area: {
stacking: 'normal'
}
}
};
},
Down below you can see 'FE' getting printed:
Thanks a lot!
Kay
stateFieldName is the field which is used to calculate the CFD- usually ScheduleState or a custom dropdown field like KanbanState that captures your process. The stateFieldValues should be the values of that field (Defined, In-Progress, Accepted, Completed, etc.) This doesn't deal with projects at all. Definitely remember to include that field in your hydrate and fetch as well.
var data = [{ id: 11-07, text: 'enhancement' }, { id: 11-04, text: 'bug' },
{ id: 11-08, text: 'duplicate' }, { id: 11-09, text: 'invalid' },
{ id: 11-10, text: 'wontfix' }];
$(".js-example-data-array").select2({
data: data
})
<select class="js-example-data-array"></select>
I want to filter the select2 with both id as well as text. By default , it filters by text.
How can I filter by id as well?
You must use "matcher".
$(".js-example-data-array").select2({
data: data,
matcher: function(term, text, option) {
return text.toUpperCase().indexOf(term.toUpperCase())>=0 || option.val().toUpperCase().indexOf(term.toUpperCase())>=0;
}
})
It will return result filtered by text or id.
Use a a custom matcher. Add a property "matcher" with an custom function so you can match it your self. For explanation check the examples page.
To match against the id you need to use a 'complex matcher'. More info about that can be found here.
For the current 4th version the function for the matcher must be written differently. This code is based on an example from the documentation:
$(document).ready(function() {
var data = [{ id: '11-07', text: 'enhancement' }, { id: '11-04', text: 'bug' },
{ id: '11-08', text: 'duplicate' }, { id: '11-09', text: 'invalid' },
{ id: '11-10', text: 'wontfix' }];
function matchCustom(params, data) {
// If there are no search terms, return all of the data
if ($.trim(params.term) === '') {
return data;
}
// Do not display the item if there is no 'text' property
if (typeof data.text === 'undefined') {
return null;
}
// search by value
if (data.text.indexOf(params.term) > -1) {
return data;
}
// search by id
if (data.id.indexOf(params.term) > -1) {
return data;
}
// Return `null` if the term should not be displayed
return null;
}
$(".js-example-data-array").select2({
data: data,
matcher: matchCustom
});
});
.js-example-data-array {
width: 200px;
}
<select class="js-example-data-array"></select>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>