Change Yaxis Label

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

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???

 

 

 

 

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

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.

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

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

​​

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​

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:

C#:

You can also find my 

Regards,
Danail Vasilev
Telerik