How To: Create HTML5 Chart through code in your ASP.NET AJAX Applications

Almost 4 years ago just when i started working for Telerik or now Progress Software, i had written a blog post titled “Step by Step Guide to work with RadHtmlChart for ASP.NET AJAX”. The idea behind that blog post was to give you a step by step instruction on how to use the HTML5 Chart controls in our UI for ASP.NET AJAX suite. Couple of days ago i had a comment on that blog post where the user asked me “How to create the same chart from code behind i.e.entirely through code”. A common scenario if you ask me. So i thought of doing a step by step instruction  on how to create HTML5 chart entirely through code and this blog post will outline that. Continue reading

Kendo UI Core

Resources for Webinar – “Build HTML5 Sites/Apps for Free with Kendo UI Core”

On Jul 31 I presented a webinar titled “Build HTML5 Sites/Apps for Free with Kendo UI Core”. This webinar was part of the monthly webinars we do here in Telerik India. This blog post is a recap of the webinar. You will find the slide deck, video recording and Q&A from the webinar.

Kendo UI core

On April 16th, we i.e. Telerik announced the introduction of an Open Source Software called Kendo UI Core. Kendo UI Core includes 24 of the UI widgets that are found currently in Kendo UI Web and all of the widgets & features formerly available under Kendo UI Mobile. Kendo UI Core also includes the core framework features that are available in Kendo UI for e.g. DataSource, MVVM, SPA etc.

Kendo UI Core

Kendo UI Core

To know more about Kendo UI Core, head over to its page on our website here: http://www.telerik.com/kendo-ui/open-source-core

Slide Deck:

Here is the slide deck used for the webinar:

Video Recording:

Here is the video recording of the webinar:

Q & A:

Here is a recap of the questions that we received during the webinar.

Q: Recently Kendo team integrated Angular JS framework in kendo UI core. Is there any dependencies to create Angular JS apps or just include kendo-ui-core.min.js and jQuery.js?
A: You need to have a reference to angular.js script file before referencing kendo script file. That’s the only dependency we have for working with angular.

Q: What about globalization in kendo UI. What we need to do for globalization support?
A: Here is getting started with Kendo UI Globalization documentation: http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/overview

Q: Can we enter custom interval for date time picker time part?
A: Yes you can. The interval of the time can be controlled through interval property in minutes. Find more info here: http://docs.telerik.com/kendo-ui/api/web/datetimepicker#configuration-interval

Q: How can I select only date from the datetime picker control that is without showing default time?
A: Date Time Picker is for showing both date and time. If you just need Date, you should try DatePicker widget – http://docs.telerik.com/kendo-ui/api/web/datepicker

Q: How we can implement offline behaviour of application using Kendo UI?
A: At the moment we don’t have out of the box support for offline. But you can always cache the data in local storage and use it when offline.

Q: How can I override kendo globalization and support my custom date time format?
A: Kendo has a toString() functionality which takes a predefined format or a custom format to format the date. More information here: http://docs.telerik.com/kendo-ui/getting-started/framework/globalization/dateformatting

Q: Can I use Kendo UI Data Source in MVC application?
A: yes you can

Q: Where can I get the list of different widgets present in Kendo UI Core?
A: Take a look at this page: http://www.telerik.com/kendo-ui/open-source-core

Q: Is it possible to add events into the Kendo Calendar?
A: Yes. Take a look at the following demo: http://demos.telerik.com/kendo-ui/calendar/template


T-Shirt Giveaway:

As usual we have picked two winners for our t-shirt giveaway. The following persons will get our .NET Ninja T-Shirt shipped to them.

  1. Chandra Bhushan
  2. Vinay Kumar

Congratulations. We will contact you on our email to get your address and ship it to you. For rest of you, don’t worry – we do have a lot of webinars lined up through the year.

Till next time, Happy Coding!

Webinar Recap: Easy HTML5 Data Visualization with Kendo UI DataViz

Apr – May 2013 will see a series of webinar from Telerik India pertaining to Data Visualization, Team Pulse, Windows 8, SiteFinity, Windows Phone 8 and Kendo UI. If you are interested in any of these webinars do take a look at the following post: https://telerikhelper.net/2013/03/19/ninja-enough-telerik-india-webcasts-april-may-2013/.

On Apr 11 we delivered a webinar on HTML5 Data Visualization titled – “Easy HTML5 Data Visualization with Kendo UI DataViz”. This post is a recap of the webinar. As part of the webinar we discussed the following things:

  • What is Data Visualization ?
  • Why do we need Data Visualization ?
  • How do we do Data Visualization ?
  • What does HTML5 technology define for Data Visualization ?
  • Introducing Kendo UI DataViz
  • Demo

Here is the slide deck used for the webinar:

Here is the video recording of the webinar:

Easy HTML5 Data Visualization with Kendo UI DataViz from Telerik Helper on Vimeo.

During this webinar we had a lot of questions and I am trying to address them here:

  1. There are couple of free jquery plug-in available on the net. which do all these charts. how Kendo UI different from  them?
    Kendo UI aims at providing unified framework for HTML5 & JavaScript Apps/Sites. Kendo UI is all about HTML5 powered client side javascript frame work. The DataViz package of Kendo UI spits out the Charts/Graphs/Gauges using SVG technology on modern browsers and will render as VML on older browsers. So if you use Kendo UI DataViz to perform your data visualization rest assured that you are HTML5 complaint.
  2. Being a .Net developer why I should use HTML5 and not Silverlight for all this. same can  be achieved with Silverlight as well?
    The decision to use Silverlight or HTML5 will depend on the nature of the project. Silverlight is still a plugin based technology where as HTML5 is trying to standardize the web world with a common structure to be supported by all browsers.
  3. For running Silverlight applications , user has to download the runtime first. Is it the same for Kendo UI code?
    Kendo UI is a pure client side JavaScript framework. Kendo UI relies on Stylesheet and JavaScript. We have only one dependency and that is of Jquery. Apart from this nothing else is needed.
  4. Why we need to choose separate chart product – when asp.net charting can give the charting option?
    The charting option provided by ASP.NET as far as I know if not HTML5 based. Meaning the output of the chart/graph through ASP.NET charting is still Image based and does not use the HTML5 recommended SVG for output. Where as Kendo UI is a HTML5 compliant and outputs the charts/graphs as SVG on modern browsers and as VML on older browsers.
  5. Can we add Kendo UI references into the PHP project?
    Absolutely. Kendo UI is serer agnostic. Meaning it does not care what server side technology has been used. This is because Kendo UI is a client side JavaScript framework. And to use Kendo UI you only reference a couple of style sheets and scripts and you are up and running. For data you will need to make sure that you create JSON end points as Kendo UI works well out of the box with JSON and XML.
  6. Can we change the styles according to us?
    Yes very much. We provide an easy way to custom style all the Kendo UI widgets. We have an online theme builder for web and for mobile controls. For more information check out this page: http://demos.kendoui.com/
  7. Can we use Kendo on Windows 8 metro & mobile apps ?
    Kendo UI consists of 3 packages – Web, DataViz and Mobile. The Web can be used for Web Applications. Mobile controls can be used to develop Cross Platform Hybrid Mobile Apps. So Kendo UI Mobile Controls support Windows Phone. As of now we do not have support for Windows 8.
  8. can we use it for 3D, is there any support for that?
    We do not support 3D charting at the moment.
  9. Will this work on mobile browsers ?
    Since DataViz output SVG as the format for the chart/gauges, it can run on both desktop browsers and mobile browsers.
  10. Does the charts support Drill Down option?
    Drill-down functionality is not supported out of the box yet. However the chart exposes a seriesClick event which can be used instead. You can find a live demo here.
  11. In the demo shown, was usage of valueAxis , categoryAxis, tooltip…. are these syntax to use kendo ui or some sort of data…??
    These are the configuration settings you do on the Kendo UI DataViz objects and at runtime the chart is generated based on these settings.
  12. Can i use Kendo UI in my .net application instead of SSRS charts?
    Absolutely. You just need to make sure you provide an endpoint which can return JSON payload and the Kendo UI DataViz widgets can consume data and plot it.
  13. How do we know Kendo Chart options ? as you are passing some options to it. is there any full fledged docs ?
    The Kendo UI Documentation can be found at http://docs.kendoui.com. We have the API reference, Getting Started, Tutorials at the documentation site.
  14. Does this come with Samples?
    Yes. whether you download the trial or licensed version of Kendo UI – we ship the demo source code with it.
  15. can we populate the data from database and bind this data to kendo charts?
    Kendo UI is server side agnostic and does not care about what is the technology used for server side. Having said that the way Kendo UI works is – it can understand JSON or XML. So as long as data is passed as JSON/XML we don’t care about anything else. So you need to make sure that you create endpoint i.e. services which can return data in JSON or XML format. Kendo Widgets will be able to read data from those services out of the box.

Also, we had promised to attentive members from the audience will get our Telerik Ninja t-shirt. Well here are 2 winners we picked:

  • Ravi Gadag
  • Narendra Bisht

Congratulations to the winners and we will be getting in touch with you soon. Rest of you don’t loose heart. We have 5 more webinars in April and May and in each webinar we will be giving out 2 shirts each.

Hope you liked this webinar and we hope to see you back in our future webinars.