Hi,
If I use a custom markerTemplate to modify the default size/appearance of markers, taking a scatter chart as an example, the legend for a multi series chart will not show a marker next to the legend entries? See here for a screenshot - http://sdrv.ms/VFmCQW
Can you tell me if this is a bug and if not then how I get the legend to show the correct marker. My JS code for generating the chart series is below:
chartSeries.push({ name: 'Series0', title: 'Series0', dataSource: FormatScatterData(data, ''), type: 'scatter', markerType: 'circle', markerTemplate: new CircleMarker(markerSize, markerThickness), brush: getBrush(seriesCount), markerBush: getBrush(seriesCount), xAxis: 'xAxis0', yAxis: 'yAxis0', xMemberPath: 'DataPoint2', yMemberPath: 'DataPoint1', showTooltip: false, thickness: 0 });
Many thanks,
Chris
Hello newc1 ,
Thank you for posting in our forum.
Are you adding that series runtime or on the initial load?
If you’re adding an additional series runtime you would need to add it to the series using the series option. For example:
$("#chart").igDataChart("option", "series", [{
name: "series2",
dataSource: generateRandomData(),
type: "scatter",
xAxis: "xAxis",
yAxis: "yAxis",
xMemberPath: "Index",
yMemberPath: "Value1",
markerTemplate: {
render: function (renderInfo) {
…
}
}]);
This would add a new series to the current chart with the specified marker template.
I’ve attached a sample for your reference. Let me know if I’m missing anything from your scenario.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
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); } });