Stacked chart not loading

[arunthathamParticipant]

Hi ,
We have purchased the jqwidget and when we try to use the Jqwidghet stacked chart inside jqxwindow with basic data I am not seeing any chart in the response.
The below is the way i implemented.

Added the below content in bundle congif to load grid ,chart in Visual studio:
bundles.Add(new ScriptBundle(“~/bundles/JQWidget/scripts”).Include(“~/Scripts/JQWidgets/jqx-all.js”,
“~/Scripts/JQWidgets/jqxchart.js”,
“~/Scripts/JQWidgets/jqxchart.core.js”,
“~/Scripts/JQWidgets/jqxcore.js”,
“~/Scripts/JQWidgets/jqxdata.js”,
“~/Scripts/JQWidgets/jqxdraw.js”,
“~/Scripts/JQWidgets/jqxgrid.sort.js”,
“~/Scripts/JQWidgets/jqxgrid.filter.js”,
“~/Scripts/JQWidgets/jqxgrid.selection.js”,
“~/Scripts/JQWidgets/jqxgrid.columnsreorder.js”,
“~/Scripts/JQWidgets/jqxgrid.columnsresize.js”,
“~/Scripts/JQWidgets/jqxgrid.aggregates.js”,
“~/Scripts/JQWidgets/jqxgrid.grouping.js”,
“~/Scripts/JQWidgets/jqxcheckbox.js”,
“~/Scripts/JQWidgets/jqxsplitter.js”,
“~/Scripts/JQWidgets/jqxpanel.js”,
“~/Scripts/JQWidgets/jqxlistbox.js”,
“~/Scripts/JQWidgets/jqxscrollbar.js”,
“~/Scripts/JQWidgets/jqxbuttons.js”,
“~/Scripts/JQWidgets/jqxmenu.js”,
“~/Scripts/JQWidgets/jqxcalendar.js”,
“~/Scripts/JQWidgets/jqxdatetimeinput.js”,
“~/Scripts/JQWidgets/jqxcheckbox.js”,
“~/Scripts/JQWidgets/globalization/globalize.js”));

JS code:
$.x.a.chart.load = function() {
// prepare chart data as an array
var sampleData = [
{ Day: ‘Monday’, Running: 30, Swimming: 0, Cycling: 25 },
{ Day: ‘Tuesday’, Running: 25, Swimming: 25, Cycling: 0 },
{ Day: ‘Wednesday’, Running: 30, Swimming: 0, Cycling: 25 },
{ Day: ‘Thursday’, Running: 35, Swimming: 25, Cycling: 45 },
{ Day: ‘Friday’, Running: 0, Swimming: 20, Cycling: 25 },
{ Day: ‘Saturday’, Running: 30, Swimming: 0, Cycling: 30 },
{ Day: ‘Sunday’, Running: 60, Swimming: 45, Cycling: 0 }
];
// prepare jqxChart settings
var settings = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise by activity”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
dataField: ‘Day’,
showTickMarks: true,
tickMarksInterval: 1,
tickMarksColor: ‘#888888’,
unitInterval: 1,
showGridLines: false,
gridLinesInterval: 1,
gridLinesColor: ‘#888888’,
axisSize: ‘auto’
},
colorScheme: ‘scheme06’,
seriesGroups:
[
{
type: ‘stackedcolumn’,
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 120,
displayValueAxis: true,
description: ‘Time in minutes’,
tickMarksColor: ‘#888888’
},
series: [
{ dataField: ‘Running’, displayText: ‘Running’ },
{ dataField: ‘Swimming’, displayText: ‘Swimming’ },
{ dataField: ‘Cycling’, displayText: ‘Cycling’ }
]
}
]
};
// setup the chart
$(‘#chart-data’).jqxChart(settings);
};

The div placement:

<div role=”tabpanel” class=”tab-pane” id=”details-chart-view”>
<div class=””>
<div id=”chart-data”></div>
</div>

</div>

Please let me know if i have missed any thing.

[DimitarParticipant]

Hello arunthatham,

Here are some possible reasons for this issue:

• You have not included the file jqx.base.css (it should be in a separate StyleBundle);
• You have not included jQuery;
• Your chart initialization code is not executed on $(document).ready();

You also have to include either jqx-all.js or the other jQWidgets scripts, not all of them. Including all files may lead to unexpected behaviour.

Best Regards,
Dimitar

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

[arunthathamParticipant]

Yes Correct ,
We had bundled the Jqwidget chart and Jqwidget Grid and Jq window all reference together.Once we seperated the bundle according to the functionality it worked thanks.
Will post you on further clarification on chart implementation.

Thanks!!!!

[Author]

Posts