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

Combine graphs and customize labels

7 Answers 136 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
abigail
Top achievements
Rank 2
abigail asked on 24 Dec 2015, 04:14 AM
Hi! it's possible set customize labels for a graph something like the image that I attach

7 Answers, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 24 Dec 2015, 09:18 AM
Hi,

It is possible to combine more than one type of series in RadHtmlChart and this approach is shown on the following demo:
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/mixedchartseries/defaultcs.aspx
Here is also a BarChart example that is similar to the chart in the attachment:
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/charttypes/barchart/defaultcs.aspx

In addition RadHtmlChart offers client-side templates for the labels and tooltips used in the series.
More information can be found in the following resources:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview
http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/clienttemplates/defaultcs.aspx

I hope you will find this information useful.

Regards,
Misho
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
abigail
Top achievements
Rank 2
answered on 01 Feb 2016, 02:44 AM

Hi! I try to follow your samples and documentation, but I don't know why the graph shows a extra y axis and I don't find a way to customize the y values. this is my code :

            <div class="testResult">
                 <ul class="prueba">
                      <li class="prueba3"><a href="default.asp" class="prueba2" >Deficiente</a></li>
                      <li class="prueba3"><a href="news.asp" class="prueba2">Bajo</a></li>
                      <li class="prueba3"><a href="contact.asp" class="prueba2" >Insuficiente</a></li>
                      <li class="prueba3"><a href="about.asp" class="prueba2">Normal</a></li>
                      <li class="prueba3"><a href="news.asp" class="prueba2" >Suficiente</a></li>
                      <li class="prueba3"><a href="contact.asp" class="prueba2">Alto</a></li>
                      <li class="prueba3"><a href="about.asp" class="prueba2" >Sobresaliente</a></li>
                </ul> 
                <telerik:RadHtmlChart runat="server" ID="ChartWithBarsAndLineSeries" Width="700px" Height="200px">
                <PlotArea>
                    <XAxis AxisCrossingValue="0" Color="#b3b3b3"  MinorTickType="None"
                            Reversed="False" MaxValue="140" MinValue="0" Step="20" MajorTickType="None"
                       Type="Category">
                    <Items>
                        <telerik:AxisItem LabelText="Atención"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Organización"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Planeación"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Abstracción"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Análisis"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Concentración"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Sintesis"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Vocabulario"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Juicio"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="Información"></telerik:AxisItem>
                    </Items>
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Mirror="false" >
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="12" Italic="false"
                            Margin="0" Padding="0" />
                    </LabelsAppearance>
                    <MajorGridLines Visible="false"></MajorGridLines>
                    <MinorGridLines Visible="false"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="Years" Visible="false">
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="16" Italic="false"
                            Margin="2" Padding="2" />
                    </TitleAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="4" MajorTickType="Outside" NarrowRange="false"
                    MinorTickSize="1" MinorTickType="Outside" Reversed="false">
                    <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Mirror="false" Visible="false" >
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="12" Italic="false"
                            Margin="0" Padding="0" />
                    </LabelsAppearance>
                
                    <MajorGridLines Color="#808080" Width="1"></MajorGridLines>
                    <MinorGridLines Visible="False"></MinorGridLines>
                    <TitleAppearance Position="Center" RotationAngle="0" Text="" Visible="false">
                        <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="16" Italic="false"
                            Margin="2" Padding="2" />
                    </TitleAppearance>
                </YAxis>
                    <Series>
                        <telerik:BarSeries>
                             <LabelsAppearance Visible="false">
                                </LabelsAppearance>
                                <TooltipsAppearance Color="White" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="90" />
                                <telerik:CategorySeriesItem Y="75" />
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="20" />
                                <telerik:CategorySeriesItem Y="40" />
                                <telerik:CategorySeriesItem Y="60" />
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="100" />
                                <telerik:CategorySeriesItem Y="120" />
                                <telerik:CategorySeriesItem Y="140" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:BarSeries>
                        <telerik:LineSeries>                            
                            <LabelsAppearance Visible="false">
                                </LabelsAppearance>
                                <TooltipsAppearance Color="White" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="50" />
                                <telerik:CategorySeriesItem Y="60" />
                                <telerik:CategorySeriesItem Y="75" />
                                <telerik:CategorySeriesItem Y="90" />
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="50" />
                                <telerik:CategorySeriesItem Y="60" />
                                <telerik:CategorySeriesItem Y="75" />
                                <telerik:CategorySeriesItem Y="90" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                            
                        </telerik:LineSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
            </telerik:RadHtmlChart>
            </div>

 

.testResult
{
    width: 500px;
    height: 400px;
    float:left;
}
.testResult-YLabel
{
    position: absolute; 
    left: 370px;
    text-align:center;

}
.prueba {
    left:100px;
   list-style-type: none;
    margin: 0;
    margin-left:95px;
    padding: 0;
    overflow: hidden;
    width:600px;
    background-color: #333;
}
.prueba3 {
 float: left;
}
.prueba2 {
    display: block;
    color: white;
    text-align: center;
    padding: 0px 0px;
    width:75px;
    text-decoration: none;
    text-align:center;
}


0
abigail
Top achievements
Rank 2
answered on 01 Feb 2016, 02:52 AM
this is the link for the code http://apis3445-001-site1.1tempurl.com/Applicant/TestResult.aspx, for example if one of the bars is less than 140 the major tick has more width so the custom labels doesn't show correctly
0
Danail Vasilev
Telerik team
answered on 03 Feb 2016, 03:41 PM
Hello Abigail,

I am not allowed to open the provided URL as it is detected as a threat. The provided example, however, renders like that on my side - http://screencast.com/t/kVrVVCuw. As you can see there is only a single y-axis. If you want, however, to hide it you can simply set the YAxis.Visible property to false.

I am attaching the example I have made test with to this post.

You can also use templates for the y-axes labels - http://feedback.telerik.com/Project/108/Feedback/Details/118025

Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
abigail
Top achievements
Rank 2
answered on 04 Feb 2016, 05:05 AM
ok thank you and for the other issue I see a extra y axis value in my example the max value is 140 but in the graph bar add a extra y value to show for example 160, how I set the graph bar to only shows 140 y axis ?
0
abigail
Top achievements
Rank 2
answered on 04 Feb 2016, 05:15 AM

I review the link but I don't know how add an and  in the javascript sintaxis and set the if like a case statement this is my try

 <script>
        function pageLoad() {
            var chart = $find("<%=ChartWithBarsAndLineSeries.ClientID%>");
            chart.get_kendoWidget().options.valueAxis.labels.template = "#if(value>0 and value<20) {#  #} else if(value<=20)  {# deficiente#} else {# Bajo #}#";
            chart.repaint();
        }

0
Danail Vasilev
Telerik team
answered on 08 Feb 2016, 12:35 PM
Hello Abigail,

I would suggest that you set the yaxis labels visible property to true and replace "and" with "&&" operand in the template:

JavaScript:

<script>
    function pageLoad() {
        var chart = $find("<%=ChartWithBarsAndLineSeries.ClientID%>");
        chart.get_kendoWidget().options.valueAxis.labels.template = "#if(value>0 && value<20) {#  #} else if(value<=20)  {# deficiente#} else {# Bajo #}#";
        chart.repaint();
     }
</script>

ASPX:
<telerik:RadHtmlChart runat="server" ID="ChartWithBarsAndLineSeries" Width="700px" Height="200px">
                <PlotArea>
                    <XAxis AxisCrossingValue="0" Color="#b3b3b3" MinorTickType="None"
                        Reversed="False" MaxValue="140" MinValue="0" Step="20" MajorTickType="None"
                        Type="Category">
                        <Items>
                            <telerik:AxisItem LabelText="Atención"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Organización"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Planeación"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Abstracción"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Análisis"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Concentración"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Sintesis"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Vocabulario"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Juicio"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Información"></telerik:AxisItem>
                        </Items>
                        <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Mirror="false">
                            <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="12" Italic="false"
                                Margin="0" Padding="0" />
                        </LabelsAppearance>
                        <MajorGridLines Visible="false"></MajorGridLines>
                        <MinorGridLines Visible="false"></MinorGridLines>
                        <TitleAppearance Position="Center" RotationAngle="0" Text="Years" Visible="false">
                            <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="16" Italic="false"
                                Margin="2" Padding="2" />
                        </TitleAppearance>
                    </XAxis>
                    <YAxis AxisCrossingValue="0" Color="#b3b3b3" MajorTickSize="4" MajorTickType="Outside" NarrowRange="false"
                        MinorTickSize="1" MinorTickType="Outside" Reversed="false">
                        <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Mirror="false" Visible="true">
                            <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="12" Italic="false"
                                Margin="0" Padding="0" />
                        </LabelsAppearance>
 
                        <MajorGridLines Color="#808080" Width="1"></MajorGridLines>
                        <MinorGridLines Visible="False"></MinorGridLines>
                        <TitleAppearance Position="Center" RotationAngle="0" Text="" Visible="false">
                            <TextStyle Bold="false" FontFamily="Helvetica" Color="Black" FontSize="16" Italic="false"
                                Margin="2" Padding="2" />
                        </TitleAppearance>
                    </YAxis>
                    <Series>
                        <telerik:BarSeries>
                            <LabelsAppearance Visible="false">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="90" />
                                <telerik:CategorySeriesItem Y="75" />
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="20" />
                                <telerik:CategorySeriesItem Y="40" />
                                <telerik:CategorySeriesItem Y="60" />
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="100" />
                                <telerik:CategorySeriesItem Y="120" />
                                <telerik:CategorySeriesItem Y="140" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
                        </telerik:BarSeries>
                        <telerik:LineSeries>
                            <LabelsAppearance Visible="false">
                            </LabelsAppearance>
                            <TooltipsAppearance Color="White" />
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="50" />
                                <telerik:CategorySeriesItem Y="60" />
                                <telerik:CategorySeriesItem Y="75" />
                                <telerik:CategorySeriesItem Y="90" />
                                <telerik:CategorySeriesItem Y="80" />
                                <telerik:CategorySeriesItem Y="50" />
                                <telerik:CategorySeriesItem Y="60" />
                                <telerik:CategorySeriesItem Y="75" />
                                <telerik:CategorySeriesItem Y="90" />
                            </SeriesItems>
                            <TooltipsAppearance Color="White" />
 
                        </telerik:LineSeries>
                    </Series>
                </PlotArea>
                <Legend>
                    <Appearance Visible="false" />
                </Legend>
            </telerik:RadHtmlChart>


Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart (HTML5)
Asked by
abigail
Top achievements
Rank 2
Answers by
Misho
Telerik team
abigail
Top achievements
Rank 2
Danail Vasilev
Telerik team
Share this question
or