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

Javascript error with multiline labels

2 Answers 14 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Johnathan
Top achievements
Rank 1
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

Sort by
0
Accepted
Vessy
Telerik team
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.
0
Johnathan
Top achievements
Rank 1
answered on 22 Jun 2017, 05:40 PM
Thank you, problem is fixed.
Tags
Chart (HTML5)
Asked by
Johnathan
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Johnathan
Top achievements
Rank 1
Share this question
or