ASE Home Page Products Download Purchase Support About ASE
ChartDirector General
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Real time chart
Posted by Megha on Nov-18-2014 13:42
| Reply | Monitor
Attachments:
hello

I have a chart but now I want to refresh the graph periodically after every 10 seconds .
I have used   real-time chart sample code in ChartDirector and incorporated the code in my
jsp file.But no chart is being shown now,Only timer is shown .

When I incorporate the given example in my code then this line shows error
  <img id="ChartImage1" src="realtimechart.jsp?chartId=demoChart1">
the error is "Tag (img) should be an empty-element tag".

I'am attaching my code which I have to make like real chart so that it can update
periodically.
Chart8.jsp
Chart8.jsp
2.14 Kb

  Re: Real time chart
Posted by Peter Kwan on Nov-19-2014 01:16
| Reply | Monitor
Hi Megha,

I suspect the error "Tag (img) should be an empty-element tag" is because your own
code is not using HTML.

The ChartDirector sample code are written in HTML. It compiles with all HTML standards,
including the latest HTML5 standard. If you are using another language such as XHMTL
(by including a <!DOCTYPE> tag that specifies the XHTML language, or using a
programming development environment that uses XHTML), you may need to modify the
sample code to XHTML syntax. In particular, the <img ....> tag in XHTML should be <img
... /> (the ending '>' needs to change to '/>').

To change your Chart8.jsp into a realtime chart that updates periodically. you may
separate them into two JSP files - one is for the HTML, and the other is for the chart.
Note that the chart is not HTML - it is a PNG image. Separating into two files is one easy
method to allow the chart to be updated without affecting the HTML.

Please put all your charting code in the one of the JSP file. Please make sure that file
does not have any HTML inside. It should just contain the charting part. In particular, it
should not have any HTML tags, and do not have any empty line or space or text outside
of the code blocks (such as the <% .... %> block). I assume you have already known
that anything that is not in a code block is considered to be HTML. Even empty space or
lines are HTML. You cannot insert HTML into a PNG image, which is the reason why this
file cannot have HTML. As according to the HTTP standard, the image should be output
to the browser as a MIME stream of image/png type. The "try /catch" code in the
realtimechart.jsp sample code shows how to do this.

For the other JSP, please put your HTML/Javascript code. Please insert the <img> tag in
the position where you want the chart to be displayed. Please make sure you are using
the correct syntax of your programming language (XHTML or HTML?) to create the <img>
tag. The HTML JSP should now display the chart image. To allow the chart image to
update, please include the ChartDirector Javascript library cdjcv.js, and add the
window.setTimeout and the associated Javascript code like in the "realtimedemo.jsp"
sample code.

Hope this can help.

Regards
Peter Kwan

  Re: Real time chart
Posted by Megha on Nov-19-2014 12:51
| Reply | Monitor
Hello Peter

Thanks for the reply, you were correct it was in XHTML.

Now i want to make realtime charts such that i specify the time interval after which they
refresh automatically in the code itself.In the demo given of realtime chart we can select
the values after which we have to refresh the chart but i do not want to provide this
facility .I wantthat only chart is dispalyed on the screen which refreshes after 10 sec
automatically.

  Re: Real time chart
Posted by Peter Kwan on Nov-21-2014 02:32
| Reply | Monitor
Hi Megha,

If you do not want to allow the user to select the time interval, please simply remove the
HTML/Javascript code that allows the user to select the time interval. Note that this part is
not related to ChartDirector. It is just standard HTML/Javascript. To use the sample code,
you would need to modify the HTML/Javascript to fit the style of your web page.

For example, to just update the chart every 10 seconds, the Javascript code is:

function timerTick()
{
    JsChartViewer.get('<%=viewer.getId()%>').partialUpdate();
}
window.setInterval("timerTick()", 10000);

Hope this can help.

Regards
Peter Kwan

  Re: Real time chart
Posted by Megha on Nov-19-2014 19:10
| Reply | Monitor
Attachments:
Hello Peter

When i use the code of realtime chart,jsp and realtimedemo.jsp in my apllication, then labels
at x-axis are not shown. My chart which is displayed after applying the code is.
chart.png

  Re: Real time chart
Posted by Peter Kwan on Nov-21-2014 02:42
| Reply | Monitor
Hi Megha,

The labels are not visible because your code has provided to many labels to ChartDirector.
For example, if your code uses Axis.setLabels to ask ChartDirector to display 200 labels,
then ChartDirector will display 200 labels. If your chart is too small, then the labels will
overlap, and you will get something similar to your attached chart.

In the original realtime chart sample code, the code provides the x-coordinates to
ChartDirector using Layer.setXData, and does not provide the x-axis labels. In this way,
ChartDirector will automatically determine the x-axis labels from the x-coordinates. The
labels created by ChartDirector will have certain spacing (75 pixels in the sample code) to
avoid overlapping.

In ChartDirector, x-coordinates should be numbers or date/time. In ChartDirector for Java, a
number is a "double" value, while a date/time is a "java.util.Date" object. Note that in Java
syntax, a text string is not a number or a date/time.

If you cannot use numbers or date/time as the x-coordinates but must pass many text
labels to ChartDirector, you can ask ChartDirector to display only some of the labels by
using Axis.setLabelStep.

Hope this can help.

Regards
Peter Kwan

  Re: Real time chart
Posted by Megha on Nov-25-2014 15:01
| Reply | Monitor
Hello Peter

When I use the function
function timerTick()
{
    JsChartViewer.get('<%=viewer.getId()%>').partialUpdate();
}
window.setInterval("timerTick()", 10000);
Then error is shown on "viewer" .The error is "viewer cannot be resolved".How to resolve it

  Re: Real time chart
Posted by Peter Kwan on Nov-26-2014 00:35
| Reply | Monitor
Hi Megha,

You can simply replace <%=viewer.getId()%> with the actual image id you are using. For
example, if the image id is ChartImage1, you can use:

JsChartViewer.get('ChartImage1').partialUpdate();

Hope this can help.

Regards
Peter Kwan

  Re: Real time chart
Posted by Megha on Nov-27-2014 12:13
| Reply | Monitor
Hello Peter

Thanks a lot for all replies.

What is the relevance of chartId=demoChart1 in the following line of code.
<img id="ChartImage1" src="realtimechart.jsp?chartId=demoChart1">

When I don't use it, then also same chart is displayed which was displayed by using it.

  Re: Real time chart
Posted by Megha on Nov-27-2014 13:30
| Reply | Monitor
Attachments:
hello Peter

My code which I have used for real time chart is:-

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>real time chart demo</title>

</head>
<body>
<jsp:useBean id="vb" class="new_bean.Vaccum_Bean">

</jsp:useBean>

<%@page import="ChartDirector.*" %>
<%@page import="java.util.*" %>
<%

double[] data1= vb.beam_Current();
double[] data2= vb.chartAverage1();
String [] labels = vb.getChartTime();
XYChart c = new XYChart(400, 400);


c.setPlotArea(70,70, 280,280);


c.addTitle("VS1_BAG");
c.xAxis().setTitle("logtime");


c.xAxis().setLabels(labels);

c.xAxis().setLabelStep(720);

c.yAxis().setTitle("Average pressure");
c.yAxis().setColors(0xc00000, 0xc00000, 0xc00000);

c.yAxis2().setTitle("Beam_Current");
c.yAxis2().setColors(0x008000, 0x008000, 0x008000);

LineLayer layer = c.addLineLayer2();


c.addLineLayer(data2, 0xc00000);
c.yAxis().setLabelFormat("{value|E1}");


LineLayer lineLayer = c.addLineLayer(data1, 0x008000);
lineLayer.setUseYAxis2();


try
{
    // stream the chart to the browser and terminate immediately
    out.clear();
    if (WebChartViewer.streamChart(response, c.makeChart2(Chart.PNG)))
        return;
}
catch (IllegalStateException e)
{
    // Some very old servers may not support streaming. So we are forced to redirect
    // to the browser to use the traditional method.
    response.sendRedirect(response.encodeRedirectURL("getchart.jsp?" +
        c.makeSession(request, "chart1")));
    return;
}


%>


</body>
</html>


This jsp file I ahve used in automatic.jsp page as:-


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="javax.swing.text.View"%>
<html>
<head>
    <title>Simple Realtime Chart</title>
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:0px">

                <!-- ****** Here is the image tag for the chart image ****** -->
  <img id="ChartImage1" src="Rtimechart.jsp?chartId=demoChart1"/>
<script type="text/javascript">

function timerTick()
{
    JsChartViewer.get('ChartImage1').partialUpdate();
}
window.setInterval("timerTick()", 10000);

</script>
</body>
</html>
Following graph is obtained by it.

I want  to know how this "updating "line is shown with a torn down image shape.I don't
want this on my graph.
Moreover I'm not able to check whether this graph is real time or not as it is in testing
phase and not implemented.So can you please guide me how to check whether ajax is
being implemented in it or not.

Thanks in advance.
realtimechart.png

  Re: Real time chart
Posted by Peter Kwan on Nov-27-2014 23:09
| Reply | Monitor
Hi Megha,

For your case, please try to use streamUpdate, like:

function timerTick()
{
    JsChartViewer.get('ChartImage1').streamUpdate();
}
window.setInterval("timerTick()", 10000);

Hope this can help.

Regards
Peter Kwan