Welcome Guest Search | Active Topics |

resize chart onmousedown
Options
Previous Topic Next Topic
nguyenngoc
#1 Posted : Sunday, September 16, 2012 8:15:35 AM(UTC)
Rank: Member

Groups: Registered
Joined: 7/21/2012(UTC)
Posts: 13

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
help ?
Back to top
Dragan
#2 Posted : Monday, September 17, 2012 5:01:35 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You can use jQueryUI resizable:

http://jqueryui.com/demos/resizable/

Just set:

Code:
$( "#jqChart" ).resizable();


and it will work.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
nguyenngoc
#3 Posted : Friday, September 21, 2012 10:15:57 AM(UTC)
Rank: Member

Groups: Registered
Joined: 7/21/2012(UTC)
Posts: 13

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
you can tell this is not, I do it but the chart is not resizable
Back to top
Dragan
#4 Posted : Saturday, September 22, 2012 4:52:48 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You need to include the jQuery UI javascript file as well. You can download it from:

http://jqueryui.com/download
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Dragan
#5 Posted : Sunday, October 7, 2012 8:22:04 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Here is live sample:

http://www.jqchart.com/samples/ChartFeatures/ResizableChart
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
lung12
#6 Posted : Friday, October 12, 2012 7:02:26 PM(UTC)
Rank: Member

Groups: Registered
Joined: 8/16/2012(UTC)
Posts: 15

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
I have jqChartJQueryPlugin_3_5_1_0_Release and use AxisSettings.htm for resizable testing but it does not work.
I edit the file:
1. add jquery-ui-1.9.0.custom.js to the js directory.
2. add <script src="../js/jquery-ui-1.9.0.custom.js" type="text/javascript"></script>
3. add $("#jqChart").resizable();

Any idea why not working?


The source test code as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML5 Chart jQuery Plugin - Axis Settings </title>
<link rel="stylesheet" type="text/css" href="../css/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.jqRangeSlider.css" />

<link rel="stylesheet" type="text/css" href="../themes/smoothness/jquery-ui-1.8.21.css" />
<script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../js/jquery-ui-1.9.0.custom.js" type="text/javascript"></script>

<script src="../js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="../js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>


<!--[if IE]><script lang="javascript" type="text/javascript" src="../js/excanvas.js"></script><![endif]-->
<script lang="javascript" type="text/javascript">
$(document).ready(function () {
$('#jqChart').jqChart({
title: { text: 'Axis Settings' },
axes: [
{
location: 'left',
minimum: 10,
maximum: 100,
interval: 10
}
],
series: [
{
type: 'column',
data: [['a', 70], ['b', 40], ['c', 85], ['d', 50], ['e', 25], ['f', 40]]
}
]
});
});

$("#jqChart").resizable();
</script>
</head>
<body>
<div>
<div id="jqChart" style="width: 500px; height: 300px;">
</div>
</div>
</body>
</html>
Back to top
Dragan
#7 Posted : Saturday, October 13, 2012 4:02:34 AM(UTC)
Rank: Advanced Member

Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered
Joined: 1/3/2011(UTC)
Posts: 483

Thanks: 0 times
Was thanked: 87 time(s) in 87 post(s)
Hi,

You need to call $("#jqChart").resizable(); within the

$(document).ready(function () {...} block.

Here is the code:

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Axis Settings' },
                axes: [
                        {
                            location: 'left',
                            minimum: 10,
                            maximum: 100,
                            interval: 10
                        }
                      ],
                series: [
                            {
                                type: 'column',
                                data: [['a', 70], ['b', 40], ['c', 85], ['d', 50], ['e', 25], ['f', 40]]
                            }
                        ]
            });

            $('#jqChart').resizable();
});
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
lung12
#8 Posted : Monday, October 15, 2012 1:13:36 PM(UTC)
Rank: Member

Groups: Registered
Joined: 8/16/2012(UTC)
Posts: 15

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Thanks.
This works.
Back to top
Users browsing this topic
Guest (6)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.167 seconds.