Hello,
I am using Infragistics().DataChart in my application.
Currently the chart is displaying gridlines both horizontally and vertically.
But I need to remove horizontal grid lines and also need to customize "NumericY" Label format.
i.e. "$" dollar format before values in Numeric y axis.
Also need to display series tool tip values dynamically.
So please provide me solution and also send me sufficient examples regarding "Html.Infragistics().DataChart"
My code is given below.
@(Html.Infragistics().DataChart(Model.DisbursedFunds.AsQueryable()) .ID("chart") .Width("900px") .Height("550px") //.GridMode(GridMode.None) .Axes(axis => { axis.CategoryX("MonthName").Label(item => item.MonthName).LabelLocation(AxisLabelsLocation.OutsideBottom).Interval(1).LabelLocation(AxisLabelsLocation.OutsideBottom).MinorStrokeThickness(1); axis.NumericY("TotalSum").MinimumValue(0).MaximumValue(5000000).LabelLocation(AxisLabelsLocation.OutsideLeft); axis.NumericY("TotalLoans").MinimumValue(0).MaximumValue(100).StrokeThickness(10).LabelLocation(AxisLabelsLocation.OutsideRight); } ) .Series(series => { series.Column("Sum").Title("New Loans").Brush("#87AB3D").ShowTooltip(true).TooltipTemplate("Sum") .XAxis("MonthName").YAxis("TotalSum").ValueMemberPath(item => item.Sum) .Legend(legend => legend.ID("legend")).ShowTooltip(true).TooltipTemplate("Total Loans funded").ShowTooltip(true); series.Spline("total").Title("Number of Loans") .XAxis("MonthName").YAxis("TotalLoans").Thickness(3).ValueMemberPath(item => item.Total) .Legend(legend => legend.ID("legend2")).ShowTooltip(true).TooltipTemplate("Number of Loans"); } ) .DataBind() .Render())
Thanks
Hi shahinkohan,
Please let me know if you need further assistance with this issue.
Hello all,
Thank you for providing your solutions, jspooner_mso! These are both great answers and will get the job done.
The TooltipTemplate can be a script HTML element with type=”text/x-jquery-tmpl” or a string passed to the series object’s tooltipTemplate option. The igTemplating engine renders the template and the syntax follows the jQuery templating syntax. For more details please refer to the Templating Engine Overview topic:
https://www.igniteui.com/help/igtemplating-overview
You can also see an example of our tooltip templates here:
https://www.igniteui.com/data-chart/overview
I have attached my MVC sample with these three solutions implemented. You can find it below. If you have any further questions or concerns, please let me know.
Here is a way to set a label format in the axis definition. you can use any javascript steps to set the format. 'item' appears to be the numeric value to be formated:
{ type:'numericY',
name:'yAxis2',
labelLocation:"outsideRight",
labelVisibility:'visible',
formatLabel:function (item) {
return formatItemLabel(item, 4, 6) + '(ma)';
},
I have a chart with a left and right hand side yaxis. I have had luck making the x and left hand side axis lines invisible like this in a check box handler.
brush = ($(this).is(":checked")) ? strokeBrush : transperantBrush;//
$("#chart").igDataChart("option", "axes", [{ name: "xAxis", majorStroke: brush }, { name: "yAxis", majorStroke: brush}]);
But I cant seem to do the same for the other y axis. best I can do so far is permanently set it when the chart is created.
Thank you for posting in our forums!
I am currently looking into how to remove the horizontal gridlines, customizing the label format.
Could you please clarify what you mean by "dynamically" in regards to displaying tooltips?
I will have another update for you by Monday. Looking forward to hearing from you.