on 12-24-2013 9:07 AM
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:
Regards,
Prashant
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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
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
User | Count |
---|---|
11 | |
6 | |
2 | |
1 | |
1 | |
1 | |
1 | |
1 | |
1 | |
1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.