What Chart Enhancements Do You Need?

  • 39
  • 1
  • Question
  • Updated 10 months ago
  • Answered

What Chart Enhancements Do You Need?

I have a new technique called "Un-HighCharted Waters" which will take a QuickBase Chart and enhance it in some way using simple script. For example, the needed enhancement may be adding an additional legend, annotation, series, etc to an existing chart - something that can't be done with native features. If you have such a need feel free to reply with a short description and I will try and work a few of the responses into a demo. Thanks in advance.


Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb

Posted 3 years ago

  • 39
  • 1
Photo of Drew

Drew

  • 522 Points 500 badge 2x thumb
Would be nice to be able to set the scale on the axes for line and/or bar charts. 
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
Easy to do - I will incorporate this into my examples.
Photo of Drew

Drew

  • 522 Points 500 badge 2x thumb
something else that would be useful is the ability to set the 'goal' on a gauge type chart to a field value as opposed to a discrete value.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
Also easy to do.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,224 Points 20k badge 2x thumb
This demo needs a little more work to make it easier to use and integrate but the guts of it are working properly. Since QuickBase in not providing a lot of help in using JavaScript with the product you sort of have to get creative in how to do it yourself. For this example I created a Tasks table with a task/button for opening a new window with the chart report and adding the script into that new window to redraw the chart with the modified properties (in this case a different maximum yaxis value). Other chart modifications and integration options are possible.

Tasks Table ~ Click "ModifyChart.js" Button and note the scale change on redraw
https://haversineconsulting.quickbase.com/db/bk89redf6?a=q&qid=1

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=523

You can modify any feature of a QuickBase generated chart but some more work probably is needed to make it easier to use. More to come as I have time. Feedback would be appreciated. 

UPDATE: I forgot to mention that this is my database for UFO Sightings in the United States. You really need to check out how your state ranks in sightings. Yeah it is a real thing - read today's news..

https://www.youtube.com/watch?v=2MRdtXWcgIw
Photo of Esther

Esther

  • 702 Points 500 badge 2x thumb
Thank you Dan
Photo of Drew

Drew

  • 522 Points 500 badge 2x thumb
great song, great band . . . even with Tom out chasing aliens.
Photo of Esther

Esther

  • 702 Points 500 badge 2x thumb
Hi, I did what is supposed I should be doing but I am no able to make it works. 

This is the "paste" I used, 

(function(){

  var querystring=document.location.search;

    var urlChart = URLRoot() &"db/bniy76a59?a=q&qid=11";
   
   
    $(win.document).ready(function() {
     console.log("hi");
    setTimeout(function() {
        var injectedScript = "<script>";
        injectedScript += "var chart = Highcharts.Chart[0];";
        injectedScript += "var options = chart.options;";
        injectedScript += "chart.destroy();";
        injectedScript += "options.yAxis[0].min = 0;";
        injectedScript += "options.yAxis[0].max = 80;";
        injectedScript += "new Highcharts.Chart(options);";
        injectedScript += "</script>";
        win.$(win.document.body).append(injectedScript);
      }, 2000);
    });
})();

If any one was able to made it work I would be thankful to get the script he used 

Thanks.
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
You are mixing QuickBase formula language into the JavaScript with this statement:

    var urlChart = URLRoot() &"db/bniy76a59?a=q&qid=11"

You may have other problems but I can't tell from your message.
Photo of Esther

Esther

  • 702 Points 500 badge 2x thumb
Thank you Dan,

 The true is that I tried writing directly my QB web ( I did not want to write it here)  but it does not work, but for sure there are more problems, I only wanted to know if anyone was able to make it work. Someone that wanted to share his full script here.

Thank you again Dan, I am one of your followers.
(Edited)
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 30,074 Points 20k badge 2x thumb
I am sure it is something simple but "it does not work" does not give me anything to debug. If you need individual help feel free to contact me off-world using the information in my profile:

https://getsatisfaction.com/people/dandiebolt/
Photo of Esther

Esther

  • 702 Points 500 badge 2x thumb
Thank you Dan, I do not give you anything to debug because , I followed all your instructions in the "IOL  Tecnic" and I just copy your script  in my "module.js" changing  your data with mine and I did not get it work.

Dan, I know you are a very busy person, I only wanted to know if anyone, besides you, made it work and can help me, someone that tried it before and can give a me a key.

You are a deep expert  of the scrip tools, you can gave some knowledge for granted, or obvious , something that for the citizen developers, as me ,could be not so intuitive. 

This is the script I copy from your link.

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=523&_ga=2.60174317.192693694...
Photo of Tyler Parker

Tyler Parker

  • 860 Points 500 badge 2x thumb
Is it possible to show trend lines on charts with this technique?