Multi-Color Line

Question

In the data, there is a object property called clr which is actually contains color information of corresponding object. I would like to draw a single line with multiple colors. However so far, I could not able to make it work.

Here is a small sample of my dataset.

{x: 11,y: 599,k: 500,clr:'blue'}, { x: 6,y: 699,k: 800,clr:'yellow'}

Here is the code sample which I had expected to work:

series: [{data: mydata,color: mydata.clr}],

http://jsfiddle.net/epvg86qu/19/

Zsazsa

Answer 1

As mentioned here, the colorField option is supported when series.type is set to "bar", "column", "bubble", "donut", "pie", "candlestick", "ohlc" or "waterfall".

The only way to do this seems to be by creating multiple series. See fiddle: http://jsfiddle.net/53ygp9ut/2/

function createChart() {
    $("#chart").kendoChart({
        xAxis: {},
        yAxis: {},
        seriesDefaults: {type: "scatterLine" },
        series: [{data: stats1, color: "blue"},
                 {data: stats2, color: "yellow"},
                 {data: stats3, color: "red"}],
    });
}

$(document).ready(createChart);

Burnout

But lines are not connected if I do so. – Zsazsa

Yeah, that's a bit of a problem I guess. You can kind of change the datasource to make them connect though. Please check the updated fiddle. – Burnout

Hello Vash, thanks for the effort. However, the problem that I am having now, how to divide them into series and append the last object to the first object to connect them. It is getting complicated. – Zsazsa

Yeah, you'll need to duplicate the last object and add it as the first part of the next series. This could be difficult, or not, depending on how your business logic is set up. – Burnout

if I do not receive any better solution, I will mark up your answer. Thanks a lot again. – Zsazsa

Answer 2

Change your function to look like this, you have to tell Kendo to use the colorField:

function createChart() {
    $("#chart")
    .kendoChart({
        xAxis: {},
        yAxis: {},
        seriesDefaults: {type: "scatterLine" },
        series: [{data: stats2,colorField: "clr"}],
  })
}

Updated fiddle: http://jsfiddle.net/epvg86qu/20/

Duster

Thanks Rick, but it has only changed marker color, not line color. I am trying to change line color. I have upvoted for your effort. – Zsazsa

Thanks, I'm still looking for an answer. No luck yet. – Duster