Change Yaxis Label

9 posts, 2 answers
  1. Estudios-Electricos
    Estudios-Electricos avatar
    9 posts
    Member since:
    Dec 2014

    Posted 28 Oct 2015 Link to this post

    I need to create a HtmlGraph like the attached image.

    In the Yaxis I need to show  when value =1 => "No Cumplio" and value=2 =>"Cumplio".

    How I can do this?

    There are only 2 values for Yaxis 1 or 2.

     

    thanks

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 29 Oct 2015 Link to this post

    Hi,

    You should use templates for the axis - http://feedback.telerik.com/Project/108/Feedback/Details/118025

    You may also raise the priority of the item by voting on it.

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Estudios-Electricos
    Estudios-Electricos avatar
    9 posts
    Member since:
    Dec 2014

    Posted 29 Oct 2015 Link to this post

    Hello It's does not help me.

    I have the following table from database

    Code  |  days | cumplio

    XXXX         7            1

    YYYY         0             2

    YYYY         0             2 

     

    I need to create a Graph  like the attached image.

    When cumplio = 1 => create a column in red with days as tooltip.

    When cumplio =​2 => create a column in blue  with days as tooltip.​

     

    And put in Yaxis 

    When cumplio = ​1 =>​ "no cumplio"
    When cumplio =​​2 => "cumplio"

     

    How I can do this???

     

     

     

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 30 Oct 2015 Link to this post

    Hello,

    I have already replied to the support ticket that was opened by you on this regards, so that I paste my answer for the rest of the community below:

    These are two questions and you can find my answers below:
        - Change the color of the item based on its value. For a data-bound chart you can add a data source filed with the desired colors and set the series.ColorField property to refer to it. See such an example in this demo - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/custombarcolor/defaultcs.aspx. Another approach is to use functions for the series.color, as illustrated here - http://feedback.telerik.com/Project/108/Feedback/Details/154102. You may also raise the priority of this feedback item.
        - To change the text of y-axes labels based on some condition you can use templates (http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/display-html-and-execute-javascript) or visuals (http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template).    

    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
  6. Estudios-Electricos
    Estudios-Electricos avatar
    9 posts
    Member since:
    Dec 2014

    Posted 30 Oct 2015 in reply to Danail Vasilev Link to this post

    The examples show more than 2 series.

    I need only 2 "Cumplio" or "No Cumplio" according with the values.

    the second ecample

    http://feedback.telerik.com/Project/108/Feedback/Details/154102-add-function-for-series-color-in-radhtmlchart

    It is usefull, but, How I can do this in server side?.

    Because the graph load according with filters.

  7. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 03 Nov 2015 Link to this post

    Hello,

    You can register a JavaScript code from the server - http://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/opening-from-the-server

    The color function is related to the whole series. That means you can have 1, 2, 3 etc., series and each of them has a separate logic for defining the items colors.

    Another approach is to create your chart programmatically - iterate through your data source and create items with particular colors (i.e., BackgroundColor property). See such an example here - http://demos.telerik.com/aspnet-ajax/htmlchart/examples/serversideapi/programmaticcreation/defaultcs.aspx

    The example above treats scatter charts but you can use the same properties from the markup in the code behind as well to create the column chart.

    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
  8. Estudios-Electricos
    Estudios-Electricos avatar
    9 posts
    Member since:
    Dec 2014

    Posted 04 Nov 2015 Link to this post

    hello Danail,

     

    This is my code... when button is clicked...:

     

     System.Data.Entity.Core.Objects.ObjectResult<p_ObtenerGraficoEnsayosHomologacion_Result> lResultados = _eeContexto.p_ObtenerGraficoEnsayosHomologacion(Convert.ToInt16(cbAnioEnsayos.SelectedValue));   

    <-.- this return "Code" | (1 or 2 ) as cumplio | days

     

    1 =>  no cumplio  and I need show the column in Red

    2 => cumplio and I need show the column in Blue...

     

    One code has 1 status ( cumplio or not cumplio) ok?


    Then I get the Series and add every object of list with the correct color!.


      ColumnSeries firstColumnSeries = graficoHomologacion.PlotArea.Series[0] as ColumnSeries;
        firstColumnSeries.Items.Clear();
                graficoHomologacion.PlotArea.XAxis.Items.Clear();


                foreach (p_ObtenerGraficoEnsayosHomologacion_Result oResultado in lResultados)
                {
                    if (oResultado.cumplio == 2)
                    {
                        firstColumnSeries.SeriesItems.Add(oResultado.cumplio, Color.Blue);

                    }
                    else
                    {
                        firstColumnSeries.SeriesItems.Add(oResultado.cumplio, Color.Red);

                    }

                    graficoHomologacion.PlotArea.XAxis.Items.Add(oResultado.codigoEE);

                }


                graficoHomologacion.Legend.Appearance.Visible = false;
                graficoHomologacion.PlotArea.XAxis.DataLabelsField = "codigoEE";

                //graficoHomologacion.DataSource = _eeContexto.p_ObtenerGraficoEnsayosHomologacion(Convert.ToInt16(cbAnioEnsayos.SelectedValue)); 
                graficoHomologacion.DataBind();
    Here I tried to execute js to change value Y from 1 to no Cumplio and 2 to cumplio
                ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", "cambiaY()", true);

     

    Attachted the result on "image1"

     

     

    If I created 2 series like you said me, I got incorrect graph because ever code has only 1 value ( cumplio or not cumplio)

    See image2  please

     

     

     

    I need in Image1, change the Y Values Label by Words.

     

    the HTML

     

    <telerik:RadHtmlChart runat="server" ID="graficoHomologacion" Width="800px" Height="600px">
                                    
                                    <PlotArea>
                                        <Series>

                                            <telerik:ColumnSeries DataFieldY="cumplio">
                                                <Appearance>
                                                    <FillStyle BackgroundColor="Blue" />
                                                </Appearance>
                                                <TooltipsAppearance Color="White" />
                                                <LabelsAppearance Visible="false" />

                                            </telerik:ColumnSeries>
                                          
                                        </Series>
                                        <XAxis>
                                            <LabelsAppearance RotationAngle="90"></LabelsAppearance>
                                            <TitleAppearance Text="Proyectos"></TitleAppearance>
                                        </XAxis>
                                        <YAxis MaxValue="2" MinValue="0" Step="1" >
                                            
                                        </YAxis>
                                    </PlotArea>
                                    <ChartTitle Text="Informe de Ensayos de Homologación"></ChartTitle>

                                </telerik:RadHtmlChart>

     

     JS

         
                function cambiaY() {
                    var chart = null;

                        chart = $("<%= graficoHomologacion.ClientID %>");
                   
                        var options = chart.get_kendoWidget().options;  <-- this is null
                        options.yAxis.labels.template = "#if (value == 1) {# no Cumplio #} else if (value == 2) {# Cumplio #} #";
                        chart.repaint();
                    
                }

    ​​

  9. Estudios-Electricos
    Estudios-Electricos avatar
    9 posts
    Member since:
    Dec 2014

    Posted 04 Nov 2015 Link to this post

    I found the error on telerik Script..

     

    this is the correct

     

       var options = chart._chartObject.options;
                    options.valueAxis.labels.template = "#if(value == 1 ) {# No Cumplio #} else { if(value == 2 ){# Cumplio #} }#";

     

     

    NOT 

    options.yAxis.labels.template​

  10. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 05 Nov 2015 Link to this post

    Hi,

    Please find my comments and suggestions below:

        - To operate with the client-side API of a control you should initially reference its client object through the $find() method. You can read more information on the matter here - http://stackoverflow.com/questions/2726304/whats-the-difference-between-get-and-find-in-javascript

         - valueAxis is used for the y-axis in category series like bar, column, area, etc, while yAxis is used for numeric series like scatter, scatterline and bubble.

         - The provided example currently mixes data-binding with programmatic creation of the chart. I can suggest that you choose either approach
         
    You can find a fully runnable sample on this regards below:

    ASPX:
    <script>
        function pageLoad() {
            cambiaY();
        }
        function cambiaY() {
            var chart = null;
            chart = $find("<%= graficoHomologacion.ClientID %>");
            var options = chart.get_kendoWidget().options;
            options.valueAxis.labels.template = "#if (value == 1) {# no Cumplio #} else if (value == 2) {# Cumplio #} #";
            chart.repaint();
        }
    </script>
    <telerik:RadHtmlChart runat="server" ID="graficoHomologacion" Width="800px" Height="600px">
        <PlotArea>
            <Series>
                <telerik:ColumnSeries DataFieldY="cumplio" ColorField="myColor">
                    <Appearance>
                        <FillStyle BackgroundColor="Blue" />
                    </Appearance>
                    <TooltipsAppearance Color="White" />
                    <LabelsAppearance Visible="false" />
                </telerik:ColumnSeries>
            </Series>
            <XAxis>
                <LabelsAppearance RotationAngle="90"></LabelsAppearance>
                <TitleAppearance Text="Proyectos"></TitleAppearance>
            </XAxis>
            <YAxis MaxValue="2" MinValue="0" Step="1">
            </YAxis>
        </PlotArea>
        <ChartTitle Text="Informe de Ensayos de Homologación"></ChartTitle>
    </telerik:RadHtmlChart>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        graficoHomologacion.DataSource = GetData();
        graficoHomologacion.DataBind();
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("cumplio", typeof(int));
        dt.Columns.Add("myColor", typeof(string));
     
        dt.Rows.Add(1, 2, "red");
        dt.Rows.Add(2, 1, "blue");
        dt.Rows.Add(3, 1, "blue");
     
        return dt;
    }

    You can also find my 

    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