bubble chart null value

[arkgroupParticipant]

I have bubble chart with data coming from SQL. Some data values are null. Chart shows correct in IE8, but in Chrome or Safari (IPAD) null values still shows as small dots.
Is there way to fix this?

Thanks

[NadezhdaParticipant]

Hello arkgroup,

Please, provide us with more information:
What version of Chrome do you use, mobile or desktop?
Do you use only Safari on iPad?

On our side chart is displayed correctly in IE8 and in Chrome(desktop v40.0).

Best Regards,
Nadezhda

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

[arkgroupParticipant]

Please use this code to replicate. Everything works same with circle symbol. Pick square as symbol. IE8 does not show square for value=0, Google and Safari does. Also, IE8 shows big symbols when pick diamond or any triangle. Thanks.

<script type=”text/javascript”>
$(document).ready(function () {
// prepare chart data as an array
var sampleData = [
{ City: ‘New York’, SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1: 4, YoYGrowthQ2: 4 },
{ City: ‘London’, SalesQ1: 120000, SalesQ2: 169000, YoYGrowthQ1: 0, YoYGrowthQ2: 3 },
{ City: ‘Paris’, SalesQ1: 205000, SalesQ2: 275500, YoYGrowthQ1: 6, YoYGrowthQ2: 1.15 },
{ City: ‘Tokyo’, SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 0, YoYGrowthQ2: 5 },
{ City: ‘Berlin’, SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 10, YoYGrowthQ2: 10 },
{ City: ‘San Francisco’, SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 7, YoYGrowthQ2: 0 },
{ City: ‘Chicago’, SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 5, YoYGrowthQ2: 0.65 }
];

var source =
{
datafields: [
{ name: ‘City’ },
{ name: ‘SalesQ1’ },
{ name: ‘SalesQ2’ },
{ name: ‘YoYGrowthQ1’ },
{ name: ‘YoYGrowthQ2’ }
],
localdata: sampleData
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert(‘Error loading “‘ + source.url + ‘” : ‘ + error); } });

// prepare jqxChart settings
var settings = {
title: “Sales by City in Q1 and Q2, and YoY sales growth”,
description: “(the size of the circles represents relative YoY growth)”,
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
colorScheme: ‘scheme04’,
xAxis:
{
dataField: ‘City’,
valuesOnTicks: false
},
valueAxis:
{
unitInterval: 50000,
minValue: 50000,
maxValue: 350000,
title: { text: ‘Sales ($)<br>’ },
labels: {
formatSettings: { prefix: ‘$’, thousandsSeparator: ‘,’ },
horizontalAlignment: ‘right’
}
},
seriesGroups:
[
{
type: ‘bubble’,
series: [
{
dataField: ‘SalesQ1’, radiusDataField: ‘YoYGrowthQ1’, minRadius: 1, maxRadius: 10, displayText: ‘YoYGrowth in Q1’,
labels: {
visible: true, offset: { x: 0, y: -20 },
verticalAlignment: ‘top’
},
formatFunction: function (value, itemIndex) {
var YoYGrowth1 = dataAdapter.records[itemIndex].YoYGrowthQ1;
return YoYGrowth1;
}
},
{
dataField: ‘SalesQ2’, radiusDataField: ‘YoYGrowthQ2’, minRadius: 1, maxRadius: 10, displayText: ‘YoYGrowth in Q2’,
labels: {
visible: true, offset: { x: 0, y: -20 },
verticalAlignment: ‘top’
},
formatFunction: function (value, itemIndex) {
var YoYGrowth2 = dataAdapter.records[itemIndex].YoYGrowthQ2;
return YoYGrowth2;
}
}
]
}
]
};

// setup the chart
$(‘#chartContainer’).jqxChart(settings);

var chart = $(‘#chartContainer’).jqxChart(‘getInstance’);

// symbol selection drop down
var symbolsList = [“circle”, “diamond”, “square”, “triangle_up”, “triangle_down”, “triangle_left”, “triangle_right”];
$(“#dropDownSerie1Symbol”).jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: ‘200’, height: ’25’, dropDownHeight: 100 });

$(‘#dropDownSerie1Symbol’).on(‘change’, function (event) {
var value = event.args.item.value;
chart.seriesGroups[0].series[0].symbolType = value;
chart.update();
});

$(“#dropDownSerie2Symbol”).jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: ‘200’, height: ’25’, dropDownHeight: 100 });

$(‘#dropDownSerie2Symbol’).on(‘change’, function (event) {
var value = event.args.item.value;
chart.seriesGroups[0].series[1].symbolType = value;
chart.update();
});

});

</script>

[arkgroupParticipant]

One more thing.
Should bubble be drawn if value less then minRadius? In my case value with 0 still shown even minRadius=1.

Thanks.

[NadezhdaParticipant]

Hi arkgroup,

Thank you for your feedback. We will investigate the reported behaviour.

Best Regards,
Nadezhda

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

[Author]

Posts