Angular guage chart - High charts

Angular guage chart - High charts

  
I have to use angular chart of High charts, I dont see it in the Charts espace? Has anyone tried it out?
What could be the possible way to get it done through outsystems?

Reference Link for Angular Guage chart:
http://www.highcharts.com/demo/gauge-speedometer

Thanks,
Thiru
Hi Thirupathi,

Although not being very easy to do, it is possible to simplify the creation of that chart using part of our Charts eSpace.
For a brief explanation of charts and how to customize them you can check out my post regarding chart widgets, which covers some of these advanced scenarios.

Additionally you can find attached an oml file containing that gauge chart, which exemplifies how do it.

Cheers,
- Diogo Serra
Thanks Diogo, let me try it out and get back to you
Hi Diogo, 
First of all, I am new to the UI Coding (Jquery). I was able to run the guage and working superb. When i want to do the same for my page, this angular chart is a part of the page and it should display in a given container. I was not able to do that. Also,  the javascript code on the web screen regarding scrollbar size and some table manupulations not able to understand. 

By keeping all the code in the HighChartJSON, the chart is displayed but not able to chage the spindle data dynamically.

Also, with the same approach i tried other charts given links below: 
Area  range & Line Chart:
http://www.highcharts.com/demo/arearange-line
This complains requires highcharts-more.js, on including the js file, not able to view the graph only
Multiple Lines Chart:
http://www.highcharts.com/demo/line-basic
This doesnt show the datapoints on the legend and the series without hover on it.


Appreciate you help.


Thanks again,
Thiru 
I am able to do all the things i mentioned in the above post except the arearrange-line. 
In order to work these charts, i have manually added highcharts-more.js on to my page. Now the arearange-line is running some script and browser is crashing. 
If you could help me in achieving that, it would be great and you help is greatly appreciated.
I just taken the highchart js code from the below url and try to render but its not working.

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/

Thanks Again,
Thiru


Hi,

It's great to hear the example was able to fit most of your needs.
However, since the JSFiddle you posted works fine, I can't understand what the problem you're facing when encoding that example into Service Studio is.

In order for me to help, can you please send the oml (or copy the chart portion to a small oml) so I can publish and look at it?

Best regards,
- Diogo
Hi Diogo,

Please find the attached OML, the code is added in the AdvanceFormat Structures highchartJSON property.

Also, added highchart-more.js as resource and imported in to the page.
Only Area-line is not rendered, other two graphs are rendered.

Thanks for your support.

-Thiru
Diogo,
Also, one more question is how can i add the call back function for the guage chart, so that data can be changed for a given interval.

Thanks,
-Thiru
Hi Diogo, 
I am able to do a call back using the below property in the high charts
chart: {
    event:{
      load: function(){
                  //my code here
               }
     }
}. 

If you have any better way please let me know.
The only blocker for me is now the area-line chart, which i'm not able to display on browser only.

Thanks,
Thiru
Diogo,
Found the problem, datetime values in milliseconds are crashing the browser. If i give low range integer literals i am able to display the graph. 

I suppose some thing going wrong in the outsystem + high chart integration of date time. Let me know if i am wrong and also how to support the datetime.

Thanks,
Thiru
Hello,

It's nice to see you're almost there!
Regarding the callback, although there are other ways to do it (like setting the className of the chart and accessing it via JQuery), that seems to be the simpler way of doing it if you're able to do everything you need with the arguments of the load function.

About the datetime with milliseconds, I'm not entirely sure, give me some time to look into it and get back to you with a more detailed response.

Best,
- Diogo
Greetings,

Sorry about the delay, the source of the problem was hard to identify since it goes all the way to the Highcharts library.
Find attached an oml with a possible solution.

The modification which solved the problem was the addition of the "categories:false" option to the xAxis JSON. Because we merge the JSON generated by us with the one specified by the user, it results on an empty list of categories which Highcharts isn't prepared to receive in this scenario.
Additionally, because you wanted the first chart to be a line chart and not an area chart, I changed the widget to a line chart.

Best regards,
- Diogo
Thank you very much, let me try this out. I really appreciate your help
Hi Diogo,
For the area-line chart and guage chart to work i have added highchart-more.js file as resource and adding it to the page. Now my question here is, the license for highchart more js is non commercial, i cant use it. So if i want to use highchart more js how can i use it? is it possible to add highchart more js file by outsystems by any chance becuase as per the highcharts, the same highchart license can be used for extended functionality (high chart more js).

Please help me, appreciate your help

Thanks!
Hi,
Yes, the license that comes with the platform for highcharts allows you to use highcharts-more as well.
Highcharts-more doesn't come bundled because we didn't have a strong enough use case for it at the time, but we might rethink that.
Cheers!