cancel
Showing results for 
Search instead for 
Did you mean: 

Issues with i5Chart in MII 14.0 SP4

Former Member
0 Kudos

Hi,

I am trying to draw an i5Chart in MII, using a TagQuery referring to http://scn.sap.com/thread/390743

Here is my code:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>{Title}</TITLE>
<META http-equiv="X-UA-Compatible" content="IE=edge">
<META http-equiv='cache-control' content='no-cache'>
<META http-equiv='expires' content='0'>
<META http-equiv='pragma' content='no-cache'>
<LINK href="https://answers.sap.com/XMII/CM/TestProject/000_Common/30_CSS/Content.css" rel="stylesheet" type="text/css"/>
<SCRIPT language="javascript" src="/XMII/CM/TestProject/000_Common/20_JSFiles/UtilityFunctions.js" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript" src="/XMII/JavaScript/bootstrap.js" data-libs="i5Chart,i5Grid"> </SCRIPT>

<SCRIPT language="javascript" type="text/javascript">
function bodyLoad()
{
var chartobj = new  com.sap.xmii.chart.hchart.i5Chart("TestProject/010_Configuration/20_DisplayTemplates/TagHistoricalTrendUI5","TestProject/010_Configuration/10_QueryTemplates/GetHistoricalTagValue");
chartobj.getQueryObject().setTagName(1,document.getElementById("hidTagName").value);
chartobj.getQueryObject().setDuration(60);
chartobj.getQueryObject().setDurationUnits("S");
chartobj.getQueryObject().setRowCount(20);

chartobj.setPropertyValue("ValueColumns", document.getElementById("hidTagName").value);
chartobj.setPropertyValue("LabelColumns", "DateTime");

chartobj.draw("myDiv1");

chartobj.update(true);
}

function PopupHide() {
top.document.getElementById("ScreenDisabler").style.display = 'none';
top.document.getElementById("AlertPopupShell").style.visibility = 'hidden';
return null;
}
</SCRIPT>
</HEAD>
<input id="hidTagName" type="hidden" value="{TagName}"/>

<BODY height="100%" onload = "bodyLoad();">
<DIV  id="Main" class="PopupFrameOut" style="width: 100%; height: 100%">
<!-- === Content  ============================================================= -->
<TABLE  class="PopupFrameIn" cellpadding="0" cellspacing="0" width="100%" height="100%" >
<TR>
<TD width="99%" class="PopupTitleBar">
  <SPAN class="PopupTitle" align="left">{Title}</SPAN>
</TD>
<TD width="1%" class="PopupTitleBar" align="right">
  <A href="javascript: PopupHide();" class="boldbuttons" align="right"><SPAN>X</SPAN></A>
</TD>
</TR>
<!-- === Message Area ==============================================================-->
<TR>
<TD class="ContentHeaderSection" colspan="2">
  <div id="myDiv1"></div>
</TD>
</TR>
</TABLE>
</DIV>
</BODY>

</HTML>


Here is the list of issues I have come across:

  1. When I am passing RowCount as 0 from Tag Query and modifying at runtime by javascript  "chartobj.getQueryObject().setRowCount(20);", in chart it is plotting exactly 20 data points but in the DATA -> Export Raw Data as HTML, it exports only one row.
  2. chartobj.getQueryObject().setTagName(1, "AssetUtil3"); is setting tagname but not updating the chart when I use chartobj.update(true). Same with ValueColumns and LabelColumns.
  3. setDuration, setDurationUnits and setRowCount is working while drawing chart but not serTagName.
  4. If the query template does not return any value, the chart is not plotted with chartobj.draw("myDiv1");
  5. If I set, initialUpdate of the query template to unchecked, the chart displays "no data". Even if I use update, draw or refresh it does not update the chart.

Regards,

Prashant

Accepted Solutions (1)

Accepted Solutions (1)

rutika_bodas
Participant
0 Kudos

Hi Prashant,

I tried the HTML page that you have created and observed the following:

The way you have set the Value Columns and Label Columns is incorrect.

chartobj.setPropertyValue("ValueColumns", document.getElementById("hidTagName").value);

chartobj.setPropertyValue("LabelColumns", "DateTime");


The correct way to set them is:

chartobj.getChartObject().setValueColumns("AssetUtil1, AssetUtil4, CylTemp4....");

chartobj.getChartObject().setLabelColumns("DateTime");


For the point # 5, the reason why it shows 'No Data' is because the flag 'initial Update' is used to determine if the query template should be executed on first render of the chart. If you uncheck this flag, then the initial update will not happen as the query template will not be executed and hence you will have no data to be plot in the chart.


As far as your point # 1 is concerned, this is a bug and you can raise a csn.


-Rutika

Former Member
0 Kudos

Thanks Rutika...Merry Christmas!

As mentioned in point#3, could you please tell me why setTagName is not working. Is there any coding error? If it works for setRowCount during chartobj.draw(), it should work for setTagName either right?

And as per point#5, how to update the chart object after changing the display and/or query properties of chartobj and draw the chart with updated properties?

Also as per point#4, I am unable to understand why it is not displaying the div itself if query template doesn't return any value. It should display "no data" right?

Regards,

Prashant

rutika_bodas
Participant
0 Kudos

Hi Prashant,

I am not quite sure of the setTagName issue, may be I will investigate more and get back to you.

For point#5, in order to update the chart with newly set chart AND query properties, make a call to chartobj.refersh(); This is same as chartobj.update(true);

As I have said before, when you write chartobj.update(false);, it only refreshes the chart with new display template properties, but does not reflect the new query template properties.

chartobj.update(true) will reflect and refresh the chart as per the dispslay template as well as query changes.

For you point #4, when you say it is not showing 'No Data' either, what is it displaying? Is it a blank screen?

-Rutika

Private_Member_14935
Active Participant
0 Kudos

Hi Prashant,

Regarding point#2 (setTagName), your above code should work by changing the syntax for setValueValueColumns and setLabelColumns as shown below:

chartobj.getChartObject().setValueColumns('AssetUtil3'); //Takes a comma separated list of tagnames that you have used with setTagName function.

chartobj.getChartObject().setLabelColumns("DateTime");

I have tested it with the same and it does work. What are you getting after making the changes.. ?

Regards,

Ria

Former Member
0 Kudos

Hi Ria,

Thanks for your efforts. Like you I am also able to display the chart, but I have some unusual findings.

In order to display the chart by setting tag name and value/label columns, I had to select all the available tags to Selected Tags in the query template.

The setTagname is only able to modify tagname in Query Object not Query Template.

For ex, If I set Rowcount = 0 in query template, and modify setRowcount = 10 at runtime then, chart displays 10 Datapoints, but in the Data->Export Raw Data as HTML it gives only 1row with values of all the fields that I have initially selected in the Query Template(all unnecessary tags with values also). It should not give unnecessary tags and values.  Also it should show all rows as set in setRowCount.

There is no synchronization between Query Template and Query Object even after using chartobj.update(true). I am not sure whether it is a bug in i5chart or I am missing some extra lines of code.

Also, I am unable to set YAxisMinRange and YAxisMaxRange of Y- Axis dynamically at runtime.

Please tryout the above and do let me know once you get any breakthrough.

Regards,

Prashant

Private_Member_14935
Active Participant
0 Kudos

Hi Prashant,

Regarding scaling for Y-Axis, the property names to be used is GlobalMinRange for specifying Min value and GlobalMaxRange for Max value.

Try using them and let me know if you have issues still.

Regarding the RowCount issue, it looks like a bug. Please raise a csn.

Regards,

Ria

Answers (0)