This is a migrated thread and some comments may be shown as answers.

Javascript error with multiline labels

2 Answers 75 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

Johnathan asked on 19 Jun 2017, 08:18 PM

I have a bar chart that has a single series of labels that come from a data source. Some of the labels are too long, and I am trying to wrap the text, as shown in this demo:

http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/multiline-labels

I was able to get the demo to work by just inserting the markup, but when I try to make text wrap in my own code, I get a javascript error. (Unterminated string constant)

I have simplified my code to give an example of what is happening. Here is the markup:

<telerik:RadHtmlChart ID="barChart" Transitions="true" Skin="Silk" Height="500" runat="server">

<ChartTitle>

<Appearance>

<TextStyle Bold="true" FontSize="14" />

</Appearance>

</ChartTitle>

<Legend>

<Appearance Position="Bottom" Visible="false"></Appearance>

</Legend>

<PlotArea>

<XAxis>

<TitleAppearance>

<TextStyle Bold="true" FontSize="12" />

</TitleAppearance>

<LabelsAppearance Visible="true">

<TextStyle Bold="true" FontSize="10" />

</LabelsAppearance>

<MajorGridLines Visible="false" />

<MinorGridLines Visible="false" />

</XAxis>

<YAxis MajorTickType="None">

<TitleAppearance>

<TextStyle Bold="true" FontSize="12" />

</TitleAppearance>

<LabelsAppearance>

<TextStyle Bold="true" FontSize="10" />

</LabelsAppearance>

<MajorGridLines Visible="true" />

<MinorGridLines Visible="false" />

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

Here is the relevant code on the server. I have seen posts from 2013 that said this is not possible, but the 2014 demo implies that you have resolved he issue:

public void CreateChart(ChartEventArgs args)

{

barChart.PlotArea.Series.Clear();

//var ds = _presenter.GenerateChart(args);

barChart.PlotArea.XAxis.Name = "Workflow Step";

barChart.PlotArea.XAxis.DataLabelsField = "WorkflowStep";

AddChartSeries("WorkflowStep", "AvgDaysToCSR", "{0:N2}", Color.FromArgb(245, 234, 105));

var average = new List<ChartRequestTypeResult>();

// Works, but doesn't wrap

//average.Add(new ChartRequestTypeResult { WorkflowStepID = 1, WorkflowStep = "Test Wrap One", AvgDaysToCSR = 1.0 });

//average.Add(new ChartRequestTypeResult { WorkflowStepID = 2, WorkflowStep = "Test Wrap Two", AvgDaysToCSR = 2.0 });

//average.Add(new ChartRequestTypeResult { WorkflowStepID = 3, WorkflowStep = "Test Wrap Three", AvgDaysToCSR = 3.0 });

// Gives error

average.Add(new ChartRequestTypeResult { WorkflowStepID = 1, WorkflowStep = "Test\nWrap\nOne", AvgDaysToCSR = 1.0 });

average.Add(new ChartRequestTypeResult { WorkflowStepID = 2, WorkflowStep = "Test\nWrap\nTwo", AvgDaysToCSR = 2.0 });

average.Add(new ChartRequestTypeResult { WorkflowStepID = 3, WorkflowStep = "Test\nWrap\nThree", AvgDaysToCSR = 3.0 });

barChart.DataSource = average;

barChart.DataBind();

BackgroundColor = Color.FromArgb(208, 212, 204);

}

public void AddChartSeries(string name, string seriesValue, string format, Color color)

{

ColumnSeries cs = new ColumnSeries();

cs.Name = name;

cs.Stacked = false;

cs.Spacing = 0.0;

cs.Gap = 0.2;

cs.DataFieldY = seriesValue;

cs.Appearance.Overlay.Gradient = Gradients.Glass;

cs.Appearance.FillStyle.BackgroundColor = color;

cs.LabelsAppearance.DataFormatString = format;

cs.TooltipsAppearance.DataFormatString = format;

if ((color.R * 2) + (color.G * 3) + color.B < 600)

cs.TooltipsAppearance.Color = Color.FromKnownColor(KnownColor.White);

barChart.PlotArea.Series.Add(cs);

}

2 Answers, 1 is accepted

Accepted

answered on 22 Jun 2017, 02:40 PM

Hi Johnathan,

The face problem is related to the unescaped backslashes in the multiline labels. Adding a simple "@" sign in front of the string will allow you to render them successfully:

average.Add(new ChartRequestTypeResult { WorkflowStepID = 1, WorkflowStep = @"Test\nWrap\nOne", AvgDaysToCSR = 1.0 });

average.Add(new ChartRequestTypeResult { WorkflowStepID = 2, WorkflowStep = @"Test\nWrap\nTwo", AvgDaysToCSR = 2.0 });

average.Add(new ChartRequestTypeResult { WorkflowStepID = 3, WorkflowStep = @"Test\nWrap\nThree", AvgDaysToCSR = 3.0 });

Kind regards,
Vessy
Progress Telerik

Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.