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
2335
How to change color of each item in Scatter Series and Show Lable on each Item
posted

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

Parents
  • 30692
    Suggested Answer
    Offline posted

    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

Reply Children
No Data