How to - Mix Scatter and Line chart series

[Sitefinity]

I want to add a default series of line to my graph, then add another scatter series to the same graph. Is this possible?

[Sitefinity]

To better explain - I would like to append random scatter points to an already existing line graph.

[Iliana Dyankova]

Hello Juan,

I am afraid it is not possible to mix the Kendo UI Scatter and Line charts. The reason is the design of the two types of charts - the Line chart is a categorical chart (such Bar, Column and Area charts), but the Scatter Chart is a XY Chart (such a Scatter line chart).

More detailed information about the chart types is available in our online documentation.

Greetings,
Iliana Nikolova
the Telerik team

[Sitefinity]

Thanks for the reply.

Is there any way to manually add a data point(s) to a graph? I would also like to change the point label value from numerical to text.

[Iliana Dyankova]

Hi Juan,

This functionality is not supported out of the box. As a possible workaround I would suggest to use the Kendo UI Scatter Line Chart instead of Line Chart. Then you could try the following approach:

• Use a template, which returns the categories;
• Create a series for the scatter chart and then include the points;
• Call the chart refresh() method.

Regarding your other question - you could customize the text in the point label via the dataItem variable inside a template. For example:  

seriesDefaults: {
    type: "line",
    labels: {
       visible: true,
       template: "#= dataItem.employeeName #"
    }
}

For convenience I created a jsFiddle example which illustrates such approach in action.
 
Regards,
Iliana Nikolova
the Telerik team

[Sitefinity]

I appreciate your help. What I am trying to accomplish is pretty advanced and I was hoping to find a way to do it.

Here is my current data: http://jsfiddle.net/codyinman/UJkkb/3/

I want to add another scatter series on "top" of this data that will show at the very top of the graph with text labels - similar to what you have provided in your examples except i would need to display this data without a line connecting each point.

I can not use the template approach since I do want the numeric labels to show for the current data - I want different labels to show for my "scatter" series data.

Since we can not mix scatter with line I was hoping to just manually add data points to the graph to accomplish this that were independent of the original data source.

I have attached an image of what I would like to accomplish.

[Iliana Dyankova]

Hi Juan,

For your scenario I would suggest to use Kendo UI Scatter and Scatter Line Chart. Then you could apply the following approach:

• In the definition of the series create an empty series for the scatter chart;
• In a function dynamically add points for the scatter chart;
• Refresh the chart using refresh() method. For example: 

function addPoint(){
   var chart = $("#chart").data("kendoChart");
   chart.options.series[1].data.push([3,3]);
   chart.refresh();
}

I hope this helps.


Regards,
Iliana Nikolova
the Telerik team