Hi all,
I have been using IGDATACHART from quite some time. May I know how to display values on top of the columns in the igdatachart?
Thanks in Advance,
Pavan
Hi Pavan, The best way to do that is probably to use a custom marker template to display the text value. You can do that as below:
$("#container").igDataChart({ width: "500px", height: "500px", dataSource: currData, crosshairVisibility: "visible", axes: [{ name: "xAxis", type: "categoryX", label: "Label", interval: 1 }, { name: "yAxis", type: "numericY", labelTextColor: "blue", }], series: [{ name: "series1", title: "Test Series", type: "column", xAxis: "xAxis", yAxis: "yAxis", valueMemberPath: "Value", 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.textBaseline = "top"; ctx.fillText(name, x, y); } } } }], horizontalZoomable: true, verticalZoomable: true, windowResponse: "immediate" });
We are providing a simplified way of providing text markers in 12.2 that would reduce the amount of code required here. Hope this helps! -Graham
Hi Graham,
We tried provided template with Scatter Series and Bubble Series and it shows text but marker disappeared in this case.
Can you help us in to use it with Scatter Series and Bubble Series?
Thanks
Hi, thats because the above does not draw any kind of ellipse. If you are providing a custom marker you are taking over the rendering of the marker completely. So if you want an ellipse you need to render one using the canvas API, as well as the text.
-Graham
Please see: http://ko.infragistics.com/community/forums/p/74453/377797.aspx#377797
Can you provide us by code sample to add marker too?