Welcome Guest Search | Active Topics |

multiple axisY for AJAX data
Options
Previous Topic Next Topic
evangels
#1 Posted : Thursday, November 14, 2013 1:12:19 AM(UTC)
Rank: Member

Groups: ExpiredLicense, Registered
Joined: 7/30/2013(UTC)
Posts: 15

Thanks: 6 times
Was thanked: 0 time(s) in 0 post(s)
hi sir,

i'm using ajax call to draw a multiple Y axis chart with below sample, but the sample is single axis,

Binding to Remote Data

i tried to make it multiple with below code, but failed, the y2 data can't be bind to right axis, always bind with left axis.

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Binding to Remote Data' },
                //animation: { duration: 1 },
                dataSource: {
                    ajax: {
                        type: "POST",
                        url: "chart_action.php",
                        async: false,
                        data: {dept:'MOS3',actionId:'loadChart'},
                        dataType: 'json'
                    }
                },
                axes: [
                       {   name:'rec_time',
                           location: 'bottom',
                           type: 'dateTime',
                            labels: {
                            font: '10px sans-serif',
                            angle: -90
                            }
                       },
                       {   name:'y1',
                           location: 'left',
                           type: 'numeric'
                       },
                       {   
                           name:'y2',
                           location: 'right',
                           type: 'numeric'
                       }
                    ],
                series: [
                    {
                        type: 'column',
                        xValuesField: {
                            name: 'rec_time',
                            type: 'dateTime' // string, numeric, dateTime
                        },
                        yValuesField: {
                            name: 'qty',
                            axisY: 'y1',
                            type: 'numeric' // string, numeric, dateTime
                        }
                    },
                    {
                        type: 'line',
                        xValuesField: {
                            name: 'rec_time',
                            type: 'dateTime' // string, numeric, dateTime
                        },
                        yValuesField: {
                            name: 'median',
                            axisY: 'y2',
                            type: 'numeric' // string, numeric, dateTime
                        }
                    }
                ]
            });
        });


pls. help, any comment is appreciated, thanks!
Back to top
 |  Edit by user
Dragan
#2 Posted : Thursday, November 14, 2013 5:03:00 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)
Try changing your code to:

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Binding to Remote Data' },
                //animation: { duration: 1 },
                dataSource: {
                    ajax: {
                        type: "POST",
                        url: "chart_action.php",
                        async: false,
                        data: {dept:'MOS3',actionId:'loadChart'},
                        dataType: 'json'
                    }
                },
                axes: [
                       {   name:'rec_time',
                           location: 'bottom',
                           type: 'dateTime',
                            labels: {
                            font: '10px sans-serif',
                            angle: -90
                            }
                       },
                       {   name:'y1',
                           location: 'left',
                           type: 'linear'
                       },
                       {   
                           name:'y2',
                           location: 'right',
                           type: 'linear'
                       }
                    ],
                series: [
                    {
                        type: 'column',
                        axisY: 'y1'
                        xValuesField: {
                            name: 'rec_time',
                            type: 'dateTime' // string, numeric, dateTime
                        },
                        yValuesField: {
                            name: 'qty',
                            type: 'numeric' // string, numeric, dateTime
                        }
                    },
                    {
                        type: 'line',
                        axisY: 'y2',
                        xValuesField: {
                            name: 'rec_time',
                            type: 'dateTime' // string, numeric, dateTime
                        },
                        yValuesField: {
                            name: 'median',
                            type: 'numeric' // string, numeric, dateTime
                        }
                    }
                ]
            });
        });
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
1 user thanked Dragan for this useful post.
evangels on 11/14/2013(UTC)
evangels
#3 Posted : Thursday, November 14, 2013 9:23:33 PM(UTC)
Rank: Member

Groups: ExpiredLicense, Registered
Joined: 7/30/2013(UTC)
Posts: 15

Thanks: 6 times
Was thanked: 0 time(s) in 0 post(s)
hi Dragan, thanks for your consistent and patient support. I made a low-tech mistake...

Dragan wrote:
Try changing your code to:

Code:
$(document).ready(function () {
            $('#jqChart').jqChart({
                title: { text: 'Binding to Remote Data' },
                //animation: { duration: 1 },
                dataSource: {
                    ajax: {
                        type: "POST",
                        url: "chart_action.php",
                        async: false,
                        data: {dept:'MOS3',actionId:'loadChart'},
                        dataType: 'json'
                    }
                },
                axes: [
                       {   name:'rec_time',
                           location: 'bottom',
                           type: 'dateTime',
                            labels: {
                            font: '10px sans-serif',
                            angle: -90
                            }
                       },
                       {   name:'y1',
                           location: 'left',
                           type: 'linear'
                       },
                       {   
                           name:'y2',
                           location: 'right',
                           type: 'linear'
                       }
                    ],
                series: [
                    {
                        type: 'column',
                        axisY: 'y1'
                        xValuesField: {
                            name: 'rec_time',
                            type: 'dateTime' // string, numeric, dateTime
                        },
                        yValuesField: {
                            name: 'qty',
                            type: 'numeric' // string, numeric, dateTime
                        }
                    },
                    {
                        type: 'line',
                        axisY: 'y2',
                        xValuesField: {
                            name: 'rec_time',
                            type: 'dateTime' // string, numeric, dateTime
                        },
                        yValuesField: {
                            name: 'median',
                            type: 'numeric' // string, numeric, dateTime
                        }
                    }
                ]
            });
        });
Back to top
Users browsing this topic
Guest
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.093 seconds.