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

Change Yaxis Label

8 Answers 101 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Estudios-Electricos
Top achievements
Rank 1
Estudios-Electricos asked on 28 Oct 2015, 12:52 PM

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

8 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 29 Oct 2015, 12:13 PM
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
0
Estudios-Electricos
Top achievements
Rank 1
answered on 29 Oct 2015, 01:16 PM

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

 

 

 

 

0
Danail Vasilev
Telerik team
answered on 30 Oct 2015, 10:41 AM
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
0
Estudios-Electricos
Top achievements
Rank 1
answered on 30 Oct 2015, 11:32 AM

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.

0
Accepted
Danail Vasilev
Telerik team
answered on 03 Nov 2015, 12:27 PM
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
0
Estudios-Electricos
Top achievements
Rank 1
answered on 04 Nov 2015, 02:47 PM

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

​​

0
Estudios-Electricos
Top achievements
Rank 1
answered on 04 Nov 2015, 05:52 PM

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​

0
Accepted
Danail Vasilev
Telerik team
answered on 05 Nov 2015, 12:01 PM
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
Tags
Chart (HTML5)
Asked by
Estudios-Electricos
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Estudios-Electricos
Top achievements
Rank 1
Share this question
or