Line chart or sparkline over KPI span

[Michael]

Hi

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

How could we achive this? Thank you.

[Michael]

*achieve

[Iliana Dyankova]

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

 

 

[Michael]

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.

[EZ]

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,

    },
});

 

 

[Michael]

Perfect! Thank you.

Regards,
Michael