How to - Mix Scatter and Line chart series

7 posts, 0 answers
  1. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 04 Jun 2012 Link to this post

    I want to add a default series of line to my graph, then add another scatter series to the same graph. Is this possible?
  2. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 04 Jun 2012 Link to this post

    To better explain - I would like to append random scatter points to an already existing line graph.
  3. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 05 Jun 2012 Link to this post

    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.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Juan Sola
    Juan Sola avatar
    26 posts
    Member since:
    Jan 2007

    Posted 06 Jun 2012 Link to this post

    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.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 08 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top