jQWidgets Forums

Tagged: #, bar, chart, pie, url

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

# in url causes transparent fill in bar and pie charts Posts
February 20, 2015 at 6:26 am # in url causes transparent fill in bar and pie charts #67394

rtessler
Participant

In jqwidgets 3.7 adding a # character to the url causes charts to have no fill
Worked previously in 3.6

eg file:///C:/Data/Rob/Src/javascript-libraries/jqwidgets/test.html#ddd

remove the #ddd and it works correctly

to reproduce use the following example code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>jqxChart Column Series Example</title>
<link rel=”stylesheet” href=”js/libs/jqwidgets-ver3.7.0/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”js/libs/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets-ver3.7.0/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets-ver3.7.0/jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets-ver3.7.0/jqwidgets/jqxchart.core.js”></script>
<script type=”text/javascript” src=”js/libs/jqwidgets-ver3.7.0/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare chart data as an array
var source = [{ Country: “Spain”, GDP: 100, DebtPercent: 10, Debt: 1 },
{ Country: “France”, GDP: 200, DebtPercent: 15, Debt: 2 },
{ Country: “Germany”, GDP: 300, DebtPercent: 5, Debt: 1 },
{ Country: “UK”, GDP: 200, DebtPercent: 5, Debt: 1 },
{ Country: “Italy”, GDP: 100, DebtPercent: 10, Debt: 20 },
{ Country: “Sweden”, GDP: 140, DebtPercent: 10, Debt: 1 }];

var dataAdapter = new $.jqx.dataAdapter(source);
// prepare jqxChart settings
var settings = {
title: “Economic comparison”,
description: “GDP and Debt in 2010″,
showLegend: true,
enableAnimations: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: ‘Country’,
gridLines: { visible: true },
valuesOnTicks: false
},
colorScheme: ‘scheme01’,
columnSeriesOverlap: false,
seriesGroups:
[
{
type: ‘column’,
valueAxis:
{
visible: true,
unitInterval: 5000,
title: { text: ‘GDP & Debt per Capita($)<br>’ }
},
series: [
{ dataField: ‘GDP’, displayText: ‘GDP per Capita’ },
{ dataField: ‘Debt’, displayText: ‘Debt per Capita’ }
]
},
{
type: ‘line’,
valueAxis:
{
visible: true,
position: ‘right’,
unitInterval: 10,
title: { text: ‘Debt (% of GDP)’ },
gridLines: { visible: false },
labels: { horizontalAlignment: ‘left’ }
},
series: [
{ dataField: ‘DebtPercent’, displayText: ‘Debt (% of GDP)’ }
]
}
]
};
// setup the chart
$(‘#chartContainer’).jqxChart(settings);
});
</script>
</head>
<body class=’default’>
<div id=’chartContainer’ style=”width:850px; height:500px;”>
</div>
</body>
</html>

February 20, 2015 at 7:01 am # in url causes transparent fill in bar and pie charts #67398

Peter Stoev
Keymaster

Hi rtessler,

You have 3 options – do not use such url, put the chart in iframe or use a previous version. The issue’s fix will be available in jQWidgets 3.8.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.