Hi Maya,

The chart series are being added at runtime (see code below where the chartSeries variable above is used to set the series property of the chart). We support a number of different chart types and visualisation options, which are all handled at runtime. The code above builds up the series for the chart prior to chart initialisation.

The issue, as mentioned above concerns the legend and the fact that with a custom marker template the legend entries do not show the correct marker next to them:

// Build the chart
                $('#single-analysis').igDataChart({
                    width: self.vars.paneWidth + 'px',
                    height: analysisHeight + 'px',
                    theme: 'metro',
                    axes: chartDef.chartAxes,
                    series: chartSeries,
                    horizontalZoomable: true,
                    verticalZoomable: true,
                    showTooltips: false,
                    windowResponse: 'immediate',
                    crosshairVisibility: 'hidden',
                    topMargin: 6,
                    bottomMargin: 6,
                    leftMargin: 6,
                    rightMargin: 6,
                    syncChannel: 'singleAnalysisChart',
                    synchronizeVertically: true,
                    syncrhonizeHorizontally: true,
                    seriesMouseLeftButtonDown: function(evt, ui) {
                        self.seriesMouseLeftButtonDown(evt, ui);
                    }
                });

FYI - Here is the CircleMarker() function referenced above, which highlights the shape if it has been selected by the user:

function CircleMarker(size, thickness) {
    var markerSize = size;
    var markerThickness = thickness;
 
    this.measure = function(measureInfo) {
        measureInfo.width = markerSize;
        measureInfo.height = markerSize;
    };
 
    this.render = function(renderInfo) {
        var ctx = renderInfo.context,
            x = renderInfo.xPosition,
            y = renderInfo.yPosition;
 
        if (!renderInfo.data || !renderInfo.data.item() || !renderInfo.data.actualItemBrush()) {
            return;
        }
 
        // Set style properties for bubble (fill + white outline)
        ctx.fillStyle = renderInfo.data.item().selected ? '#119eda' : renderInfo.data.actualItemBrush().fill();
        ctx.strokeStyle = markerThickness > 0 ? '#fff' : 'transparent';
        ctx.lineWidth = markerThickness;
        ctx.save();
 
        // Draw the bubble using a filled arc
        ctx.beginPath();
        ctx.arc(x, y, markerSize / 2, 0, 2.0 * Math.PI, false);
        ctx.fill();
        ctx.stroke();
 
        ctx.restore();
    };
}

Hello newc1,

Thank you for the code snippet with the creating of the marker template. I’ve found out why this happens.

You seem to cancel the rendering of the marker in some cases: 

…

if (!renderInfo.data || !renderInfo.data.item() || !renderInfo.data.actualItemBrush()) {

                    return;

                }

…

Usually first the makers for the  legend are created and they don’t have a related data item so: renderInfo.data.item() is null for them. So in this case you cancel the drawing of the markers for all items in your legend with this code. If you remove this check you should be able to see them.

Let me know if you have any questions.

Best Regards,

Maya Kirova

Developer Support Engineer

Infragistics, Inc.

http://ko.infragistics.com/support

Thank you Maya, handling the legend pass of the render method appropriately resolved the issue.

Many thanks,

Chris