Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.
Problem integrating with HighCharts
-
Hi there, I try to use HighCharts in Mango, but when I put the code into a graphical view I get an error: "failed to hide node", but after clicking OK the chart runs fine. What might be the problem?
-
That is very hard to say without more information. I have not tested the Graphical Views with HighCharts. I would start by debugging the javascript code. If you can find out what line is being called and reporting this error I may be able to shed some light on the problem.
This is usually called by Mango javascript and is hiding an element on the page. If the element for some reason never got created, you will see this error. The page is basically trying to hide something that doesn't exist.
-
Thanks for your response.
Changing jQuery to Prototype solved the problem, but now another one emerged - is there any way to provide data to HighCharts in any (preferrable dynamic) way?
-
I believe what you are trying to do is possible, but I would caution against this for a few reasons. First it will be cumbersome and isn't something the GraphicalViews module was designed to do. Second we are moving away from Graphical Views and towards our new Dashboards module.
This modules lets anyone with basic javascript and HTML understanding create pages using our REST api via a Javascript library that we have created. The module comes with examples using AmCharts that will probably accomplish what you are after.
To do what you are trying to accomplish would most likely involve a server side script that would use some of the internal Mango Javascript objects to return a historical set of values, then you would somehow need to action the chart to plot.
-
Thanks for your response.
I am thinking about doing in amCharts using Dashboard - it would be much easier, but still there are lots of things going in the code I have no idea about.
What I would like to achieve is to have a chart, which plots temperature from a sensor. I have a PID that communicates with a heater and depending on the phase of heating the target temperature is different and stored in different variable (I know I can put it into one using some scripting, but it is not the point). I would like to know and see when the phase has ended, so the plotting curve of the temperature's phase would end and a next one would start.
Do you think something like this is possible to be done in amCharts?
-
You can definitely do something like this with amCharts. I'm not 100% clear on where your heating stage value comes from. Is this a data point?
-
As Joel said, it can be done. I would need to know more about where the values are that you want to plot but the basic idea is that you can either plot data point values directly onto an AmChart or you can bring the data onto the page and manipulate it prior to plotting it. AmCharts has a particular format for the data it will plot so you will need to be familiar with that first.
I am happy to provide you with some sample javascript code if you can be more specific. First off, what version of Mango are you using? If you aren't using 2.6.0 yet I would recommend getting a pre-release 2.6.0 core and using that Dashboards module because the javascript examples and libraries are more up to date.
-
Thanks you both for replies.
All data i want to plot comes from data points.
I am using 2.5.2., but I am going to switch to 2.6.0 if you are advising so.
About the chart - I would like to have a whole process in one place. My PLC is all about boiling a liquid in some stages which have defined time and temperature, which can be also changed during the process by a user.
User can define number of stages and also change it on-the-fly. Mainly, the data points I am using are: STAGEXTEMP (X for stage number, from 0 to 9), STAGEXTIME (X for stage number, from 0 to 9), NOOFSTAGES (number of stages, can have values from 1 to 9), ACTUALSTAGE (current stage, from 0 to 9), TEMP (current temperature in °C). The funny thing is that stage 9 is obligatory, so if you set NOOFSTAGES to e.g. 2, you get stage 0, stage 1 and stage 9.
The chart I need would plot a series of STAGEXTEMP for a time decared in STAGEXTIME (it counts down to 0 and makes ACTUALSTAGE go +1, then the next STAGEXTIME is counted down) only for STAGEXTEMP and TEMP, but still showing previous stages and temperatures in a different series so it can be differenciated.
I hope you get what I mean. I think it is not simple, as I find it as JavaScript beginner. I would be grateful if you could write me some code as you said, please.
-
What you are trying to do is going to require a solid understanding of Javascript. I think you should start by just trying to plot one or 2 data points on a chart.
The example in the dashboards module in web/tutorials/dataPointChart.shtm will get you started. Once you have an understanding of how that works I can provide a slightly more advanced example that will show you how to manipulate the data.
Good Luck!
