I have MVC app, it's a Tab Panel containing few Tabs with a chart on each, there is also a Date Picker with Refresh button, and a Combo box to choose which data source is being used for the 'Date Range'.
The app currently loads the charts with all available data but the purpose is to select 1 of 3 available data sources, select a date range and refresh every chart tab by clicking a button, how do I do it?
Fiddle sample
Something like this:
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
height: 800,
width: 800,
layout: 'border',
defaults: {
collapsible: false,
split: true,
},
items: [{
title: 'PanelCenter',
xtype: 'tabpanel',
region: 'center',
itemId: 'centerPanel',
bodyPadding: 10,
activeTab: 0,
items: [{
title: "Tab1",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 7,
}, {
name: 'metric three',
value: 5,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab2",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 3,
}, {
name: 'metric two',
value: 5,
}, {
name: 'metric three',
value: 10,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}, {
title: "Tab3",
items: {
xtype: 'cartesian',
width: 655,
height: 400,
store: {
fields: ['name', 'value'],
data: [{
name: 'metric one',
value: 10,
}, {
name: 'metric two',
value: 3,
}, {
name: 'metric three',
value: 9,
}]
},
axes: [{
type: 'numeric',
position: 'left',
title: {
text: 'Sample Values',
fontSize: 15
},
}, {
type: 'category',
position: 'bottom',
title: {
text: 'Sample Values',
fontSize: 15
},
fields: 'name',
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'value'
}
]
}
}]
}, {
xtype: 'form',
title: 'PanelTop',
layout: {
type: 'hbox',
},
region: 'north',
border: false,
bodyPadding: 10,
height: '100',
width: '100%',
margin: '0 0 5 0',
region: 'north',
items: [{
xtype: 'combo',
name: 'data_type',
itemId: 'dataTypeSelect',
emptyText: 'Select date type',
displayField: 'source',
store: {
fields: ['code', 'source'],
data: [{
code: 'created',
source: 'Sales date'
}, {
code: 'invoice',
source: 'Invoice date'
}, {
code: 'bookIn',
source: 'Order date'
}]
},
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateFromSearchField',
fieldLabel: 'From',
labelAlign: 'right',
name: 'from_date',
format: 'd/m/Y',
maxValue: new Date(),
allowBlank: false,
}, {
xtype: 'datefield',
itemId: 'dateToSearchField',
fieldLabel: 'To',
labelAlign: 'right',
name: 'to_date',
format: 'd/m/Y',
maxValue: new Date(),
value: new Date(),
padding: '0 30 0 0',
allowBlank: false
}, {
xtype: 'button',
itemId: 'refreshButton',
region: 'center',
text: 'Refresh',
formBind: true,
handler: function () {
const formData = this.up('panel').getValues();
if (
formData.data_type && formData.from_date && formData.to_date
) {
const tabPanel = Ext.ComponentQuery.query('tabpanel#centerPanel')[0];
const cartesianCharts = tabPanel.query('cartesian');
Ext.Array.each(cartesianCharts, function (cartesianChart) {
cartesianChart.getStore().load({
params: formData,
callback: function (records, operation, success) {
},
scope: this
});;
}, this);
}
}
}],
}]
});
Basically, the problem that I have is the following:
When I resize the column in my GridPanel the textbox UI near Name get destroyed: the line on the right disappear. It should instead resize according to the width. How could I fix it?
This is my code:
...
columns: {
defaults: {
flex: 1,
},
layout:'auto',
items: [{
text: Strings.sharedName,
flex: 1,
minWidth: Traccar.Style.columnWidthNormal,
dataIndex: 'name',
//style: 'text-align:right;!important',
filter: 'string',
defaults: {
margin: '-28 30 -5 50'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'right'
},
flex: 2,
items: [{
xtype: 'textfield',
id: 'nameFilter',
listeners: {
change: function(field, value) {
filterGrid('name', value);
}
}
}]
}]
}
...
Here a reproducible example:
https://fiddle.sencha.com/#view/editor&fiddle/3a41
I am building a dx-chart inside of an AngularJS file. I would like to use $http.get inside of my ng-controller. Here is the AngularJS file. However, when I try to use $http.get I still display the chart but there is not data passed in. If I remove the $http argument and $http.get in the dataSource, I am able to display my data using the Json format passed in from my URL.
AngularJS File
var app = angular.module('customCharts', ['dx']);
function ChartController($scope, $http) {
$scope.productSettings = {
dataSource: $http.get("http://localhost:53640/Home/PostChart"),
title: 'Displays Product Costs for items in our Database',
series: {
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount',
valueFormat: 'currency'
}
}
}
Hope you have issue with controller declaration:
Can you modify your code as below:
var app = angular.module('customCharts', ['dx']);
app.controller('ChartController', ['$scope', '$http', function($scope, $http) {
$scope.productSettings = {
dataSource: $http.get("http://localhost:53640/Home/PostChart"),
title: 'Displays Product Costs for items in our Database',
series: {
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount',
valueFormat: 'currency'
}
}
}]);
Check here for syntax: https://docs.angularjs.org/guide/controller
Try this
function ChartController($scope, $http) {
$http.get("http://localhost:53640/Home/PostChart").success(function (data) {
$scope.productSettings = {
dataSource: data,
title: 'Displays Product Costs for items in our Database',
series: {
argumentField: "Name",
valueField: "Cost",
type: "bar",
color: '#008B8B'
},
commonAxisSettings: {
visible: true,
color: 'black',
width: 2
},
argumentAxis: {
title: 'Items in Product Store Database'
},
valueAxis: {
title: 'Dollor Amount',
valueFormat: 'currency'
}
};
});
}
I am getting an error in IE as:
Message: Invalid argument.
Line: 8
Char: 56
Code: 0
URI: .../js/highcharts.js
Below is the highcharts chart code..It works perfectly fine in Firefox but in IE throws an error.Can anybody help me with this. Thanks.
function drawChart(categories,series){
$('#container').highcharts({
chart: {
backgroundColor:'rgba(255, 255, 255, 0.1)',
spacingLeft: -2
},
xAxis: {
categories: categories,
gridLineWidth:0.5,
labels: {
style: {
fontSize:'0px'
}
}
},
colors: ["#a7c1d0"],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
title: {
text: "Last 45 days NAV Price",
align: 'center',
style:{
color: '#5e605e',
fontSize:'11px',
fontFamily:'Arial'
},
y:1
},
legend: {
enabled:false
},
navigation: {
buttonOptions: {
enabled: false
}
},
yAxis: {
title: {
enabled: true,
text: 'Price',
style: {
color: '#5e605e',
fontSize:'10px',
marginLeft:'-5px;',
fontFamily:'Arial'
}
},
labels:{
style:{
fontSize:'10px'
},
step:0,
},
lineWidth: 1,
tickInterval: 0.20,
minTickInterval:0.20
},
series: [{
data: series
}]
});
}
Could you paste your data? Moreever you have i.e extra common in labels object.
labels:{
style:{
fontSize:'10px'
},
step:0,
},
http://www.highcharts.com/docs/frequently-asked-questions#not-showing-in-explorer
I need to create a view like this in sencha touch. I'm a beginner . Please help me. I'm not getting tap event on component.
My Code
config: {
defaults: {
margin: 10
}, layout: {
type: 'hbox'
},
items: [{
flex:1,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'component', flex: 10,
html: 'Flex: 1', style: 'background-color: lightgray'
},
{
xtype: 'spacer',flex:1
},
{
xtype: 'component', flex: 10,
html: 'Flex: 2', style: 'background-color: pink'
}
]
}, {
flex: 1,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'component', flex: 10,
html: 'Flex: 3', style: 'background-color: orange',
handler:function() {
console.log('Tapped !');
}
},
{
xtype: 'spacer',flex:1
},
{
xtype: 'component', flex: 10,
html: 'Flex: 4', style: 'background-color: lightblue'
}
]
}]
Try Ext.dataview.DataView. You will get examples from github.