Kendo Vue Charts Native CDN Install Errors

1 Answer 92 Views

Chart

Boris asked on 02 May 2022, 07:34 PM

I'm using a trial of kendo for vue.

According to documentation these are the files that need to be added.

I'm getting this error.

Uncaught TypeError: Cannot read properties of undefined (reading 'support')
at Module.<anonymous> (kendo-vue-charts.js:1:28556)

https://jsfiddle.net/xw2v3dce/2/

1 Answer, 1 is accepted

Accepted

answered on 03 May 2022, 06:06 AM

Hi,

Thank you for reporting the issue and for your concern with Kendo UI for Vue.

I seems like a bug in our documentation regarding the order of the script that need to be used. Here is the one that worked correctly at my side - https://dojo.telerik.com/iLujuHAg/5:

  <script src="https://unpkg.com/vue@3.2.33/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@progress/kendo-data-query@1.5.5/dist/cdn/js/kendo-data-query.js"></script>
  <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
  <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script></script>
  <script src="https://unpkg.com/@progress/kendo-vue-charts@latest/dist/cdn/js/kendo-vue-charts.js"></script>

Please excuse us for the inconvenience caused by the issue. If you have further questions or you observe other issues please don't hesitate to contact us again.

Regards,
Plamen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Boris

commented on 04 May 2022, 07:51 PM | edited

did that, but now I'm getting

Uncaught ReferenceError: ChartSeriesLabels is not defined

Boris

commented on 04 May 2022, 08:57 PM | edited

Disregard previous comment.

Here are my components

components: {
                ChartSeriesLabels: KendoVueCharts.ChartSeriesLabels,
                ChartSeriesMarkers: KendoVueCharts.ChartSeriesMarkers,
                ChartLegend : KendoVueCharts.ChartLegend,
                ChartLegendTitle: KendoVueCharts.ChartLegendTitle,
                ChartValueAxisTitle: KendoVueCharts.ChartValueAxisTitle,
                ChartValueAxisLabels: KendoVueCharts.ChartValueAxisLabels,
                Chart: KendoVueCharts.Chart,
                ChartSeries: KendoVueCharts.ChartSeries,
                ChartSeriesItem: KendoVueCharts.ChartSeriesItem,
                ChartCategoryAxis: KendoVueCharts.ChartCategoryAxis,
                ChartCategoryAxisItem: KendoVueCharts.ChartCategoryAxisItem,
                ChartTitle: KendoVueCharts.ChartTitle,
                ChartTooltip: KendoVueCharts.ChartTooltip,
                ChartValueAxis: KendoVueCharts.ChartValueAxis,
                ChartValueAxisItem: KendoVueCharts.ChartValueAxisItem
            },

I'm getting

Unknown custom element: <chartseries> - did you register the component correctly?

Plamen

commented on 05 May 2022, 06:02 AM

If you are using Vue and an HTML syntax environment we rather recommend declaring all the components with lower case and using it the same way in the template as for example it is done in this example - https://dojo.telerik.com/edILoLoK

<chart>
      <categoryaxis>
        <categoryaxisitem :categories='["Mon", "Tue", "Wed", "Thu", "Fri"]'>
          <categoryaxistitle :text="'Week Days'" />
        </categoryaxisitem>
      </categoryaxis>
      <series>
        <seriesitem :type="'column'" :gap="5" :data-items="[1, 2, 3, 5, 4]"></seriesitem>
        <seriesitem :type="'column'" :data-items="[2, 3, 4, 6, 9]" ></seriesitem>
      </series>
       </chart>

 components:{
        chart: window.KendoVueCharts.Chart,
        categoryaxis: window.KendoVueCharts.ChartCategoryAxis,        
        categoryaxisitem: window.KendoVueCharts.ChartCategoryAxisItem,
        series: window.KendoVueCharts.ChartSeries,
        seriesitem: window.KendoVueCharts.ChartSeriesItem,
				categoryaxistitle: window.KendoVueCharts.ChartCategoryAxisTitle,
      },

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Resources

Productivity and Design Tools

Kendo Vue Charts Native CDN Install Errors

1 Answer, 1 is accepted