Jump to content


Photo

unigui + highcharts Demo

unigui + highcharts Demo

  • Please log in to reply
10 replies to this topic

#1 Soho Software Team

Soho Software Team

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 136 posts

Posted 13 June 2014 - 02:42 AM

Attached File  unigui_highcharts_Demo.rar   618.75KB   616 downloads

highcharts is free & open source http://www.hcharts.cn/demo/index.php http://www.highcharts.com/demo 1)make Html file Unigui Form's DataSet Make Html File (For example: chart.html or chart.htm). and Save To UniguiServer's Directory(For example: examples or files or temp). 2)show chart unigui form add TUniURLFrame,Set TUniURLFrame.Url=\UniguiServer's Directory\html File (For example: \examples\Chart.html).


  • 3

#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5179 posts

Posted 13 June 2014 - 06:21 AM

Hi SohoSoftWare. 
 
+1 
 
* FREE FOR NON-COMMERCIAL 
Do you want to use Highcharts for a personal website, a school site or a non-profit organisation? Then you don't need our permission, just go on! http://www.highcharts.com/license
 
Anyway thanks for sharing...

  • 0

#3 Farshad Mohajeri

Farshad Mohajeri

    Administrator

  • Administrators
  • 10429 posts

Posted 13 June 2014 - 06:51 AM

highcharts is free &  open source 

 

 

http://www.hcharts.cn/demo/index.php

 

http://www.highcharts.com/demo

 

Have you integrated it in a uniGUI project?

If yes, please send a sample project.


  • 0

#4 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5179 posts

Posted 13 June 2014 - 10:59 AM

Here is my example of integration, (need jquery). 
 
Attached File  chart.png   50.1KB   150 downloads
 
How to use? 
 
1. Download "jquery" from here "http://ajax.googleap...1/jquery.min.js" and copy to the directory "/files/". 
 
2. For this example, you need to download some files: 
they also need to copy to the folder "files" 
 
3. Add CustomFiles in UniServerModule: 
files/jquery.min.js
files/highcharts.js
files/highcharts-3d.js
files/exporting.js

4. Add CustomCSS in UniServerModule: 

#container, #sliders {
min-width: 310px; 
max-width: 800px;
margin: 0 auto;
}
#container {
height: 400px; 
}

5. Add "HTMLFrame1"

 

6. HTMLFrame1.HTML

<div id="container"></div>
<div id="sliders">
<table>
<tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
   <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
</table>
</div>

7. HTMLFrame1.AfterScript

$(function () {
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart rotation demo'
        },
        subtitle: {
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    


    // Activate the sliders
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });


    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
});

 

source: http://www.highchart...umn-interactive

 

demo: http://jsfiddle.net/...mn-interactive/

 

 
Sincerely.

  • 1

#5 ganzqgy

ganzqgy

    Advanced Member

  • Members
  • PipPipPipPip
  • 143 posts

Posted 13 June 2014 - 12:56 PM

HTMLFrame1.AfterScript    0.96 1046   no


  • 0

#6 Schlingel

Schlingel

    Member

  • uniGUI Subscriber
  • PipPip
  • 36 posts
  • LocationAustria

Posted 13 June 2014 - 02:59 PM

Hello

 

I work a few month with Highcharts/highstock  -> no problems, work without know restrictions

 

last prototyp(not finished):

[click on Show chart]

 

http://schlingel.no-...Engine_data.dll

 

 

Schlingel


  • 1

#7 mmurgas

mmurgas

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 102 posts

Posted 23 June 2016 - 09:54 PM

hello .... how do to fill graphics from a database?

 

Thanks


  • 0

#8 Soho Software Team

Soho Software Team

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 136 posts

Posted 05 September 2016 - 12:23 AM

uploaded demo zip file


  • 0

#9 aGaVVa

aGaVVa

    Newbie

  • Members
  • Pip
  • 8 posts

Posted 14 August 2017 - 02:23 PM

How to dynamic add to chart series from main program (VCL)? 

 

How to use series.addPoint([x, y]) from main program (VCL)?


  • 0

#10 SayeyeZohor

SayeyeZohor

    Newbie

  • uniGUI Subscriber
  • Pip
  • 6 posts

Posted 11 July 2018 - 04:40 AM

 

Here is my example of integration, (need jquery). 
 
 
How to use? 
 
1. Download "jquery" from here "http://ajax.googleap...1/jquery.min.js" and copy to the directory "/files/". 
 
2. For this example, you need to download some files: 
they also need to copy to the folder "files" 
 
3. Add CustomFiles in UniServerModule: 
files/jquery.min.js
files/highcharts.js
files/highcharts-3d.js
files/exporting.js

4. Add CustomCSS in UniServerModule: 

#container, #sliders {
min-width: 310px; 
max-width: 800px;
margin: 0 auto;
}
#container {
height: 400px; 
}

5. Add "HTMLFrame1"

 

6. HTMLFrame1.HTML

<div id="container"></div>
<div id="sliders">
<table>
<tr><td>Alpha Angle</td><td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td></tr>
   <tr><td>Beta Angle</td><td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td></tr>
</table>
</div>

7. HTMLFrame1.AfterScript

$(function () {
    // Set up the chart
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart rotation demo'
        },
        subtitle: {
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    


    // Activate the sliders
    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });


    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();
});

 

source: http://www.highchart...umn-interactive

 

demo: http://jsfiddle.net/...mn-interactive/

 

 
Sincerely.

 

 

hi thanks for this post
please upload unigui demo ...
not working ...


  • 0

#11 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 5179 posts

Posted 11 July 2018 - 05:38 AM

Hi,

 

hi thanks for this post
please upload unigui demo ...
not working ...

 

I just gave a sequence of actions to make it work, there were no attached demos (only in the first post)

 

And, can you please specify which edition and build of UniGUI are you using?!


  • 0





Also tagged with one or more of these keywords: unigui + highcharts Demo

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users