[vinodnParticipant]

Hi Ivailo,

The solution worked for my chart when it consists of multiple bars, that too in IE 9 and Chrome. It however doesn’t work for IE8.
Also, charts where there are only one bar in it, the solution fails in all the above mentioned 3 browsers.

Please find the screenshot and source code below.

Screenshot

Source Code

        p_ObjScope.Sector_data = p_ObjRootItem;
        p_ObjScope.Sector_title = "";
        p_ObjScope.Sector_description = "";
        p_ObjScope.Sector_enableAnimations = true;
        p_ObjScope.Sector_showLegend = false;
        p_ObjScope.Sector_toolTipShowDelay = 100;
        p_ObjScope.Sector_toolTipHideDelay = 2000;
        p_ObjScope.Sector_padding = { left: 0, top: 20, right: 100, bottom: 10 };
        p_ObjScope.Sector_legendLayout = { left: 865, top: 0, width: 300, height: 200, flow: 'vertical' };
        p_ObjScope.Sector_borderLineColor = '#f3f4f6';
        p_ObjScope.Sector_backgroundColor = '#f3f4f6';
        p_ObjScope.Sector_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
        p_ObjScope.Sector_categoryAxis =
            {
                dataField: 'sector',
                displayText: 'Sector',
                showTickMarks: false,
                showGridLines: false,
		labels:
                    {
                        angle: 270,
                        horizontalAlignment: 'right',
                        verticalAlignment: 'center',
                        rotationPoint: 'right',
                        offset: { y: -50 }
                    },
                formatFunction: function (value) {
                    var res = value;

                    if (res.length > 20) {
                        res = res.substring(0, 20) + "...";
                    }

                    return res;
                },
                toolTipFormatFunction: function (value) {
                    return value;
                }
            };
        p_ObjScope.Sector_colorScheme = 'myScheme';
        p_ObjScope.Sector_seriesGroups =
            [
                {
                    type: 'column',
                    useGradientColors: false,
                    columnsGapPercent: 50,
                    columnsMaxWidth: 50,
                    enableSeriesToggle: false,
                    valueAxis:
                        {
                            minValue: 0,
                            showTickMarks: false,
                            description: '%',
                            formatSettings: {
                                text: '',
                                decimalPlaces: 2
                            }
                        },
                    series: [
                       { dataField: 'total_perc', displayText: 'Total', showLabels: false, labelsVerticalAlignment: 'top', formatFunction: function (value) { if (isNaN(value)) { return value; } else { return value + '%'; } } }
                    ]
                }
            ];

[vinodnParticipant]

Done. Thanks 🙂

[vinodnParticipant]

Thanks for your reply Ivailo. Am using the charts within angularjs framework. Below is my current source code. I tried using the labels property within the categoryAxis section but it changes nothing. Infact, if I remove my textRotationAngle property and try using the “angle:90” property of “labels”, my labels stop rendering vertically too. It’s as if my chart doesn’t recognize the labels property altogether neither it gives any error.

Please advise if am doing something wrong.

HTML

<div id="jqxSectorAllocationChart" style="width: 950px; height: 230px" ng-jqwidgets="jqxChart" ng-show="!SectorAllocation_NoData"
        ng-jqxsettings="{ title: Sector_title, description: Sector_description, borderLineColor: Sector_borderLineColor, showLegend: Sector_showLegend,
                        legendLayout: Sector_legendLayout, padding: Sector_padding, titlePadding: Sector_titlePadding, source: Sector_data,
                        categoryAxis: Sector_categoryAxis, colorScheme: Sector_colorScheme, seriesGroups: Sector_seriesGroups,  backgroundColor: Sector_backgroundColor,
                        enableAnimations: Sector_enableAnimations, toolTipShowDelay: Sector_toolTipShowDelay, toolTipHideDelay: Sector_toolTipHideDelay }"></div>

======================================
Javascript

        p_ObjScope.Sector_data = p_ObjRootItem;
        p_ObjScope.Sector_title = "";
        p_ObjScope.Sector_description = "";
        p_ObjScope.Sector_enableAnimations = true;
        p_ObjScope.Sector_showLegend = false;
        p_ObjScope.Sector_toolTipShowDelay = 100;
        p_ObjScope.Sector_toolTipHideDelay = 2000;
        p_ObjScope.Sector_padding = { left: 0, top: 20, right: 100, bottom: 0 };
        p_ObjScope.Sector_legendLayout = { left: 865, top: 0, width: 300, height: 200, flow: 'vertical' };
        p_ObjScope.Sector_borderLineColor = '#f3f4f6';
        p_ObjScope.Sector_backgroundColor = '#f3f4f6';
        p_ObjScope.Sector_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
        p_ObjScope.Sector_categoryAxis =
            {
                dataField: 'sector',
                displayText: 'Sector',
                textRotationAngle: 270,
                verticalDescriptionAlignment: 'left',
                showTickMarks: false,
                showGridLines: false,
                textOffset: { x: 0, y: 5 },
                formatFunction: function (value) {
                    var res = value;

                    if (res.length > 20) {
                        res = res.substring(0, 20) + "...";
                    }

                    return res;
                },
                toolTipFormatFunction: function (value) {
                    return value;
                }
            };
        p_ObjScope.Sector_colorScheme = 'myScheme';
        p_ObjScope.Sector_seriesGroups =
            [
                {
                    type: 'column',
                    useGradientColors: false,
                    columnsGapPercent: 50,
                    columnsMaxWidth: 50,
                    enableSeriesToggle: false,
                    valueAxis:
                        {
                            minValue: 0,
                            //unitInterval: l_MaxValue,
                            showTickMarks: false,
                            description: '%',
                            formatSettings: {
                                text: '',
                                decimalPlaces: 2
                            }
                        },
                    series: [
                       { dataField: 'total_perc', displayText: 'Total', showLabels: false, labelsVerticalAlignment: 'top', formatFunction: function (value) { if (isNaN(value)) { return value; } else { return value + '%'; } } }
                    ]
                }
            ];

[vinodnParticipant]

Dear Dimitar,

Thanks for your prompt responses.

I have the same version of Chrome and I notice that thin line. However, I still don’t get a tooltip on hovering above it in your jsfiddle link. Would be great if your could share a screenshot of the tooltip for 0.2 value appearing in your Chrome.

Regards,
Vinod Naidu

[vinodnParticipant]

Works in IE but doesn’t work in Chrome.

Please advise.

[vinodnParticipant]

Thanks Dimitar.

[vinodnParticipant]

Hi Dimitar,

Thank you for the replay! Using this solution I can avoid manually calculation outside the chart.
And one more question, can I use callback function for unitInterval?
i.e.,
…
seriesGroups:
[
{
type: ‘line’,
valueAxis:
{
visible: true,
unitInterval: fuction() { // Some logic.. },
title: { text: ‘Debt (% of GDP)’ },
gridLines: { visible: false },
labels: { horizontalAlignment: ‘left’ }
},
series: [
{ dataField: ‘DebtPercent’, displayText: ‘Debt (% of GDP)’ }
]
}
]
…

Best Regards,
Rinkal

[vinodnParticipant]

Hi Dimitar,

I want to set Dynamic value to unitInterval. Is there any way to find MAX Y-Axis value?

Regards,
Rinkal

[vinodnParticipant]

We can’t hard code it. The values are dynamic. They can be in 0.1, 0.2, 0.3 or in 10, 20, 30. Hard coding unitInterval property to 0.1 would make the chart look full of horizontal lines when the values are big.

[vinodnParticipant]

Referring to y-axis. You can view the same in the below image. Basically, the json data object that is bound to the chart has values upto one decimal precision. However, the chart renders with scale upto 2 decimal precision which is wrong as even the scale should have only one decimal precision. Hence, we set “decimalPlaces” property of the chart in “formatsetting” to “1”. But that is now giving us an incorrect scale with duplicate values.

[vinodnParticipant]

No. The renders just fine. No error in the browser console too. It’s just that when user hovers on a particular bar the tooltip shows up just fine. But when user hovers over another bar, the old tooltip doesn’t fade away and the new tooltip also shows up. So now the user sees 2 tooltips at a same time.

Please find the formatted code below.

p_ObjScope.Asset_data = p_ObjRootItem;
p_ObjScope.Asset_title = “”;
p_ObjScope.Asset_description = “”;
p_ObjScope.Asset_enableAnimations = true;
p_ObjScope.Asset_showLegend = true;
p_ObjScope.Asset_toolTipShowDelay = 100;
p_ObjScope.Asset_toolTipHideDelay = 2000;
p_ObjScope.Asset_borderLineColor = ‘White’;
p_ObjScope.Asset_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
p_ObjScope.Asset_padding = { left: 0, top: 10, right: 120, bottom: 0 };
p_ObjScope.Asset_legendLayout = { left: 540, top: 0, width: 300, height: 200, flow: ‘vertical’ };
p_ObjScope.Asset_categoryAxis =
{
dataField: ‘aum_date’,
displayText: ‘AUM Date’,
showGridLines: false,
showTickMarks: false,
formatFunction: function (value) {
if (isNaN(value)) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var l_StrDateArray = value.split(“-”);
return l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-’ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-’ + l_StrDateArray[0];
}
}
};
p_ObjScope.Asset_colorScheme = ‘myScheme’;

p_ObjScope.Asset_seriesGroups =
[
{
type: 'stackedcolumn100',
columnsGapPercent: 100,
seriesGapPercent: 5,
skipOverlappingPoints: false,
enableSeriesToggle: false,
valueAxis:
{
unitInterval: 20,
minValue: 0,
maxValue: 120,
showTickMarks: false
},
toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var l_StrDateArray = categoryValue.split(“-”);
return ‘<DIV style=”text-align:center;padding:1px”>AUM Date: ‘ + l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-’ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-’ + l_StrDateArray[0] + ‘<br /> Asset Class: ‘ + serie.displayText + ‘<br />’ + parseFloat(value).toFixed(1) + ‘% </DIV>’;
},
series: [
{ dataField: 'Alternate', displayText: 'Alternate', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } },
{ dataField: 'Cash', displayText: 'Cash', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } },
{ dataField: 'Debt', displayText: 'Debt', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } },
{ dataField: 'Equity', displayText: 'Equity', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } },
{ dataField: 'Real Estate', displayText: 'Real Estate', showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + '%'; } } }
]
}
];

[vinodnParticipant]

Sure, will do that.

In the meantime, could you please have a look at the below snippet and let us know if we are doing something wrong? We are using jqxchart along with angular js.

=====================================
p_ObjScope.Asset_data = p_ObjRootItem;
p_ObjScope.Asset_title = “”;
p_ObjScope.Asset_description = “”;
p_ObjScope.Asset_enableAnimations = true;
p_ObjScope.Asset_showLegend = true;
p_ObjScope.Asset_toolTipShowDelay = 100;
p_ObjScope.Asset_toolTipHideDelay = 2000;
p_ObjScope.Asset_borderLineColor = ‘White’;
p_ObjScope.Asset_titlePadding = { left: 0, top: 0, right: 0, bottom: 10 };
p_ObjScope.Asset_padding = { left: 0, top: 10, right: 120, bottom: 0 };
p_ObjScope.Asset_legendLayout = { left: 540, top: 0, width: 300, height: 200, flow: ‘vertical’ };
p_ObjScope.Asset_categoryAxis =
{
dataField: ‘aum_date’,
displayText: ‘AUM Date’,
showGridLines: false,
showTickMarks: false,
formatFunction: function (value) {
if (isNaN(value)) {
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
var l_StrDateArray = value.split(“-“);
return l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-‘ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-‘ + l_StrDateArray[0];
}
}
};
p_ObjScope.Asset_colorScheme = ‘myScheme’;

p_ObjScope.Asset_seriesGroups =
[
{
type: ‘stackedcolumn100’,
columnsGapPercent: 100,
seriesGapPercent: 5,
skipOverlappingPoints: false,
enableSeriesToggle: false,
valueAxis:
{
unitInterval: 20,
minValue: 0,
maxValue: 120,
showTickMarks: false
},
toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var months = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’];
var l_StrDateArray = categoryValue.split(“-“);
return ‘<DIV style=”text-align:center;padding:1px”>AUM Date: ‘ + l_StrDateArray[2].substring(0, l_StrDateArray[2].indexOf(“T”)) + ‘-‘ + months[parseInt(l_StrDateArray[1], 10) – 1] + ‘-‘ + l_StrDateArray[0] + ‘<br /> Asset Class: ‘ + serie.displayText + ‘<br />’ + parseFloat(value).toFixed(1) + ‘% </DIV>’;
},
series: [
{ dataField: ‘Alternate’, displayText: ‘Alternate’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Cash’, displayText: ‘Cash’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Debt’, displayText: ‘Debt’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Equity’, displayText: ‘Equity’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } },
{ dataField: ‘Real Estate’, displayText: ‘Real Estate’, showLabels: false, formatFunction: function (value) { if (isNaN(value)) { return value; } else { return parseFloat(value).toFixed(1) + ‘%’; } } }
]
}
];
=====================================

[vinodnParticipant]

We are using version 3.6.0 and the product for which we are using is under last phase of UAT signoff. So it will be kind if you let us know the difference between version 3.6.0 so we can be better prepared for the upgrade.

[vinodnParticipant]

Thanks Dimitar.

Regards,
Vinod

[vinodnParticipant]

Many thanks Dimitar. That was really helpful.

Regards,
Vinod Naidu

[Author]

Posts