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

Message ListMessage List     Post MessagePost Message

  Data Table on Chart
Posted by ajay Barve on Oct-31-2007 01:02
Attachments:
I am trying to create the following type of chart.  Is it possible to add a datatable to a chart like this example:

For confidentiality data has been obfusciated
sample1.JPG

  Re: Data Table on Chart
Posted by Peter Kwan on Oct-31-2007 03:22
Attachments:
Hi Ajay,

Yes. You can add the table as an array of text boxes using BaseChart.addText.

If you are writing a web page, you can also use standard HTML to create the table, then put the chart above the table. You may configure the chart so that there is no space between the x-axis and the bottom of the chart, so that it looks like the table and chart is in one piece.

I happened to have a sample script available, but it is in ASP.NET/C#. You may need to translate it to the programming language you are using. See the attached files.

Hope this can help.

Regards
Peter Kwan
symbolline2.png
symbolline2.aspx
symbolline2.aspx

4.50 Kb

  Re: Data Table on Chart
Posted by Sreeram on Aug-22-2008 04:23
Does any one have code written in Java/JSP to get the Data Table underneath the graph.  I could find example in .NET but Iam not familiar with it.

  Re: Data Table on Chart
Posted by Peter Kwan on Aug-22-2008 13:47
Attachments:
Hi Sreeram,

I have ported the original ASP.NET/C# code to Java/JSP for your reference.

Hope this can help.

Regards
Peter Kwan
symbolline2.jsp
<%@page import="ChartDirector.*" %>
<%!
//utility to add a text box
private ChartDirector.TextBox addTextBox(BaseChart c, int startXPos, int endXPos, int yPos, String text) {
   ChartDirector.TextBox t = c.addText(startXPos, yPos, text, "Arial Bold", 8);
   t.setSize(endXPos - startXPos + 1, 21);
   t.setAlignment(Chart.Center);
   t.setBackground(0xffffff, 0x000000);
   return t;
}
%>
<%
// The data for the line chart
double[] data0 = {42, 49, 33, 38, 64, 56, 29, 41, 44, 57, 59, 42};
double[] data1 = {65, 75, 47, 34, 42, 49, 73, 62, 90, 69, 66, 78};
double[] data2 = {36, 28, 25, 28, 38, 20, 22, 30, 25, 33, 30, 24};
String[] labels = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec"};

// Create a XYChart object of size 600 x 420 pixels
XYChart c = new XYChart(640, 420);

// Add a title to the chart using 18 pts Times Bold Italic font
c.addTitle("Product Line Global Revenue", "Times New Roman Bold Italic", 18);

// Set the plotarea at (90, 55) and of 500 x 280 pixels in size. Use a vertical
// gradient color from light blue (f9f9ff) to sky blue (aaccff) as background.
// Set border to transparent and grid lines to white (ffffff).
c.setPlotArea(90, 55, 500, 280, c.linearGradientColor(0, 55, 0, 335, 0xf9fcff,
    0xaaccff), -1, Chart.Transparent, 0xffffff);

// Add a legend box at (90, 28) using horizontal layout. Use 10pts Arial Bold as
// font, with transparent background.
c.addLegend(90, 28, false, "Arial Bold", 10).setBackground(Chart.Transparent);

// Set the x axis labels
c.xAxis().setLabels(labels);

// Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will use this as
// the guideline when putting ticks on the y-axis.
c.yAxis().setTickDensity(30);

// Set axis label style to 8pts Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);

// Set axis line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);

// Add axis title using 10pts Arial Bold Italic font
c.yAxis().setTitle("Revenue in US millions", "Arial Bold Italic", 10);

// Add a line layer to the chart
LineLayer layer = c.addLineLayer2();

// Set the line width to 3 pixels
layer.setLineWidth(3);

// Add the three data sets to the line layer, using circles, diamands and X shapes as
// symbols
layer.addDataSet(data0, 0xff0000, "Quantum Computer").setDataSymbol(
    Chart.CircleSymbol, 9);
layer.addDataSet(data1, 0x00ff00, "Atom Synthesizer").setDataSymbol(
    Chart.DiamondSymbol, 11);
layer.addDataSet(data2, 0xff6600, "Proton Cannon").setDataSymbol(Chart.Cross2Shape(),
    11);

c.xAxis().setIndent(true);
c.layout();
    
for (int i = 0; i < labels.length; ++i) {
    addTextBox(c, c.getXCoor(i - 0.5), c.getXCoor(i + 0.5), 335, labels[i]);
    addTextBox(c, c.getXCoor(i - 0.5), c.getXCoor(i + 0.5), 355, "" + data0[i]);
    addTextBox(c, c.getXCoor(i - 0.5), c.getXCoor(i + 0.5), 375, "" + data1[i]);
    addTextBox(c, c.getXCoor(i - 0.5), c.getXCoor(i + 0.5), 395, "" + data2[i]);
}

addTextBox(c, c.getXCoor(-0.5) - 80, c.getXCoor(-0.5), 355, "Server #1").setBackground(0xff0000, 0x000000);
addTextBox(c, c.getXCoor(-0.5) - 80, c.getXCoor(-0.5), 375, "Server #2").setBackground(0x00ff00, 0x000000);
addTextBox(c, c.getXCoor(-0.5) - 80, c.getXCoor(-0.5), 395, "Server #3").setBackground(0xff6600, 0x000000);

// output the chart
String chart1URL = c.makeSession(request, "chart1");

// Include tool tip for the chart
String imageMap1 = c.getHTMLImageMap("", "",
    "title='Revenue of {dataSetName} in {xLabel}: US$ {value}M'");
%>
<html>
<body>
<img src='<%=response.encodeURL("getchart.jsp?"+chart1URL)%>'
    usemap="#map1" border="0">
<map name="map1"><%=imageMap1%></map>
</body>
</html>