Two charts on one page generating js error

[Razvan]

Hello

I am new to kendoui, and i am testing a new dashboard for a project of mine.

The idea is... i have a pie chart and a line chart on the page, and i can not initialize them at once. 

I am calling $("#container").kendoChart(...); twice.

Either way i try only the first chart loads. When i try to load them individually they are ok, but when i load both i get this:

Timestamp: 01/09/13 18:26:06
Error: on is undefined
Source File: http://pms.igeek.ro/3rdparty/kendo/js/kendo.dataviz.min.js
Line: 10

Have just downloaded kendo ui trial so i have the latest version.

Thanks,

Chris

Any help would be welcome

[Hristo Germanov]

Hi Razvan,

I am not able to reproduce the problem. Could you please give me more information about your scenario(or you can just update my test project)? 

Regards,
Hristo Germanov
the Telerik team

[Razvan]

I pasted my code there and it works... are there any known incompatibility issues with other javascripts? 

I have loaded A LOT. 

Also the tooltips aren't visible.

Here is the list of java scripts i load:



<script type="text/javascript" src="/3rdparty/jquery.1.6.2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jquery.validate.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/dataTables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jqueryUi/js/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jquery.formatCurrency-1.4.0.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jquery.ui.touch-punch2.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jcrop/js/jquery.color.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jcrop/js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/tiptip/jquery.tipTip.minified.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/flot/jquery.flot.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/flot/jquery.flot.pie.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/uniform/jquery.uniform.min.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jeditable/jquery.jeditable.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jquery.generateId.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>3rdparty/jquery.jeditable.ckeditor.js"></script>
<!--FancyBox-->
<script type="text/javascript" src="<?php echo base_url() ?>/3rdparty/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>/3rdparty/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/3rdparty/fancybox/source/jquery.fancybox.css" media="screen" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/3rdparty/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" />
<script type="text/javascript" src="<?php echo base_url() ?>/3rdparty/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>/3rdparty/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" />
<script type="text/javascript" src="<?php echo base_url() ?>/3rdparty/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>
<!--Kendo UI-->
<link href="<?php echo base_url() ?>3rdparty/kendo/css/kendo.common.min.css" rel="stylesheet">
<link href="<?php echo base_url() ?>3rdparty/kendo/css/kendo.metro.min.css" rel="stylesheet">
<script src="<?php echo base_url() ?>3rdparty/kendo/js/kendo.dataviz.min.js"></script>

[Razvan]

I tried replying 6x here... no idea why it did not work initially.

I added my code and it works.. i got a lot of jscripts loaded... any idea of known incompatibilities with kendoui and other java scripts?

I also have jQuery 1.6.2 ...

[Atanas Korchev]

Hello,

 We are not sure what you mean by "other java scripts". Please clarify.

Kind regards,
Atanas Korchev
the Telerik team

[Razvan]

Could not post everything i load... maybe post was too big? posting this and editing after

Here's a screenshot, apparently i can't post the copy-paste from my header:

http://screencast.com/t/EgjRYLj2akKA

[Razvan]

apparently jQuery 1.8.2 fixed it.

Question: Can i apply formatting on the numbers on the pie chart and the line charts? I have dollar amounts and i'd like to have them formatted $xxx,xxx.xx (i currently just have $xxxxxx)

[Hristo Germanov]

Hello Razvan,

You need to use format property of the chart labels. Example:

$("#chart").kendoChart({
  series: [{
    type: "line",
    labels: {
      visible: true,
      format: "C"
    },
    data: [1000000,200000,300000]
  }]
});

All the best,
Hristo Germanov
the Telerik team

[Razvan]

And another question... can i adjust the location of the tooltip? right now it's on the right of the cursor and it goes offscreen at the right edge of the chart. Can i set it up to appear on the left?

Screenshot: http://screencast.com/t/LKsigEXJELQ

[Hristo Germanov]

Hi Razvan,

We have not scheduled this feature for implementation yet thus we cannot commit with an exact deadline. Once we plan it it would appear in our public roadmap. Please accept our apologies for the inconvenience this may cause.

Regards,
Hristo Germanov
the Telerik team

[Razvan]

It's cool - i can find a workaround that

I have changed a couple of things and i need to format the tooltip, but with a template -- http://screencast.com/t/RdeRmtGdwbl

Is that possible?

[Hristo Germanov]

Hi Razvan,

Yes, you can format the tooltip in the template. You can call kendo.format or kendo.toString in the template. Could you please examine our online documentation?

Greetings,
Hristo Germanov
the Telerik team