I am attempting to follow this example for creating a pie chart but my chart does not display labels for the sections. I copied and used the exact code from the example linked above.
The chart display complete with color sections but there are no labels like in the example.
My code is pasted below:
Ext.define('RevivalTimes.view.Chart', {
extend: 'Ext.chart.PolarChart',
xtype: 'chart',
requires: [
'Ext.chart.series.Pie',
'Ext.chart.interactions.Rotate'
],
config: {
title: 'Statistics',
iconCls: 'settings',
layout: 'fit',
animate: true,
interactions: ['rotate'],
colors: ['#115fa6', '#94ae0a', '#a61120', '#ff8809', '#ffd13e'],
store: {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [
{name: 'metric one', data1: 10, data2: 12, data3: 14, data4: 8, data5: 13},
{name: 'metric two', data1: 7, data2: 8, data3: 16, data4: 10, data5: 3},
{name: 'metric three', data1: 5, data2: 2, data3: 14, data4: 12, data5: 7},
{name: 'metric four', data1: 2, data2: 14, data3: 6, data4: 1, data5: 23},
{name: 'metric five', data1: 27, data2: 38, data3: 36, data4: 13, data5: 33}
]
},
series: [{
type: 'pie',
label: {
field: 'name',
display: 'rotate'
},
xField: 'data3',
donut: 30
}]
} //config
});
The labels show with the inclusion of labelField as shown in the code below:
series: [{
type: 'pie',
label: {
field: 'name',
display: 'rotate'
},
xField: 'data1',
donut: 30,
labelField: 'name',
showInLegend: true,
}],
Related
I try to position 2 vertical lines which are my thresholds for list of results for some tests.
My problem is that when I try to take value which is not part of the results, The lines are not shown.
With the following code I see the lines.
<script>
import BarChart from "#/components/TestsStatictics/BarChart.vue";
export default {
components: {
BarChart,
},
data() {
return {
chartData: {
labels: [24.35, 24, 24.2, 24.28],
datasets: [
{
label: "Bar Chart",
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(75, 192, 192, 0.2)",
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(75, 192, 192, 0.2)",
],
pointBorderColor: "#2554FF",
data: [24.35, 24, 24.2, 24.28],
},
],
},
options: {
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 24.35,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "22.70",
},
},
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 24.28,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "25.70",
},
},
],
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
gridLines: {
display: true,
},
},
],
xAxes: [
{
gridLines: {
display: false,
},
barThickness: 30,
},
],
},
legend: {
display: true,
},
responsive: true,
maintainAspectRatio: false,
},
};
},
};
</script>
but if I change the part of the annotation to this (the value of the annotation is not within the data and labels values), It doesn`t work:
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 22,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "22",
},
},
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
value: 26,
borderColor: "green",
borderWidth: 1,
label: {
enabled: true,
position: "center",
content: "26",
},
},
],
Try setting max an min values for the axes:
suggestedMax, suggestedMin
scales: {
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
suggestedMax: 35,
suggestedMin: 20
},
barThickness: 30,
},
],
How to get metric from graphite data source?
I've got this script, but it's generate random metric from fake data source.
Image:
Where I can set graphite data source in this script
'use strict';
var window, document, ARGS, $, jQuery, moment, kbn;
var dashboard;
var ARGS;
dashboard = {
rows : [],
schemaVersion: 13,
};
dashboard.title = 'Scripted and templated dash';
dashboard.time = {
from: "now-6h",
to: "now"
};
var rows = 1;
var seriesName = 'argName';
if(!_.isUndefined(ARGS.name)) {
seriesName = ARGS.name;
}
dashboard.rows.push({
title: 'Chart',
height: '300px',
panels: [
{
title: 'Events',
type: 'graphite',
span: 12,
fill: 1,
linewidth: 2,
targets: [
{
'target': 'stats.gauges.WidgetOccurrences.places.300'
}
],
}
]
});
return dashboard;
Try with data source value.
// Intialize a skeleton with nothing but a rows array and service object
dashboard = {
__inputs: [{
'name': "DS",
'label': "datasource_label",
'description': "",
'type': "datasource",
'pluginId': "datasource_plugin_id",
'pluginName': "datasource_plugin_name"
}],
__requires: [{
'type': 'panel',
'id': 'graph',
'name': 'Graph',
'version': ''
},
{
'type': 'datasource',
'id': 'datasource_plugin_id',
'name': 'datasource_plugin_name',
'version': '1.0.0'
}
],
editable: true,
rows: [],
};
dashboard.title = 'Scripted';
dashboard.time = {
from: 'now-36h',
to: 'now'
};
dashboard.rows.push({
title: 'Chart',
height: '300px',
panels: [{
title: 'Variable Importance',
type: 'graph',
span: 12,
fill: 1,
linewidth: 2,
datasource: 'datasource_label',
targets: [{
"target": "target"
}],
seriesOverrides: [],
tooltip: {
shared: true,
sort: 0,
value_type: 'individual'
},
xaxis: {
"buckets": null,
"mode": "time",
"name": null,
"show": true,
"values": []
},
yaxes: [{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
},
{
"format": "short",
"label": null,
"logBase": 1,
"max": null,
"min": null,
"show": true
}
]
}]
});
return dashboard;
I would like to create a form with fields at top and a pdf in the middle with ExtJS 3.4.
Displaying a pdf is no problem, a form with fields is no problem but putting both together did not work yet.
Displaying a pdf works with a panel, a form with fields is a Ext.form.FormPanel.
How can I embed the pdf in the form?
Here is what I tried:
var pdfForm = new Ext.form.FormPanel({
id: 'pdfForm',
width: 700,
cloasable: false,
waitMsgTarget: true,
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Z',
id: 'Z',
name: 'Z',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'X',
name: 'X',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Y',
name: 'y',
readOnly: true,
anchor: '95%'
}, {
xtype: 'textfield',
fieldLabel: 'M',
name: 'M',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'tabpanel',
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
id: 'samplePDF',
name: 'samplePDF',
style: 'height: 100%; width: 100%',
src: 'http://' + serverIP + '/documents/18/bc1bca0a-d437-4505-aee4-9cbe63553a6d'
}
}]
}]
});
The decisive code is in the last few lines. "autoel" does not match with the Ext.form.FormPanel.
Are there any alternatives?
I found the solution.
The main step is to use an Ext.Panel instead of a form.
var formPanel = new Ext.Panel({
frame: true,
renderTo: 'formPanel',
scrollable: 'true',
title: '',
id: 'mainPanel',
autoHeight: true,
autoWidth: true,
layout: 'form',
items: [{
region: 'north',
autoHeight: true,
layout: 'column',
border: false,
defaults: {
bodyStyle: 'padding:10px'
},
items: [{
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '1',
id: '1',
name: '1',
readOnly: true,
anchor: '95%'
}]
}, {
columnWidth: 0.5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: '2',
name: '2',
readOnly: true,
anchor: '95%'
}]
}]
}, {
region: 'center',
xtype: 'tabpanel',
id: 'tabs',
plain: true,
activeTab: 4,
activeItem: 4,
layoutOnTabChange: true,
defaults: {
bodyStyle: 'padding:0px'
},
deferredRender: false
}, {
region: 'south',
xtype: 'box',
autoEl: {
tag: 'embed',
id: '3',
name: '3',
style: 'height: 100%; width: 100%',
type: 'application/pdf',
src: 'http://<ip>/<path>.pdf'
}
}]
});
var pdfDlg = new Ext.Window({
id: 'pdfDialog',
title: 'PDF',
layout: 'fit',
width: 1000,
height: 700,
minWidth: 1000,
minHeight: 500,
closeAction: 'hide',
closable: true,
resizable: false,
plain: true,
modal: true,
items: 'mainPanel',
constrainHeader: true
});
This is just a section of my JSON Data string as it is quite extensive...
{
"total": 2,
"page": 1,
"records": 15,
"rows": [
{
"id": 2148,
"cell": {
"MRN": "840134833",
"Hospital_Fin": "987141516",
"First_Name": "YELLOW",
"Last_Name": "CRAYON",
"Date_of_birth": "/Date(1253160000000)/"}
}
]}
And this would be how I set up my jqGrid...
$(document).ready(function () {
jQuery("#frTable").jqGrid ({
cmTemplate: { sortable: false },
caption: '#TempData["POPNAME"]' + ' Population',
datatype: 'json',
mtype: 'GET',
url: '#Url.Action("GetAjaxPagedGridData", "Encounters", new { popId = TempData["POPULATIONID"] })',//'/Encounters/GetAjaxPagedGridData/'+ '',
pager: '#pager',
loadonce: true,
height: 450,
gridview: true,
viewrecords: true,
rowNum: 15,
shrinkToFit: false,
autowidth: true,
colNames: [
'MRN',
'Hospital Fin',
'First Name',
'Last Name',
'Date of birth'
colModel: [
{ name: 'MRN', width: 125, align: 'left' },
{ name: 'Hospital_Fin', width: 145, align: 'left' },
{ name: 'First_Name', width: 115, align: 'left' },
{ name: 'Last_Name', width: 115, align: 'left' },
{ name: 'Date_of_birth', width: 145, align: 'left', formatter:'date', formatoptions: {newformat: 'm/d/Y'}}]
Now...
I look through JSfiddle and I do get the Json string back in the right format. In fact, That is how I was able to copy and paste to this fine website. So what am I missing? It looks like everything should be about right?
UPDATE
Do my col models and the names of my columns in my cell have to match up 100 percent? Maybe that would be someplace to take a look?
You use wrong format of JSON data. Compare your data with the data expected by jqGrid described in the documentation. To fix JSON data you can change it to for example the following
{
"total": 2,
"page": 1,
"records": 15,
"rows": [
{
"id": 2148,
"MRN": "840134833",
"Hospital_Fin": "987141516",
"First_Name": "YELLOW",
"Last_Name": "CRAYON",
"Date_of_birth": "/Date(1253160000000)/"
}
]
}
You need include additionally jsonReader: {repeatitems: false} in the list of jqGrid options.
I have form for editing product with Image panel in east side. I want that image will have width: 200, height: 200. And form float it. How to do it?
Edit:
You can see that in attached image, area below image empty
Here is items section of this Window
items: [{
xtype: 'tabpanel',
border: false,
items: [{
xtype: 'container',
title: 'General',
border: false,
layout: 'border',
region: 'left',
border: false,
items: [{
xtype: 'container',
region: 'center',
layout: 'border',
//height: 175,
flex: 1,
border: false,
items: [{
xtype: 'webposform',
id: 'productinfo',
startfocused: true,
region: 'center',
items: [{
xtype: 'textfield',
hidden: true,
name: 'id',
},{
xtype: 'textfield',
fieldLabel: 'SKU',
name: 'sku',
},{
xtype: 'textfield',
fieldLabel: 'Product name',
name: 'name',
},{
xtype: 'posdecimalfield',
fieldLabel: 'Sales Price',
name: 'price',
},{
xtype: 'posdecimalfield',
fieldLabel: 'Cost Price',
name: 'cost',
},{
xtype: 'textfield',
fieldLabel: 'EAN',
hideTrigger: true,
keyNavEnabled: false,
name: 'ean',
},{
xtype: 'container',
anchor: '100%',
layout: 'hbox',
bodyPadding: 5,
border: false,
defaults: {
labelWidth: 120,
anchor:'100%'
},
items: [{
hidden: true,
xtype: 'textfield',
name: 'supplier'
},{
xtype: 'textfield',
region: 'center',
name: 'supplier_display',
fieldLabel: 'Supplier',
flex: 1,
readOnly: true,
},{
action: 'selectSupplier',
margin: '0 0 0 2',
xtype: 'button',
width: 25,
region: 'west',
text: '...',
}],
},{
xtype: 'textarea',
fieldLabel: 'Description',
name: 'description'
},]
},{
xtype: 'panel',
border: false,
layout: 'vbox',
align : 'stretch',
pack : 'start',
region: 'east',
items: [{
xtype: 'panel',
id: 'defaultimage',
bodyPadding: 5,
height: 200,
width: 200,
margins: '5 5 5 5',
region: 'center',
},{
xtype: 'panel',
border: false,
flex: 1
}]
}],
}],
},{
xtype: 'imagepanel',
title: 'Images',
layout: 'border',
}],
}],
What seems to be a problem? Use column or hbox layout and put all your fields into first column/container and the image into the second one.
Do you have code which you have tried already?