We Keep Coding

How to disable animations on Highcharts Dotnet C# MVC?

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

Trying to use a non-static object in a List of objects

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;

Plot One point along with other lines in oxyplot C#

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,
};

xamarin forms add duplicate stacklayout object to a scrollView

Introduction
I am new to C# programming, and have just started learning Xamarin Forms. I'm using Xamarin in Visual Studio 2017 on Windows to make a cross-platform app.
Current Situation
I have created a TabbedPage called Buy,it has a contentPage called BuyAnimals.
The ContentPage needs to have a ScrollView which has a single StackLayout as its child.
The StackLayout has 3 children which are Frames.
Inside each frame, there's supposed to be a StackLayout called animalStack.
The animalStack has many children made from StackLayout.
The Problem.
If I use that same animalStack as the content for each of the three Frames, only the last frame displays the contents of the animalStack while the other two frames show nothing.
Why aren't the other frames showing a duplicate of the information being show in the last frame? How can I make them show the information?
My code is as show below.
`public partial class Buy : TabbedPage
{
public Buy ()
{
InitializeComponent();
var animalItemIdStack = new StackLayout
{
Children = {
new Label { Text = "Post ID: "},
new Label { Text = "Animal ID"}
},
Orientation = StackOrientation.Horizontal
};
var animalUserIdStack = new StackLayout
{
Children = {
new Label { Text = "user ID: "},
new Label { Text = "Posting userID"}
},
Orientation = StackOrientation.Horizontal
};
var animalBreedStack = new StackLayout
{
Children = {
new Label { Text = "Breed: "},
new Label { Text = "Animal's breed"}
},
Orientation = StackOrientation.Horizontal
};
var animalGenderStack = new StackLayout
{
Children = {
new Label { Text = "Gender: "},
new Label { Text = "Animal's gender"}
},
Orientation = StackOrientation.Horizontal
};
var animalAgeStack = new StackLayout
{
Children = {
new Label { Text = "Age: "},
new Label { Text = "Animal's age"}
},
Orientation = StackOrientation.Horizontal
};
var animalColorStack = new StackLayout
{
Children = {
new Label { Text = "Color: "},
new Label { Text = "Animal's color"}
},
Orientation = StackOrientation.Horizontal
};
var animalPriceStack = new StackLayout
{
Children = {
new Label { Text = "Price: "},
new Label { Text = "Animal's price"}
},
Orientation = StackOrientation.Horizontal
};
var animalLocationStack = new StackLayout
{
Children = {
new Label { Text = "Location: "},
new Label { Text = "Animal owner's location"}
},
Orientation = StackOrientation.Horizontal
};
var animalEmailStack = new StackLayout
{
Children = {
new Label { Text = "Location: "},
new Label { Text = "Animal's location"}
},
Orientation = StackOrientation.Horizontal
};
var animalPhoneStack = new StackLayout
{
Children = {
new Label { Text = "Phone: "},
new Label { Text = "Animal owner's phone"}
},
Orientation = StackOrientation.Horizontal
};
var animalDatePostedStack = new StackLayout
{
Children = {
new Label { Text = "Posted: "},
new Label { Text = "Posted date"}
},
Orientation = StackOrientation.Horizontal
};
var animalLastEditStack = new StackLayout
{
Children = {
new Label { Text = "Last Edit: "},
new Label { Text = "Last Edited date"}
},
Orientation = StackOrientation.Horizontal
};
var animalStack = new StackLayout
{
Children =
{
animalItemIdStack,
animalUserIdStack,
animalBreedStack,
animalGenderStack,
animalAgeStack,
animalColorStack,
animalPriceStack,
animalLocationStack,
animalEmailStack,
animalEmailStack,
animalPhoneStack,
animalDatePostedStack,
animalLastEditStack
},
Orientation = StackOrientation.Vertical
};
var animalFrame = new Frame();
animalFrame.Content = animalStack;
var animalFrame2 = new Frame();
animalFrame2.Content = animalStack;
var animalFrame3 = new Frame();
animalFrame3.Content = animalStack;
var animalFullStack = new StackLayout();
animalFullStack.Children.Add(animalFrame);
animalFullStack.Children.Add(animalFrame2);
animalFullStack.Children.Add(animalFrame3);
var animalScrollView = new ScrollView();
animalScrollView.Content = animalFullStack;
BuyAnimals.Content = animalScrollView;
}
}`
I'd really appreciate your input.
Thanks.

Seems that is it what you wanna do:
public partial class Buy (...){
InitalizeComponent();
Content = GetContent();
}
public View GetContent()
{
var animalItemIdStack = new StackLayout
{
Children = {
new Label { Text = "Post ID: "},
new Label { Text = "Animal ID"}
},
Orientation = StackOrientation.Horizontal
};
var animalUserIdStack = new StackLayout
{
Children = {
new Label { Text = "user ID: "},
new Label { Text = "Posting userID"}
},
Orientation = StackOrientation.Horizontal
};
var animalBreedStack = new StackLayout
{
Children = {
new Label { Text = "Breed: "},
new Label { Text = "Animal's breed"}
},
Orientation = StackOrientation.Horizontal
};
var animalGenderStack = new StackLayout
{
Children = {
new Label { Text = "Gender: "},
new Label { Text = "Animal's gender"}
},
Orientation = StackOrientation.Horizontal
};
var animalAgeStack = new StackLayout
{
Children = {
new Label { Text = "Age: "},
new Label { Text = "Animal's age"}
},
Orientation = StackOrientation.Horizontal
};
var animalColorStack = new StackLayout
{
Children = {
new Label { Text = "Color: "},
new Label { Text = "Animal's color"}
},
Orientation = StackOrientation.Horizontal
};
var animalPriceStack = new StackLayout
{
Children = {
new Label { Text = "Price: "},
new Label { Text = "Animal's price"}
},
Orientation = StackOrientation.Horizontal
};
var animalLocationStack = new StackLayout
{
Children = {
new Label { Text = "Location: "},
new Label { Text = "Animal owner's location"}
},
Orientation = StackOrientation.Horizontal
};
var animalEmailStack = new StackLayout
{
Children = {
new Label { Text = "Location: "},
new Label { Text = "Animal's location"}
},
Orientation = StackOrientation.Horizontal
};
var animalPhoneStack = new StackLayout
{
Children = {
new Label { Text = "Phone: "},
new Label { Text = "Animal owner's phone"}
},
Orientation = StackOrientation.Horizontal
};
var animalDatePostedStack = new StackLayout
{
Children = {
new Label { Text = "Posted: "},
new Label { Text = "Posted date"}
},
Orientation = StackOrientation.Horizontal
};
var animalLastEditStack = new StackLayout
{
Children = {
new Label { Text = "Last Edit: "},
new Label { Text = "Last Edited date"}
},
Orientation = StackOrientation.Horizontal
};
var animalStack = new StackLayout
{
Children =
{
animalItemIdStack,
animalUserIdStack,
animalBreedStack,
animalGenderStack,
animalAgeStack,
animalColorStack,
animalPriceStack,
animalLocationStack,
animalEmailStack,
animalEmailStack,
animalPhoneStack,
animalDatePostedStack,
animalLastEditStack
},
Orientation = StackOrientation.Vertical
};
var animalFrame = new Frame();
animalFrame.Content = animalStack;
var listView = new ListView();
listView.ItemTemplate = new DataTemplate(() =>
{
return new ViewCell { View = animalFrame };
});
listView.ItemsSource = new List<object>()
{
new object(),
new object(),
new object(),
};
var contentStack = new StackLayout();
contentStack.Children.Add(listView);
return contentStack;
}
You'll need to complement this method with bindings.
See this article about bindings and this one about listview templating.
I hope it helps you.

Xamarin ViewCell: how to turn off > touch action?

When using ViewCell with TableView it shows a right arrow > (circled in red) and the whole cell can be touched - I suppose to select it and slide a new page from right to left to "drill into details".
Can someone advise on how to disable the display of > ?
Looks that ViewCell.IsEnabled = false turns off the touch action.
Here is some code in my class deriving from ContentPage that creates the table section:
public class SamplePage : ContentPage
{
public SamplePage()
{
var gridLengthStar = new GridLength(1, GridUnitType.Star);
// GRIDSAMPLE CODE
var gridSample = new Grid
{
RowDefinitions =
{
new RowDefinition {Height = GridLength.Auto},
new RowDefinition {Height = GridLength.Auto}
},
Padding = new Thickness(20, 20, 20, 20),
ColumnDefinitions =
{
new ColumnDefinition {Width = gridLengthStar},
new ColumnDefinition {Width = gridLengthStar}
},
};
gridSample.Children.Add ( new Label() { Text = "Data1" }, 0, 0);
gridSample.Children.Add ( new Label() { Text = "Data2" }, 1, 0);
gridSample.Children.Add ( new Label() { Text = "Data3" }, 0, 1);
gridSample.Children.Add ( new Label() { Text = "Data4" }, 1, 1);
var tableView = new TableView
{
HasUnevenRows = true,
Intent = TableIntent.Form,
};
tableView.Root = new TableRoot
{
new TableSection("SECTION TITLE")
{
(new ViewCell {View = gridSample, IsEnabled = false})
}
};
Content = new StackLayout()
{
Children = { tableView } ,
Orientation = StackOrientation.Vertical,
VerticalOptions = LayoutOptions.Start,
Spacing = 10
};
}
}

That arrow can be shown on iOS if you set
Accessory = UITableViewCellAccessory.DisclosureIndicator;
in your UITableViewCell.
Xamarin.Forms usually doesn't set this, so the arrow should not be shown. If it is there, then you have some renderer, Effect or other component which sets it in the iOS code.