DataViz Dashboard demo

4 posts, 0 answers
  1. hayden
    hayden avatar
    16 posts
    Member since:
    Jul 2006

    Posted 26 Sep 2012 Link to this post

    Hi,

    Having had mild success with putting a chart into a mobile UI project, I'm trying to take the dashboard demo at
    http://demos.kendoui.com/dataviz/dashboards/stock-history.html
    and put that into a mobile UI as per one of the demo images showing a dashboard on the iphone (http://www.kendoui.com/Libraries/elements/dataviz-1.sflb.ashx)

    I can't get the charts to display, and I again have trouble with the mobile UI tabstrip disappearing completely.

    I've created a JS Bin project here: http://jsbin.com/welcome/26994/

    Any pointers would be appreciated.

    Thanks
    Hayden

  2. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 26 Sep 2012 Link to this post

    Hello Hayden,

    There were few things not working for example - Datasource url has a duplicate domain in it: "http://demos.kendoui.comdemos.kendoui.com/content/ and tab-strip from what I see was not working due to version clash between Kendo Mobile and old DataViz used in examples.

    So to help you move on I just prepared working version for you with latest versions from CDN 
    of KendoMobile and DataViz.

    Here is what you need to do:
    1. Start with fresh Kendo UI Mobile project in Icenium.
    2. Replace content of index.html with one from attached ZIP.
    3. Replace content of style/main.css from attached ZIP. 
    4. Replace content of scripts/hello-world.js from attached ZIP. 

    (Also it is strongly advised to download and include all those links/scripts now pointing to http://cdn.kendostatic.com/ as local files in Icenium project to allow application to work offline)

    I believe Kendo Team will also be happy to answer all your questions regarding KenoMobile and DataViz integration.

    Regards,
    Jordan

  3. hayden
    hayden avatar
    16 posts
    Member since:
    Jul 2006

    Posted 02 Oct 2012 Link to this post

    Thank you for looking at this for me.

    I tried running your code in the Mist simulator, and edited the JS Bin project http://jsbin.com/welcome/29367/

    Unfortunately, although the tabstrip is now appearing, the charts still won't draw.

    I've tried using the data specified as a variable 

    var varData =[
        {
            "date": "12/30/2011",
            "close": 405,
            "volume": 6414369,
            "open": 403.51,
            "high": 406.28,
            "low": 403.49,
            "symbol": "2. AAPL"
        }...

    but still no charts

    Perhaps if you could look at the JS Bin again  ?

    Thanks
    Hayden


  4. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 02 Oct 2012 Link to this post

    Hi Hayden,

    Unfortunately Mist simulator is not able to work in CORS scenarios see this forum post 

    You can use Graphite simulator or test on device. Using variable is an option too, but here is a better solution with data for all years embedded in application.

    Just follow this steps in Mist.
    1. Add folder called data in project root
    2. Use Add Existing Files menu to add data files from attached zip to it.
    3. Change DataSource url to this:

    url: function() {
        return "data/stock-data-" + selectedYear + ".json";
    },


    Regards,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training head over to Pluralsight.
Back to Top