[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]

if I changed data like this YoYGrowthQ1=2 and YoYGrowthQ2=2 for New York
var sampleData = [
{ City: ‘New York’, SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1:2, YoYGrowthQ2: 2 },
{ City: ‘London’, SalesQ1: 310500, SalesQ2: 169000, YoYGrowthQ1:5, YoYGrowthQ2: 0.95 },
{ City: ‘Paris’, SalesQ1: 310500, SalesQ2: 275500, YoYGrowthQ1:6, YoYGrowthQ2: 1.15 },
{ City: ‘Tokyo’, SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 12, YoYGrowthQ2: 0.55 },
{ City: ‘Berlin’, SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 10, YoYGrowthQ2: 1.05 },
{ City: ‘San Francisco’, SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 7, YoYGrowthQ2: 0.15 },
{ City: ‘Chicago’, SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 5, YoYGrowthQ2: 0.65 }
];
Same data now still shows different size of bubbles: SalesQ1 bigger then SalesQ2 for New York after I removed minRadiusand maxRadius
from ‘SalesQ1′

[arkgroupParticipant]

Sorry, have another question. I changed YoYGrowthQ1 data to look this:
var sampleData = [
{ City: ‘New York’, SalesQ1: 310500, SalesQ2: 210500, YoYGrowthQ1:4, YoYGrowthQ2: 1.25 },
{ City: ‘London’, SalesQ1: 310500, SalesQ2: 169000, YoYGrowthQ1:5, YoYGrowthQ2: 0.95 },
{ City: ‘Paris’, SalesQ1: 310500, SalesQ2: 275500, YoYGrowthQ1:6, YoYGrowthQ2: 1.15 },
{ City: ‘Tokyo’, SalesQ1: 187000, SalesQ2: 130100, YoYGrowthQ1: 12, YoYGrowthQ2: 0.55 },
{ City: ‘Berlin’, SalesQ1: 187000, SalesQ2: 113000, YoYGrowthQ1: 10, YoYGrowthQ2: 1.05 },
{ City: ‘San Francisco’, SalesQ1: 142000, SalesQ2: 102000, YoYGrowthQ1: 7, YoYGrowthQ2: 0.15 },
{ City: ‘Chicago’, SalesQ1: 171000, SalesQ2: 124000, YoYGrowthQ1: 5, YoYGrowthQ2: 0.65 }
];

Now, bubble size for Berlin are the same, even value is 10 for YoYGrowthQ1 and 1.05 for YoYGrowthQ2.
How can I made bubble sizes depend on value, even for different series?

Thanks

[arkgroupParticipant]

Thank you very much !!!

[arkgroupParticipant]

OK. New version make it work.

Thanks

[arkgroupParticipant]

I am using your code and it did not work on IE8 and Google Chrome. Here is the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”scripts/modernizr.custom.js” type=”text/javascript”></script>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<link href=”jqwidgets/styles/jqx.classic.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxtabs.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.grouping.js” ></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdraw.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxchart.js”></script>
<script src=”jqwidgets/jqxscrollview.js” type=”text/javascript”></script>
<script src=”jqwidgets/jqxtouch.js” type=”text/javascript”></script>
<script src=”jqwidgets/jqxresponse.js” type=”text/javascript”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttongroup.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxradiobutton.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
<script src=”jqwidgets/jqxchart.core.js” type=”text/javascript”></script>

<script type=”text/javascript”>
$(document).ready(function () {
var temp = “”;
var temp2 = “”;
// prepare chart data as an array
var sampleData = [
{ Day: ‘Monday’, Running: 30, Swimming: 5, Cycling: 25, Riding: 10 },
{ Day: ‘Tuesday’, Running: 25, Swimming: 25, Cycling: 0, Riding: 15 },
{ Day: ‘Wednesday’, Running: 30, Swimming: 5, Cycling: 25, Riding: 25 },
{ Day: ‘Thursday’, Running: 35, Swimming: 25, Cycling: 45, Riding: 15 },
{ Day: ‘Friday’, Running: 5, Swimming: 20, Cycling: 25, Riding: 5 },
{ Day: ‘Saturday’, Running: 30, Swimming: 0, Cycling: 30, Riding: 30 },
{ Day: ‘Sunday’, Running: 60, Swimming: 45, Cycling: 5, Riding: 20 }
];

// prepare jqxChart settings
var settings = {
title: “Fitness & exercise weekly scorecard”,
description: “Time spent in vigorous exercise by activity”,
enableAnimations: true,
showLegend: true,
//colorScheme: ‘scheme06’,
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’
},
seriesGroups:
[
{
type: ‘stackedcolumn’,
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 120,
displayValueAxis: true,
description: ‘Time in minutes’,
tickMarksColor: ‘#888888’
},
click: myEventHandler,
series: [
{
dataField: ‘Running’, displayText: ‘Running’, legendFillColor: “#FF00FF”,
colorFunction: function (value, itemIndex, serie, group) {
if (itemIndex !== undefined)
if (temp !== “” && temp2 !== “”)
return (itemIndex === temp && serie.dataField === temp2) ? ‘#FFFF00’ : ‘#0000FF’;
else return “#0000FF”;
}
},
{
dataField: ‘Swimming’, displayText: ‘Swimming’,
colorFunction: function (value, itemIndex, serie, group) {
if (itemIndex !== undefined)
if (temp !== “” && temp2 !== “”)
return (itemIndex === temp && serie.dataField === temp2) ? ‘#FFFF00’ : ‘#FF0000’;
else return “#FF0000”;
}
}
]
},
{
type: ‘stackedcolumn’,
columnsGapPercent: 100,
seriesGapPercent: 5,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 120,
visible: false,
displayValueAxis: true,
description: ‘Time in minutes’,
tickMarksColor: ‘#888888’
},
click: myEventHandler,
series: [
{
dataField: ‘Riding’, displayText: ‘Riding’,
colorFunction: function (value, itemIndex, serie, group) {
if (itemIndex !== undefined)
if (temp !== “” && temp2 !== “”)
return (itemIndex === temp && serie.dataField === temp2) ? ‘#FFFF00’ : ‘#FF00FF’;
else return “#FF00FF”;
}
},
{
dataField: ‘Cycling’, displayText: ‘Cycling’,
colorFunction: function (value, itemIndex, serie, group) {
if (itemIndex !== undefined)
if (temp !== “” && temp2 !== “”)
return (itemIndex === temp && serie.dataField === temp2) ? ‘#FFFF00’ : ‘#00FFFF’;
else return “#00FFFF”;
}
}
]
}
]
};

function myEventHandler(e) {
var index = e.elementIndex;
var datafield = e.serie.dataField;
temp = index;
temp2 = datafield;
$(‘#chartContainer’).jqxChart(‘update’);
};
$(‘#chartContainer’).jqxChart(settings);

});
</script>
</head>
<body class=’default’>
<table>
<tr>
<td>
<div id=’chartContainer’ style=”width: 850px; height: 500px” />
</td>
</tr>
<tr>
<td>
<div id=’eventText’ style=”width: 600px; height: 30px” />
</td>
</tr>
</table>
</body>
</html>

[arkgroupParticipant]

and legendFillColor does not work in this case…

[arkgroupParticipant]

Just find out that legend colors are all black…

[arkgroupParticipant]

Great, thanks a lot.

[arkgroupParticipant]

Found another thing, menu is not closing after I click on menu item.
autoCloseOnClick is true by default.

Thanks

[arkgroupParticipant]

ok, thanks

[arkgroupParticipant]

This one just change bar color based on itemIndex.
I need this on click for one bar…

Thanks

[arkgroupParticipant]

It still color all bars for that serie.
I want just one bar that I click to be colored.

Thanks

[arkgroupParticipant]

I don’t know how to get to fill Color property for bar clicked.
I can see seriesGroup and series, but not the bar. Can you please provide sample code?

Thanks

[arkgroupParticipant]

I did this in cellsrenderer by coloring different part of div:

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {

var _width = (Math.round((value * 100) / _max)).toString() + ‘%’;
return ‘<div id=”data-one” style=”width: ‘ + _width + ‘; background-color: #A7BFC9; “>’ + value + ‘</div>’;

}

[Author]

Posts