This is a migrated thread and some comments may be shown as answers.

Area Chart With Multiple Sequences

7 Answers 106 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Monte
Top achievements
Rank 1
Monte asked on 04 Jun 2012, 10:07 PM
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?

7 Answers, 1 is accepted

Sort by
0
Accepted
Iliana Nikolova
Telerik team
answered on 07 Jun 2012, 05:24 PM
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!
0
Anthony
Top achievements
Rank 1
answered on 26 Jun 2012, 04:38 PM
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"
        }
    }
});
0
Steven
Top achievements
Rank 1
answered on 27 Jul 2012, 09:00 PM
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.
0
Iliana Nikolova
Telerik team
answered on 01 Aug 2012, 01:00 PM
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!
0
Steven
Top achievements
Rank 1
answered on 01 Aug 2012, 01:39 PM
Will do, let me whip one together real quick.  Thanks for the continued support!
0
Steven
Top achievements
Rank 1
answered on 01 Aug 2012, 01:49 PM
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.
0
Iliana Nikolova
Telerik team
answered on 02 Aug 2012, 05:08 PM
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!
Tags
Charts
Asked by
Monte
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Anthony
Top achievements
Rank 1
Steven
Top achievements
Rank 1
Share this question
or