 |  |
shipments
Chart generation
String chartJS;
String chartCode;
String chartResize;
String supportUnit;
string chartName;
[Parameter]
public string CType { get; set; }
protected override async Task OnInitializedAsync()
{
int chartType = Convert.ToInt32(CType);
Steema.TeeChart.TChart tChart = new TChart();
Points points1 = new Points(tChart.Chart);
Points points2 = new Points(tChart.Chart);
//setup some datetime data
double[] dates = new double[] { new DateTime(2019, 9, 1).ToOADate(),new DateTime(2019, 9, 15).ToOADate(), new DateTime(2019, 10, 1).ToOADate()
, new DateTime(2019, 10, 15).ToOADate(), new DateTime(2019, 11, 1).ToOADate()
, new DateTime(2019, 11, 15).ToOADate(), new DateTime(2019, 12, 1).ToOADate()
, new DateTime(2019, 12, 15).ToOADate(), new DateTime(2020, 1, 1).ToOADate()
, new DateTime(2020, 1, 15).ToOADate(), new DateTime(2020, 2, 1).ToOADate()
, new DateTime(2020, 2, 15).ToOADate(), new DateTime(2020, 3, 1).ToOADate(), new DateTime(2020, 3, 15).ToOADate()
, new DateTime(2020, 4, 1).ToOADate(), new DateTime(2020, 4, 15).ToOADate(), new DateTime(2020, 5, 1).ToOADate()
, new DateTime(2020, 5, 15).ToOADate(), new DateTime(2020, 6, 1).ToOADate()
, new DateTime(2020, 6, 15).ToOADate(), new DateTime(2020, 7, 1).ToOADate()
, new DateTime(2020, 7, 15).ToOADate(), new DateTime(2020, 8, 1).ToOADate(), new DateTime(2020, 8, 15).ToOADate()
, new DateTime(2020, 9, 1).ToOADate(), new DateTime(2020, 9, 15).ToOADate(), new DateTime(2020, 10, 1).ToOADate()
, new DateTime(2020, 10, 15).ToOADate() };
for (int i = 0; i < dates.Length; i++)
dates[i] = MilliTimeStamp(DateTime.FromOADate(dates[i]));
points1.Title = "Apples";
points1.Add(dates, new double[] { 5, 3, 2, 7, 1, 6, 4, 5, 1, 0, 10, 7, 11, 15, 12, 21, 17, 15, 19, 24, 21, 11, 15, 21, 19, 17, 20, 23 });
points2.Title = "Pears";
points2.Add(dates, new double[] { 7, 1, 5, 1, 0, 10, 6, 3, 2, 7, 11, 4, 5, 3, 4, 5, 1, 5, 11, 15, 16, 14, 14, 13, 12, 15, 17, 19 });
chartName = "shipments";
tChart.Export.Image.JScript.ChartName = chartName;
var customCode = new List<string>();
customCode.Add("setupClientChart(" + chartName + ");");
tChart.Export.Image.JScript.CustomCode = customCode.ToArray();
MemoryStream ms = new MemoryStream();
tChart.Export.Image.JScript.Width = 1400; //start dims
tChart.Export.Image.JScript.Height = 300;
tChart.Export.Image.JScript.DoFullPage = false; //inline, no page <html> header tags
tChart.Export.Image.JScript.Save(ms);
supportUnit = "<script src=\"js/shipments.js\" type=\"text/javascript\"></script>";
ms.Position = 0;
StreamReader reader = new StreamReader(ms);
//setup our chart name, here 'dynoChartName'.
string result = "<script> var " + chartName + "; " + reader.ReadToEnd() + "</script>";
chartJS = await Task.FromResult(result);
}
Add a simple Average curve in Javascript
var enableCursor = false; function setupClientChart(aChart) { //function series var avg = new Tee.Line(); avg.title = "Average"; var avgVals = new Array(); aChart.title.visible = false; aChart.axes.bottom.datetime = true; aChart.axes.bottom.labels.dateFormat = "shortDate"; aChart.series.items[0].dateFormat = "shortDate"; for (var i = 0; i < aChart.series.items[0].data.x.length; i++) { aChart.series.items[0].data.x[i] = new Date(aChart.series.items[0].data.x[i]); avgVals[i] = (aChart.series.items[0].data.values[i] + aChart.series.items[1].data.values[i]) / 2; } avg.data.values = avgVals; avg.data.x = aChart.series.items[0].data.x; avg.format.stroke.size = 2; avg.smooth = 0.5; aChart.addSeries(avg); //tooltip tip = new Tee.ToolTip(aChart); tip.render = "dom"; tip.findPoint = false; tip.domStyle = "padding-left:8px; padding-right:8px; padding-top:0px; padding-bottom:4px; margin-left:5px; margin-top:0px; "; tip.domStyle = tip.domStyle + "background-color:#FCFCFC; border-radius:4px 4px; color:#FFF; "; tip.domStyle = tip.domStyle + "border-style:solid;border-color:#A3A3AF;border-width:1px; z-index:1000;"; aChart.tools.add(tip); tip.onhide = function () { scaling = 0; poindex = -1; } var t = new Tee.CursorTool(aChart); t.direction = "vertical"; tip.onshow = function (tool, series, index) { if (!enableCursor) { aChart.tools.add(t); enableCursor = true; } } tip.ongettext = function (tool, text, series, index) { var t, s = "", ser; for (t = 0; t < aChart.series.count(); t++) { if (t > 0) s += "<br/>"; ser = aChart.series.items[t]; s += '<font face="verdana" color="darkorange" size="1"><b>' + ser.title + ':</b></font> <font face="verdana" color="red" size="1">' + ser.data.values[index].toFixed(2) + '</font>'; } //console.log(index); return s; } aChart.applyTheme("minimal"); //animation animation = new Tee.SeriesAnimation(); animation.duration = 1500; animation.kind = "each"; fadeAnimation = new Tee.FadeAnimation(); fadeAnimation.duration = 500; fadeAnimation.fade.series = true; fadeAnimation.fade.marks = true; animation.mode = "linear"; fadeAnimation.mode = "linear"; animation.items.push(fadeAnimation); animation.animate(aChart); }