Hi,

Could you describe more clearly what you mean by the tooltip displaying below the chart? I'm not seeing this behavior.

-Graham

There isn't currently a way to use the custom template feature directly from the wrapper since the custom template must be defined using javascript. You can add a custom template by adding this logic after the definition of the chart in the page:

<script>
     $.ig.loader(function () {
         var customTemplate = {
             measure: function (measureInfo) {
                 var size = 5;
                 measureInfo.width = size;
                 measureInfo.height = size;
             },
             render: function (renderInfo) {
                 var ctx = renderInfo.context, radius;
                 ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
                 ctx.strokeStyle = renderInfo.data.actualItemBrush().fill();
                 ctx.lineWidth = 2.0;
                 ctx.beginPath();
                 radius = Math.min(renderInfo.availableWidth, renderInfo.availableHeight) / 2.0;
                 ctx.arc(renderInfo.xPosition, renderInfo.yPosition, radius, 0, Math.PI * 2.0, false);
                 ctx.fill();
                 ctx.stroke();
                 ctx.closePath();
             }
         };
         $("#chart").igDataChart("option", "series", [{ name: "series1", markerTemplate: customTemplate}]);
     });
    </script>

Hi Graham,

For custom marker template, below code works if Chart ID is "chart"

$("#chart").igDataChart("option", "series", [{ name: "series1", markerTemplate: customTemplate}]); });

But in my case, I have multiple charts getting rendered with IDs as "DataChart1", "DataChart2",.........

Is there any generic way to apply marker template to all Charts on page without using ID ??

Does the series in each chart have the same name?

-Graham

Hi,
Maybe this will help you out. This is adding all the series to one chart instead of seperate, but I thought I would do it
this way in case you were trying to do this initially instead of having seperate charts.

@model List<Test.Models.ChartData> 
@using Infragistics.Web.Mvc

@{
    ViewBag.Title = "ScatterSeries";
}

<h2>ScatterChart</h2>

<link type="text/css" href='@Url.Content("~/Content/Ig/ig.ui.chart.igtheme.transparent.css")'
        rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/Scripts/Ig/infragistics.loader.js")"></script>

    @(Html.Infragistics().Loader()
                    .ScriptPath(Url.Content("~/Scripts/Ig"))
                    .CssPath(Url.Content("~/Content/Ig"))
            .Render()
    )
    <script id="tooltipTemplate" type="text/x-jquery-tmpl">
        <div id="tooltip" class="ui-widget-content ui-corner-all">
            <span id="tooltipValue">Test: ${item.Value1}</span>
        </div>
    </script>

    <style>
        #legend1
        {
            position: relative;
            float: left;

        }

    </style>

    

    <div>
    @{
        List<Test.Models.ChartData> chartDataSeriesCollection = Model as List<Test.Models.ChartData>;
        
        var i = 0;
        foreach(Test.Models.ChartData chartData in chartDataSeriesCollection)
        {
            //for each series render a different chart
            @(  Html.Infragistics().DataChart()
            .ID("chart")
            .Width("700px")
            .Height("400px")
            .VerticalZoomable(true)
            .HorizontalZoomable(true)
            .TopMargin(50)
            .BottomMargin(50)
            .CrosshairVisibility(Visibility.Visible)

            .Axes((axes) =>
            {
                axes.NumericX("xAxis");
                axes.NumericY("yAxis");
            })
            .Series((series) =>
            {
                series
                .Scatter("series" + i, chartData.AsQueryable()).Title("Series Title")
                .XAxis("xAxis").YAxis("yAxis")
                .XMemberPath((item) => item.Index).MarkerType(MarkerType.Circle)
                .YMemberPath((item) => item.Value1).MarkerType(MarkerType.Circle)
                .Legend(legend => legend.ID("legend1").Width("140px"))
                .ShowTooltip(true)
                    .Thickness(5)
                    .TooltipTemplate("tooltipTemplate");
            })
                .WindowResponse(WindowResponse.Immediate)
               .OverviewPlusDetailPaneVisibility(Visibility.Visible)

            .DataBind()
            .Render()
    )
            i++;
        }
    }

</div>

<script>
    $.ig.loader(function () {
        var customTemplate = {
            measure: function (measureInfo) {
                var size = 20;
                measureInfo.width = size;
                measureInfo.height = size;
            },
            render: function (renderInfo) {
                var ctx = renderInfo.context, radius;
                ctx.fillStyle = renderInfo.data.actualItemBrush().fill();
                ctx.strokeStyle = renderInfo.data.actualItemBrush().fill();
                ctx.lineWidth = 2.0;
                ctx.beginPath();
                radius = Math.min(renderInfo.availableWidth, renderInfo.availableHeight) / 2.0;
                ctx.arc(renderInfo.xPosition, renderInfo.yPosition, radius, 0, Math.PI * 2.0, false);
                ctx.fill();
                ctx.stroke();
                ctx.closePath();
            }
        };

        @{ var j = 0; }
        @foreach(Test.Models.ChartData chartData in chartDataSeriesCollection) {
            <text>
                $("#chart").igDataChart("option", "series", [{ name: "series@(j)", markerTemplate: customTemplate}]);   


                @{ j++; }
            </text>
        }
    });   
</script>

I hope this helps!
I'll be out of the office for a week, so if you have any follow ups you may want to start a new thread in order to have your question answered more quickly.

-Graham

I am not providing any ID while rendering charts. Its automatically taking "DataSeries1", "DataSeries2", "DataSeries3",............

if all the series have the same name, an easy way to set an option for all charts is something like this:

$(

'.ui-chart-container').parent().igDataChart("option", "series", [{ name: 'series1', brush: 'red'}]);