Alpha DevCon 2018
Results 1 to 16 of 16

Thread: how to do latest Rgraph charts using javascript charts

  1. #1
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default how to do latest Rgraph charts using javascript charts

    Below chart sample does not work with javacript chart(based on rgraph). labels in graph do not show up

    https://www.rgraph.net/fiddle/view.h...ngraph-labelss

    It works if I put latest rgraph js in plain html and their sample. But I want to bind mysql data series to this(not static data).
    How do I do this?
    Last edited by amitloh; 09-12-2017 at 03:50 PM.

  2. #2
    Alpha Software Employee Beta Spark's Avatar
    Real Name
    Sarah Mitchell
    Join Date
    Jul 2015
    Posts
    391

    Default Re: how to do latest Rgraph charts using javascript charts

    Quote Originally Posted by amitloh View Post
    Below chart sample does not work with javacript chart(based on rgraph). labels in graph do not show up

    https://www.rgraph.net/fiddle/view.h...ngraph-labelss

    It works if I put latest rgraph js in plain html and their sample. But I want to bind mysql data series to this(not static data).
    How do I do this?
    Hello Amit,

    Only SVG Charts from the RGraph library are supported. This sample chart that you linked to uses Canvas.

    That being said, you can publish your data series client side and use the {dialog.object}._dataSeriesData object to reference the data. See https://www.alphasoftware.com/docume...amically%20sql for more information.
    Sarah Mitchell

    Looking for answers? Try our documentation.
    If you can't find something, let us know!

  3. #3
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default Re: how to do latest Rgraph charts using javascript charts

    Thanks. is it possible to upgrade charts with their latest beta version? Rgraph is adding new features. I hope alpha adds both types of charts(canvas, svg). This way powerful dashboards can be created without need of going to tableau or powerbi.

  4. #4
    "Certified" Alphaholic
    Real Name
    Govindan Gandhi
    Join Date
    Aug 2008
    Location
    New York, NY
    Posts
    4,294

    Default Re: how to do latest Rgraph charts using javascript charts

    looking up rgraph documentation it seems that it is nothing but javascript and html5. you should be able to do with canvas tags too in your program.
    i do not know how alpha supports the svg graphs, you probably just need to add the new library to the head section.
    how are you doing the graph? in an a5w page?
    thanks for reading

    gandhi

    version 11 3381 - 4096
    mysql backend
    http://www.alphawebprogramming.blogspot.com
    ggandhi344@gmail.com
    Skype:ggandhi344@gmail.com
    1 914 924 5171

  5. #5
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default Re: how to do latest Rgraph charts using javascript charts

    Thanks Gandhi. Currently there is a new jschart from alpha that easily allows to add data series but it has limited svg charts from rgraph. Will I be able to add data series in plain a5w page? if yes that will be great.

  6. #6
    "Certified" Alphaholic
    Real Name
    Govindan Gandhi
    Join Date
    Aug 2008
    Location
    New York, NY
    Posts
    4,294

    Default Re: how to do latest Rgraph charts using javascript charts

    of course, it can be done. anything javascript and html5 is not that difficult in any platform.
    here is an example using rgraph in an a5w page with data harvested using mysql extension ( can also be done with mysqli extension)
    you are dealing with web and mobile. it is never going to be no code no matter what alpha says. alpha or any other platform can only take you so far, after that it is all code if you want better performance.
    take a look at this screencast.
    it is not meant to be real world example, but to show you how it can be done. for your convenience i have attached the code too.
    https://www.screencast.com/t/1kVGffEYR
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="generator" content="Alpha Five HTML Editor Version 11 Build 3381-4096">
    <!-- must use in order to make XP Themes render -->
    <meta HTTP-EQUIV="MSThemeCompatible" content="Yes" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <%a5	
    	dim cn as sql::Connection
    	dim result as l = .f.
    	dim data as c
    	dim label as c
    	dim sqlSelect as c
    	dim rs as sql::ResultSet
    	dim flag as l = .f.
    	
    	
    	result = cn.Open("::Name::local_MySql")
    	if result then
    		sqlSelect = "SELECT * FROM daily_statistics"
    		result = cn.Execute(sqlSelect)
    		if result then
    			rs = cn.ResultSet
    			flag = rs.nextRow()
    			while flag
    				data = data + rs.data("st_statistics")+","
    				label = label + "'" + rs.data("st_day")+"',"
    				flag = rs.nextrow()
    				end while
    				data = "["+substr(data,1,len(data)-1)+"]"
    				label = "["+substr(label,1,len(label)-1)+"]"
    		end if
    	end if
    %>
    <title></title>
    	<script src="RGraph.common.core.js" ></script>
        <script src="RGraph.line.js" ></script>
    </head>
    <body>
    data: <%a5 ?data %>
    <br/>
    label: <%a5 ?label %>
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
        <script>
            chart = new RGraph.Line({
                id: 'cvs',
                data: <%a5 ?data %>,
                options: {
                    gutterLeft: 35,
                    gutterRight: 5,
                    hmargin: 10,
                    tickmarks: 'endcircle',
                    labels: <%a5 ?label %>
                }
            }).draw()
        </script>
    </body></html>
    you can copy and use this code provided if you have built mySql table and fill it with data and change connection string.
    rgraph libraries should be copied to livepreview folder in order to livepreview.
    Last edited by GGandhi; 09-17-2017 at 08:25 AM.
    thanks for reading

    gandhi

    version 11 3381 - 4096
    mysql backend
    http://www.alphawebprogramming.blogspot.com
    ggandhi344@gmail.com
    Skype:ggandhi344@gmail.com
    1 914 924 5171

  7. #7
    "Certified" Alphaholic
    Real Name
    Govindan Gandhi
    Join Date
    Aug 2008
    Location
    New York, NY
    Posts
    4,294

    Default Re: how to do latest Rgraph charts using javascript charts

    here is the same data as pie chart, as per your example in the first post.

    https://www.screencast.com/t/NkbQeo4HN
    thanks for reading

    gandhi

    version 11 3381 - 4096
    mysql backend
    http://www.alphawebprogramming.blogspot.com
    ggandhi344@gmail.com
    Skype:ggandhi344@gmail.com
    1 914 924 5171

  8. #8
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default Re: how to do latest Rgraph charts using javascript charts

    Thanks Gandhi.

  9. #9
    Member
    Real Name
    Miles Nolan
    Join Date
    Jan 2008
    Posts
    258

    Default Re: how to do latest Rgraph charts using javascript charts

    Hi Amit

    Can I ask what version of alpha you are using ?
    thanks
    john

  10. #10
    Member
    Real Name
    Amit lohogaonkar
    Join Date
    Mar 2017
    Location
    NJ
    Posts
    428

    Default Re: how to do latest Rgraph charts using javascript charts

    its latest version of alpha anywhere.

  11. #11
    Member
    Real Name
    Miles Nolan
    Join Date
    Jan 2008
    Posts
    258

    Default Re: how to do latest Rgraph charts using javascript charts

    Hi Amit / Gandhi

    can you advise where the Rgraph files go on the alpha application server ?

    thanks
    john

  12. #12
    "Certified" Alphaholic
    Real Name
    Govindan Gandhi
    Join Date
    Aug 2008
    Location
    New York, NY
    Posts
    4,294

    Default Re: how to do latest Rgraph charts using javascript charts

    put that file in the javascript folder in your development machine, and when published it will find its way into the root folder.
    thanks for reading

    gandhi

    version 11 3381 - 4096
    mysql backend
    http://www.alphawebprogramming.blogspot.com
    ggandhi344@gmail.com
    Skype:ggandhi344@gmail.com
    1 914 924 5171

  13. #13
    Member
    Real Name
    Miles Nolan
    Join Date
    Jan 2008
    Posts
    258

    Default Re: how to do latest Rgraph charts using javascript charts

    thanks very much for the quick replies..

    Still struggling to get a simple version of working..., we have this code in a a5w page on a tabbedUI

    <title></title>

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.common.tooltips.js"></script>
    <script src="RGraph.svg.pie.js"></script>
    </head>
    <body>
    <br/>
    <div style="width: 350px; height: 350px" id="chart-container"></div>
    <script>
    var data = [280,45,133,152,278,221,56];

    new RGraph.SVG.Pie({
    id: 'chart-container',
    data: data,
    options: {
    labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
    shadow: true,
    strokestyle: 'white',
    linewidth: 5
    }
    }).draw();
    </script>

    However we see this error

    The character encoding declaration of the framed HTML document was not found when prescanning the first 1024 bytes of the file. When viewed without the document framing it, the page will reload automatically. The encoding declaration needs to be moved to be within the first 1024 bytes of the file. dashboard.a5w:91
    Loading failed for the <script> with source “http://travelenquiry.co.uk:88/RGraph...tips.js”. dashboard.a5w:98
    Loading failed for the <script> with source “http://travelenquiry.co.uk:88/RGraph.svg.pie.js”. dashboard.a5w:99
    TypeError: RGraph.SVG.Pie is not a constructor[Learn More] dashboard.a5w:107:5
    TypeError: $a.simple is not a constructor[Learn More]

    Any help much appreciated

    thanks

    john

  14. #14
    "Certified" Alphaholic
    Real Name
    Govindan Gandhi
    Join Date
    Aug 2008
    Location
    New York, NY
    Posts
    4,294

    Default Re: how to do latest Rgraph charts using javascript charts

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.common.tooltips.js"></script>
    <script src="RGraph.svg.pie.js"></script>
    if you look at my code i did not use svg segment.
    i do not know how that will affect.
    that computer where i have worked on this, is disconnected to storage now. if you don't succeed i will take a look at this, this weekend using the current computer i have.
    thanks for reading

    gandhi

    version 11 3381 - 4096
    mysql backend
    http://www.alphawebprogramming.blogspot.com
    ggandhi344@gmail.com
    Skype:ggandhi344@gmail.com
    1 914 924 5171

  15. #15
    "Certified" Alphaholic
    Real Name
    Govindan Gandhi
    Join Date
    Aug 2008
    Location
    New York, NY
    Posts
    4,294

    Default Re: how to do latest Rgraph charts using javascript charts

    i did a quick test with the code you had

    https://www.screencast.com/t/1b2RAUhO

    and the result
    https://www.screencast.com/t/YPGouG5v
    thanks for reading

    gandhi

    version 11 3381 - 4096
    mysql backend
    http://www.alphawebprogramming.blogspot.com
    ggandhi344@gmail.com
    Skype:ggandhi344@gmail.com
    1 914 924 5171

  16. #16
    Member
    Real Name
    Miles Nolan
    Join Date
    Jan 2008
    Posts
    258

    Default Re: how to do latest Rgraph charts using javascript charts

    thanks for all your help, we have got some lovely graphs now

Similar Threads

  1. javascript charts complex dashboard examples
    By amitloh in forum Mobile & Browser Applications
    Replies: 5
    Last Post: 09-02-2017, 06:24 PM
  2. google charts or new javascript charts(Rgrahp.net)
    By amitloh in forum Mobile & Browser Applications
    Replies: 1
    Last Post: 08-25-2017, 01:36 PM
  3. LIST as a data source for JAVASCRIPT CHARTS (JS Charts)
    By parkjammer in forum Mobile & Browser Applications
    Replies: 13
    Last Post: 08-07-2017, 10:35 AM
  4. Pie Charts V11
    By azz211 in forum Application Server Version 11 - Web/Browser Applications
    Replies: 3
    Last Post: 11-29-2011, 10:51 AM
  5. Pie Charts
    By Kevin G. Timberlake in forum Alpha Five Version 9 - Desktop Applications
    Replies: 4
    Last Post: 12-17-2008, 01:13 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •