I'm looking a way to:
hide title on the HTML page result
show title on the highcharts graph when I export it (PDF,PNG,JPEG or print)
I don't know how to proceed. There is someone able to help me?
You can define this parameter in exporting.
http://api.highcharts.com/highcharts#exporting.chartOptions
http://jsfiddle.net/BdHJM/
exporting:{
chartOptions:{
title: {
text:'aaaaa'
}
}
},
put this function in your document ready function below is a code for changing highcharts print prototype and just for the patch or to make it work put rangeSelector option in your exporting and set it to false as mentioned below you can set it to your needs in future
Highcharts.wrap(Highcharts.Chart.prototype, 'print', function (proceed) {
var applyMethod = function (whatToDo, margin) {
this.extraTopMargin = margin;
this.resetMargins();
this.setSize(this.container.clientWidth , this.container.clientHeight , false);
this.setTitle(null, { text: 'SET TITLE HERE' :'});
this.rangeSelector.zoomText[whatToDo]();
$.each(this.rangeSelector.buttons, function (index, button) {
button[whatToDo]();
});
};
if (this.rangeSelector) {
var extraMargin = this.extraTopMargin;
applyMethod.apply(this, ['hide', null]);
var returnValue = proceed.call(this);
applyMethod.apply(this, ['show', extraMargin]);
this.setTitle(null, { text: '' });
} else {
return proceed.call(this);
this.setTitle(null, { text: '' });
this.yAxis[0].setExtremes();
} }
});
and in chart option set this (change it according to you need to, i am just putting my code for reference
)
exporting: {
scale: 1,
sourceWidth: 1600,
sourceHeight: 900,
chartOptions: {
rangeSelector: {
enabled: false
},
}
Related
I am using ui grid to show a list of data and I am trying to initially expand all rows.
I am trying to do this in the onRegisterApi event:
scope.GridOptions =
{
data: properties,
columnDefs:
[
{ name: "Full Address", field: "FullAddress" },
{ name: "Suburb", field: "Suburb" },
{ name: "Property Type", field: "PropertyType" },
{ name: "Price", field: "Price", cellFilter: 'currency'},
{ name: "Status", field: "Status" },
{ name: "Sale Type", field: "SaleType" },
{ name: "Date Created", field: "CreateDate", cellFilter: "date:'dd/MM/yyyy HH:mma'"}
],
expandableRowTemplate: 'template.html',
expandableRowHeight: 200,
onRegisterApi: (gridApi) =>
{
scope.gridApi = gridApi;
gridApi.expandable.on.rowExpandedStateChanged(scope,(row) =>
{
if (row.isExpanded) {
this.scope.GridOptions.expandableRowScope = row.entity;
}
});
gridApi.expandable.expandAllRows();
}
};
But the code above does not work. It looks like when I call expandAllRows() the rows are not rendered yet.
In my case, the following worked:
$scope.gridOptions = {
...
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerDataChangeCallback(function() {
$scope.gridApi.treeBase.expandAllRows();
});
}
};
I find I can expand all rows by using rowsRendered event:
gridApi.core.on.rowsRendered(scope,() => {
if (!gridApi.grid.expandable.expandedAll && !initialized)
{
gridApi.expandable.expandAllRows();
initialized = true;
}
});
I have used a variable initialized to identify if this is the first time rows are rendered as I only want to expand all rows initially.
None of the above worked for me for all of my grid use cases.
$scope.gridApi.grid.registerDataChangeCallback(function() {
if($scope.gridApi.grid.treeBase.tree instanceof Array){
$scope.gridApi.treeBase.expandAllRows();
}
});
The following works in every case I have tested. DataChangeCallback is called twice (for some unknown reason) on initial page load. The first time, gridApi.grid.treeBase.tree is an object which causes the issue with gridApi.grid.treeBase.tree.forEach above:
None of these answers worked for me, the following did:
scope.gridApi.core.on.rowsRendered(null, () => {
scope.gridApi.treeBase.expandAllRows();
});
The following worked for me, but no guarantee that it won't break anything... (looks good in my tests):
You need to change the source code, for example in ui-grid.js, i.e. the one your are deploying with your app:
In the addOrUseNode: function(...) inside the createTree: function(...) simply change COLLAPSED to EXPANDED for newNodes:
addOrUseNode: function (grid, row, parents, aggregationBase) {
...
var newNode = { state: uiGridTreeBaseConstants.EXPANDED, row: row, parentRow: null, aggregations: newAggregations, children: [] };
...
}
In module.service('uiGridTreeBaseService'... initializeGrid: function(grid) set grid.treeBase.expandAll from false to true (to let the tree know that all rows are expanded on initialitation)
[looks this is optional for the treeView]: Do the same In module.service('uiGridExpandableService', ['gridUtil', function (gridUtil) {...} in initializeGrid: function (grid). Change grid.expandable.expandedAll from false to true
I have a backbone app that dynamically renders multiple bar charts with different data sets and I have no way of knowing which label name will show up. For example, if given a set of labels: "strawberry", "vanilla", "chocolate", I would like to set the color for "strawberry" to pink every time that category shows up in a graph.
Is there a way to set a specific color on a bar based upon its label value?
Here is my current code:
collectCategories: function(aggregates) {
var categories = {};
_.each(aggregates, function(aggregate) {
for (var category in aggregate) {
categories[category] = true;
}
});
categories = _.keys(categories);
categories.sort();
return categories;
},
render: function() {
var container = this.$el;
container.empty();
var aggregates = this.collection.map(function(purchase) {
return purchase.aggregates();
});
var categories = this.collectCategories(aggregates);
var datasets = _.map(categories, function(category) {
var row = _.map(aggregates, function(aggregate) {
var qtyInCategory = aggregate[category];
return qtyInCategory ? qtyInCategory : 0;
});
return row;
});
var labels = this.collection.map(function(purchase) {
return purchase.get('purchase_date').substr(0, 10);
});
if (datasets.length > 0) {
this.renderPlot(datasets, labels, categories);
}
return this;
},
renderPlot: function(datasets, labels, categories) {
var seriesLabels = _.map(categories, function(category) {
return { label: category};
});
var customSeriesColors =
var plot = $.jqplot('bar-charts-container', datasets, {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barMargin: 30,
varyBarColor: true
},
pointLabels: {
show: false
}
},
series: seriesLabels,
seriesColors:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: labels
},
yaxis: {
padMin: 0
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
Since you have access to your labels when you plot, why not just define the colours there too?
seriesColors: colorsForLabels(seriesLabels)
Elsewhere in the object:
colorsForLabels: function(labels) {
return _.map(labels, function(labelObj) {
switch (labelObj.label) {
case 'strawberry':
return 'pink';
case: 'vanilla':
return 'white';
default:
# return a random colour from a list
}
});
}
The default is an open question; if you could have labels that don’t match the predefined list, you’ll have to choose from a list of alternates.
I have included the jquery-steps plugin.
How can I change the buttons texts?
Now it says "finish" I want to change that into "go"
Thanks
Check out the following link. You can change all labels on initialization.
var settings = {
labels: {
current: "current step:",
pagination: "Pagination",
finish: "Finish",
next: "Next",
previous: "Previous",
loading: "Loading ..."
}
};
$("#wizard").steps(settings);`
I just needed to change button text depending on condition. And it can be done without changing settings just like that
if(true){
$('a[href$="finish"]').text('Go');
}else{
$('a[href$="finish"]').text('No Go');
}
You can do this:
form.steps({
headerTag: "h4",
bodyTag: "section",
transitionEffect: "fade",
labels:
{
finish: "Go",
},
onStepChanging: function (event, currentIndex, newIndex)
{
//change color of the Go button
$('.actions > ul > li:last-child a').css('background-color', '#f89406');
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex)
{
form.submit();
}
});
If the label / text of the buttons should change dynamically depending on the language, you can use this:
/* dynamic change prev-next button text language (check lang attribute in html tag) */
var language = $('html').attr('lang');
$(window).on('load', function () {
if(language != 'de'){
$('a[href$="next"]').text('Next');
} else {
$('a[href$="next"]').text('Weiter');
}
});
I am building a section in my app where you can send emails.
In order to do that, this user needs to paste a complete html content and preview it with the html editor in extjs.
The problem is that Extjs remove head and body and changing the doctype tag
have a look here, click on the buttons at the bottom: http://jsfiddle.net/LKJSm/
Ext.onReady(function () {
Ext.tip.QuickTipManager.init();
var top = Ext.create('Ext.form.Panel', {
items: [{
xtype: 'htmleditor',
name: 'htmlContent',
height: 300,
anchor: '100%'
}],
buttons: [{
text: 'Set doctype with head and body',
handler: function () {
top.down('htmleditor').setValue("<DOCTYPE /><head></head><body>body here</body>");
}
}, {
text: 'Alert Content',
handler: function () {
var editor = top.getForm().findField('htmlContent');
alert(editor.getValue());
}
}]
});
top.render(document.body);
});
here is a solution provided in Extjs forums: http://www.sencha.com/forum/showthread.php?146160-HTMLEditor-strips-dtd-head-and-body-tags
Ext.define('MyHTMLEditor', {
extend:'Ext.form.HtmlEditor',
alias: 'widget.myhtmleditor',
tagsToComment: ['!DOCTYPE', 'html', 'head', 'body'],
/**
* Pushing value to wysiwyg iframe loses dtd, html, head and body tags.
* Override hack to comment them out when pushing to iframe, and then uncomment
* them on the way back (see this.cleanHtml).
*/
pushValue: function() {
var me = this,
v;
if(me.initialized){
v = me.textareaEl.dom.value || '';
if (!me.activated && v.length < 1) {
v = me.defaultValue;
}
if (me.fireEvent('beforepush', me, v) !== false) {
///////////// change
for (var i=0;i<me.tagsToComment.length;i++) {
v = v.replace(RegExp('<(\s*\/?'+me.tagsToComment[i]+'.*?)>', 'ig'), '<!--$1-->');
}
/////////////
me.getEditorBody().innerHTML = v;
if (Ext.isGecko) {
// Gecko hack, see: https://bugzilla.mozilla.org/show_bug.cgi?id=232791#c8
me.setDesignMode(false); //toggle off first
me.setDesignMode(true);
}
me.fireEvent('push', me, v);
}
}
},
/**
* Uncomment the tags mentioned in pushValue
*/
cleanHtml: function(html) {
var me = this, i,
result = me.callParent(arguments);
for (i=0;i<me.tagsToComment.length;i++) {
result = result.replace(RegExp('<!--(\s*\/?'+me.tagsToComment[i]+'.*?)-->', 'ig'), '<$1>');
}
return result;
},
});
use of html tags are not allowed, in fact they are identified as thereat. if you want the tags to be displayed you need to change as follows
top.down('htmleditor').setValue("<DOCTYPE /> <head></head><body>body here</body>");
this will display the tags on the editor for now.
if you don't want them to show up on the editor you need to concatenate the tags when you pass it to the email client.
I have a question related the chart export.
Please see Jsfiddle here
I added a text label using chart.renderer.text on the Yaxis for the latest value of series.
If I directly click button "Export Image". There is no problem, the label can be displayed. I'm using the following way to export image. draw_labels() is a function to draw yaxis label.
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
The problem is after I clicked range selector or change Xaxis range. When I try to export the
chart to image, there is no labels are drawn. The following is the complete code.
The following is the complete code:
$(function () {
var chart;
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: function () {
draw_labels(this);
$("#b").click(function () {
chart.exportChart(null, {
chart: {
backgroundColor: '#FFFFFF',
width: 972,
height: 480,
events: {
load: function () {
draw_labels(this);
}
}
}
});
});
}
}
},
series: [{
name: 'AAPL',
id: 'test',
data: data,
tooltip: {
valueDecimals: 2
}
}],
navigator: {
enabled: false
},
yAxis: {
tickWidth: 0,
id: 'value_axis',
type: 'linear',
gridLineColor: '#EEE',
lineColor: '#D0CDC9',
lineWidth: 0,
minorTickInterval: null,
opposite: true,
offset: 0
},
xAxis: {
events: {
afterSetExtremes: function (e) {
console.log('test');
$('[id="test_text"]').remove();
draw_labels(chart);
}
}
}
});
});
function draw_labels(chart) {
$(chart.series).each(function (i, serie) {
var s_id = serie.options.id;
var temp_id = s_id;
var point = serie.points[serie.points.length - 1];
if (point) {
var pre, post;
if (point.y) {
var last_value_dis = (point.y).toFixed(1);
yaxis_name = 'value_axis';
//Get Yaxis position
var y_axis = chart.get(yaxis_name);
offsite_yaxis = 0;
element_text = chart.renderer.text(
//the text to render
'<span style="font-size:10px;font-weight:bold;color:' + serie.color + ';">' + last_value_dis + '</span>',
//the 'x' position
y_axis.width + y_axis.offset,
//the 'y' position
chart.plotTop + point.plotY + 3).attr({
id: temp_id + '_text',
zIndex: 999
}).add();
}
}
});
}
});
Here, I have fixed it for you. Here is a saved image:
Following changes have been done:
Added a redraw event to your exportchart
redraw: function () {
$("#test_text").remove() ;
draw_labels(this);
}
Changed this line in afterSetExtremes
$('[id="test_text"]').remove();
to
$("#test_text").remove() ;
Earlier one was not working as expected, so I had to change it.
Problem with disappearing text is related with id, when I removed it, label appears. But then I came across second issue, wrong y position. So i declare global variable, then when you call your function, set position of label, and use in chart exporting this variable. As a result label is exported correct.
http://jsfiddle.net/UGbpJ/11/