Welcome Guest Search | Active Topics |

Get canvas coords from point
Options
Previous Topic Next Topic
jpk81
#1 Posted : Monday, June 16, 2014 8:04:40 AM(UTC)
Rank: Newbie

Groups: jQueryChart, Registered
Joined: 6/4/2014(UTC)
Posts: 2

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Hi, I am trying to get the canvas coordinates from 2 points on my chart where the lines cross zero. I am trying to overlay some information that will show the user the difference between the two points at the crossing. I have created 2 lines that start from below 0 and continue on. There is a third line drawn that plots two extra points at the zero intersection, it is this line that I am trying to get the coordinates from, any help?
Back to top
Dragan
#2 Posted : Tuesday, June 17, 2014 7:48:36 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)
You can try using the following code:

Code:
    <script lang="javascript" type="text/javascript">

        $(document).ready(function () {


            $('#jqChart').jqChart({
                title: { text: 'Line Chart' },
                tooltips: { type: 'shared' },
                animation: { duration: 1 },
                series: [
                    {
                        type: 'line',
                        title: 'Series 1',
                        strokeStyle: '#418CF0',
                        lineWidth: 2,
                        data: [[1, 62], [2, 60], [3, 68],
                               [4, 58], [5, 52], [6, 60], [7, 48]]
                    },
                    {
                        type: 'line',
                        title: 'Series 2',
                        strokeStyle: '#FCB441',
                        lineWidth: 2,
                        data: [[1, 46], [2, 40], [3, 62],
                               [4, 65], [5, 60], [6, 36], [7, 70]]
                    }
                ]
            });

            $('#button').click(function () {

                var chart = $('#jqChart').jqChart('chart');
                var axes = chart.axes.items;

                var xAxis = axes[0];
                var yAxis = axes[1];

                // the coordiates of (1, 62) data point.
                var xCoord = xAxis.getPosition(1);
                var yCoord = yAxis.getPosition(62);

            });
        });
    </script>

</head>
<body>
    <div>
        <div id="jqChart" style="width: 500px; height: 300px;"></div>
        <input type="button" id="button" value="Click" />
    </div>
</body>
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
jpk81 on 6/19/2014(UTC)
jpk81
#3 Posted : Thursday, June 19, 2014 2:59:36 AM(UTC)
Rank: Newbie

Groups: jQueryChart, Registered
Joined: 6/4/2014(UTC)
Posts: 2

Thanks: 1 times
Was thanked: 0 time(s) in 0 post(s)
Thanks!
Back to top
nelsonbn
#4 Posted : Monday, February 2, 2015 6:43:55 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 9/4/2014(UTC)
Posts: 6

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
I would like to know if it's possible to know the canvas coordenates with "getPosition" from the axis of the "Category" type.

When I try to use "getPosition" on a "Category" axis, I get "NaN".

Code:

               <script lang="javascript" type="text/javascript">
            $(document).ready(function () {
                $('#jqChart').jqChart({
                    tooltips: { type: 'shared' },
                    axes: [
                        {
                            type: 'category',
                            location: 'bottom',
                        },
                        {
                            type: 'linear',
                            location: 'left',
                        }
                    ],
                    series: [
                        {
                            type: 'line',
                            strokeStyle: '#418CF0',
                            lineWidth: 2,
                            data: [["A", 62], ["B", 60], ["C", 68],
                                   ["D", 58], ["E", 52], ["F", 60], ["G", 48]]
                        }
                    ]
                });

                $('#jqChart').bind('dataHighlighting', function (event, data) {
                
                    if(data) {
                        var chart = $('#jqChart').jqChart('chart');
                        var axes = chart.axes.items;
                        
                        var xAxis = axes[0];
                        var yAxis = axes[1];
                        
                        var xCoord = xAxis.getPosition(data.dataItem[0]);
                        var yCoord = yAxis.getPosition(data.dataItem[1]);
                        
                        console.log("::::::::   ", xCoord);
                        console.log("::::::::   ", yCoord);
                    }
                });
            });
        </script>
Back to top
Dragan
#5 Posted : Tuesday, February 3, 2015 4:59:14 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,

"getPosition" method requires number values. You can modify your code to:


Code:
$('#jqChart').bind('dataHighlighting', function (event, data) {

                if (data) {
                    var chart = $('#jqChart').jqChart('chart');
                    var axes = chart.axes.items;

                    var xAxis = axes[0];
                    var yAxis = axes[1];

                    var indexOf = $.inArray(data.dataItem, data.series.data);

                    var xCoord = xAxis.getPosition(indexOf);
                    var yCoord = yAxis.getPosition(data.dataItem[1]);

                    console.log("::::::::   ", xCoord);
                    console.log("::::::::   ", yCoord);
                }
            });
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
nelsonbn
#6 Posted : Tuesday, February 3, 2015 10:13:01 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 9/4/2014(UTC)
Posts: 6

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Thank you for the quick answer. I've tested your solution and works perfectly. Again, thank you, I've been stuck with this problem for a while.
Back to top
Users browsing this topic
Guest (2)
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.087 seconds.