Jump to content

Search the Community

Showing results for tags 'c3js'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • uniGUI Public
    • Announcements
    • General
    • Feature Requests
    • Installation
    • Deployment
    • Other Platforms
  • Licensing
    • Licensing
    • Ordering uniGUI
  • Bug Reports
    • Active Reports
    • Closed Reports
    • Old Bug Reports
  • uniGUI Development
    • General Development
    • uniGUI Releases & Roadmaps
    • Utilities
  • Mobile Platform
    • uniGUI Mobile
    • Mobile Browsers
  • Users Area
    • Sample Projects
    • Components and Code Samples
    • Third Party Components
  • Non-English
    • Non-English
  • Miscellaneous
    • Hosting
    • Server Security
    • Jobs

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 1 result

  1. 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
×
×
  • Create New...