Hi,

I'm dynamically creating doughnuts and when clicking the legend it sets all the other doughnuts to the value of the last dynamically created value. Please see Dojo: https://dojo.telerik.com/AQucizad

i.e Click on Complete on "Demo-1 - chart-1" legend and in the Console it will output the values for chart two instead (if i didn't have the preventDefaults, it would also update Demo-1 as Demo-2 value)

How do i get it to reference the correct data? :(

I am creating a dynamic line chart (see previous https://www.telerik.com/account/support-center/view-ticket/1623605) I am facing another issue with the line chart - in which entries are appending for some apparent reason at the end. Instead of the horizontal (x) axis being a consecutively ordered, the chart itself restarts the axis for the second series of data.

Here is an image of the current issue I am facing.

As you can see above, instead of filling these entries in back at the beginning, the entire horizontal axis restarts from 0. 

The only points that work "correctly" are points that exactly match each other in the beginning.

At 4:54:00 both points share that exact "second" in time so the "green" point appears appropriately.

If the point does not "match" exactly, it is added and appended to the very end of the horizontal axis as I showed above.

What is causing this? Why does the horizontal axis restart?

My code is as follows:

 <div id="example">        
      <div class="demo-section wide">
        <div id="chart"></div>
      </div>
      <script>
          var testNum = "Test Data for #" + '@Model.testNum';       

          var datareader = JSON.parse(Model.dynamicDataRetrievedFromCSV);         

          function createChart() {
              $("#chart").kendoChart({
                  renderAs: "canvas",
                  title: {
                      text: testNum
                  },
                  legend: {
                      visible: true
                  },
                  seriesDefaults: {
                      type: "line",
                      /*stack: true,*/             

                      labels: {
                          visible: false,
                          format: "{0}",
                          background: "transparent"
                      }
                  },
                  valueAxis: {
                      labels: {
                          format: "{0}"
                      },
                      line: {
                          visible: false
                      },
                      min: 0,
                      max: 300

                  },
                  categoryAxis: {
                      majorGridLines: {
                          visible: false
                      },
                      min: 0,
                      max: 10
                  },
                  tooltip: {
                      visible: true,
                      template: "#= series.name #: #= value #"
                  },
                   pannable: {
             
                  },
                  zoomable: {
                      mousewheel: {
                          rate: 0.1
                      },
                      selection: {
                         
                      }
                  }
                
              });
          }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
          $(document).ready(function () {
              let chart = $("#chart").data("kendoChart");
              var dataParsed = datareader;

              let ds = new kendo.data.DataSource({
                  data: dataParsed,
                  group: "label"
              });
              

              chart.setOptions({
                  dataSource: ds,
                  series: [{
                      field: "value",
                      categoryField: "time",
                      visible: false
                  }]
              }); 
          });
     
      </script>
    </div>

Thank you for any help, and thanks for the support you guys have provided over the last couple weeks!

http://dojo.telerik.com/aGisuSuR/2

I am trying to hide and show error bar on a Kendo line chart based on when the mouse is over the line point, is it possible to do this? I tried using highlight, I can probably create a visual, but I just wanted to hide all the error bars and show only when the point is highlighted. I tried to set erroBar visibility false and set it to true on Highlight, that doesn't seem to work. Even if this worked, this would set the visibility of all error bars?, I just want to set it for only one point at a time, as showing all at once is will overlap error bars.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/line-charts/remote-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
           var StrokeAnimation = kendo.drawing.Animation.extend({
             init: function(element) {
               kendo.drawing.Animation.fn.init.call(this);
               this.initialStroke = $.extend({}, element.options.stroke);
               this.color = element.options.fill.color;
               this.element = element;
              
             },
             step: function(pos) {
               this.element.stroke(this.color, this.initialStroke.width * pos * 5, 0.5);
             },
             
             reset: function() {
               this.element.options.set("stroke", this.initialStroke);
             }
           });
            $("#chart").kendoChart({
                dataSource: [
    {
        "country": "Spain",
        "year": "2008",
        "unit": "GWh",
        "solar": 2578,
        "hydro": 26112,
        "wind": 32203,
        "nuclear": 58973,
    "low":51000,
    "high":68000
    },
    {
        "country": "Spain",
        "year": "2007",
        "unit": "GWh",
        "solar": 508,
        "hydro": 30522,
        "wind": 27568,
        "nuclear": 55103,
     "low":52000,
    "high":60000
    },
    
],
                title: {
                    text: "Spain electricity production (GWh)"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "line",
                    errorLowField: "low",
                    errorHighField: "high",
                    errorBars: {
                      highlight:{
                      line: {
                        width: 1,
                        dashType: "solid"
                       }
                      },
                    
                    visible: true,
                    endCaps: true,
                    width: 10,
                    color: "darkblue",
                    line: {
                        width: 1,
                        dashType: "solid"
                       }
                   },
                    highlight: {
                      errorBars: {
                        line: {
                          width: 1,
                          dashType: "solid"
                         }
                      }
                    }
                },
                series: [{
                    field: "nuclear",
                    name: "Nuclear"
                }, {
                    field: "hydro",
                    name: "Hydro"
                }, {
                    field: "wind",
                    name: "Wind"
                }],
                categoryAxis: {
                    field: "year",
                    labels: {
                        rotation: -90
                    },
                    crosshair: {
                        visible: false
                    }
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    },
                    majorUnit: 10000
                },
                tooltip: {
                    visible: false,
                    shared: false,
                    format: "N0"
                },
               
               render: function(e) {
                
                }
              
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>


</body>
</html>

Charts is not shown on JSP Page..Empty div is shown.why????

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
    <link href="resources/styles/kendo.default-main.css" rel="stylesheet" type="text/css" />
     <link href="resources/styles/kendo.common-min.css" rel="stylesheet" type="text/css" />
      <link href="resources/styles/bootstrap-main.css" rel="stylesheet" type="text/css" />
      
    <script src="resources/js/jquery.min.js"></script>
    <script src="resources/js/kendo.web.min.js"></script>
<meta charset="ISO-8859-1">
<title>Kando Charts Example</title>
</head>
<body>
<h2>Charts</h2>
    

    <div id="chart">hello</div>
    <script>
      $("#chart").kendoChart({
        title: {
          text: "Gross domestic product growth /GDP annual %/"
        },
        legend: {
          position: "top"
        },
        series: [{
          name: "India",
          type: "column",
          data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
          color: "red"
        },{
          name: "Germany",
          type: "column",
          data: [1.010, 1.375, 1.161, 1.684, 3.7, 3.269, 1.083, 5.127, 3.690, 2.995],
          color: "blue"
        },{
          name: "World",
          type: "line",
          data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727],
          color: "green"
        }],
        categoryAxis: {
          categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
        },
        valueAxis: {
          labels: {
            format: "{0}%"
          }
        },
        tooltip: {
          visible: true,
          template: "#= series.name #: #= value #%"
        }
      });
    </script>
</body>
</html>

Hi Team,

I've added everything to make sure charts are accessible but the issue is our data points are clickable and when we click on our data points the pivot/grid below the charts updates just like power bi charts.

I saw one document shared by kendo UI on charts accessibility:

The fundamental requirement that refers to and is fulfilled by the Kendo UI data visualization components is:

• Section 508—"(a) A text equivalent for every non-text element shall be provided (e.g., via alt, longdesc, or in-element content)."
• WCAG 2.1—"Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language."

but this holds true when charts are not clickable.

Like this we're expecting to have focus on each data points:

Power bi is also using svg image and all data points and the x and y axis are operable through the keyboard. Please have a look.

1. Either any shortcut key so that it can navigate all the data points.

2. or Simple Navigation : Enter => and then arrow keys to navigate inside options.

Step 1: container is clickable

Step 2: 

Tab to navigate in between

Enter to go inside

esc: to exit

Step 3: After pressing enter, it goes inside.

Is it possible to create something like this.. This will make charts more accessible.

For more inspiration: Miro currently make it canvas objects accessible in June release with the help of help keys + hidden messages for screen readers.

-----------

Is it possible to add custom patterns like pattern fill instead of solid fill inside the charts so that we create differentiation apart from the colors also?

my code is here why charts not displayed

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
   <%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
    <link href="resources/styles/kendo.default-main.css" rel="stylesheet" type="text/css" />
     <link href="resources/styles/kendo.common-min.css" rel="stylesheet" type="text/css" />
      <link href="resources/styles/bootstrap-main.css" rel="stylesheet" type="text/css" />
      
    <script src="resources/js/jquery.min.js"></script>
    <script src="resources/js/kendo.web.min.js"></script>
<meta charset="ISO-8859-1">
<title>Kando Charts Example</title>
</head>
<body>
<h2>Charts</h2>
    

    <div id="chart">hello</div>
    <script>
      $("#chart").kendoChart({
        title: {
          text: "Gross domestic product growth /GDP annual %/"
        },
        legend: {
          position: "top"
        },
        series: [{
          name: "India",
          type: "column",
          data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
          color: "red"
        },{
          name: "Germany",
          type: "column",
          data: [1.010, 1.375, 1.161, 1.684, 3.7, 3.269, 1.083, 5.127, 3.690, 2.995],
          color: "blue"
        },{
          name: "World",
          type: "line",
          data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727],
          color: "green"
        }],
        categoryAxis: {
          categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
        },
        valueAxis: {
          labels: {
            format: "{0}%"
          }
        },
        tooltip: {
          visible: true,
          template: "#= series.name #: #= value #%"
        }
      });
    </script>
</body>
</html>

Using the demo (https://docs.telerik.com/kendo-ui/knowledge-base/timeline-using-range-bars) as a base, each has a unique ID.  I have adjusted the data in the datasource to only use two different colors.  The demo turns off the legend.  But I need a legend to indicate what the colors on my chart mean.  Turning on the legend (for both the demo and for mine) has two separate issues.

1) The legend contains a separate entry for each individual bar rather than combining them (either by category field or (prefered) the color).

2) The color in the legend doesn't match the color of the bar.

Here is the creation of my chart:

   $("#LDP_chart").kendoChart({
        dataSource: {
            data: cdata.results,
            group: {
                field: "id",
                dir: "asc"
            }
        },
        series: [{
            type: "rangeBar",
            fromField: "from",
            toField: "to",
            categoryField: "key",
            name: "#: group.items[0].seriesName #",
            colorField: "color",
            spacing: -1
        }],
        valueAxis: {
            name: "value",
            min: new Date(startDate + " 00:00").getTime() / 1000,
            max: new Date(endDate + " 23:59:59").getTime() / 1000,
            majorUnit: 24 * 60 * 60,
            majorGridLines: {
                color: "black"
            },
            labels: {
              template: "#= kendo.toString(new Date(value * 1000), 'ddd MM/dd') #",
              rotation: "auto"
            }
        },
        categoryAxis: {
            name: "category"
        },
        legend: {
          visible: true,
          position: 'bottom'
        },
    });

Google isn't helping me here.  I did find an article saying #2 isn't possible because the legend isn't using colorField parameter of the datasource, but that was pretty dated.

Hi,

I am new to your controls, and was wondering if there is a Grid example, or another control that enabled the user to  create something like this:

Regards,

George C. Geschwend