Hi,
We are adding a single series and want to make each data item may have different color.
Is it possible to change color of each data item and to show its lable above the marker as shown in attached image?
Thanks
Here's one way of going about it:
var currData, currDataSource, doGeneration; doGeneration = function() { var num = 30, data = [], curr = 10; for (var i = 0; i < num; i++) { if (Math.random() > .5) { curr += Math.random() * 2.0; } else { curr -= Math.random() * 2.0; } var rad = Math.random() * 100.0; data[i] = { Label: i.toString(), Index: i, Value1: Math.round(curr * 1000.0) / 1000.0, Value2: rad, Value3: (rad / 100.0) * 20 }; } currData = data; currDataSource = new $.ig.DataSource({ dataSource: currData }); } doGeneration(); $("#chart").igDataChart({ width: "700px", height: "400px", dataSource: currDataSource, axes: [{ name: "xAxis", type: "numericX"}, { name: "yAxis", type: "numericY"}], series: [{ name: "series1", type: "scatter", xAxis: "xAxis", yAxis: "yAxis", xMemberPath: "Index", yMemberPath: "Value1", markerTemplate: { measure: function(measureInfo) { measureInfo.width = 10; measureInfo.height = 10; }, render: function(renderInfo) { var ctx = renderInfo.context, radius; var data = renderInfo.data; var name = "null"; if (data.item() != null) { name = data.item().Value1.toString(); } var height = ctx.measureText("M").width; var width = ctx.measureText(name).width; if (renderInfo.isHitTestRender) { ctx.fillStyle = renderInfo.data.actualItemBrush().fill(); } else { ctx.fillStyle = "black"; } var halfWidth = width / 2.0; var halfHeight = height / 2.0; var x = renderInfo.xPosition - halfWidth; var y = renderInfo.yPosition - ((halfHeight * 2.4) + 5.0); var scatX = renderInfo.xPosition - 5.0; var scatY = renderInfo.yPosition - 5.0; if (y < 0) { y += (halfHeight * 4.0); } if (renderInfo.isHitTestRender) { ctx.fillRect(scatX, scatY, renderInfo.availableWidth, renderInfo.availableHeight); } else { ctx.textBaseline = "top"; ctx.fillText(name, x, y); ctx.fillStyle = renderInfo.data.actualItemBrush().fill(); if (data.item().Value1 > 5.0) { ctx.fillStyle = "red"; } ctx.fillRect(scatX, scatY, renderInfo.availableWidth, renderInfo.availableHeight); } } }}], horizontalZoomable: true, verticalZoomable: true, windowResponse: "immediate" });
-Graham
This solution works for scatter graph but not for bubble graph.
I had similar issue with Bubble graph when i use this solution the size of my bubbles change.
Can u provide solution for Bubble graph