Jump to content


Photo

unigui + highcharts Demo

unigui + highcharts Demo

  • Please log in to reply
8 replies to this topic

#1 Soho Software Team

Soho Software Team

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 135 posts

Posted 13 June 2014 - 02:42 AM

Attached File  unigui_highcharts_Demo.rar   618.75KB   488 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).


  • 2

#2 Delphi Developer

Delphi Developer

    Advanced Member

  • Moderators
  • 3663 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
  • 9876 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
  • 3663 posts

Posted 13 June 2014 - 10:59 AM

Here is my example of integration, (need jquery). 
 
Attached File  chart.png   50.1KB   149 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

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 96 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
  • 135 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





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