Alpha Software Mobile Development Tools:   Alpha Anywhere    |   Alpha TransForm subscribe to our YouTube Channel  Follow Us on LinkedIn  Follow Us on Twitter  Follow Us on Facebook

Announcement

Collapse

The Alpha Software Forum Participation Guidelines

The Alpha Software Forum is a free forum created for Alpha Software Developer Community to ask for help, exchange ideas, and share solutions. Alpha Software strives to create an environment where all members of the community can feel safe to participate. In order to ensure the Alpha Software Forum is a place where all feel welcome, forum participants are expected to behave as follows:
  • Be professional in your conduct
  • Be kind to others
  • Be constructive when giving feedback
  • Be open to new ideas and suggestions
  • Stay on topic


Be sure all comments and threads you post are respectful. Posts that contain any of the following content will be considered a violation of your agreement as a member of the Alpha Software Forum Community and will be moderated:
  • Spam.
  • Vulgar language.
  • Quotes from private conversations without permission, including pricing and other sales related discussions.
  • Personal attacks, insults, or subtle put-downs.
  • Harassment, bullying, threatening, mocking, shaming, or deriding anyone.
  • Sexist, racist, homophobic, transphobic, ableist, or otherwise discriminatory jokes and language.
  • Sexually explicit or violent material, links, or language.
  • Pirated, hacked, or copyright-infringing material.
  • Encouraging of others to engage in the above behaviors.


If a thread or post is found to contain any of the content outlined above, a moderator may choose to take one of the following actions:
  • Remove the Post or Thread - the content is removed from the forum.
  • Place the User in Moderation - all posts and new threads must be approved by a moderator before they are posted.
  • Temporarily Ban the User - user is banned from forum for a period of time.
  • Permanently Ban the User - user is permanently banned from the forum.


Moderators may also rename posts and threads if they are too generic or do not property reflect the content.

Moderators may move threads if they have been posted in the incorrect forum.

Threads/Posts questioning specific moderator decisions or actions (such as "why was a user banned?") are not allowed and will be removed.

The owners of Alpha Software Corporation (Forum Owner) reserve the right to remove, edit, move, or close any thread for any reason; or ban any forum member without notice, reason, or explanation.

Community members are encouraged to click the "Report Post" icon in the lower left of a given post if they feel the post is in violation of the rules. This will alert the Moderators to take a look.

Alpha Software Corporation may amend the guidelines from time to time and may also vary the procedures it sets out where appropriate in a particular case. Your agreement to comply with the guidelines will be deemed agreement to any changes to it.



Bonus TIPS for Successful Posting

Try a Search First
It is highly recommended that a Search be done on your topic before posting, as many questions have been answered in prior posts. As with any search engine, the shorter the search term, the more "hits" will be returned, but the more specific the search term is, the greater the relevance of those "hits". Searching for "table" might well return every message on the board while "tablesum" would greatly restrict the number of messages returned.

When you do post
First, make sure you are posting your question in the correct forum. For example, if you post an issue regarding Desktop applications on the Mobile & Browser Applications board , not only will your question not be seen by the appropriate audience, it may also be removed or relocated.

The more detail you provide about your problem or question, the more likely someone is to understand your request and be able to help. A sample database with a minimum of records (and its support files, zipped together) will make it much easier to diagnose issues with your application. Screen shots of error messages are especially helpful.

When explaining how to reproduce your problem, please be as detailed as possible. Describe every step, click-by-click and keypress-by-keypress. Otherwise when others try to duplicate your problem, they may do something slightly different and end up with different results.

A note about attachments
You may only attach one file to each message. Attachment file size is limited to 2MB. If you need to include several files, you may do so by zipping them into a single archive.

If you forgot to attach your files to your post, please do NOT create a new thread. Instead, reply to your original message and attach the file there.

When attaching screen shots, it is best to attach an image file (.BMP, .JPG, .GIF, .PNG, etc.) or a zip file of several images, as opposed to a Word document containing the screen shots. Because Word documents are prone to viruses, many message board users will not open your Word file, therefore limiting their ability to help you.

Similarly, if you are uploading a zipped archive, you should simply create a .ZIP file and not a self-extracting .EXE as many users will not run your EXE file.
See more
See less

Google Charts - Prompting For SQL Agruments

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    Re: Google Charts - Prompting For SQL Agruments

    1. Uploaded a working UX using the Northwind SQL database.
    2. Show how to refresh chart with a button OR when data changes.
    3. Build SQL statement to handle ALL suppliers or 1 supplier (I added a SupplierWithNoData to test when for no data)
    4. Display a message if no data is found
    5. Add animation to the chart.
    6. See Javascript doChart() function and Xbasic function xbGetData.
    7. Created one Ajax action java script that calls the XbGetData and doChart functions.
    8. See OnChange event for the SupplierID control to refresh data automatically when supplier is selected.
    9. See https://developers.google.com/chart/...omizing_charts for lots of information about charting.

    I think there is enough to build on from here. I welcome comments or ideas to improve.
    I will add a google table view later this week. I am also working on drilling down to the graph or table data elements.
    Let me know if you have any other questions.
    Attached Files

    Comment


      #17
      Re: Google Charts - Prompting For SQL Agruments

      Thanks mate will take a look now.
      Insanity: doing the same thing over and over again and expecting different results.
      Albert Einstein, (attributed)
      US (German-born) physicist (1879 - 1955)

      Comment


        #18
        Re: Google Charts - Prompting For SQL Agruments

        Frank - great help mate - can't believe I couldn't see the woods for the trees, the 'after callback complete javascript' tripped m up, that said great to see how you work. - again thanks. Pete.
        - Nice touch with the no records placeholder.
        Insanity: doing the same thing over and over again and expecting different results.
        Albert Einstein, (attributed)
        US (German-born) physicist (1879 - 1955)

        Comment


          #19
          Re: Google Charts - Prompting For SQL Agruments

          Here is the format that google charts needs.
          [['Product', 'Quantity'],['C?te de Blaye', 623],
          ['Gula Malacca', 601],
          ['Longlife Tofu', 297]]

          If you need data from list, I believe this is the way to start. I have not tested this code successfully, but it should be close.
          The code can be modified to work on selected rows only.

          //Get data from List instead of xbasic call back
          //Initialize array header in string variable strdata.
          var strdata = "['Product','Quantity'],"
          var lObj = {dialog.object}.getControl('list1');
          //number of rows in list.
          var count = lObj._rData.length;
          if (count == 0)
          {
          {dialog.Object}.setValue('PLACEHOLDER_1','No data found in your list. Check your data or filter settings' );
          {dialog.Object}.setControlDisplay('STATICTEXT_1',false)
          return;}


          {dialog.Object}.setControlDisplay('STATICTEXT_1',false)

          //Loop through all rows of the list (selected and unselected) and build the array string.
          for (i=0;i<count;i++) {
          strdata = strdata + "['" + lObj.getData(i).Product + "'," + + lObj.getData(i).Quantity + "]," ;
          }
          //remove last comma from bottom row.
          strdata = strdata.substring(0, strdata.length - 1);
          //enclose in brackets
          strdata="[" + strdata + "]";


          {dialog.Object}.setValue('PLACEHOLDER_1',strdata);

          //This the key command that converts the string variable to a javascript object that google can consume as a parameter
          //Without this command, I kept getting "not an array error"
          var chartdataObj = eval ("(" + strdata + ")");



          //PLACEHOLDER_1 used for no records found message. Clear any value
          {dialog.Object}.setValue('PLACEHOLDER_1','');


          var data = google.visualization.arrayToDataTable(chartdataObj);

          {dialog.Object}.setControlDisplay('STATICTEXT_1',true);
          var options = {
          title: 'Product Summary by Supplier',
          width: 1200,
          height:800,
          legend: 'none',
          animation: {"startup": true, duration: 1000},
          legend: { position: 'side', maxLines: 5 },
          column: {groupWidth: '95%'},
          'chartArea': {
          top:25,
          'backgroundColor': {
          'fill': '#C7E7F2', // #F4F4F4
          'opacity': 100,
          stroke:'black',
          strokeSize: 1
          },
          }
          };

          var chart = new google.visualization.BarChart(document.getElementById('barchart'));
          chart.draw(data, options);

          }
          Last edited by frankiez; 02-22-2016, 08:55 PM. Reason: The code was flawed. Need eval function to convert string to array object. See UX upload for working sample.

          Comment


            #20
            Re: Google Charts - Prompting For SQL Agruments

            Cheers mate. 12:40 am here going to get some ZZzzzz
            Insanity: doing the same thing over and over again and expecting different results.
            Albert Einstein, (attributed)
            US (German-born) physicist (1879 - 1955)

            Comment


              #21
              Re: Google Charts - Prompting For SQL Agruments

              1. Uploaded screen shot of the results
              2. Upload UX based on the Northwind SQL database that uses a list control for the data source of a google chart.
              3. Add filter to list control.
              4. When filter shows no records, the system will advise user of no data when clicking the Chart button.
              5. See all the source code in Java script function called doChart()

              The key command was the eval function which converts the JSON string to an array object.
              var chartdataObj = eval ("(" + strdata + ")");
              var data = google.visualization.arrayToDataTable(chartdataObj);

              I kept trying to pass the JSON string which resulted in a array not found error.
              I believe this should get you going.

              I welcome comments and improvements.
              Attached Files
              Last edited by frankiez; 02-22-2016, 09:04 PM. Reason: typos.

              Comment


                #22
                Re: Google Charts - Prompting For SQL Agruments

                Pete

                I cannot reply to your message. I get an error so if you are interested contact me on [email protected]


                Michael

                Comment


                  #23
                  Re: Google Charts - Prompting For SQL Agruments

                  Originally posted by frankiez View Post
                  1. Uploaded a working UX using the Northwind SQL database.
                  2. Show how to refresh chart with a button OR when data changes.
                  3. Build SQL statement to handle ALL suppliers or 1 supplier (I added a SupplierWithNoData to test when for no data)
                  4. Display a message if no data is found
                  5. Add animation to the chart.
                  6. See Javascript doChart() function and Xbasic function xbGetData.
                  7. Created one Ajax action java script that calls the XbGetData and doChart functions.
                  8. See OnChange event for the SupplierID control to refresh data automatically when supplier is selected.
                  9. See https://developers.google.com/chart/...omizing_charts for lots of information about charting.

                  I think there is enough to build on from here. I welcome comments or ideas to improve.
                  I will add a google table view later this week. I am also working on drilling down to the graph or table data elements.
                  Let me know if you have any other questions.
                  I have been trying to modify Frank's component to make it work with my database but it will not graph the data when I base it on a SQL list. It works okay with static data though.

                  I've made some very minor tweaks to the doChart() function like this:

                  Code:
                  function doChart() { 
                  
                  //Get data from List instead of xbasic call back
                  //Initialize array header in string variable strdata.
                  var strdata = "['Day','Output 6mv','Output 10mv'],"
                  var lObj = {dialog.object}.getControl('list1');
                  //number of rows in list.
                  var count = lObj._rData.length;
                  if (count == 0) 
                  	{
                  	{dialog.Object}.setValue('PLACEHOLDER_1','No data found in your list. Check your data or filter settings' );
                  	{dialog.Object}.setControlDisplay('STATICTEXT_1',false)
                  	return;}
                  {dialog.Object}.setControlDisplay('STATICTEXT_1',false)
                  
                  //Loop through all rows of the list (selected and unselected) and build the array string.
                  for (i=0;i<count;i++) {
                  strdata = strdata + "['" + lObj.getData(i).Day + "'," + + lObj.getData(i).Output_6mv + "," + + lObj.getData(i).Output_10mv + "]," ;
                  }
                  //remove last comma from bottom row.
                  strdata = strdata.substring(0, strdata.length - 1);
                  //enclose in brackets
                  strdata="[" + strdata + "]";
                  
                  {dialog.Object}.setValue('PLACEHOLDER_1',strdata);
                  
                  //Converts the string variable to a javascript object that google can consume as a parameter
                  //Without this command, you will get "not an array error"
                  var chartdataObj = eval ("(" + strdata + ")");
                  
                  //PLACEHOLDER_1 used for no records found message. Clear any value
                  {dialog.Object}.setValue('PLACEHOLDER_1','');
                  
                  var data = google.visualization.arrayToDataTable(chartdataObj);
                  
                  {dialog.Object}.setControlDisplay('STATICTEXT_1',true);
                  var options = {
                      title: 'Water Output QA',
                      width: 1200,
                      height:800,
                      legend: 'none',
                      animation: {"startup": true, duration: 1000},
                      vAxis: {ticks: [0.8, 0.9, 1.0, 1.1, 1.2]},
                      legend: { position: 'side', maxLines: 5 },
                      column: {groupWidth: '95%'},
                      'chartArea': {
                  			top:25,
                  			'backgroundColor': {
                  				'fill': '#C7E7F2', // #F4F4F4
                  				'opacity': 100,
                  				stroke:'black',
                  				strokeSize: 1
                  			 },
                  		 }
                  };
                  
                   var chart = new google.visualization.LineChart(document.getElementById('QAChart'));
                   chart.draw(data, options);
                   
                  }
                  The list works and returns the proper SQL data and will filter correctly. I just see no data being charted when the list is based on SQL data.

                  StaticData.jpg SQLDATA.jpg

                  Anybody have any thoughts on why this doesn't work?
                  Alpha Anywhere v12.4.6.5.2 Build 8867-5691 IIS v10.0 on Windows Server 2019 Std in Hyper-V

                  Comment


                    #24
                    Re: Google Charts - Prompting For SQL Agruments

                    Okay, I figured out why this isn't working. Apparently case is important for field names when defining the data.
                    I was using Output_6mv and Output_10mv when I should have been using Output_6MV and Output_10MV.

                    Code:
                    /Loop through all rows of the list (selected and unselected) and build the array string.
                    for (i=0;i<count;i++) {
                    strdata = strdata + "['" + lObj.getData(i).Day + "'," + + lObj.getData(i).[COLOR="#FF0000"]Output_6MV[/COLOR] + "," + + lObj.getData(i).[COLOR="#FF0000"]Output_10MV[/COLOR] + "]," ;
                    }
                    Google Chart.jpg

                    Working great now ... thank you for this Frank
                    Alpha Anywhere v12.4.6.5.2 Build 8867-5691 IIS v10.0 on Windows Server 2019 Std in Hyper-V

                    Comment


                      #25
                      Re: Google Charts - Prompting For SQL Agruments

                      Good on you Stephen, sorry I didn't get back sooner have been unwell. Very rewarding woking through it.
                      Insanity: doing the same thing over and over again and expecting different results.
                      Albert Einstein, (attributed)
                      US (German-born) physicist (1879 - 1955)

                      Comment


                        #26
                        Re: Google Charts - Prompting For SQL Agruments

                        Originally posted by peteconway View Post
                        Good on you Stephen, sorry I didn't get back sooner have been unwell. Very rewarding woking through it.
                        Thanks Pete, I hope nothing serious.

                        Javascript and case sensitive .. I wonder how many times that has caught me over the years!
                        Alpha Anywhere v12.4.6.5.2 Build 8867-5691 IIS v10.0 on Windows Server 2019 Std in Hyper-V

                        Comment


                          #27
                          Re: Google Charts - Prompting For SQL Agruments

                          Your welcome Stephen. Glad I can contribute.

                          Comment


                            #28
                            Re: Google Charts - Prompting For SQL Agruments

                            Hi Frank,

                            Your sample is great. Is it possible for you to send few more complex samples like attached screenshot in #11?

                            Comment


                              #29
                              Re: Google Charts - Prompting For SQL Agruments

                              You can add pan and zoom capability to your Google chart by using the explorer actions.
                              Just by adding this simple code gives you the ability to zoom in and out using the mouse scroll wheel, pan by grabbing the chart and dragging, and reset the chart by right-clicking the mouse button:

                              Code:
                              explorer: { 
                                      keepInBounds: true,
                                      maxZoomIn: 5.0
                              		},
                              You can set the amount of zoom, whether to remain in-bounds of the chart, limit zoom to vertical or horizontal axis, etc. https://developers.google.com/chart/...lery/linechart

                              It gives some nice interactivity to the chart and looks something like this ...

                              https://www.screencast.com/t/UAP8dcDJoxLj
                              Alpha Anywhere v12.4.6.5.2 Build 8867-5691 IIS v10.0 on Windows Server 2019 Std in Hyper-V

                              Comment


                                #30
                                Re: Google Charts - Prompting For SQL Agruments

                                That is very cool thank you.

                                Comment

                                Working...
                                X