Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
30
How to show the value of a Stacked Fragment in igDataChart as a marker?
posted

Yeah, I got it when i gave markerType. you saying without marker type its not supported in 2016. Thank you very much for the information.

Had another doubt regarding Stacked Column.

I need to show the count on the column chart as you can see in the sample. I could see some solutions saying to give markerTemplate. But its not working for me. 

Sample Output

CreateChart("stackedColumn","Sample");
function CreateChart(seriesType, chartTitle) {
var xAxis = {};
var yAxis = {};
xAxis = { name: "xAxis", type: "categoryX", label: "LabelName", gap: 0.5, };
yAxis = { name: "yAxis", type: "numericY", title: "Count", titleTextColor: "black",titleAngle: -90,};
$("#columnChartOne").igDataChart({
height: "250px",
width: "250px",
title: chartTitle,
titleTextColor: 'black',
horizontalZoomable: true,
verticalZoomable: true,
dataSource: dataGraph,

legend: { element: "legendThree",type:"legendThree" },
axes: [ xAxis, yAxis ],
series: [
CreateStackedSeries(seriesType),
],
});
};

function CreateStackedSeries(seriesType) {
var series = {
type: seriesType,
xAxis: "xAxis",
yAxis: "yAxis",
name: seriesType + "Series",
isTransitionInEnabled: true,
isHighlightingEnabled: false,
series: [
CreateStackedFragment("No of M"),
CreateStackedFragment("No of T")
]
}
series.radius = 0;
return series;
}

function CreateStackedFragment(memberPath) {
var stackFragment = {
name: memberPath + "Fragment",
title: memberPath,
type: "stackedFragment",
valueMemberPath: memberPath,
markerTemplate:{measure: function (measureInfo) {
var cont = measureInfo.context;
var data = measureInfo.data;
var name = "null";
if (data.item() != null) {
name = data.item().value.toString();
}
var height = cont.measureText("M").width;
var width = cont.measureText(name).width;
measureInfo.width = width;
measureInfo.height = height;
},
render: function (renderInfo) {
var ctx = renderInfo.context,
radius;
if (renderInfo.isHitTestRender) {
ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
} else {
ctx.fillStyle = 'black';
}

var data = renderInfo.data;
var name = data.item().value.toString();
var halfWidth = renderInfo.availableWidth / 2.0;
var halfHeight = renderInfo.availableHeight / 2.0;
var x = renderInfo.xPosition - halfWidth;

var y = renderInfo.yPosition - ((halfHeight * 2.0) + 5.0);
if (y < 0) {
y += (halfHeight * 4.0);
}

if (renderInfo.isHitTestRender) {
ctx.fillRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight);
} else {
ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
ctx.fillRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight + 5);
ctx.fillStyle = renderInfo.data.outline().fill();
ctx.strokeRect(x, y, renderInfo.availableWidth, renderInfo.availableHeight + 5);
ctx.fillStyle = 'white';
ctx.textBaseline = "top";
ctx.fillText(name, x, y);
}
}},
showTooltip: true,

};
return stackFragment;
}
$("#columnChartOne").igDataChart("option", "brushes", ["#0000FF", "#FFFF00"]);
}

  • 33750
    Offline posted

    Hello Maneesh,

    My best recommendation to achieve a visualization like in your screenshot is to utilize a PointSeries external to your StackedColumnSeries for the markers. If you define a path on your data item that points at half of the value of the fragment it is going to display a marker for and then add all of the previous fragment values, you can achieve this through your data.

    From there, you can define a markerTemplate for your PointSeries that shows the value. The reason I would not recommend doing this with the StackedFragmentSeries itself is because by default, the marker shows at the top of each fragment and calculating the location that the marker should be moved to for it to be centered may be rather difficult.

    I am attaching a sample project to demonstrate the above.

    Please let me know if you have any other questions or concerns on this matter.

    StackedChartMarkers.zip