Can i display different charts in the same div

[MarinaParticipant]

Hi,
I’m trying to display different charts in the same div tag when user select different option in dropdown menu.
Initially default chart appear fine, then when I switch to other option, other chart appear fine, but when I switch back first chart never appear and second chart always staying on page even I see it goes to get first chart function. Any examples of this or suggestions?
Here is code for html:

 
<div class="col grid_2_of_12">
                        <select id="ddlSwitchDisplay">
                            <option value="1">Account Calls</option>
                            <option value="2">Account Messages</option>
                        </select>
</div>
<div class="darkgray header">MESSAGE STATISTICS</div>
               
     <div id="jqxChart" style="height:0px; border:1px solid #B0B0B0;"  ></div>
                   
</div>

here is code for js:`
$(‘#ddlSwitchDisplay’).on(“change”, function () {

// to get the value and id of selected option
//var str = $(‘option:selected’, this).attr(‘id’);
//var value = $(‘option:selected’, this).attr(‘value’);

// or to get value and id of select box use
var str = this.id;
var value = this.value;
if (value == 1) {
getCallsChart();
getRecentCalls();

}
else {
getRecentMessages();
getMessagesCharts();

}

});

code for functions to display charts:

function getCallsChart() {
//GetCallsCountHourlyByLogin

// prepare chart data
var chartsource = {};

$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: false,
url: ‘wsCharts.asmx/GetCallsCountHourlyByLogin’,
cache: false,
contentType: ‘application/json; charset=utf-8’,
success: function (data) {
chartsource = $.parseJSON(data.d);
},
error: function (err) {
alert(‘Error’);
}
});

$.jqx._jqxChart.prototype.colorSchemes.push({ name: ‘myScheme’, colors: [‘#1695CB’, ‘#FFE400’, ‘#6BC86B’, ‘#DDDDDD’, ‘#F26223’] });
var settings = {};
settings = {

title: “Hourly Call Count”,
description: “”,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
showLegend: true,
source: chartsource,

xAxis:
{
dataField: ‘Date’,
formatFunction: function (value) {
return parseJsonDate(value);
},
axisSize: ‘auto’,
gridLines: { visible: false },
labels: { angle: -90, rotationPoint: ‘topright’, offset: { x: 0, y: -10} },
tickMarks: { visible: true }
},

valueAxis:
{
minValue: 0,
maxValue: 30,
unitInterval: 5,
title: { text: ‘Number of Calls’ }
},
colorScheme: ‘myScheme’,
seriesGroups:

[
{
type: ‘line’,
columnsGapPercent: 5,
seriesGapPercent: 5,
columnsMinWidth: 3,
columnsMaxWidth: 3,
series: [
// { dataField: ‘GroupCallsCount’, displayText: ‘Group Calls’ },
{dataField: ‘Total’, displayText: ‘Calls’ }
]
}
]
};

// $(‘#jqxChart’).jqxChart(‘seriesGroups’, []);

$(‘#jqxChart’).jqxChart(settings);

}

function getMessagesCharts() {

//chart
var donutmessagesbySubjectchartsource = {};

$.ajax({
type: ‘POST’,
dataType: ‘json’,
async: false,
url: ‘wsCharts.asmx/GetMessageCountBySubject’,
cache: false,
contentType: ‘application/json; charset=utf-8’,
//data: ‘{CompanyID: ‘ + CompanyID + ‘}’,
success: function (data) {
donutmessagesbySubjectchartsource = $.parseJSON(data.d);
},
error: function (err) {
alert(‘Error’);
}
});

$.jqx._jqxChart.prototype.colorSchemes.push({ name: ‘myScheme’, colors: [‘#1695CB’, ‘#FFE400’, ‘#6BC86B’, ‘#DDDDDD’, ‘#F26223’] });
//// prepare jqxChart settings
var settings = {
title: “Message % By Subject Line”,
description: “Today”,
showLegend: true,
showBorderLine: true,
legendLayout: { left: 520, top: 170, width: 300, height: 200, flow: ‘vertical’ },
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: donutmessagesbySubjectchartsource,
backgroundColor: ‘#F4F3E8’,
borderLineWidth: 0,
colorScheme: ‘myScheme’,
seriesGroups:
[
{
type: ‘donut’,
offsetX: 250,
showLabels: true,
series:
[{
dataField: ‘YCount’,

displayText: ‘SubjectLine’,

labelRadius: 90,

initialAngle: 10,

radius: 100,

innerRadius: 70,

centerOffset: 0,

formatSettings: { sufix: ‘%’, decimalPlaces: 1 }
}]
}
]
};
$(‘#jqxChart’).jqxChart(settings);

}
`

[DimitarParticipant]

Hi Marina,

The following example from the forum topic multiple chart in one page and change chart shows how your requirement can be implemented: http://www.jqwidgets.com/community/topic/multiple-chart-in-one-page-and-change-chart/#post-12496. Note that you may need to apply this fix to it: http://www.jqwidgets.com/community/topic/multiple-chart-in-one-page-and-change-chart/#post-74410.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts