So I have begun using Dotnet.Highcharts in Visual Studio with C# and MVC,
Its quite different from its javascript counterpart, I need to use ghostjs to take a picture from my web page to send as a report, as many must know, this means that animations interfere with this working properly as bars show up to half of the height they should be.
I'm using the recommended coding from Dotnet.highcharts which mostly uses Razor to configure the chart.
I have tried disabling animations in all these places:
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
Animation = new Animation() { Enabled = false, Duration = 0 }
},
Series = new PlotOptionsSeries
{
Animation = new Animation() { Enabled = false, Duration = 0}
}
},
chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
chartOptions.Chart.Animation.Enabled = false;
and still the chart keeps animating, I just don't know what is going on
here is my full Razor code for the chart
var chartOptions = new Highcharts
{
Title = new Title { Text = "Transactions" },
Subtitle = new Subtitle { Text = "December" },
XAxis = new List<XAxis>
{
new XAxis
{
Categories = ViewBag.ListCategories
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Tx"
}
}
},
Tooltip = new Tooltip
{
HeaderFormat = "<span style='font-size:10px'>{point.key}</span><table style='font-size:12px'>",
PointFormat = "<tr><td style='color:{series.color};padding:0'>{series.name}: </td><td style='padding:0'><b>{point.y:.0f}</b></td></tr>",
FooterFormat = "</table>",
Shared = true,
UseHTML = true
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
PointPadding = 0.2,
BorderWidth = 0,
Animation = new Animation() { Enabled = false, Duration = 0 }
},
Series = new PlotOptionsSeries
{
Animation = new Animation() { Enabled = false, Duration = 0}
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "TX",
Data = ViewData["DataTX"] as List<ColumnSeriesData>
}
}
};
chartOptions.ID = "chart";
chartOptions.Drilldown.Animation = new Animation() { Enabled = false, Duration = 0};
chartOptions.Chart.Animation.Enabled = false;
var renderer = new HighchartsRenderer(chartOptions);
This one worked for me. Had to play with it a while, seems there's no clear documentation.
DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart")
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Areaspline})
.SetTitle(new Title
{
Text = "myLabel",
X = -20
})
.SetSeries(new[]
{
new Series { Name = "MyUsers", Data = new Data(myData), PlotOptionsSeries=new PlotOptionsSeries(){Animation=new Animation(false)} }
});
I found a way to disable the animation inside highcharts.js (From another question for the js version)
showCheckbox: !1,
animation: { duration: 1E3 }
, events: {},
I changed 1E3 to 0 and it worked, however, this is not the optimal solution, there must be a way to achieve this the right way. The whole point of the highcharts dll for visual studio is the ability to use highcharts without touching javascript
For now, I won't accept my own answer as the answer
Related
I am working with Razor Components and have a question about using non-static values in a list of objects.
I have the following code:
#page "/CircularGauge/DefaultFunctionalities"
#using Syncfusion.EJ2.RazorComponents.CircularGauge
<div class="control-section">
<EjsCircularGauge ID="gauge" Axes="axes"></EjsCircularGauge>
</div>
#functions {
int myInteger = 21;
public List<Object> axes { get; set; } = new List<Object>
{
new
{
radius = "80%",
startAngle = 230,
endAngle = 130,
majorTicks = new { width = "0px" },
minorTicks = new { width = "0px" },
lineStyle = new { width = 8, color = "#E0E0E0" },
labelStyle = new { font = new { fontFamily = "Roboto", size = "12px", fontWeight = "Regular" }, offset = -5 },
pointers = new List<Object>
{
new
{
value = 60,
radius = "60%",
color = "#757575",
pointerWidth = 7,
cap = new { radius = 8, color = "#757575", border = new { width = 0 } },
needleTail = new { color = "#757575", length = "25%" }
}
}
}
};
}
Source: https://ej2.syncfusion.com/aspnet-core-blazor/CircularGauge/DefaultFunctionalities
I have a integer I am using in my code like:
int myInteger = 21;
what I wanted to do is at the code above, at:
pointers = new List<Object>
{
new
{
****value = 60,****
radius = "60%",
color = "#757575",
pointerWidth = 7,
cap = new { radius = 8, color = "#757575", border = new { width = 0 } }
}
Was changing the value of value to my local integer, but that is not possible.
I'm stuck in finding a solution around this. is there anyone with some knowledge about this?
You are initializing a property, using an inline constructor. You can't access an instance field in an inline constructor because the compiler cannot ensure which one is going to be done first.
You should define the myInteger as static private static int myInteger. Or you can establish the value of the property in the constructor, and there you can use a local variable on the constructor.
But, if you want to define a constant variable like that one, I'd rather recommend you more to do it like this:
private const int MY_INTEGER = 21;
I've been working on a Xamarin Forms project and I'm having trouble loading data into the Android application. It loads fine for iOS and UWP, but on Android it takes forever. This is happening on two different screens but I'm assuming the problem is the same. I'm sure there are better ways to load the data than what I am using.
This is the first screen I'm having trouble with on Android (screenshot from UWP):
It loads 15 products in each category into a horizontal scroller. The "See All" link loads all of the products in that category into a vertical scrolling grid. That's the second screen I'm having trouble with.
The code to load this view is:
var scroller = new TLScrollView
{
Orientation = ScrollOrientation.Horizontal,
ItemTemplate = new DataTemplate(() => ViewFactory.Merchandise.Invoke()),
HeightRequest = 320,
Padding = new Thickness(0, 0, 0, 10)
};
scroller.SetBinding(TLScrollView.ItemsSourceProperty, nameof(items));
scroller.ItemsSource = items.OrderByDescending(d => d.Cost).Take(15);
The ViewFactory code is:
public static Func<View> Merchandise { get; } = () =>
{
var mainGrid = new Grid() { WidthRequest = 250, Margin = 5 };
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(25, GridUnitType.Absolute) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(25, GridUnitType.Absolute) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(25, GridUnitType.Absolute) });
mainGrid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(35, GridUnitType.Absolute) });
var nameLabel = new Label() { Text = "Casket Name", LineBreakMode = LineBreakMode.TailTruncation, HorizontalTextAlignment = TextAlignment.Center };
var materialLabel = new Label() { Text = "MaterialName", HorizontalTextAlignment = TextAlignment.Center };
var costLabel = new Label() { Text = "Cost", HorizontalTextAlignment = TextAlignment.Center };
nameLabel.SetBinding(Label.TextProperty, "ItemName");
materialLabel.SetBinding(Label.TextProperty, "Material");
costLabel.SetBinding(Label.TextProperty, "CostFormatted");
GlobalModel globalModel = App.Current.MainPage.BindingContext as GlobalModel;
var catalogImage = new CachedImage
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Aspect = Aspect.AspectFit,
LoadingPlaceholder = "MAFSLoader.gif",
CacheDuration = TimeSpan.FromDays(10),
RetryCount = 1,
RetryDelay = 100
};
catalogImage.BindingContextChanged += (s, o) => {
catalogImage.Source = null;
var item = catalogImage.BindingContext as CatalogItem;
if (item == null) return;
catalogImage.Source = item.SmallURL;
};
var buttonStyle = (Style)Application.Current.Resources["ButtonStyle"];
var addToCartButton = new Button { Text = "Add to Cart", BackgroundColor = Color.FromHex("#486E8E"), WidthRequest = 250, Style = buttonStyle };
addToCartButton.SetBinding(Button.CommandParameterProperty, "ItemID");
var imgTapGesture = new TapGestureRecognizer()
{
Command = new Command(() =>
{
if (addToCartButton.CommandParameter == null)
{
addToCartButton.SetBinding(Button.CommandParameterProperty, "ItemId");
}
var dictionary = new Dictionary<string, string>();
dictionary.Add(globalModel.CurrentFuneralHomeKey, addToCartButton.CommandParameter.ToString());
globalModel.ProductDetail.Execute(dictionary);
})
};
catalogImage.GestureRecognizers.Add(imgTapGesture);
addToCartButton.Clicked += new EventHandler(async delegate (Object o, EventArgs a)
{
var button = ((Button)o);
globalModel.AddToCart.Execute(button.BindingContext);
if (button.BindingContext.GetType() == typeof(Data.Corner))
{
await App.Current.MainPage.DisplayAlert("Shopping Cart", "You've added " + (button.BindingContext as Data.Corner).ItemName + " to your cart.", null, "OK");
}
});
mainGrid.Children.Add(catalogImage, 0, 0);
mainGrid.Children.Add(nameLabel, 0, 1);
mainGrid.Children.Add(materialLabel, 0, 2);
mainGrid.Children.Add(costLabel, 0, 3);
mainGrid.Children.Add(addToCartButton, 0, 4);
return mainGrid;
};
If anyone could point me in the right direction I'd be very grateful!
Interesting. I've just gone through the implementation of the TLSrollview. It looks like there is no recycling of elements and maybe lack some optimization (I can see that only if I debug). I see two options :
option 1 : Create a listview with recycling strategy on. For better performance, set also the row height. One item of your listview would be one row. The advantage of a listview is the performance gain from the recycling strategy (especially on Android). Note that on iOS and Android, it might be better to set it on or not.
option 2 : Create a custom layout. That might be a little overkill.
Trying to show a single point that actually lays on the line of other series. I could select the value in one series and highlight it but I think it would be harder. I choose to make a new lineseries called series2 and put my point in it. My other lineseries called series1 contain the actual points to be plotted.
/// <summary>
/// Streaming plot
/// </summary>
private void InitiateStreamPlot(List<double> time, List<double> sample, params object[] restOfPointsToPlote)
{
myModel = new PlotModel { Title = "Voltage level" };
ss = "New streaming plot is starting" + Environment.NewLine;
series1 = new LineSeries
{
MarkerType = MarkerType.Circle,
StrokeThickness = 1,
MarkerSize = 1,
Smooth = true,
Title = "Voltage level",
CanTrackerInterpolatePoints = false,
};
series2 = new LineSeries
{
Color = OxyColors.LightBlue,
MarkerFill = OxyColors.Blue,
MarkerType = MarkerType.Plus,
MarkerSize = 15,
};
linearAxis1 = new LinearAxis { Position = AxisPosition.Bottom, Title = "Time in nanosec" };
linearAxis2 = new LinearAxis { Position = AxisPosition.Left, Title = "Voltage" };
myModel.Axes.Add(linearAxis1);
myModel.Axes.Add(linearAxis2);
// Show the triggered value on the plot
//series2.Points.Add(new ScatterPoint(timeAtIndex, sampleAtIndex));
//myModel.Series.Add(series2);
if (restOfPointsToPlote.Length > 0)
{
double timeAtIndex = (double)restOfPointsToPlote[0];
double sampleAtIndex = (double)restOfPointsToPlote[1];
series2.Points.Add(new OxyPlot.DataPoint(timeAtIndex, sampleAtIndex));
myModel.Series.Add(series2);
}
for (int i = 0; i < time.Count - 1; i++)
{
series1.Points.Add(new OxyPlot.DataPoint(time[i], sample[i]));
}
myModel.Series.Add(series1);
plotView1.Model = myModel;
sendit = true;
}
The result I see from this plot is just the series1 and no series2 appears. Following is the result :
The plot(chart)
However as you see the point is not shown. when debugging I see that that single point exist. There is always a value in serie1 that is equal to that single point. I have no idea what I'm doing wrong.
I changed the code to following. I believe the reason was the configuration of series2 :
series2 = new LineSeries
{
Color = OxyColors.Red,
MarkerFill = OxyColors.Blue,
MarkerStroke = OxyColors.Red,
MarkerType = MarkerType.Circle,
StrokeThickness = 0,
MarkerSize = 4,
};
Does anyone have a working example of using the new Dot Net Highcharts wrapper and changing the series colour? I just cant get it to change for the life of me, think I must have changed every single color property going. None of them default from the normal palette.
#(Html.Highsoft().Highcharts(
new Highcharts
{
Title = new Title
{
Text = "Picks Grouped By Target And Week Of Year"
},
XAxis = new List<XAxis>
{
new XAxis
{
Categories = WeeksOfYear.ConvertAll<string>(x => x.ToString())
}
},
YAxis = new List<YAxis>
{
new YAxis
{
Min = 0,
Title = new YAxisTitle
{
Text = "Number of picks"
},
StackLabels = new YAxisStackLabels
{
Enabled = true,
Style = new Hashtable
{
{ "fontWeght", "bold" }
}
}
}
},
Legend = new Legend
{
Align = LegendAlign.Right,
X = -30,
VerticalAlign = LegendVerticalAlign.Top,
Y = 25,
Floating = true,
BorderColor = "#CCC",
BorderWidth = 1,
BackgroundColor = "white"
},
Tooltip = new Tooltip
{
Formatter = "formatToolTip"
},
PlotOptions = new PlotOptions
{
Column = new PlotOptionsColumn
{
Stacking = PlotOptionsColumnStacking.Normal,
DataLabels = new PlotOptionsColumnDataLabels
{
Enabled = true,
Color = "#FFFFFF",
Shadow = new Shadow()
{
Enabled = true,
Color = "black",
Width = 10,
OffsetX = 0,
OffsetY = 0
}
}
}
},
Series = new List<Series>
{
new ColumnSeries
{
Name = "Over 45 Min",
Data = #ViewData["StackedColumnOver45Min"] as List<ColumnSeriesData>
},
new ColumnSeries
{
Name = "Under 45 Min",
Data = #ViewData["StackedColumnUnder45Min"] as List<ColumnSeriesData>
}
}
}
, "WeekOfYearSlaStackedColumn")
)
Series color could be set in series as explained in API reference for .NET Highcharts.
...
Series = new List<Series>
{
new ColumnSeries
{
Color = "rgba(165,170,217,1)",
...
for setting colors (anywhere in Highcharts in asp.net) you should use this construction:
using System.Drawing;
Color = ColorTranslator.FromHtml("#DFEEB2"),
I'm currently trying to animate Lights, that are inside the Source property of a CompositeEffect inside a BlendEffect using Windows.UI.Composition. This is my code:
var graphicsEffect = new BlendEffect
{
Mode = BlendEffectMode.Multiply,
Background = new CompositeEffect()
{
Name = "comp",
Mode = Microsoft.Graphics.Canvas.CanvasComposite.Add,
Sources =
{
new PointDiffuseEffect()
{
Name = "Light1",
DiffuseAmount = 1f,
},
new PointDiffuseEffect()
{
Name = "Light2",
DiffuseAmount = 1f,
},
},
},
Foreground = new GaussianBlurEffect()
{
Name = "Blur",
Source = new CompositionEffectSourceParameter("Backdrop"),
BlurAmount = 12f,
BorderMode = EffectBorderMode.Hard,
}
};
The issue is that when I try to animate the position or color of those lights, I'm told that "Animate property refers to an effect not in the graph". Is this even possible? If not, what kind of workaround would there be? I've tried calling Light1.Lightposition, comp.Light1.Lightposition, and comp.Sources.Light1.Lightposition, but none of those work.
Please check your reply in your MSDN thread:
https://social.msdn.microsoft.com/Forums/windowsapps/en-US/65a1f1a0-8c8c-414e-9734-ec5f407b3c6e/uwpanimating-effect-properties-that-are-inside-other-effects-using-windowsuicomposition?forum=wpdevelop.
Thanks.