Jump to content

KendoUI with image in background


SergioFeitoza

Recommended Posts

Please ck this example of KENDO UI

https://demos.telerik.com/kendo-ui/line-charts/index

If I click  EXAMPLE I will see the chart with a background-image exactly like I need to do in a chart in my Unigui code

If I click VIEWSOURCE I will see the html code corresponding to the chart  including the part related to the background

 <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>

MY DOUBT is :

How can I insert a part of the  html code inside my Unigui ?

I think I did something like this in the past using "ClientEvents"

Can you help me on this ?

Link to comment
Share on other sites

2 hours ago, Hayri ASLAN said:

Hi

KendoUI is very different than ExtJS. If you can find an ExtJS example, we can implement it to UniGUI.

Hi Aslan  Thanks for writing. After trying without success receive information from Telerik support  I started to study severla posts  in the forums and identifyed that ome solution is using customCSS. I am testing now but something is still not working as I need. What I am doing is

including in the added event of Ext events of the chart  the function

function added(sender, container, pos, eOpts)
{
 sender.addCls('bg-chart');
}

AND 

in the custoCSS of servermodule something like

bg-chart {
   background-color: white;
   background-image: url('https://www.mysite.com/' + OneOfTheTypesString + '.bmp');
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;


When I run I do not get errors but the background do not appear ( as here Demo of core features in jQuery Line Charts widget | Kendo UI for jQuery (telerik.com))

Maybe my error is that intead of writing  background-image  above I have to write something like chartArea.background . I will test

The properties of the KENDOUI are below.

The result I need  is inthe figure"VCL" attached. What what I am getting with Unigui + Kendo is the other figure

KENDOUI chart properties

·         chartArea

·         chartArea.background

·         chartArea.border

·         chartArea.border.color

·         chartArea.border.dashType

·         chartArea.border.width

·         chartArea.height

·         chartArea.margin

·         chartArea.margin.bottom

·         chartArea.margin.left

·         chartArea.margin.right

·         chartArea.margin.top

·         chartArea.opacity

·         chartArea.width

 

 

withKendoUI.png

VCLchart.png

Link to comment
Share on other sites

Hi Sergio,

If you are using the UniFSKendoUI component (https://store.falconsistemas.com.br), you can be setting the background image, in the property:
ChartImageBackGround := 'https://demos.telerik.com/kendo-ui/content/shared/styles/world-map.png';

and to change the background without image set null
ChartImageBackGround :='null';

and change the background color to transparent:
ChartColorBaground: = '# f9f9f900';

image.png.9e80c82da6c2657a148a8035b6161bd8.pngFalcon

Falcon

  • Upvote 1
Link to comment
Share on other sites

On 2/27/2021 at 7:03 PM, Marlon Nardi said:

Check the version of your component, this property is available in version do UniFSKendoUI 1.1.2.55

Hello Marlon

Thank you very much. It worked well Problem solved.

Your Falcon components are great

Regards

Sergio

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
10 hours ago, Marlon Nardi said:

Hi @MVakili thanks for the Feedback.

Problem fixed, a new update for download is available in the store ( https://store.falconsistemas.com.br  ).

Tank you 

Ill check

Another question 

I want to change ChartChartSeriesDefault and ChartProperties at run time .. but It seems dosnt work 

may you help me

ChartChartSeriesDefault:='';
ChartChartSeriesDefault:=MSeriesDef.Lines.Text;

ChartProperties.Clear;
ChartProperties.Text:=MProperties.Lines.Text;

Both MSeriesDef and MProperties are TUniSyntaxEdit

Link to comment
Share on other sites

Just now, Marlon Nardi said:

Hi @MVakili, this feature of changing the settings of ChartChartSeriesDefault and ChartProperties in execution time, has not yet been implemented, we would have to study, for a possible implementation.

Ok ..What if I want to release and create again the chart?
is it possible ?

 

Link to comment
Share on other sites

On 4/7/2021 at 10:27 PM, jemmyhatta said:

hello Marlon, i just looking your kendoui chart,  small question can i change then font or font size of 'categoryAxis' ? and can u merge 2 different chart type into 1 chart?

 

Hi @jemmyhatta, all right?

Yes, this is possible.

You can even use the KendoUI documentation to search (https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/seriesdefaults.labels.font).

image.png.b0026a3e026b543465f36a8af7cd083e.png

image.png.68c2ccc409e18960c2b2d3ea1c55a3d1.png

Link to comment
Share on other sites

On 4/9/2021 at 4:08 AM, MVakili said:

Hi @Marlon Nardi

I finished runtime creating chart again 

But it seems can be control by component properties

for example I changed ChartProperties and send it to new chart creation 

but it wont change

 

s.png

Hi @MVakili I will improve the methods of updating the states, so that this is possible, I will publish a new update.

  • Like 1
Link to comment
Share on other sites

1 hour ago, Marlon Nardi said:

Hi @MVakili I will improve the methods of updating the states, so that this is possible, I will publish a new update.

Fixed, disponible in (https://store.falconsistemas.com.br) after changing anything, run the Chart.InitChart command, sample:


image.png.9ea6a76565e4a40bff6f7ce2b8eb3d7e.png

 

kendoui2.gif

  • Like 1
Link to comment
Share on other sites

thanks @Marlon Nardi for your answer, i have some not successful code,

procedure TFT_CHART.UniBitBtn3Click(Sender: TObject);
begin
 UniFSChart1.ChartSeries.Clear;
 UniFSChart1.ChartSeriesProperties.Clear;
 UniFSChart1.ChartProperties.Clear;

 UniFSChart1.ChartType := TUniFSKendoUIType(Column);
 UniFSChart1.ChartDataSet := UniMainModule.spDISIKPI1;
 UniFSChart1.ChartSeries.Values['categoryAxis'] := 'THN';
 UniFSChart1.ChartSeries.Values['Aktual'] := 'ACTUALX';
 UniFSChart1.ChartSeries.Values['Target'] := 'TARGETX';
 UniFSChart1.ChartSeriesDefaults := 'labels: {visible: true, font: "10px Tahoma", position: "outsideEnd", format: "#,#"}';
 UniFSChart1.ChartProperties.Values['valueAxis'] := '{labels: {font: "10px Tahoma", rotation: "auto", format: "#,#"}}';

// that label in category axis just disappear, if i dont use this coding, the label still in default font size

 UniFSChart1.ChartProperties.Values['categoryAxis'] := '{labels: {font: "10px Tahoma"}}';


 UniFSChart1.ChartLegendPosition := TUniFSKendoUIPosition.Bottom;
 UniFSChart1.ChartStacked := False;
 UniFSChart1.InitChart;
end;

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...