syncfusion chart background line will be dotted line - charts

I want my chart backgroud line will be dotted. Which property can i use for dotted in syncfusion? I tried but i coudn't do this. I don't know exactly which propertly will use for dotted line.
Here is my code:
control.AutoTempFileCleanUp = true;
control.OutputFormat = ImageProviderOutputFormat.DiskFile;
control.Model.Series.Clear();
ChartModel chartModel = new ChartModel();
ChartSeries chart = new ChartSeries(yAxisBar1LegendName, ChartSeriesType.Column);
chart.Text = yAxisBar1LegendName;
control.ChartArea.PrimaryXAxis.TickLabelsDrawingMode = ChartAxisTickLabelDrawingMode.UserMode;
// = string.Format("");
control.ChartArea.PrimaryXAxis.Labels.Add(new ChartAxisLabel("", Color.Black, new Font("Arial", 10), 0, "", ChartValueType.Custom));
int counter = 1;
DoubleRange dr = new DoubleRange(1, 100);
foreach (DataRow row in ds.Tables[0].Rows)
{
double bar1Value = Convert.ToDouble(row[yAxisValueColumn1]);
chart.Points.Add(counter, bar1Value);
control.ChartArea.PrimaryXAxis.Labels.Add(new ChartAxisLabel(row["ModuleCode"].ToString(), Color.Black, new Font("Arial", 10), counter, "", ChartValueType.Custom));
counter++;
}
chart.PrepareStyle += new ChartPrepareStyleInfoHandler(series_PrepareStyle);
control.ChartArea.PrimaryXAxis.DrawGrid = false;
control.PrimaryXAxis.GridLineType.ForeColor = Color.DarkGray;
control.PrimaryYAxis.GridLineType.ForeColor = Color.DarkGray;
control.PrimaryXAxis.LineType.ForeColor = Color.DarkGray;
control.PrimaryYAxis.LineType.ForeColor = Color.DarkGray;
control.Text = chartHeader;
control.ChartArea.PrimaryYAxis.Title = yAxisText;
control.ChartArea.PrimaryXAxis.Title = xAxisText;
control.ChartArea.PrimaryXAxis.TitleAlignment = StringAlignment.Center;
control.ChartArea.PrimaryXAxis.IsVisible = true;
control.ChartArea.PrimaryXAxis.LabelAlignment = StringAlignment.Center;
control.ChartArea.PrimaryXAxis.VisibleRange.Min = 0;
control.ChartArea.PrimaryXAxis.VisibleRange.Max = counter;
control.ChartArea.PrimaryXAxis.VisibleRange.Interval = 1;
control.ChartArea.PrimaryYAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Center;
control.ChartArea.PrimaryYAxis.GridDrawMode = ChartAxisGridDrawingMode.Default;
//control.PrimaryXAxis.EdgeLabelsDrawingMode = ChartAxisEdgeLabelsDrawingMode.Center;
control.PrimaryXAxis.Font = new Font("Arial", 10F);
control.PrimaryYAxis.Font = new Font("Arial", 10F);
counter = 0;
foreach (ChartSeries series in control.Series)
{
Color color;
if (counter == 0)
{
color = Color.Green;
else
{
color = Color.Red;
}
series.Style.Interior = new BrushInfo(color);
series.Style.Border.Color = Color.DarkGray;
series.Style.Font.Bold = true;
series.Style.TextColor = Color.Black;
series.Style.TextOrientation = ChartTextOrientation.Left;
series.Style.TextFormat = "{0}";
counter++;
}
control.Width = 650;
control.Series3D = false;
control.ShowLegend = false;
control.BorderStyle = BorderStyle.None;
control.BorderAppearance.SkinStyle = ChartBorderSkinStyle.None;
//control.Legend.Alignment = ChartAlignment.Far;
}
Here is my chart image:

Thanks for using syncfusion products.
We have analyzed your query. If you want to customize the grid lines in axis, then you can use the “DashStyle” property in GridLineType which property is used to change the line style. And you can also specify the grid line style as Dash, DashDot, DashDotDot, Dot, Solid in axis.
And please find the below code snippet
this.ChartWebControl1.PrimaryYAxis.GridLineType.DashStyle = System.Drawing.Drawing2D.DashStyle.DashDot;
And we have also prepared a sample for your reference in ASP.NET classic platform and attached in the below location.
Sample Link : http://www.syncfusion.com/downloads/support/directtrac/160606/ze/Sample1273790903
Please find the output of the sample below:
And also we wish to let you know that the above mentioned property is also applicable for chart control in windows forms, ASP.NET classic and ASP.NET MVC classic platforms.
Please contact us via syncfusion support, if you have any queries related to using syncfusion products.

Related

PdfSharp Charts - Remove Border and Background

I'm using PdfSharp Charts and the chart container have a blue border and a gradient background. I looked for the property that sets those options but no success. I can change multiple things in the chart itself, but not for the container.
How can I remove the border and the background?
Thanks!
Again, I looked for the properties of the chart container but no success.
Here is the code I have so far:
public static Chart ColumnChart(PdfChartValues pdfChartValues)
{
Chart chart = new Chart(ChartType.Column2D);
chart.Font.Size = 7;
chart.PlotArea.FillFormat.Color = XColors.White;
chart.Legend.Docking = DockingType.Bottom;
XSeries xSeries = chart.XValues.AddXSeries();
xSeries.Add(pdfChartValues.XSeriesText);
Series series;
foreach (var item in pdfChartValues.ChartSeriesValues)
{
series = chart.SeriesCollection.AddSeries();
series.Name = item.SeriesName;
series.Add(item.SeriesValues);
series.FillFormat.Color = XColor.FromArgb(item.RedValue, item.GreenValue, item.BlueValue); // Bar color
}
chart.XAxis.HasMajorGridlines = false;
chart.XAxis.MajorTickMark = TickMarkType.None;
chart.XAxis.Title.Caption = pdfChartValues.TitleCaption;
chart.YAxis.MajorTickMark = TickMarkType.None;
chart.YAxis.MajorTick = pdfChartValues.YAxisMajorTick;
chart.YAxis.HasMajorGridlines = true;
chart.YAxis.MajorGridlines.LineFormat.Color = XColors.LightGray;
chart.PlotArea.LineFormat.Color = XColors.LightGray;
chart.PlotArea.LineFormat.Width = 1;
chart.PlotArea.LineFormat.Visible = true;
chart.DataLabel.Type = DataLabelType.Value;
chart.DataLabel.Position = DataLabelPosition.OutsideEnd;
chart.DataLabel.Format = pdfChartValues.SetMoneyFormat ? "$0" : "##,#";
return chart;
}
It seems the colours are hard-coded in ChartFrame.cs.
They cannot yet be set using properties.
Take the PDFsharp source code, change the colours there, and compile.

Getting undefined when selecting html element in Javascript

I have a number of tv display clones loaded onto my page. After the clone is made, it will create a new TV object at the end of the loop definition, but for some reason, when it tries to access the index based canvas element from the page, it returns undefined. I tested that when hardcoding cnvs[0] from inside the constructor, it will return the canvas element. Indexing cnvs1 will return undefined; however, I see the tv has already been cloned before this line is executed. Shouldn't there then be a second canvas element of class ".static" that can be selected? In addition to the code, I attached a screenshot of my debugger screen in Chrome to see what the scope reads following "this.cnv = cnvs1", which should dynamically be cnvs[this.index]. Thanks in advance!
const container = document.getElementsByTagName("main")[0];
const template = document.getElementsByClassName("tv-set")
const cnvs = $(".static");
/**TBD**/
class TV {
constructor (id = "tv-0", name = "Blank Slate") {
this.id = id;
this.name = name;
console.log("NEW TV CREATED: ", this);
console.log("ID: ", this.id);
this.gifArr = gifCarousel_dict[this.name];
console.log("Media selection for this tv: ", this.gifArr);
// this.cnv = $(this.id).find('.static')[0];
// this.cnv = document.querySelector("[data-name=" + CSS.escape(this.id) + "]");
this.index = getSecondPart(id);
// this.cnv = $(".static")[this.index + 1];
this.cnv = cnvs[1];
console.log(this.cnv);
this.cnv.setAttribute("c", this.cnv.getContext("2d"));
this.cnv.setAttribute("cw", this.cnv.offsetWidth);
this.cnv.setAttribute("ch", this.cnv.offsetHeight);
this.staticScrn = this.cnv.getAttribute("c").createImageData(this.cnv.setAttribute("ch"), this.cnv.setAttribute("cw"));
console.log("This canvas element: ", this.cnv);
//Static display
this.isStatic = true;
}
showStatic() {
console.log(`Printing the tv name from the prototype fxn: ${this.name}`);
// this.isStatic = true;
c.clearRect(0, 0, cw, ch);
for (var i = 0; i < staticScrn.data.length; i += 4) {
let shade = 127 + Math.round(Math.random() * 128);
staticScrn.data[0 + i] = shade;
staticScrn.data[1 + i] = shade;
staticScrn.data[2 + i] = shade;
staticScrn.data[3 + i] = 255;
}
c.putImageData(staticScrn, 0, 0);
staticTO = setTimeout(runStatic, 1e3 / staticFPS);
}
}
for (let i = 0; i < phases.length; i++) {
const clone = template[i].cloneNode(true);
clone.setAttribute("id", "tv-" + (i + 1))
console.log("clone id: ", clone.getAttribute("id"))
clone.setAttribute("data-channel", 0)
clone.setAttribute("name", phases[i])
// clone.style.backgroundColor = phases[i].channels[0]
container.appendChild(clone)
var tvName = 'tvPhase' + clone.getAttribute("name");
//Instantiate TV object
window['tvPhase' + clone.getAttribute("name")] = new TV(clone.getAttribute("id"), clone.getAttribute("name"));
console.log("New Tv Created: ", tvName)
}
As I was about to post this question, I caught my bug...but I figured perhaps someone could learn from my stupid mistake! Turns out, it was because of line const cnvs = $(".static"); Setting this constant prior to the cloning operation means it will contain only the first canvas element and cannot be changed even after clones are created since it's a constant (face palm). The solution, of course, is to just define this.cnv = $(".static")[this.index]; directly or set the global cnvs as a var/let cnvs, still wrapping my head around when to use which.

How to add text on desired coordinates on new word file using openxml

I want to create .docx file using openxml and add text on desired coordinates(location) on each page of the file. Is there any way in openxml to adjust the text. I am using the following snippet:
WordprocessingDocument doc = WordprocessingDocument.Create("E:\\test11.docx", DocumentFormat.OpenXml.WordprocessingDocumentType.Document);
{
MainDocumentPart mainPart = doc.AddMainDocumentPart();
mainPart.Document = new Document();
Body body = mainPart.Document.AppendChild(new Body());
Paragraph para = body.AppendChild(new Paragraph());
ParagraphProperties oParagraphProperties = para.AppendChild(new ParagraphProperties());
Run run = para.AppendChild(new Run());
Text tt = new Text(str);
run.AppendChild(tt);
RunProperties runProp = new RunProperties(); // Create run properties.
RunFonts runFont = new RunFonts() { Ascii = "Cambria(Headings)", HighAnsi = "Cambria(Headings)" };
Bold bold = new Bold();
DocumentFormat.OpenXml.Wordprocessing.Color Color1 = new DocumentFormat.OpenXml.Wordprocessing.Color() { Val = "0EBFE9" };
Italic ita = new Italic();
runProp.Append(bold);
runProp.Append(Color1);
runProp.Append(ita);
FontSize size = new FontSize();
size.Val = new StringValue((fontSize * 2).ToString()); // 48 half-point font size
runProp.Append(runFont);
runProp.Append(size);
run.PrependChild<RunProperties>(runProp);
}
Using this I was able to add text on .docx file, but not on desired coordinate location. Can someone help with this?
Thanks.
I found a way to add text to a coordinate on the page of a Word file. I started with your generated Word file and using Word, I added a simple TextBox (Insert->Text->TextBox). I generated the code for the added TextBox using the Productivity Tool. (Note: as of this writing, the latest version of the SDK is now 2.5, which is recommended for this to work).
Add the following method to your class above:
private static void PlaceTextAtCoordinate(Paragraph para, string text, double xCoordinate, double uCoordinate)
{
var picRun = para.AppendChild(new Run());
Picture picture1 = picRun.AppendChild(new Picture());
Shapetype shapetype1 = new Shapetype() { Id = "_x0000_t202", CoordinateSize = "21600,21600", OptionalNumber = 202, EdgePath = "m,l,21600r21600,l21600,xe" };
Stroke stroke1 = new Stroke() { JoinStyle = StrokeJoinStyleValues.Miter };
Path path1 = new Path() { AllowGradientShape = true, ConnectionPointType = ConnectValues.Rectangle };
shapetype1.Append(stroke1);
shapetype1.Append(path1);
Shape shape1 = new Shape() { Id = "Text Box 2", Style = string.Format("position:absolute;margin-left:{0:F1}pt;margin-top:{1:F1}pt;width:187.1pt;height:29.7pt;z-index:251657216;visibility:visible;mso-wrap-style:square;mso-width-percent:400;mso-height-percent:200;mso-wrap-distance-left:9pt;mso-wrap-distance-top:3.6pt;mso-wrap-distance-right:9pt;mso-wrap-distance-bottom:3.6pt;mso-position-horizontal-relative:text;mso-position-vertical-relative:text;mso-width-percent:400;mso-height-percent:200;mso-width-relative:margin;mso-height-relative:margin;v-text-anchor:top", xCoordinate, uCoordinate), Stroked = false };
TextBox textBox1 = new TextBox() { Style = "mso-fit-shape-to-text:t" };
TextBoxContent textBoxContent1 = new TextBoxContent();
Paragraph paragraph2 = new Paragraph();
Run run2 = new Run();
Text text2 = new Text();
text2.Text = text;
run2.Append(text2);
paragraph2.Append(run2);
textBoxContent1.Append(paragraph2);
textBox1.Append(textBoxContent1);
TextWrap textWrap1 = new TextWrap() { Type = WrapValues.Square };
shape1.Append(textBox1);
shape1.Append(textWrap1);
picture1.Append(shapetype1);
picture1.Append(shape1);
}
The following usings were found in my class - your list may be different - but I wanted to detail them here just in case.
using DocumentFormat.OpenXml;
using DocumentFormat.OpenXml.Packaging;
using DocumentFormat.OpenXml.Vml;
using DocumentFormat.OpenXml.Vml.Office;
using DocumentFormat.OpenXml.Vml.Wordprocessing;
using DocumentFormat.OpenXml.Wordprocessing;
Finally, add the following 2 calls to the very end of your method above:
PlaceTextAtCoordinate(para, "Text at 90.1,90.1", 90.1, 90.1);
PlaceTextAtCoordinate(para, "Text at 120.5,120.5", 120.1, 120.1);
and your Word Doc will look like the following:

How to highlight Amchart area using guide, programmatically

I am trying to highlight area on Amcharts but unable to do so with help of guide. I referred an example from here below is the code which is not working however if I add a line guide it works.
Here is the JSFiddle code snippet
http://jsfiddle.net/GreyCells/d1ywab37/
var guide1 = new AmCharts.Guide();
guide1.category = "2007-01-01";
guide1.toCategory = "2008-01-01";
guide1.lineColor = "#CC0000";
guide1.lineAlpha = 1;
guide1.fillAlpha = 0.2;
guide1.fillColor = "#CC0000";
guide1.dashLength = 2;
guide1.inside = true;
guide1.labelRotation = 90;
guide1.label = "test";
guide1.above = true;
stockPanel1.categoryAxis.addGuide(guide1);
You have two problems - first, amstock.js is not included, and second, with stock chart, which is date-based you should use guide.date and guide.toDate instead of category and toCategory:
guide1.date = new Date(2007, 0, 1);
guide1.toDate = new Date(2008, 0, 1);
http://jsfiddle.net/d1ywab37/1/
Note, months are zero based in JS.

Using PdfWriter I cannot get rid of what appears to be a table border

Guys, this should be simple but pulling my hair out.Tried all variations and some places online say I should use cell events instead. I just want to switch off the black border. Can anyone help, seen this before? Many thanks in advance.
//Paragraph paymentLinePara;
//paymentLinePara = new Paragraph("\n"); UAT removed, js
//document.Add(paymentLinePara);
Table paymentLineTable = new Table(1);
paymentLineTable.SetAlignment("LEFT");
//build up headers
//Cell lineHeader = new Cell(new Phrase("xxx", font_small));
//lineHeader.Header = true;
//lineHeader.SetHorizontalAlignment("LEFT");
//lineHeader.SetVerticalAlignment("CENTER");
//lineHeader.BackgroundColor = new Color(0xC0, 0xC0, 0xC0);
//paymentLineTable.AddCell(lineHeader);
//add detail rows
foreach (var item in paymentItem.PaymentItemLines)
{
paymentLineTable.DefaultCell.BackgroundColor = Color.WHITE;
if (item.Display)
paymentLineTable.AddCell(new Phrase(item.Line, font_small));
}
paymentLineTable.Padding = 1;
paymentLineTable.DefaultCellBorderColor = Color.WHITE;
paymentLineTable.DefaultCellBorder = -1;
paymentLineTable.DefaultCellBorderWidth = 0;
paymentLineTable.Border = Rectangle.NO_BORDER;
document.Add(paymentLineTable);
This is iTextSharp, right? Try creating an actual Cell object:
Cell cell;
foreach (var item in paymentItem.PaymentItemLines)
{
cell = new Cell(new Phrase(item.Line, font_small));
cell.Border = 0;
if (item.Display)
paymentLineTable.AddCell(cell);
}
Comment out that default cell stuff temporarily.