Jump to content

unigui + highcharts Demo


ZhangLazarus
 Share

Recommended Posts

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).

  • Upvote 3
Link to comment
Share on other sites

Here is my example of integration, (need jquery). 
 
post-906-0-56121400-1402656823_thumb.png
 
How to use? 
 
1. Download "jquery" from here "http://ajax.googleapis.com/ajax/libs/jquery/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.highcharts.com/demo/3d-column-interactive

 

demo: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-column-interactive/

 

 
Sincerely.
  • Upvote 1
Link to comment
Share on other sites

  • 2 years later...
  • 2 months later...
  • 11 months later...
  • 10 months later...

 

Here is my example of integration, (need jquery). 
 
 
How to use? 
 
1. Download "jquery" from here "http://ajax.googleapis.com/ajax/libs/jquery/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.highcharts.com/demo/3d-column-interactive

 

demo: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/3d-column-interactive/

 

 
Sincerely.

 

 

hi thanks for this post

please upload unigui demo ...

not working ...

Link to comment
Share on other sites

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?!

Link to comment
Share on other sites

  • 4 years 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...