ChartDirector Support - View Thread 1238514001

Re: MultiChart with ImageMap? its possible?

Posted by Peter Kwan on Apr-01-2009 02:53

Hi Marcos,

Currently, I assume your code is using many WebChartViewer objects, and each WebChartViewer object is displaying an XYChart object.

If you want to use a MultiChart instead, you can put all your XYChart objects into one MultiChart object. Then you just need one single WebChartViewer. It is like:

MultiChart m = new MultiChart(width, 1200); //assume 300 pixels per chart for 4 charts
m.addChart(0, 0, xychart1);
m.addChart(0, 300, xychart2);
m.addChart(0, 600, xychart3);
m.addChart(0, 900, xychart4);

' Output the MultiChart
WebChartViewer1.Image = m.makeWebImage(Chart.PNG);

' Include tool tip for the chart
WebChartViewer1.ImageMap = m.getHTMLImageMap(.........);

Hope this can help.

Regards
Peter Kwan

Re: MultiChart with ImageMap? its possible?

Posted by Marcos Aimola on Apr-01-2009 07:50

Hi Peter,

For each graphic i create a clickable area and not just a single alternative text for all images. Is to do this?

I can create an imagemap for each chart image and add the MultiView?

Re: MultiChart with ImageMap? its possible?

Posted by Marcos Aimola on Apr-01-2009 07:55

My code block:
        public List<WebChartViewer> EvolucaoFisicaCliente(int contrato)
        {
            List<WebChartViewer> list = new List<WebChartViewer>();

            labels[0] = "Realizado";
            labels[1] = "Previsto";
            labels[2] = "Desvio";

            try
            {
                OpenConnection();
                System.Data.DataTable dt = SqlHelper.ExecuteDataset(ConStr, CommandType.Text, strSelect, param).Tables[0];

                foreach (DataRow dr in dt.Rows)
                {

                    dados[0] = Convert.ToDouble(porcentagemRealizado);
                    dados[1] = Convert.ToDouble(porcentagemPrevisto);

                    desvio = dados[0] - dados[1];

                    colors[0] = unchecked((int)0x90ff0000);
                    colors[1] = unchecked((int)0x90006633);

                    XYChart chart = new XYChart(960, 120);

                    chart.addExtraField(dados);
                    chart.addTitle(nomeObra, "arialbi.ttf");
                    chart.setPlotArea(100, 40, 800, 50, 0xf8f8f8, 0xFFFFFF);
                    BarLayer layer = chart.addBarLayer3(dados, colors);

                    Mark mark = chart.yAxis().addMark(porcentagemRealizado, chart.dashLineColor(corDesvio, Chart.DashLine), desvio.ToString("N2") + "%", "verdanab.ttf", 7);
                    mark.setMarkColor(chart.dashLineColor(corDesvio, Chart.DashLine), corDesvio);
                    chart.yAxis().addMark(porcentagemPrevisto, chart.dashLineColor(corDesvio, Chart.DashLine));
                    chart.yAxis().addZone(porcentagemRealizado, porcentagemPrevisto, 0xffff99);
                    mark.setAlignment(alignDesvio);

                    chart.swapXY();

                    chart.xAxis().setLabels(labels);
                    chart.yAxis().setLinearScale(0, 100, 5);
                    layer.setAggregateLabelFormat("{field0} %");
                    layer.setAggregateLabelStyle("verdanab.ttf", 7);
                    layer.setBarShape(Chart.CircleShape);
                    chart.yAxis().setColors(4, Chart.Transparent);

                    WebChartViewer cv = new WebChartViewer();
                    cv.Image = chart.makeWebImage(Chart.PNG);
                    string cliqueObra = "FullWindow('../../testeAsp/aspnet/Grafico_evo_fis_obra_comp_cli.asp?perc=" + dados[0] + "&pob_cod=" + codigoObra + "&pcc_cod=" + contrato + "','blank','yes')";
                    string chartURL = chart.makeSession(HttpContext.Current.Session, "Financeira" + contador);
                    cv.ImageMap = chart.getHTMLImageMap("javascript:" + cliqueObra + ";", " ", "title='Clique para ver o cronograma de " + nomeObra + ".'");

                    list.Add(cv);
                    chart = null;
                    cv = null;

                    contador++;

                }

                return list;
            }
            catch (Exception ex)
            {
                throw (ex);
            }
            finally
            {
                CloseConnection();
            }

        }

And in Codebehind

List<WebChartViewer> cw = (new Primanager.Common.Graficos()).EvolucaoFisicaCliente(conCod);
foreach (WebChartViewer listCw in cw)
{
     /// Add control in htmlCell
     chartsObras.Controls.Add((Control)listCw);
}

Re: MultiChart with ImageMap? its possible?

Posted by Peter Kwan on Apr-01-2009 17:43

Hi Marcos,

If you are using a MultiChart, you just need one WebChartViewer.

If you want to create the image map separately for each XYChart object, you can create them one by one (with the proper offset), then append them together, like:

MultiChart m = new MultiChart(width, 1200); //assume 300 pixels per chart for 4 charts
m.addChart(0, 0, xychart1);
m.addChart(0, 300, xychart2);
m.addChart(0, 600, xychart3);
m.addChart(0, 900, xychart4);

' Output the MultiChart
WebChartViewer1.Image = m.makeWebImage(Chart.PNG);

string myImageMap = "";
imageMap += xychart1.getHTMLImageMap(aaa, bbb, ccc, 0, 0);
imageMap += xychart1.getHTMLImageMap(ddd, eee, fff, 0, 300);
imageMap += xychart1.getHTMLImageMap(ppp, qqq, rrr, 0, 600);
imageMap += xychart1.getHTMLImageMap(xxx, yyy, zzz, 0, 900);

WebChartViewer1.ImageMap = myImageMap;

Hope this can help.

Regards
Peter Kwan

Re: MultiChart with ImageMap? its possible?

Posted by Marcos Aimola on Apr-02-2009 00:09

Thanks very mutch!!!!!!

Its working now!

Congratulations for realtime support!!!

Regards.
Marcos Aimola

Re: MultiChart with ImageMap? its possible?

Posted by Priti on Mar-15-2011 13:06

I am not getting tooltip by using multichart

Peter Kwan wrote:

Hi Marcos,

If you are using a MultiChart, you just need one WebChartViewer.

If you want to create the image map separately for each XYChart object, you can create them one by one (with the proper offset), then append them together, like:

MultiChart m = new MultiChart(width, 1200); //assume 300 pixels per chart for 4 charts
m.addChart(0, 0, xychart1);
m.addChart(0, 300, xychart2);
m.addChart(0, 600, xychart3);
m.addChart(0, 900, xychart4);

' Output the MultiChart
WebChartViewer1.Image = m.makeWebImage(Chart.PNG);

string myImageMap = "";
imageMap += xychart1.getHTMLImageMap(aaa, bbb, ccc, 0, 0);
imageMap += xychart1.getHTMLImageMap(ddd, eee, fff, 0, 300);
imageMap += xychart1.getHTMLImageMap(ppp, qqq, rrr, 0, 600);
imageMap += xychart1.getHTMLImageMap(xxx, yyy, zzz, 0, 900);

WebChartViewer1.ImageMap = myImageMap;

Hope this can help.

Regards
Peter Kwan

Re: MultiChart with ImageMap? its possible?

Posted by Peter Kwan on Mar-15-2011 23:30

Hi Priti,

Would you mind to inform me the charting code you are using? Are you using similar code to the code suggested in this thread?

Regards
Peter Kwan

Re: MultiChart with ImageMap? its possible?

Posted by Peter on Mar-22-2011 14:14

Hi Peter,

Yes I used same code only. But the problem was with Imagemap. As u mention previous .
WebChartViewer.ImageMap =myImageMap
where myImageMap is concatenation of individual chart.ImageMap.

I changed to
WebChartViewer.ImageMap =multichart.getHTMLImageMap("", "", "someText")

its working now.
Thanks for replying.

Peter Kwan wrote:

Hi Priti,

Would you mind to inform me the charting code you are using? Are you using similar code to
the code suggested in this thread?

Regards
Peter Kwan