Combine graphs and customize labels

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

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;
}

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

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

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 ?

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();
        }

Hello Abigail,

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

JavaScript:


ASPX:


Regards,
Danail Vasilev
Telerik