Hi,
I am using MVC chart helper for igDataChart.
I have multple series and I want igDataChart to select color for each series from explicitly defined set of colors.
In your documentation http://help.infragistics.com/jQuery/2012.1/ui.igDataChart
BRUSHES property is mentioned. But i could not find it in igDataChart MVC helper.
I tried to set it in javascript as below:
$("#spectralChart").igDataChart("option", "brushes", ["#7FFFD4", "#0000FF", "#FF7F24"]);
This line is throwing javascript error: Microsoft JScript runtime error: Object doesn't support property or method 'igDataChart'
Please help.
Can I dynamically change the color of single series without using hard coded color in brush: "xxxx" attribute ? have a look
markerTemplate: { measure: function (measureInfo) {....;
}
render: function (renderInfo) { var ctx = renderInfo.context, radius; var data = renderInfo.data; if (data.item() != null) { //name = data.item().PlannedOrdrQty.toString(); availCap = data.item().PlannedOrdrQty; if (availCap > requiredCap) {//WANT TO SET COLOR OVER HERE } else {//WANT TO SET COLOR OVER HERE }
.....; }
},
Thanks Lazar, that works like a charm.
Hi, sanjaysutar
Your your JS script block executes before any Ignite UI scripts related to data chart are loaded. You have to put your script after the MVC helper code that generates your chart. This way the code generated by the helper will execute and create the chart and then the code that updates the brushes option will execute. For that purpose you also need to modify the code a like the following:
Also, there is actually a Brushes() method in the MVC helper and in your case it will be easier to use that instead of JS code which sets the brushes option. Use the method like this:
Cheers, Lazar
Hi Lazar below is the complete markup:
@*infragistic script files*@
<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 type="text/javascript"> $(document).ready(function () { $("#spectralChart").igDataChart("option", "brushes", ["#7FFFD4", "#0000FF", "#FF7F24"]);
});</script>
@(Html.Infragistics().DataChart(Model.SpectralChannelData.AsQueryable()) .ID("spectralChart") .Axes((axes) => { axes.NumericX("xAxis").Stroke("Black").StrokeThickness(4).MajorStroke("Whitesmoke"); axes.NumericY("yAxis").Stroke("Black").StrokeThickness(4).MajorStroke("Whitesmoke"); }) .Series(series => { series.ScatterLine("scatterSeries" + key.ToString(), Model.GroupedSpectralData[key].AsQueryable()) .XAxis("xAxis").YAxis("yAxis")
.XMemberPath(data => data.SpectralPoint) .YMemberPath(data => data.Wavelength)
}) .DataBind() .Render() )
Please correct me if I am missing on anything.
I cannot reproduce this problem. The same statement works fine for me. Is it possible that this statement is executed before the data chart scripts are loaded into the page?