Jump to content

Kendo UI DataViz Charts


zilav
 Share

Recommended Posts

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!

post-12-0-82930700-1328035224_thumb.png

post-12-0-01060900-1328035237_thumb.png

post-12-0-45872800-1328035247_thumb.png

post-12-0-52041300-1328035258_thumb.png

post-12-0-72515000-1328035268_thumb.png

post-12-0-44955900-1328035275_thumb.png

KendoDataViz.zip

  • Upvote 3
Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...



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:

Link to comment
Share on other sites

  • 2 months later...

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

Link to comment
Share on other sites

  • 2 weeks later...

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
  • Upvote 2
Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

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)]);}});

 

 

Link to comment
Share on other sites

  • 6 months later...

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

Link to comment
Share on other sites

  • 1 month later...
  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...