Jump to content

Using C3.js under uniGUI | D3-based reusable chart library


Recommended Posts

Hi, I want to use third party javascript library for my web front end, so I search posts for how to use javascript library like c3js working under uniGUI, I found uniHtMLFrame component can do it, following is my steps:

 

step1:

ServerModule.pas -> CustomFiles -> Add

css/c3.css
js/d3.v3.min.js
js/c3.js

 

step2:

Main.pas -> Add

UniHTMLFrame1\ UniButton1\ UniButton2\ UniButton3

Click UniButton1 Load html file into UniHTMLFrame1.

Click UniButton2 Update Web Front End with javascript code random numbers.

Click UniButton3 Update Web Front End with uniGui(delphi code) random numbers.

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  HTML.HTML.LoadFromFile('files\simple.html');
end;
procedure TMainForm.UniButton2Click(Sender: TObject);
begin
  UniSession.AddJS(
    'var chart = c3.generate({                                                                                                                  ' +
    '  data: {                                                                                                                                  ' +
    '    columns: [                                                                                                                             ' +
    '      [''data1'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000], ' +
    '      [''data2'', Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000, Math.random()*1000]  ' +
    '    ],                                                                                                                                     ' +
    '    onclick: function (d, element) { console.log("onclick", d, element); },                                                                ' +
    '    onmouseover: function (d) { console.log("onmouseover", d); },                                                                          ' +
    '    onmouseout: function (d) { console.log("onmouseout", d); },                                                                            ' +
    '  }                                                                                                                                        ' +
    '});                                                                                                                                        ' );
end;
procedure TMainForm.UniButton3Click(Sender: TObject);
var
  data1: array[0..5] of Integer;
  data2: array[0..5] of Integer;
  i: Integer;
begin
  for i := 0 to 5 do
  begin
    data1[i] := Random(1000);
    data2[i] := Random(1000);
  end;
  UniSession.AddJS(
    'var chart = c3.generate({                                                                                                                                                                 ' +
    '  data: {                                                                                                                                                                                 ' +
    '    columns: [                                                                                                                                                                            ' +
    '      [''data1'', ' + IntToStr(data1[0]) + ', ' + IntToStr(data1[1]) + ', ' + IntToStr(data1[2]) + ', ' + IntToStr(data1[3]) + ', ' + IntToStr(data1[4]) + ', ' + IntToStr(data1[5]) +'], ' +
    '      [''data2'', ' + IntToStr(data2[0]) + ', ' + IntToStr(data2[1]) + ', ' + IntToStr(data2[2]) + ', ' + IntToStr(data2[3]) + ', ' + IntToStr(data2[4]) + ', ' + IntToStr(data2[5]) +'], ' +
    '    ],                                                                                                                                                                                    ' +
    '    onclick: function (d, element) { console.log("onclick", d, element); },                                                                                                               ' +
    '    onmouseover: function (d) { console.log("onmouseover", d); },                                                                                                                         ' +
    '    onmouseout: function (d) { console.log("onmouseout", d); },                                                                                                                           ' +
    '  }                                                                                                                                                                                       ' +
    '});                                                                                                                                                                                       ' );
end;

simple.html

<html>
  <head>
    <!-- link rel="stylesheet" type="text/css" href="../css/c3.css" -->
  </head>
  <body>
    <div id="chart"></div>

    <!-- script src="../js/d3.v3.min.js" charset="utf-8"></script -->
    <!-- script src="../js/c3.js"></script -->
    <script>
      var chart = c3.generate({
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          onclick: function (d, element) { console.log("onclick", d, element); },
          onmouseover: function (d) { console.log("onmouseover", d); },
          onmouseout: function (d) { console.log("onmouseout", d); },
        }
      });
    </script>
  </body>
</html>

The code run smoothly and I attach uniGUI project including csj3. If you have more concise code, let me know.

 

My question: Is there more easy and Efficient method to interface between Server End and Front End javascript?

because I need to monitor some modbus device like thermometers or switches connecting to my uniGUI server directly, and updating the display accordingly, and it is realtime monitor and quick response, the smaller traffic between server and web front is welcome.

 

thermometers <-- Modbus TCP/RTU --> uniGUI server <-- javascript --> web front (C3js)

 

Thanks Farshad Mohajeri, Delphi Developer,  mohammad et al for your valuable posts.

C3js.rar

Link to post
Share on other sites

Well, in our first unigui projects we have used c3.js library and it is lovely one. But now we use only unicharts and I think it give us all what we want, so I afvice you using uniguichart component and if there is anything that you do not know how to use let me know and I will see how can I help you.

Link to post
Share on other sites

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.

×
×
  • Create New...