Area Chart With Multiple Sequences

8 posts, 1 answers
  1. Monte
    Monte avatar
    1 posts
    Member since:
    Mar 2012

    Posted 04 Jun 2012 Link to this post

    Create an area chart with multiple sequences.
    add a seriesClick function to the json configuration.

    You'll notice that both the tooltip and the seriesClick functionality only recognize the highest value series.  The lower value series never get a tooltip and never can get clicked on.  This is apparent on the example page at
    http://demos.kendoui.com/dataviz/area-chart/index.html

    Is there a workaround for this?
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 07 Jun 2012 Link to this post

    Hello Monte,

    The reason for the behavior you have observed in this example is that the series with the higher values is drawn over that with the lower values. In order to avoid this you could change the series order in the series definition. For example:  
    $("#chart").kendoChart({
      ...
      series: [{
          name: "United States",
          data: [67.96, 68.93, 75, 74, 78]
          },{
          name: "World",
          data: [15.7, 16.7, 20, 23.5, 26.6]
      }],
        ...
    });

    I hope this helps.

    Kind 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!
  3. Anthony
    Anthony avatar
    1 posts
    Member since:
    Jun 2012

    Posted 26 Jun 2012 Link to this post

    We are having the same issue with a graph in ie8 with gross sales and net sales where our area chart will only show the tooltip for larger area chart. We tried sorting the values to make the lower section come first and that caused the tooltips to stop working all together. Everything works great in Chrome and Firefox, just not IE8. 
     We are also seeing that the dollar values will not format correctly to currency based on the formating we have put in the code below.  
        var defaultSeriesColors = [ "#007BC3", "#76B800", "#C20000", "transparent" ];
        var WeeklyNetSales6MoDatajson = new kendo.data.DataSource({
            transport: {
                read: {
                    url: function() {
                        return "/Metrics/Dashboards/Data/WeeklyNetSales6MoData/";
                    },
                    dataType: "json"
                }
            },
            group: {
                field: "MetricName"
            },
            sort: {
                field: "date",
                dir: "asc"
            },
            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        },
                        value: {
                            type: "number"
                        },
                        target: {
                            type: "number"
                        }
                    }
                }
            }
        });
     
    $("#chart1").kendoChart({
        theme: "silver",
        dataSource: WeeklyNetSales6MoDatajson,
        legend: {
            visible: false
        },
        chartArea: {
            background: ""
        },
        seriesDefaults: {
            labels: {
                visible: false,
                format: "{0:C0}"
            }
        },
        seriesColors: defaultSeriesColors,
        series: [
            {
                type: "area",
                series: "MetricName",
                field: "value",
                format: "{0:C0}",
                tooltip: {
                    visible: true,
                    template: "<strong>#= kendo.format('{0:MM/dd/yy}', dataItem.date) #</strong><br /><strong>#= kendo.format('{0:C0}', dataItem.value) #</strong>"
                         }
            },
            {
                type: "line",
                series: "MetricName",
                field: "target",
                format: "{0:C0}",
                markers: {
                    visible: false
                },
                width: "2"
            }
        ],
       valueAxis: [
            {
                title: {
                    text: "$"
                },
                font: "9px Arial",
                format: "{0:C0}"
            }
        ],
        categoryAxis: {
            field: "date",
            labels: {
                rotation: -60,
                format: "{0:MM/dd/yy}"
     
            },
            title: {
                text: "Week Ending"
            }
        }
    });
  4. Steven
    Steven avatar
    8 posts
    Member since:
    Mar 2012

    Posted 27 Jul 2012 Link to this post

    This is an issue I'm experiencing as well.  I have a chart with one area series, one line series.  Tooltips only appear for the area chart presently.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 01 Aug 2012 Link to this post

    Hello Steven,

    I am not sure what causes the issue in your application. Could you please provide a small but runnable project which illustrates the described problem. This way I will be able to investigate the case and advice you further. Thank you in advance.
     
    Kind 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. Steven
    Steven avatar
    8 posts
    Member since:
    Mar 2012

    Posted 01 Aug 2012 Link to this post

    Will do, let me whip one together real quick.  Thanks for the continued support!
  7. Steven
    Steven avatar
    8 posts
    Member since:
    Mar 2012

    Posted 01 Aug 2012 Link to this post

    You know what?  Think it might be related to the Area chart alone.  I can replicate it with one of the demos on the site:

    http://demos.kendoui.com/dataviz/area-charts/index.html

    The tooltip is only available for the largest series.  You cannot see the % for lower.  This is basically the issue I'm having, although it also happens in mixed series charts (i.e. one area series, one line series);  On x-axis points where both exist, the larger one is the only one that gets a tooltip.
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 02 Aug 2012 Link to this post

    Hello Steven,

    I am not sure what causes the problem in your application. Please note that when multiple axes are used the Line chart series should be before the Area series. For convenience I prepared a small example which illustrates such approach in action.

    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!
Back to Top