CODEWITHSUNDEEP
kendo-uikendo-chart
James
James

Reputation: 541

Kendo Display Multiple Bar Charts on Web Page

I'm using Kendo UI and trying to display multiple charts on a single web page. Everything works until I try to add a second bar chart. One of the charts does not display and just shows a generic chart image (it looks like it is not finding the data but if I reorder they reverse what is happening). I can display multiple line charts. Any ideas about what might be happening?

Below is my html for the two charts without the SVG info:

<div kendo-chart="" k-options="vm.barChartOptions" ng-show="this.dataItem.visible" class="move k-block ng-scope k-chart" id="costPerPound" style="float: left; margin: 5px 0px; position: relative;" data-uid="b543ff9a-ee57-4ce7-a39d-8f69a0505a2b" role="option" aria-selected="false" data-role="chart"></div>
<div kendo-chart="" k-options="vm.barChartOptions" ng-show="this.dataItem.visible" class="move k-block ng-scope k-chart" id="numShipments" style="float: left; margin: 5px 0px; position: relative;" data-uid="97094bf1-4366-4974-b92f-edf36d1980f4" role="option" aria-selected="false" data-role="chart"></div>

Here are is the k-options info. As you can see I am setting most of my information at render.

        vm.barChartOptions = {
        dataSource: vm.chartData_datasource,
        series: [
            {
            }
        ],
        valueAxis: {
            line: {
                visible: false
            },
            labels: {
                rotation: "auto"
            }
        },
        tooltip: {
            visible: true,
            template: "#= series.name #: #= value #"
        },
        render: function (e) {
            var chart = e.sender;
            var chartData = vm.findChartData(e);
            if (chartData != null) {
                chartData.categoryAxisField = vm.firstToLower(chartData.categoryAxisField);
                chart.options.title.text = chartData.title;
                chart.options.name = chartData.htmlID;
                chart.options.categoryAxis.field = chartData.categoryAxisField;
                chart.options.categoryAxis.labels.format = chartData.categoryAxisLabel;
                chart.options.legend.position = chartData.legendPosition;
                chart.options.seriesDefaults.type = chartData.chartType;
                for (var i = 0; i < chart.options.series.length; i++) {
                    chart.options.series[i].type = chartData.chartType;
                    chart.options.series[i].field = vm.firstToLower(chartData.dataField);
                }
            }

        }
    }

Upvotes: 1

Views: 616

Answers (1)

Sagar R
Sagar R

Reputation: 613

I had same issue. It can be resolved by just providing different name to each chart.

Upvotes: 2

Related Questions