Related
I have a nodejs app which is generating chartjs diagram images. In local the label is fine it looks like this:
But when I deploy exactly the same code to azure it looks like the label is scaled up and jammed.
My dependencies are "dependencies": { "chart.js": "2.7.3", "chartjs-node-canvas": "3.2.0"} and this is my chart config:
options: {
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
enabled: false
},
animation: {
duration: 0
},
elements: {
line: {
cubicInterpolationMode: 'monotone'
}
},
scales: {
xAxes: [{
type: 'linear',
display: true,
ticks: {
autoSkip: true,
fontColor: gray,
fontSize: 14,
maxRotation: 0,
min: 0,
minRotation: 0,
padding: 10
},
gridLines: {
color: 'transparent',
lineWidth: 0,
drawTicks: false,
zeroLineColor: gray,
zeroLineWidth: 2
},
scaleLabel: {
display: true,
labelString: xLabel,
fontColor: gray,
fontSize: 14
}
}],
yAxes: [{
display: true,
id: this.yAxisId,
position: 'left',
ticks,
gridLines: {
color: transparentGray,
lineWidth: 1,
drawTicks: false,
zeroLineColor: gray,
zeroLineWidth: 2
},
scaleLabel: {
display: true,
labelString: yLabel,
fontColor: gray,
fontSize: 14
}
}]
}
Something is wrong with my options and then why it works perfectly fine on local?
I'm trying to make a highchart donut with a legend on the side,
I'm really struggling to get the data labels to be more centered. At the moment each of them are in a different place,
an image of intended result:
https://codepen.io/mattdavidson/pen/qgqZyV
Highcharts.chart('container', {
credits: { enabled: false },
chart: { height: 300, width: 500, animation: false },
title: {
align: 'center',
verticalAlign: 'middle',
text: 10,
y: 25,
x: 55,
style: { color: '#333333', fontSize: '72px', fontWeight:'bold'},
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
format: '{point.y}',
distance: -25,
style: { fontSize: '32px', textOutline: 0 },
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 25,
symbolRadius: 5,
itemMarginTop: 10,
itemMarginBottom: 10,
},
series: [
{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [['Category 1', 4], ['Category 2', 5], ['Category 3', 1]],
},
],
});
There is an issue reported on Highcharts github about donut labels position. Check it here: https://github.com/highcharts/highcharts/issues/9005.
I've changed some options and added custom text using Highcharts.SVGRenderer#text (dynamic sum of all values) on the donut center. Perhaps it will help you: https://jsfiddle.net/BlackLabel/2jmqext9/.
Code:
Highcharts.chart('container', {
credits: {
enabled: false
},
chart: {
height: 300,
width: 500,
animation: false,
events: {
load: function() {
var chart = this,
offsetLeft = -20,
offsetTop = 10,
x = chart.plotLeft + chart.plotWidth / 2 + offsetLeft,
y = chart.plotTop + chart.plotHeight / 2 + offsetTop,
value = 0;
chart.series[0].yData.forEach(function(point) {
value += point;
});
chart.renderer.text(value, x, y).add().css({
fontSize: '30px'
}).toFront();
}
}
},
plotOptions: {
pie: {
dataLabels: {
enabled: true,
color: '#fff',
format: '{point.y}',
distance: -25,
style: {
fontSize: '20px',
textOutline: 0
},
},
animation: false,
showInLegend: true,
},
},
legend: {
layout: 'vertical',
verticalAlign: 'middle',
align: 'left',
symbolHeight: 15,
symbolRadius: 5,
symbolPadding: 10,
itemMarginTop: 10,
itemMarginBottom: 10,
itemStyle: {
fontSize: '15px'
}
},
series: [{
type: 'pie',
innerSize: '55%',
colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
data: [
['Category 1', 4],
['Category 2', 2],
['Category 3', 12]
],
}, ],
});
this is code and link on screenshot
Ext.define('SD.view.SDDetail', {
extend: 'Ext.window.Window',
alias: 'widget.sddetail',
title: "Создание заявки",
height: 620,
width: 850,
layout: 'fit',
border: false,
modal: true,
isDemandReadOnly: false,
changeStatusOnly: false,
initComponent: function () {
var me = this;
var user = TR.user;
var f = new Ext.form.FormPanel({
xtype: 'form',
labelWidth: 60
, frame: true
, items: [{
fieldLabel: 'Text'
, xtype: 'textfield'
, anchor: '-18'
}, {
layout: 'column'
, defaults: {
columnWidth: 0.5
//, layout: 'form'
, border: false
, xtype: 'panel'
, bodyStyle: 'padding:0 18px 0 0'
}
, items: [{
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 1'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'datefield'
, fieldLabel: 'Date'
}]
}, {
defaults: { anchor: '100%' }
, items: [{
xtype: 'combo'
, fieldLabel: 'Combo 2'
, store: ['Item 1', 'Item 2']
}, {
xtype: 'timefield'
, fieldLabel: 'Time'
}]
}]
}, {
fieldLabel: 'Text Area'
, xtype: 'textarea'
, anchor: '-18 -80'
}]
});
this.items = [f];
this.tbar = {
xtype: 'toolbar',
height: 27,
items: [
{
xtype: "tbspacer"
}, "-", {
xtype: "tbspacer"
},
{
text: "Прикрепленные файлы",
icon: "Content/images/btnAttach.gif",
disabled: true,
handler: function (btn, e) { ShowAttachments(r.id, true, me.isDemandReadOnly); }
}, "-", {
xtype: "tbspacer"
}, {
text: "История статусов",
icon: "Content/images/btnHistory.gif",
disabled: true,
handler: function (btn, e) { ShowStatusesHistory(r.id, true); }
}, "-", {
xtype: "tbspacer"
}, {
text: "Информация по сопроводительной карточке",
icon: "Content/images/btnComplect.gif",
disabled: true,
handler: function (btn, e) { ShowComponents(r.id, true, me.isDemandReadOnly); }
}, "-", {
icon: "Content/images/btnPrint.gif",
text: "Сопроводительная карточка изделия",
disabled: true,
handler: function (btn, e) { DemandCardForm(r.id); }
}
]
};
this.buttons = [
{
text: "Сохранить",
action: 'save'
, disabled: me.isDemandReadOnly || user.SdUserViewOnly
}, {
xtype: "button",
text: "Отмена",
handler: function (btn, e) {
me.close();
}
}
];
// me.on('show', function () {
// me.down('kontragentcombo').focus(false, 250);
// });
me.callParent(arguments);
}
http://s002.radikal.ru/i198/1208/e2/7a153ca9b116.jpg
when i uncomment layout: 'form' i have error
namespace is undefined
[Прерывать на этой ошибке]
if (namespace === from || namespace.substring(0, from.length) === from) {
i whant this http://i032.radikal.ru/1208/51/e9b8ba1c1f30.jpg
but have error, what i must do?
layout is not defined in the items of the panel. It's part of the panel's properties (see the docs: Form Panel). Put it before the items.
As a suggestion - it would be easier to see it if your lines had consistent comma layout.
using jqPlot, is it possible to limit the point labels to just one series? See screenshot below! What I would like displayed is just the values above the "Actual" bar. The "mean" and "Planned" should'nt display!
Thanks!
Here's my code
<script type="text/javascript">
$(document).ready(function () {
$.jqplot.config.enablePlugins = true;
var trendline = [60000, 70000, 110000, 80000];
var planned = [70000, 90000, 120000, 100000,];
var actual = [80000, 80000, 150000, 120000];
var xAxis = ['Jan', 'Feb', 'Mar', 'Apr'];
$(function() {
$.jqplot('chartDiv', [planned, actual, trendline], BarChart());
});
function BarChart()
{
var optionsObj = {
title: '',
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: xAxis,
},
yaxis: {
tickOptions: { showMark: false, formatString: "%'d" },
},
},
legend: {
show: true,
},
grid: {
borderColor: "#dad5d1",
background: "#dad5d1",
drawGridlines: false,
shadow: false
},
series: [
{label:'Planned',renderer:$.jqplot.BarRenderer},
{label: 'Actual',renderer:$.jqplot.BarRenderer},
{label: 'Mean',
pointLabels: {
show: true,
},
renderer:$.jqplot.LineRenderer,
lineWidth:4,
markerOptions:{
color: "#d87d12",
size:12,
}}
],
seriesColors: [ "#ada195", "#4a4541", "#ff9619"],
seriesDefaults:{
shadow: false,
rendererOptions:{
barPadding: 0,
barMargin: 10,
barWidth: 25
}
},
};
return optionsObj;
}
});
</script>
This actually looks like a bug in the point labels plugin. You can work around it by disabling the values in the seriesDefault (show:false) and then turning them on for the series you desire:
series: [
{label:'Planned',renderer:$.jqplot.BarRenderer},
{label: 'Actual',renderer:$.jqplot.BarRenderer},
{label: 'Mean',
pointLabels: {
show: true,
},
renderer:$.jqplot.LineRenderer,
lineWidth:4,
markerOptions:{
color: "#d87d12",
size:12,
}}
],
seriesDefaults:{
pointLabels:{show:false},
shadow: false,
rendererOptions:{
barPadding: 0,
barMargin: 10,
barWidth: 25
}
},
I need to create an advanced, fluid Border layout for our Report system.
The West pane would be split into 2 separate panes, top for the filter form, and the bottom for navigation.
The Center pane would be split into 3 separate panes, top for the primary data grid, and 2 bottom panes for sub report grids. I may at some point need 3 bottom panes, but I'm hoping to avoid that.
Here is an example of what I am looking for: http://dl.dropbox.com/u/298258/Amistaff/desiredLayout.png
What I have so far is definitely less than satisfactory.
http://dl.dropbox.com/u/298258/Amistaff/currentLayout.png
Here is the code:
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
width: '100%',
height: '50%',
viewConfig: {
forceFit: true
},
autoHeight: true,
loadMask: true,
stripeRows: true,
store: ReportStore,
margins: '5 5 5 5',
cm: ReportColumnModel
,bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: '',
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'fit',
margins: '5 5 5 0',
items: [
ReportGrid,
new Ext.Panel({
region: 'south',
border: false,
height: '50%',
html: 'foo',
layout: 'fit',
items: [
new Ext.Panel({
region: 'west',
width: '50%',
border: false,
html: 'West'
}),
new Ext.Panel({
region: 'east',
width: '50%',
border: false,
html: 'East'
})
]
})
]
})
]
});
Thanks...
EDIT:
Many thanks to amol for the answer below. I have one additional question. If I collapse the form in the west region, how do I make it resize the navigation panel to fill the remaining space?
code -
var ReportForm = new Ext.FormPanel({
url: '',
frame: false,
border: false,
title: 'Filter Results',
width: 260,
labelWidth: 50,
padding: '10 0 0 5',
standardSubmit: true,
items: [
{
fieldLabel: 'Client',
hiddenName: 'ClientID',
mode: 'local',
//store: frmClientStore,
displayField: 'CompanyName',
valueField: 'ClientID',
width: 150,
editable: true,
triggerAction: 'all',
xtype: 'combo'
}
],
buttons: [
{text:'Export',handler:function(){}},
{text:'Search',handler:function(){}},
{text:'Reset',handler:function(){}}
]
});
var ReportGrid = new Ext.grid.GridPanel({
id: 'ReportGrid',
flex:1,
viewConfig: {
forceFit: true
},
loadMask: true,
stripeRows: true,
//store: ReportStore,
margins: '5 5 5 5',
cm: new Ext.grid.ColumnModel({
columns:[
{header:'A column', dataIndex:'afield'},
{header:'B column', dataIndex:'bfield'}
]
}),
store:new Ext.data.ArrayStore({
autoLoad:true,
fields:['afield', 'bfield'],
data:[['value 1','value 3'],['value 2', 'value4']]
}),
bbar: new Ext.PagingToolbar
(
{
pageSize: 10,
//store: ReportStore,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}'
}
)
});
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'west',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
width: 260,
minSize: 175,
maxSize: 400,
margins: '5 5 5 5',
items: [
ReportForm,
{
region: 'south',
title: 'Superuser',
border: false,
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'General',
xtype: 'panel',
height: 200,
html: ''
},
{
title: 'Exams',
height: 200,
html: ''
}
]
}
]
},
new Ext.Panel({
region: 'center',
deferredRender: false,
layout: 'vbox',
layoutConfig:{align:'stretch'},
margins: '5 5 5 0',
items: [
ReportGrid,
{
border: false,
flex:1,
layout: 'hbox',
layoutConfig:{align:'stretch'},
defaults:{flex:1},
items: [
new Ext.Panel({
html: 'West'
}),
new Ext.Panel({
html: 'East'
})
]
}
]
})
]
});