What I want to achieve is changing the colour of a group on a series based on its category. I have an example below.

So if "Group 1" had a sub group value of "B" the colour is set based on that combination. And that colour might be different to "Group 2" + "B".

Hi. I have a single JSON Array like this:

 

And, What I want to do is make this single array into a chart. (I hope the name of the series is the same as the axis text.)

Like this.

but, If I write code like this... All series are included in one category. How can I solve this?

 

 

 

Hello , i have an issue with converting the milliseconds to human readable date,

I cannot find the solution for vue, but I have found multiple solutions for jquery.

What am i doing wrong ?

 

 

I noticed in the jquery example, the have this : labels: {
            template: "#= kendo.toString(new Date(value), 'HH:mm') #"
          }

i have tried adding this code :

 

 

it does not work, any suggestions would be greatly appreciated. Thank you

I have a line chart and an area chart.

I would like the area chart to be shown inside of the line chart.

How can I control the area chart's height or top margin? To keep it inside the line chart?

Here is what my chart looks like. I would like to keep the green area inside of the red. Is this possible?

https://dojo.telerik.com/@jerry/owIdiWes

 

 

So I have data in this format 

{

name: health

data:[[1,2],[2,2],[3,4]]

type:"area"

visible:true

},

{

name: health2

data:[[1,2],[2,2],[3,4]]

type:"line"

visible:true

}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .

i have controller using java as @RequestMapping("/charts") and it return in Json format but my question this data is not reflected in my Grid why. 

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

Hello

I am trying to create a kendo multi axis scatter plot in my application. Both Y axis is logarithmic and x axis is numeric. 

Chart is displaying fine but x axis display in middle of charts. I want x axis to be display at bottom instead of middle. I trieds setting display X axis crossing values but I could not able to correct this. Please let me know what's wrong in my code. 

 

 

Code 

 

div.kendoChart({
                    title: {
                        text: "J & L vs Voltage",
                        font: "bold 18px arial",
                        visible: false
                    },
                    legend: {
                        visible: false,
                        position: "custom",
                        offsetX: (500 * 0.66),
                        offsetY: (400 * 0.19),
                        item: {
                            visual: function (e) {
                                let optionfont = '7pt "Open Sans", sans-serif';
                                let color = e.options.markers.background;
                                let labelColor = e.options.markers.border.color;
                                let rect = new kendo.geometry.Rect([0, 0], [450, 50]);
                                let layout = new kendo.drawing.Layout(rect, {
                                    spacing: 5,
                                    alignItems: "left"
                                });
                                let name = e.series.dashType === "longDash" ? e.series.name + ' (R)' : e.series.name;
                                let label = new kendo.drawing.Text(name, [0, 0], {
                                    fill: {
                                        color: labelColor
                                    },
                                    font: optionfont

                                });
                                const lineWidth = 6;
                                const halfLineWidth = lineWidth / 2;
                                let grpList = [];
                                let grp = new kendo.drawing.Group();
                                const size = 6;
                                markerRect = new kendo.geometry.Rect([0, 0], [size + lineWidth, size]);
                                const geometry = new kendo.geometry.Circle([size / 2 + halfLineWidth, size / 2], size / 2);
                                marker = new kendo.drawing.Circle(geometry, {
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: 1
                                    }
                                });
                                grpList.push(marker);

                                let lineMarker = new kendo.drawing.Path({
                                    fill: {
                                        color: e.options.markers.border.color
                                    },
                                    stroke: {
                                        color: e.options.markers.border.color,
                                        width: e.series.dashType === "longDash" ? 2 : 1,
                                        dashType: e.series.dashType === "longDash" ? "longDash" : "solid"
                                    }
                                })
                                    .moveTo(0, markerRect.size.height / 2)
                                    .lineTo(markerRect.size.width, markerRect.size.height / 2);
                                //.moveTo(markerRect.origin.x, markerRect.origin.y + markerRect.size.height / 2)
                                //.lineTo(markerRect.origin.x + markerRect.size.width, markerRect.origin.y + markerRect.size.height / 2);

                                grp.append(lineMarker);
                                for (var item of grpList) {
                                    grp.append(item);
                                }

                                layout.append(grp, label);
                                layout.reflow();

                                return layout;

                            }
                        }
                    },
                    seriesColors: ["green", "red", "blue", "maroon", "pink", "olivegreen"],
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    dataSource: {
                        data: jvlDataForChartPreview,
                        group: "sampleId"
                      
                    },
                    seriesDefaults: {
                        type: "scatterLine"
                    },
                    series: [{
                        xField: xFieldName,
                        yField: yFieldName,
                        yAxis: yFieldName,
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverCircleMarker
                        },
                        markers: {
                            border: {
                                width:1,
                                color: "green"
                            },
                            type: "circle",
                            visual: seriesCircleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }, {
                        xField: xFieldName,
                        yField: rightyFieldName,
                        yAxis: rightyFieldName,
                        width: 2,
                        dashType: "longDash",
                        categoryField: "sampleId",
                        highlight: {
                            visual: seriesHoverTriangleMarker
                        },
                        markers: {
                            border: {
                                width: 2,
                                color: "red"
                            },
                            type: "circle",
                            visual: seriesTriangleMarker
                        },
                        tooltip: {
                            format: "X:{0} Y:{1}"
                        }
                    }],
                    xAxis: {
                        name:"voltage",
                        min: xScaleMin,
                        max: xScaleMax,
                        axisCrossingValues: [0.001, 10000], 
                        type: "numeric",
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}"
                            
                        },
                        title: {
                            text: "Voltage [V]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                       
                    },
                    yAxes: [{
                        name: yFieldName,
                        min: yScaleMin,
                        type: "log",
                        max: yScaleMax,
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "green"
                        },
                        title: {
                            text: "Current Density [mA/cm²]",
                            font: "16px Arial,Helvetica,sans-serif"
                        }
                        
                    }, {
                        name: rightyFieldName,
                        min: rightyScaleMin,
                        type: "log",
                        max: rightyScaleMax,
                        
                        labels: {
                            font: "12px Arial,Helvetica,sans-serif",
                            format: "{0}",
                            color: "red"
                        },
                        title: {
                            text: "Luminance [cd/m²]",
                        }
                       

                    }],
                    tooltip: {
                        visible: true
                    },
                    chartArea: {
                        height: 400
                    },
                    renderAs: "canvas",
                    transitions: false
                });

 

Hi team, I have created a nested donut chart..but as per requirement I have to specify which one is inner and which one is outer, so that it's easy for the user to differentiate.

But currently for showing data I am already using tooltip, also using labels