Imagem De Fundo Num Gráfico

Agora minha tarefa é fazer um gráfico e ele é todo estilizado…

Vai ter uma imagem de fundo.

Vou utilizar o mesmo engine que já esta sendo utilizado no site.

Que é JavaScript/Ajax com macrosubstituição numa Div do arquivo que esta na View

Sei que o ideal seria postar uma dúvida dessas num forum específico para JavaScript, mas é que já to meio que ambientado por aqui… e creio que essa dica deve ser fácil pelo nível que vi do pessoal.

Ah, continuo sem resolver aquele outro problema … => Problema Com Objeto Tbdaterangepicker

Consegui colocar a imagem, utilizei este código, num fonte do VIEW

<div id="funil_chart"  class="center" style="height:600px; background-image: url(/studiofiscal2.com.br/web/novocrm/img/Funil-550.png) ;" ></div>

Mas a imagem fica repetindo

tem o comando pra ela não repetir no-repeat center

<div id="funil_chart" class="center" style="height:600px; background-image: url(/studiofiscal2.com.br/web/novocrm/img/Funil-550.png) no-repeat center ;" ></div>

mas daí sumiu a imagem de fundo

tirei o center e deu na mesma

<div id="funil_chart" class="center" style="height:600px; background-image: url(/studiofiscal2.com.br/web/novocrm/img/Funil-550.png) no-repeat ;" ></div>

Olhei no "console" e não vi nenhum erro relacionado ao código…

Alguém poderia me dizer como fazer com que a imagem ficasse aparecendo sem estar repetindo e centralizada ?

Consegui avançar um pouco…

Queria explicar oq tenho que fazer, nem é lá muita coisa.

Tenho que colocar uns dados neste gráfico (em anexo)

Se olharem vão ver uma área assinalada com uma flexa a esquerda.

Nessa área tenho que colocar umas bolinhas (como as bilinhas da direita) mas com valores dentro (assim como as da direita)

Pra ficar como a segunda imagem anexo demonstra.

É um gráfico (ou coisa parecida) que tem alguns valores fixos a outros dinâmicos.

Então já falei pra me mandarem um gráfico só com as partes fixas pra mim colocar as dinâmicas via programação.

Mas derrepente pode ser que seja melhor eu colocar tudo via programação inclusive as partes fixas.

To precisando de uma ajuda pra desenrola essa…

Achei uma biblioteca que possibilita um ‘merge’ de imagens

=> http://wideimage.sourceforge.net/

mas daí descobri que tem várias outras opções => http://wideimage.sourceforge.net/similar-projects/

Alguém, por acaso já tem experiência com esse tipo de tarefa, e poderia me indicar qual seria a melhor opção ?

A biblioteca é muito boa

vai dar pra mim fazer oq quero

fiz uma paginazinha de testes e é tranquilo

agora preciso de uma dica em termos de Yii

que é … [color="#FF0000"]aonde colocar os fontes desta biblioteca ?[/color]

como sei que tudo tem seu lugar certinho no Yii, quero fazer conforme o mais indicado

Como no meu projeto já existia pastas como js e css no mesmo nível de protected

então decidi colocar dentro de uma pasta que chamei de ‘lib’ portanto ficou lib/wideimage

Mas agora me vem outra dúvida

parte da solução consiste na criação de um arquivo de imagem temporário

e ainda o nome dele terá uma parte com a identificação do usuário logado

(senão dois usuários ao verem a mesma página, veriam o mesmo gráfico mas eles teriam que ver é cada um o seu)

Minha dúvida é [color="#FF0000"]onde colocaria este arquivo de imagem temporário ?[/color]

E outra coisa

essa parte do processamento da transformação da imagem

onde colocaria?

a princípio estou colocando em [color="#0000FF"]protected/views/site/index.php[/color]

que é o fonte onde seto a imagem

neste mesmo fonte, existem outros gráficos também, mas que são em JavaScript

usam a tecnologia de sobreescrever a div

e o código do JavaScript responsável pelo processamento destes gráficos ficam em [color="#0000FF"]/js/[/color]