I have a bootstrap tab panel with 5 switchable tabs (in active, fade, fade, fade, fade)
Included within each of these tabs is a dxchart (devextreme) that is plotted with Jscript.
When my page finishes loading, the graph found in the tab with the class css: (in active) appears properly. But if I navigate in the other tabs the graphs are not created.
I have investigated the case and discovered that the graphs in the tabs (fade) have to be created in the tabchanged event.
I'm not very good at Jscript, and I spend a lot of time investigating every detail of the code. I have found and modified the following:
var isShown = false;
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// e.target // newly activated tab
// e.relatedTarget // previous active tab
DrawChart(); isShown = true;
})
function DrawChart() {
if (isShown)
return;
$("#chartUtilidad").dxChart({
dataSource: chartDataBar,
commonSeriesSettings: {
bar: {
cornerRadius: 10
},
argumentField: 'ano_a'
},
tooltip: {
enabled: true,
format: "fixedPoint",
precision: 2,
},
series: [
{ valueField: 'ing1_f', name: 'Ingreso', type: 'bar', color: '#4F81BC' },
{ valueField: 'cost1_f', name: 'Costo', type: 'bar', color: '#9BBB58' },
{ valueField: 'gastos1', name: 'Gasto', type: 'bar', color: '#23BFAA' },
{ valueField: 'uti1', name: 'Utilidad', type: 'bar', color: '#8064A1' },
],
argumentAxis: {
//tickInterval: { years: 1 },
argumentType: 'string'
},
legend: {
horizontalAlignment: 'center',
font: { color: 'Black', size: 20 },
},
title: {
text: 'Comparativo C$'
},
animation: {
easing: 'easeOutCubic',
duration: 3000
}
});
}
Normally the code to create the graphs is as follows (it works fine for me in "in active"):
$(function () {
$("#chartVentas").dxChart({
dataSource: chartData,
commonSeriesSettings: {
type: "line",
hoverMode: "allArgumentPoints",
selectionMode: "allArgumentPoints",
label: {
visible: false,
},
},
tooltip: {
enabled: true,
format: "fixedPoint",
precision: 2,
//customizeText: function () {
// return this.valueText + ' C$';
//}
},
series: [
{ argumentField: 'argumento1', valueField: 'vtas1', name: '2016', color: '#4f81bc' },
{ argumentField: 'argumento2', valueField: 'vtas2', name: '2015', color: '#bc8a4f' },
],
argumentAxis: {
tickInterval: 1,
},
legend: {
horizontalAlignment: 'center',
font: { color: 'Black', size: 20 },
},
title: 'Cajas vendidas C$',
animation: {
easing: 'easeOutCubic',
duration: 3000
}
});
});
I don't know how the code for the tabchanged event has to be structured.
This is the HTML:
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#venta">Ventas</a></li>
<li><a data-toggle="tab" href="#costo">Costos</a></li>
<li><a data-toggle="tab" href="#comparativo">Comparativo</a></li>
<li><a data-toggle="tab" href="#caja">Cajas</a></li>
</ul>
<div class="tab-content">
<div id="venta" class="tab-pane fade in active">
<div id="chartVentas"></div>
</div>
<div id="costo" class="tab-pane fade">
</div>
<div id="comparativo" class="tab-pane fade">
<div id="chartUtilidad"></div>
</div>
<div id="caja" class="tab-pane fade">
</div>
</div>
</div>
Noel, if the problem is that the maps in the non-active tabs are not loaded, make them load when the focus changes by adding an event
What you need is to add events to the tabs. You have many ways to do it, via html directly using the attribute
onclick
, for example.I, out of habit, in these cases declare the listeners via js/jquery.
If you have pure
javascript
/HTML
( ) look at this example :DOM
If you have ,
JQuery
look at this other example :If instead you have JQuery UI you can take the event
tabs
(link in English)Let's see, here you need to know the backend you're using. I found this possible solution:
First (ASPX):
Second (ASPX):
Third (JavaScript):
Reference Link: https://www.devexpress.com/Support/Center/Question/Details/KA18850
Regarding what you say about
tabchanged
, it seems to me that you need to add an onclick event on each tab by calling the function: "function (s,e) { DrawChart(); isShown = true;}".As a recommendation: use D3.js or Google Charts for this type of graphs, both libraries are OpenSource, free, with excellent documentation and a good support community. Regarding DevExpress... The more I know about it, the further I want to be from that framework, personally it has given me headaches especially when everyone wants to update... Look at the number of lines of code it generates and the compiler that you have in C:\brain will explode from an Overflow (ok no!).
Well, I hope it has been useful to you, keep going with all the power!