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

Line chart or sparkline over KPI span

5 Answers 25 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 29 Oct 2015, 09:34 AM

Hi

We would like a line chart or sparkline overlaying a KPI span (please see attached picture).

How could we achive this? Thank you.

5 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 29 Oct 2015, 09:46 AM
*achieve
0
Iliana Nikolova
Telerik team
answered on 02 Nov 2015, 08:27 AM
Hi Michael,

For this I would suggest setting  background to the chartArea. Also, you could position Kendo UI widgets on the page using custom HTML / CSS. Providing such solutions is out-of-scope of our support service, however as an exception I prepared a basic example which demonstrates a possible implementation.

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Michael
Top achievements
Rank 1
answered on 05 Nov 2015, 11:04 AM

Hi Iliana

Thank you very much for the example.

I'm sorry my post wasn't clear​ about what we would like to achieve. The number in the chart is not the important part. The line over the colors is. Our customer would like to see wheter the value of the line is in the green, yellow or red range of the kpi.

So, could we achieve this by overlaying one chart control with another? Or what would you suggest?

Thank you.

0
Accepted
EZ
Top achievements
Rank 2
answered on 05 Nov 2015, 08:47 PM

You can use plotbands on the valueaxis

DOJO

 Docs: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-valueAxis.plotBands

 

$("#press-log").kendoSparkline({
    data: [
        936, 968, 1025, 999, 998, 1014, 1017, 1010, 1010, 1007,
        1004, 988, 990, 988, 987, 995, 946, 954, 991, 984,
        974, 956, 986, 936, 955, 1021, 1013, 1005, 958, 953,
        952, 940, 937, 980, 966, 965, 928, 916, 910, 980
    ],
  chartArea: {
    height: 50
  },
  valueAxis: {
        plotBands: [{
            from: 950,
            to: 1000,
            color: "green",
            opacity: 0.3
        }, {
            from: 1000,
            to: 1050,
            color: "yellow",
            opacity: 0.3
        }, {
            from: 1050,
            to: 1100,
            color: "red",
            opacity: 0.3
        }],
        max: 1100,
        min: 950,
 
    },
});

 

 

0
Michael
Top achievements
Rank 1
answered on 11 Nov 2015, 09:40 AM

Perfect! Thank you.

Regards,
Michael

Tags
Charts
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Iliana Nikolova
Telerik team
EZ
Top achievements
Rank 2
Share this question
or