Kendo UI DataViz Charts

[zilav]

A simple wrapper class and demo project using Kendo charts in UniGUI applications.

Kendo Charts demos

Kendo Charts API

 

This project showcases only a small amount of available customization options, refer to Kendo API for help.

Please note: this is a demo, it doesn't have checks, exception handlers and might contain bugs. Use it as an example to write your own class.

Have fun!

KendoDataViz.zip

[rsanford]

thank you!

[richard_wu]

very good !

[delphiboy]

Good Job!

[Farshad Mohajeri]

Great. Thanks for sharing.

[Marlon Nardi]

try{O83.stopAll()}catch(e){};$("#O2F_id").find("div").find("div").kendoChart({title: {text: "Internet Users"},theme: "Default",seriesDefaults: {type: "column",stack: false,labels: {visible: true, position: "insideEnd", format: "{0}%"}},categoryAxis: {categories: [2005,2006,2007,2008,2009]},series: [{name: "United States", data: [67.96,68.93,75,74,78]},{name: "World", data: [15.7,16.7,20,23.5,26.6]}],valueAxis: {labels: {format: "{0}%"}},legend: {position: "top"},seriesClick: function(e) {ajaxRequest(MainForm.UniHTMLFrame1, "Click", ["name="+e.series.name, "category="+e.category, "value="+((typeof e.value==='object')?e.value.x+","+e.value.y:e.value)]);}});

does not work in version: 0.91.0.981 of UniGui:

[mehmet07]

Cannot call method 'width' of undefined

 

try{O83.stopAll()}catch(e){};$("#O2F_id").find("div").find("div").kendoChart({title: {text: "Internet Users"},theme: "Default",seriesDefaults: {type: "column",stack: false,labels: {visible: true, position: "insideEnd", format: "{0}%"}},categoryAxis: {categories: [2005,2006,2007,2008,2009]},series: [{name: "United States", data: [67.96,68.93,75,74,78]},{name: "World", data: [15.7,16.7,20,23.5,26.6]}],valueAxis: {labels: {format: "{0}%"}},legend: {position: "top"},seriesClick: function(e) {ajaxRequest(MainForm.UniHTMLFrame1, "Click", ["name="+e.series.name, "category="+e.category, "value="+((typeof e.value==='object')?e.value.x+","+e.value.y:e.value)]);}});

 

 

 

 

My unigui version : 0.93.1.999

[knopix]

can not unigui 0.93

 

 

 

 

 

Regards

Knopix

[eono]

Hi All,

 

Got stock UniKendoDataViz for work.

 

Versions:

UniGUI: Version:0.93.1 build 999

Delphi: XE2

TUniKendoDataViz:  stock version above

 

Edits:

1.  Constructor:

constructor TUniKendoDataViz.Create(HostFrame: TUniHTMLFrame);

var

  p: TWinControl;

begin

  HTMLFrame := HostFrame;

  DOM_ID := HTMLFrame.JSName + '_id';

  p := HTMLFrame.Parent;

  while not ((p is TUniForm) or (p is TUniFrame)) do

    p := p.Parent;

  AjaxHandler := p.Name + '.' + HTMLFrame.Name;

  HTMLFrame.OnAjaxEvent := UniHTMLFrameAjaxEvent;

  Series := TStringList.Create;

  Properties := TStringList.Create;

  SeriesProperties := TStringList.Create;

  Title := 'Kendo Chart';

  Theme := 'default';

  DefaultType := 'column';

  Clear;

end;

 

 

2. Render:

function TUniKendoDataViz.Render;

var

  chart, sl: TStringList;

  i: integer;

  sClick: string;

begin

  chart := TStringList.Create;

  sl := TStringList.Create;

  { 04-may-2013}

  //add tooltip

  //chart.Add('tooltip: {visible: true,format: "{0:C}",template: "#= series.name #<br /> #number_format(#= value #)"}'); kendo.template(number_format(5000000))

  if sametext(DefaultType,'pie')  then

    chart.Add('tooltip: {visible: true,format: "{0:C}",template: "#= category #<br /> #= number_format(value,2,''.'','','') #"}')

  else

    chart.Add('tooltip: {visible: true,format: "{0:C}",template: "#= series.name #<br /> #= number_format(value,2,''.'','','') #"}');

  { 04-may-2013}

 

  // map Title property

  chart.Add(Format('title: {text: "%s"}', [Title]));

  // map Theme property

  chart.Add(Format('theme: "%s"', [Theme]));

  // map DefaultType, DefaultProperties and Stack property

  sl.Add(Format('type: "%s"', [DefaultType]));

  sl.Add(Format('stack: %s', [boolToStr(Stacked)]));

  if SeriesDefaults <> '' then sl.Add(SeriesDefaults);

  chart.Add(Format('seriesDefaults: {%s}', [implode(sl)]));

  sl.Clear;

  // generates data series

  for i := 0 to Series.Count - 1 do begin

    if Series.Names <> 'categoryAxis' then

      sl.Add(RenderSeries(Series.Names))

    else

      chart.Add(Format('categoryAxis: %s', [RenderSeries('categoryAxis')]));

  end;

  if sl.Count > 0 then chart.Add(Format('series: [%s]', [implode(sl)]));

  sl.Clear;

  // add other additional properties

  for i := 0 to Properties.Count - 1 do

    chart.Add(Format('%s: %s', [Properties.Names, Properties.ValueFromIndex]));

  // assign onclick callback

  chart.Add(Format('seriesClick: function(e) {ajaxRequest(%s, "Click", '+

    '["name="+e.series.name, "category="+e.category, "value="+((typeof e.value===''object'')?e.value.x+","+e.value.y:e.value)]);}',

    [AjaxHandler]));

  (*sClick := Format('ajaxRequest(%s, "Click", '+

    '["name="+e.series.name]);',

    [AjaxHandler]);

  chart.Add('seriesClick: function(e) {' + sClick + '}'); *)

  // get the final KendoChart javascript object

  Result := '{' + Implode(chart) + '}';

  FreeAndNil(sl);

  FreeAndNil(chart);

end;

 

 

3.  Draw:

procedure TUniKendoDataViz.Draw;

var

  str: string;

begin

  (*  the 2 find('div') statements are commented out below. This is the only way to have it draw. I have not researched the reason why.  *)

  str := Format('$("#%s")./*find("div").find("div").*/kendoChart(%s);', [DOM_ID, Render]);

  UniSession.AddJS(str);

end;

 

 

 

@Admin: Hope posting source code updates to components as regular posts is allowd?

@Zilav: I could send you my updates so u can incorporate into your sources.

 

Regards

[dmitry.akimenko]

Zilav, Eldad,

   can you please share the updated project for the latest unigui version?

  

Regards, Dmitry

[zilav]

Eldad please link me the fixed version and I'll update the first post.

[Marlon Nardi]

Thank Eldad, Problem solved ...

 

Att, Marlon

[eono]

Hi All,

 

Just saw the updates to this post! I had configured to be notified when this post is updated, but guess it didn't work out.

 

@Zilav: will send in a couple of hours.

 

Kind regards.

[mehmet07]

Hi,

i executing my application exe(standalone) , i get no error.

But i executing dll and I get the following error.

 

Problem solved ...

 

 

Object [object Object] has no method 'kendoChart'

 

 

 

_rsov_(O62,0);$("#O2F_id").kendoChart({tooltip: {visible: true,format: "{0:C}",template: "#= series.name #<br /> #= number_format(value,2,'.',',') #"},title: {text: "Internet Users"},theme: "Default",seriesDefaults: {type: "bar",stack: false,labels: {visible: true, position: "insideEnd", format: "{0}%"}},categoryAxis: {categories: [2005,2006,2007,2008,2009,2010,2017,2018,2019,2027,2038,2049,2020,2021,2032,2042]},series: [{name: "United States", data: [67.96,68.93,75,74,78,68.93,75,74,78,75,74,78,78,75,74,78]},{name: "World", data: [15.7,16.7,20,23.5,26.6,16.7,20,23.5,26.6,20,23.5,26.6,26.6,20,23.5,26.6]},{name: "deneme", data: [67.96,68.93,75,74,78,68.93,75,74,78,75,74,78,78,75,74,78]}],valueAxis: {labels: {format: "{0}%"}},legend: {position: "top"},seriesClick: function(e) {ajaxRequest(MainForm.UniHTMLFrame1, "Click", ["name="+e.series.name, "category="+e.category, "value="+((typeof e.value==='object')?e.value.x+","+e.value.y:e.value)]);}});

 

 

[eelias]

A simple wrapper class and demo project using Kendo charts in UniGUI applications.

Kendo Charts demos

Kendo Charts API

 

This project showcases only a small amount of available customization options, refer to Kendo API for help.

Please note: this is a demo, it doesn't have checks, exception handlers and might contain bugs. Use it as an example to write your own class.

Have fun!

 

 

Zilav,

 

Thank you in sharing this important code.

 

I have added the changes that Eldad Onojetah suggested and that fixed the problem as reported from others on this thread.

 

I wonder if  you have a newer version of your component and if you have added new options that you could share with us, including the fix.

 

I am using in UniGUI 0.93, did you test on 0.94 and is working?

 

Thank you

 

Eduardo

[brunotoira]

it's possible zoom chart?

Anyone knows how set a color of series chart?

 

Thanks

Bruno

[ChenHaibin]

Could you convert the MainForm to a Frame?

Thank you!

[mehmet07]

how i can kendo ui chart ?

 

http://demos.telerik.com/kendo-ui/radial-gauge/index

[topajin]

very good,thanks for sharing!