Custom html template with graphics

WEB TMS WEB Core
1

I'm studying tms web through demos.

I have a question and it is possible to customize the html
https://blackrockdigital.github.io/startbootstrap-sb-admin/charts.html

It is possible to put in place of the graphic of the template a graphic of the webform
Using the components directly in the form I still can not get a resposivo result like using templates.

In the form I was able to make a graph using the TGoogleChart demo

2

Hi,


I'm not sure I fully understand your question.
Can you please explain exactly what you are trying to do and what is going wrong or isn't working so I can further investigate this?
3

How can I change the graph of this model "Area Chart Example" by taking the data from the webform.
https://blackrockdigital.github.io/startbootstrap-sb-admin/charts.html

I want to use this template and put in place a chart with data from my database.

I have not yet tried to put in html a panel type space with tag id example id = 'graphic'

and use it in webform

gc: = TWebGoogleChart.Create (Self);
   gc.Parent: = Self;
   gc.ElementClassName: = 'grafico';

It's possible?

--------------

Como posso mudar o grafico desse modelo "Area Chart Example" pegando os dados vindo do webform.
https://blackrockdigital.github.io/startbootstrap-sb-admin/charts.html

Quero usar esse template e colocar no lugar um grafico com dados do meu banco de dados.

Ainda nao tentei colocar no html um espaco tipo panel com tag id exemplo id='grafico'

e usar assim no webform

gc := TWebGoogleChart.Create(Self);
  gc.Parent := Self;
  gc.ElementClassName := 'grafico';

E possivel?

4

Support I know it is a new product more and very complicated to buy a product and have to turn it on its own.
Examples of html are very weak.

A suggestion of improvement so that the product can grow even faster:
Since the idea and having a web solution to be flexible and customizable, we need more real examples.
HTML Login, HTML Master Detail, HTML Entries, HTML Search.
And also the only component has an example over Xdata something that forces agent to buy another license that is not very cheap.
Well its not a criticism and its just a suggestion.

5

I made a test by putting in the html the id tag

<div class="col-lg-6 col-sm-12 col-md-6">
          <div class="card">
            <div class="card-header d-flex align-items-center">
              <h4>Grafico 1
</h4>
            </div>
            <div class="card-body">
              <div id="grafico1">

              </div>
            </div>
          </div>
        </div>

and in the webform I created a webpanel and created within the webpainel the TWebGoogleChart

 gc := TWebGoogleChart.Create(Self);
  gc.Parent := WebPanel1;

  gc.ElementID := 'grafico1';

and it worked

https://ibb.co/eUhiDV

I have to adjust some things more already worked out.
Do you have any tips to do otherwise, more professional?

Sorry English on google translate
----------------------------------------------------

Fiz um teste colocando no html a tag id

<div class="col-lg-6 col-sm-12 col-md-6">
          <div class="card">
            <div class="card-header d-flex align-items-center">
              <h4>Grafico 1</h4>
            </div>
            <div class="card-body">
              <div id="grafico1">

              </div>
            </div>
          </div>
        </div>

e no webform criei um webpanel e criei dentro do webpainel o TWebGoogleChart

 gc := TWebGoogleChart.Create(Self);
  gc.Parent := WebPanel1;
  gc.ElementID := 'grafico1';

e deu certo

https://ibb.co/eUhiDV

tenho que ajustar algumas coisas mais ja deu certo.

Tem alguma dica para fazer de outra forma, mais profissional?

Desculpa o ingles em google tradutor


6

Your technique to bind a Pascal created GoogleChart with a HTML DIV element is correct.

I'm not sure what you mean by doing otherwise / more professional. With the technique you used, you can link from Pascal code to the chart in the most sophisticated HTML you wish to use.

With respect to samples, there are already a lot of samples and as TMS WEB Core can be used with many different backends (including XData), we built most of the samples to be backend independent. Otherwise, we would need to provide backend code for many different technologies. This is something that over time we want to expand. For now, we unfortunately did not yet have enough time for.