Combine graphs and customize labels

8 posts, 0 answers
  1. abigail
    abigail avatar
    10 posts
    Member since:
    Dec 2015

    Posted 23 Dec 2015 Link to this post

    Hi! it's possible set customize labels for a graph something like the image that I attach
  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 24 Dec 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. abigail
    abigail avatar
    10 posts
    Member since:
    Dec 2015

    Posted 31 Jan in reply to Misho Link to this post

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


  5. abigail
    abigail avatar
    10 posts
    Member since:
    Dec 2015

    Posted 31 Jan in reply to abigail Link to this post

    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
  6. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 03 Feb Link to this post

    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
  7. abigail
    abigail avatar
    10 posts
    Member since:
    Dec 2015

    Posted 03 Feb in reply to Danail Vasilev Link to this post

    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 ?
  8. abigail
    abigail avatar
    10 posts
    Member since:
    Dec 2015

    Posted 03 Feb in reply to Danail Vasilev Link to this post

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

  9. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 08 Feb Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017