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

Message ListMessage List     Post MessagePost Message

  Help With Contour Chart!!!
Posted by liwenhaosuper on Mar-29-2011 16:03
| Reply | Monitor
Attachments:
Hi! I havs some trouble when I want to draw a Contour Chart. I now have arrays of x={....}, y={...} and z={...} .  x and y is the position axis of a point,that is (x,y) and z array is the number of each point. Now I want to draw a chart like below ,the color means the diferent numbers in a giving point. How to do this?
In particular, I want to draw a keyboard chart, the color refers to the click counts, got it?  Thank you!
keyboard.png

  Re: Help With Contour Chart!!!
Posted by Peter Kwan on Mar-30-2011 02:19
| Reply | Monitor
Hi liwenhaosuper,

Do you mean you want to have a similar chart, with each "fuzzy square" representing a key?

There are many methods. For example, for each key (which is represented as square), you may create 5 points. Four of the points can be at the four corners and set to 0.1. The fifth point can be at the center of the square and set to the click count.

In general, you can manipulate the number of points and values for each key until you get the desired shape you want.

Hope this can help.

Regards
Peter Kwan

  Re: Help With Contour Chart!!!
Posted by liwenhaosuper on Mar-30-2011 07:57
| Reply | Monitor
I just do not really understand how to draw this kind of chart, although you have offered a great demo for us. So could you please show me how to imple it with more details? Thank you

  Re: Help With Contour Chart!!!
Posted by liwenhaosuper on Mar-30-2011 15:31
| Reply | Monitor
In particular, I mean I now have a 14*6 points int a x-y panel. And with every point in the x-y panel, It have a click numbers, that is z value. I want to show these points in a heatmap,with discrete steps, just like the image, every square's color represents its click value. How to make it? Could you give me more details? An example will be great. After all , I am not yet a great coder. And waiting for your answer. Thank you!

  Re: Help With Contour Chart!!!
Posted by Peter Kwan on Mar-31-2011 01:07
| Reply | Monitor
Hi liwenhaosuper,

To plot the chart you have attached, you need to have multiple points for each fuzzy square. The 14 * 6 points you have only refers to the center of the squares. You need additional points for the corners of the squares.

One example to arrange the points is to create a grid of z = 0 points at x = 0, 1, 2, ..... 14, and y = 0, 1, 2, ... 6. So there are a total of 105 zero points at the corners of the squares. Then add your 14 * 6 points at x = 0.5, 1.5, 2.5, ... 13.5 and y = 0.5, 1.5, ... 5.5.  So your real data (84 points) will be at the center of the squares.

So your need to create an array of 189 points, with 105 points at z = 0 for the corners of the squares, and 84 points for your real data at the center of the squares.

Hope this can help.

Regards
Peter Kwan

  Re: Help With Contour Chart!!!
Posted by liwenhaosuper on Mar-31-2011 11:46
| Reply | Monitor
Thank you for you reply and I think you advice is good.But I still got some problems.
Codes of the datas like this?
for(int i=0;i<=28;i++)
{
dataX[i]=i;

}
for(int i=0;i<=12;i++)
dataY[i]=i;

double *dataZ=new double[377];
memset(dataZ,0,sizeof(dataZ));

    for(int i=0;i<=12;i++)
{
for(int j=0;j<=28;j++)
{
if(i%2==1&&j%2==1)
dataZ[28*i+j]=rand()%10;
else dataZ[i*28+j]=0;
}
}


But it doesnot show the right way, please help.
Thank you~

  Re: Help With Contour Chart!!!
Posted by liwenhaosuper on Mar-31-2011 13:21
| Reply | Monitor
Oh, I have make a stupid mistake~
your advice works perfect~
Thank you so much~

  Re: Help With Contour Chart!!!
Posted by liwenhaosuper on Mar-31-2011 19:20
| Reply | Monitor
By the way, I want to know how to add a background image to the chart , and my codes are as follows. Thank you.

XYChart *c = new XYChart(1000, 500);

c->yAxis()->setTickDensity(1,1);

    // Add a title to the chart using 18 points Times New Roman Bold Italic font
    c->addTitle("Keyboard Key Click Record", "timesbi.ttf", 15);

    // Set the plotarea at (75, 40) and of size 400 x 400 pixels. Use
    // semi-transparent black (80000000) dotted lines for both horizontal and
    // vertical grid lines
    c->setPlotArea(40, 80, 750, 350, -1, -1, -1, c->dashLineColor(0x80000000,
        Chart::DotLine), -1);

    // Set x-axis and y-axis title using 12 points Arial Bold Italic font
    c->xAxis()->setTitle("");
    c->yAxis()->setTitle("");

    // Set x-axis and y-axis labels to use Arial Bold font
    c->xAxis()->setLabelStyle("arialbd.ttf");
    c->yAxis()->setLabelStyle("arialbd.ttf");

    // When auto-scaling, use tick spacing of 40 pixels as a guideline
    c->yAxis()->setTickDensity(40);
    c->xAxis()->setTickDensity(40);
c->setTransparentColor(-1);

    // Add a contour layer using the given data
    ContourLayer *layer = c->addContourLayer(DoubleArray(dataX,
        29), DoubleArray(dataY,
        13), DoubleArray(dataZ,
        377));


c->getPlotArea()->setBackground("F:\\\\projects\\\\PCHMS_v2.0\\\\PCHMS_v2.0\\\\res\\\\maps.bmp");
    // Set the contour color to transparent
    layer->setContourColor(Chart::Transparent);

    // Move the grid lines in front of the contour layer
    c->getPlotArea()->moveGridBefore(layer);

layer->setContourColor(Chart::Transparent);


    // Add a color axis (the legend) in which the left center point is anchored at
    // (495, 240). Set the length to 370 pixels and the labels on the right side.
ColorAxis *cAxis = layer->setColorAxis(880, 240, Chart::Right, 200, Chart::Right);

    // Add a bounding box to the color axis using light grey (eeeeee) as the
    // background and dark grey (444444) as the border.
    cAxis->setBoundingBox(0xeeeeee, 0x444444);

    // Add a title to the color axis using 12 points Arial Bold Italic font
    cAxis->setTitle("Click Numbers", "arialbi.ttf", 12);

    // Set color axis labels to use Arial Bold font
    cAxis->setLabelStyle("arialbd.ttf");

    // Use smooth gradient coloring
cAxis->setColorGradient(true,IntArray(),-1,Chart::Transparent);





m_chartview.setChart(c);

m_chartview.setImageMap(
    c->getHTMLImageMap("clickable", "", ""));

delete c;

  Re: Help With Contour Chart!!!
Posted by Peter Kwan on Apr-01-2011 01:02
| Reply | Monitor
Hi liwenhaosuper.

You code have already added a background image to the plot area. However, I see that you have put a contour layer on the plot area, which porbably completely covers the background. So you may not see the background image. (The background image is on the background. It is only visible if it is not covered by other things.)

I am not too sure what is the intention of your code. For a contour chart, most people would like to put an image in the foreground (in front of the contour layer), not in the background. The image usually is with a transparent background, so you can still see the contour layer.

You may refer to the following thread for an example:

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1301423181#N1301425924

Hope this can help.

Regards
Peter Kwan

  Re: Help With Contour Chart!!!
Posted by liwenhaosuper on Apr-15-2011 19:26
| Reply | Monitor
well, your adivise may be good, but when I use this, the image doesnot show up.
My code is:
    // Use smooth gradient coloring
cAxis->setColorGradient(true,IntArray(),-1,Chart::Transparent);
c->addText(c->getPlotArea()->getLeftX() + c->getPlotArea()->getWidth() / 2,
c->getPlotArea()->getTopY() + c->getPlotArea()->getHeight() / 2,"xx<*img=F:\\\\projects\\\\Xtreme Toolkit Learning\\\\PCHMS_Beta2.1\\\\PCHMS_Beta2.1\\\\res\\\\maps.bmp*>xx",
"normal", 8, 1, 1);


I use the absolute path of the image,the xx xx shows, but the image not, ;please help!

  Re: Help With Contour Chart!!!
Posted by Peter Kwan on Apr-15-2011 23:50
| Reply | Monitor
Hi liwenhaosuper,

ChartDirector only supports loading PNG, JPG and GIF. It does not support loading BMP images.

Also, for your usage, I would expect the image to have a transparent background. (If you use a non-transparent image, it will cover up the chart, and you would not be able to see the chart contents at all.) As far as I know, BMP does not support transparency. You may want to use PNG or GIF, which supports transparency.

Another thing I notice is that drive "F". I am not sure if it is a real local hard disk, or is a network drive, and if your program is a desktop program or is running as a service or under the web server or other background program. Note that a "network drive" is only visible to the login session that mounts the drive. A web server or other background program can be running using another account (eg. a system account), and it may not see the network drive. On the other hand, a desktop program should not have any difficulty in accessing the network drive mounted in the login session.

Hope this can help.

Regards
Peter Kwan