Related
I am using apex bar chart in which i want to show values on the bar vertically but it shows horizontally.
I search alot to show value vertically but not find any solution. Please help me to solve this issue. I also share the code.
Here is The script of graph:
<script type="text/javascript">
$(document).ready(function() {
// custom datalabelBar
var options = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: true
}
},
plotOptions: {
bar: {
horizontal: false,
dataLabels: {
position: 'top',
},
}
},
dataLabels: {
enabled: true,
position: 'top',
formatter: function (val) {
return val ;
},
horizontal: true,
offsetX: 0,
style: {
fontSize: '10px',
colors: ['#000']
}
},
stroke: {
show: false,
width: 1,
colors: ['#fff'],
lineCap: 'round',
curve: 'smooth',
},
series: [{
name: 'Packing',
data: <?php echo json_encode($wd_packing) ?>
}, {
name: 'Dispatch',
data: <?php echo json_encode($wd_dispatch) ?>
},
{
name: 'Remaning',
data: <?php echo json_encode($wd_reaming) ?>
}],
xaxis: {
categories: <?php echo json_encode($wd_week) ?>,
},
}
var chart = new ApexCharts(
document.querySelector("#weekly_dispatch_graph"),
options
);
chart.render();
});
Here is the screenshot of graph:
Please Help me to solve this issue. Thanks in advance.
It is possible! Your question is about dataLabels. ApexCharts give us a common dataLabels option and a dataLabels option depended on chart type. There are options.dataLabels and options.plotOptions.bar.dataLabels respectively.
In the first one you can play with offsetY and in the second one you can configure this labels orientation and their position.
Try to play with this values, good luck :)
var options = {
chart: {
type: 'bar'
},
series: [{
name: 'Packing',
data: [300000, 300000, 500000, 800000]
}, {
name: 'Dispatch',
data: [46577, 296948, 153120, 0]
},
{
name: 'Remaning',
data: [252962, 2382, 235143, 800000]
}
],
xaxis: {
categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
},
plotOptions: {
bar: {
dataLabels: {
orientation: 'vertical',
position: 'center' // bottom/center/top
}
}
},
dataLabels: {
style: {
colors: ['#000000']
},
offsetY: 15, // play with this value
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
dataLabels: {
position: 'top',
enabled: true,
textAnchor: 'start',
style: {
fontSize: '10pt',
colors: ['#000']
},
offsetX: 0,
horizontal: true,
dropShadow: {
enabled: false
}
},
Note the offsetX: 0 and horizontal: true.
I have a chart.js bar chart that pulls data via an ajax call to a Django APIView. The ajax call returns one dictionary with a stack of data inside I use to customize the chart. Here's the chart.js code:
var current_year = '{% url "saveskore:api-current-year-savings" %}'
$.ajax({
url: current_year,
type: 'GET',
cache: false,
dataType: 'json',
success: function(data) {
var ctx = document.getElementById('current-year-chart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data['dates'],
datasets: [
{
label: data['income_label'],
backgroundColor: "#8e5ea2",
data: data['income'],
},
{
label: data['expense_label'],
backgroundColor: 'green',
data: data['expenses'],
},
{
label: data['savings_label'],
backgroundColor: "#3e95cd",
data: data['savings_goal'],
},
{
label: data['avail_label'],
backgroundColor: "#pink",
data: data['avail_to_spend'],
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Savings for ' + data['year']
}
}
});
}
});
Works great. Looks great.
But! I have a django formset on a separate page that updates the table data that the chart pulls from.
When I update the data in the formset and submit, redirecting to the chart page ... NO UPDATE OCCURS.
If I make some code change or otherwise reload the browser, VOILA, the chart updates.
I have read about either cache=false and chart.update(), but find i have not been able to make either work, mainly because the exact details on their use are not clear.
I would really appreciate input on this.
Have you tried chart.destroy() method ? and then build again the chart with the new data .. that works for me.. take a look at my example
let flag = 0;
var xChart = "";
function dibujar(valor, meses) {
try {
if (valor.length > 0) {
$('#grafico').fadeIn('fast');
var canvas = document.getElementById('chart');
let tipGra = $('#slcTipGra').val();
if (flag !== 0) {
xChart.destroy();
}
//rgba(54, 162, 235, 0.2)
if (tipGra === "bar" || tipGra === "horizontalBar") {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
borderWidth: 2,
hoverBackgroundColor: "#3e95cd",
hoverBorderColor: "#3e95cd",
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
color: 'white',
anchor: 'end',
align: 'start',
font:
{
weight: 'bold'
}
}
},
scales: {
yAxes: [{
stacked: true,
gridLines:
{
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
}
};
}
if (tipGra === 'line') {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.borderColor;
},
borderRadius: 4,
color: 'white',
anchor: 'end',
align: 'end',
}
},
showLines: true
};
}
xChart = new Chart(canvas,
{
type: tipGra,
data: data,
options: option
});
flag = 1;
}
else {
$('#grafico').fadeOut('fast');
$('#graficoMessage').fadeIn('slow');
}
} catch (err) {
console.log(err);
}
}
I declare "xChart" as a global variable and a flag to know if it's the first chart to build. The example build 3 different types of charts (Vertical Bar, Horizontal Bar and Line) depending on the selection of the chart type "let tipGra = "$('#slcTipGra').val();"
I am using a rallymilestonecombobox to display milestones.
I am selecting the milestone and getting the correct value when I output to console.log.
When I select the new milestone I update the filter.
The filter isn't loading or updating in the store.
Initially I tried filters: myFilters but that didn't work in the artifact.Store.
It worked when I used
"filters:
[{
property : 'Milestones',
operator : 'contains',
value : myFilters.value
}],"
But I am not successful in updating the filter on the update ".load".
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
myStore: undefined,
storyGrid: undefined,
storyStore: undefined,
// Intital Layout
width: 1600,
height: 1200,
items: [{
xtype: 'container',
itemId: 'pulldown-container',
padding: '25,5,5,25',
layout: {
type: 'hbox',
}
},
{
xtype: 'container',
itemId: 'group-container',
layout: {
type: 'hbox',
},
items: [{
title: 'Stories',
xtype: 'container',
itemId: 'story-grid-container',
padding: '20,5,5,25',
layout: {
type: 'vbox',
}
},
{
title: 'Story info',
xtype: 'tabpanel',
itemId: 'story-info-container',
padding: '5,5,5,25', //top, right, bottom, left).
autoScroll: true,
layout: {
type: 'vbox',
},
}
]
}
],
launch: function() {
// Load Releases in ComboBox
// this._loadReleases();
this._loadMilestones();
},
_loadMilestones: function() {
// Create Milestone ComboBox
var milestoneComboBox = {
xtype: 'rallymilestonecombobox',
itemId: 'milestone-combo-box',
fieldLabel: 'Milestones',
labelAlign: 'right',
width: 300,
listeners: {
ready: this._loadData,
select: this._loadData,
scope: this
}
};
this.down('#pulldown-container').add(milestoneComboBox);
},
//construct filters for given milestone
_getMilestoneFilters: function(milestoneValue) {
var milestoneFilter = Ext.create('Rally.data.wsapi.Filter', {
property: 'Milestone',
operation: '=',
value: milestoneValue
});
return milestoneFilter;
},
//Get data from rally
_loadData: function() {
var selectedMilestoneRef = this.down('#milestone-combo-box').getRecord().get('_ref');
var myFilters = this._getMilestoneFilters(selectedMilestoneRef);
console.log(myFilters);
//if store exists, load new data
if (this.myStore) {
this.myStore.setFilter(myFilters);
this.myStore.load();
} else {
//create store
this.myStore = Ext.create('Rally.data.wsapi.artifact.Store', {
models: ['User Story', 'Defect'],
autoLoad: true,
filters: [{
property: 'Milestones',
operator: 'contains',
value: myFilters.value
}],
listeners: {
load: function() {
this._onStoriesForMilestoneLoad();
},
scope: this
},
fetch: ['FormattedID', 'Name']
});
}
},
_onStoriesForMilestoneLoad: function() {
if (!this.down('#my-grid')) {
var gridListeners = {
itemclick: {
fn: function(record, item) {
this._createStoryInfo(record, item);
this._createRevisionInfo(record, item);
}
},
scope: this
};
var columnCfgs = ['FormattedID', 'Name'];
this._createGrid('my-grid', this.myStore, gridListeners, '#story-grid-container', columnCfgs, 600, 775, null);
}
},
_createGrid: function(id, theStore, theListeners, container, theColumnCfgs, gridwidth, gridheight, tabTitle) {
var storyGrid = {
title: tabTitle,
xtype: 'rallygrid',
itemId: id,
store: theStore,
listeners: theListeners,
context: this.getContext(),
columnCfgs: theColumnCfgs,
enableEditing: false,
showRowActionsColumn: false,
enableScheduleStateClickable: false,
verticalScroller: false,
showPagingToolbar: false,
width: gridwidth,
height: gridheight,
forceFit: true,
};
this.down(container).add(storyGrid);
},
});
I'd check out this example:
https://help.rallydev.com/apps/2.1/doc/#!/example/filterable-grid
It's a little different than your use case, but the mechanics are still the same.
The important bit is this:
var myFilters = this._getMilestoneFilters(selectedMilestoneRef);
if (this.myStore) {
this.myStore.clearFilter(true);
this.myStore.filter([myFilters]); //notice, it's an array
}
There's also an app baseclass to make it easy to work with timebox scoping since it is such a common use case:
https://help.rallydev.com/apps/2.1/doc/#!/guide/timebox_filtering
You could extend Rally.app.TimeboxScopedApp, set scopeType to milestone and go from there. It will handle creating the milestone combo for you. And it will also automatically support working on milestone scoped custom pages in Rally.
I think you're probably really close to working code in your existing implementation, but worth a consideration to look into TimeboxScopedApp...
I had to update the Filter value specifically and it worked.
I should have known since I had to do this when creating the store.
//if store exists, load new data
if(this.myStore)
{
this.myStore.clearFilter(true);
this.myStore.filter([
{
property : 'Milestones',
operator : 'contains',
value : myFilters.value
}]);
this.myStore.load();
}
else
{
//create store
this.myStore = Ext.create('Rally.data.wsapi.artifact.Store',
{
I am working on some existing code. After upgrading to Extjs 4, one of our application view window is broken. It is working fine on Firefox, not IE8. Upon the popup window opening, I am getting Invalid argument, and the debugger indicates it is on like Sytle[hook.name] = value;
I've tried to remove the height (which I really need) after reading some posts, but it is still not working. Please advise.
Thanks.
Ext.define(view.window.popupwindow', {
extend : 'Ext.Window',
alias : 'widget.popupwindow',
requires: [view.grid.issuerpopupgrid'],
appContainer: undefined,
caller: undefined,
selReportType:undefined,
reloadData: true,
extraParam: undefined,
initComponent: function() {
var config = {
width: 750,
minWidth: 600,
minHeight: 300,
autoScroll: false,
modal: true,
border: false,
closable: true,
constrain: false,
resizable: true,
maximizable: true,
layout:'anchor',
items: this.buildWindow(),
listeners: {
scope: this,
show: function(form) {
//sync the shadow
var win = Ext.WindowMgr.getActive();
if (win!=null) win.el.sync(true);
}
}
};
Ext.apply(this, config);
this.callParent(arguments);
},
buildWindow: function() {
return [{
xtype: 'issuerpopupgrid',
id:'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
},
});
Ext.define('view.grid.issuerpopupgrid', {
extend : 'view.grid.lvsimplegrid',
alias : 'widget.issuerpopupgrid',
appContainer: undefined,
extraParam: undefined,
initComponent: function() {
this.gridType = this.appContainer.appContext.appData.gridDefTypeMap.R9;
this.modelName = this.appContainer.name+'.model.'+this.gridType.name;
this.selReportType = this.gridType.name; //'R9';
this.sortField = 'secDesc';
this.reportUrl = this.appContainer.appContext.appData["gridDefinitions"][this.gridType.name].serviceUrl;
var config = {
height: 570,
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox :true,
mode: 'MULTI',
checkOnly: true
},
listeners: {
scope: this,
afterrender: this.onAfterRender,
show: this.onActivateGrid
}
};
Ext.apply(this, config);
this.callParent(arguments);
this.tbar = this.buildTopBar();
},
onAfterRender: function(thisObj) {
this.configureGrid(this.selReportType, this.appContainer.appContext.appData, null, false, this.sortField, this.sortField);
thisObj.getStoreData(this.selReportType, this.extraParam);
},
onActivateGrid: function(thisObj) {
thisObj.getStoreData(this.selReportType);
}
});
Looks like you've got a trailing comma:
buildWindow: function() {
return [{
xtype: 'issuerpopupgrid',
id:'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
}, //<-- trailing comma
IE will have issues with this... You can use jsHint to find syntax errors like this: https://jslinterrors.com/extra-comma
This is the fully linted code:
Ext.application({
name : 'Fiddle',
launch : function () {
Ext.define('view.window.popupwindow', {
extend : 'Ext.Window',
alias : 'widget.popupwindow',
requires: ['view.grid.issuerpopupgrid'],
appContainer: undefined,
caller: undefined,
selReportType: undefined,
reloadData: true,
extraParam: undefined,
initComponent: function () {
var config = {
width: 750,
minWidth: 600,
minHeight: 300,
autoScroll: false,
modal: true,
border: false,
closable: true,
constrain: false,
resizable: true,
maximizable: true,
layout: 'anchor',
items: this.buildWindow(),
listeners: {
scope: this,
show: function () {
//sync the shadow
var win = Ext.WindowMgr.getActive();
if (win !== null) {
win.el.sync(true);
}
}
}
};
Ext.apply(this, config);
this.callParent(arguments);
},
buildWindow: function () {
return [{
xtype: 'issuerpopupgrid',
id: 'issuerpopupgrid-id',
appContainer: this.appContainer,
extraParam: this.extraParam
}];
}
});
Ext.define('view.grid.issuerpopupgrid', {
extend : 'view.grid.lvsimplegrid',
alias : 'widget.issuerpopupgrid',
appContainer: undefined,
extraParam: undefined,
initComponent: function () {
this.gridType = this.appContainer.appContext.appData.gridDefTypeMap.R9;
this.modelName = this.appContainer.name + '.model.' + this.gridType.name;
this.selReportType = this.gridType.name; //'R9';
this.sortField = 'secDesc';
this.reportUrl = this.appContainer.appContext.appData.gridDefinitions[this.gridType.name].serviceUrl;
var config = {
height: 570,
selModel: {
selType: 'checkboxmodel',
showHeaderCheckbox : true,
mode: 'MULTI',
checkOnly: true
},
listeners: {
scope: this,
afterrender: this.onAfterRender,
show: this.onActivateGrid
}
};
Ext.apply(this, config);
this.callParent(arguments);
this.tbar = this.buildTopBar();
},
onAfterRender: function (thisObj) {
this.configureGrid(this.selReportType, this.appContainer.appContext.appData, null, false, this.sortField, this.sortField);
thisObj.getStoreData(this.selReportType, this.extraParam);
},
onActivateGrid: function (thisObj) {
thisObj.getStoreData(this.selReportType);
}
});
}
});
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