Welcome Guest Search | Active Topics |

JQChart passing data from model and plotting chart in JQUERY
Options
Previous Topic Next Topic
Venkatesh
#1 Posted : Thursday, September 19, 2013 4:33:19 PM(UTC)
Rank: Newbie

Groups: Registered
Joined: 9/19/2013(UTC)
Posts: 3

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
In gantt chart, I would like to pass the JSON data from model to JQChartwith Y-axis as titles and X-axis as time differences and using JQuery i wanted to set the series values. Is that possible to do it? If so, could you please provide me an example?
Back to top
 |  Edit by user
Dragan
#2 Posted : Friday, September 20, 2013 3:27:52 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 prepare your data to be in format:
Code:
[ ['Phase 1', new Date(2010, 0, 1), new Date(2010, 0, 30)],
  ['Phase 2', new Date(2010, 0, 1), new Date(2010, 0, 10)], ... ]


http://www.jqchart.com/jquery/chart/GanttCharts/GanttChart

and pass the data to chart like in this example:
http://www.jqchart.com/jquery/chart/ChartData/DataFromAjaxCall
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Venkatesh
#3 Posted : Friday, September 20, 2013 9:13:01 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 9/19/2013(UTC)
Posts: 3

Thanks: 0 times
Was thanked: 0 time(s) in 0 post(s)
Thanks for your reply. But how will you map the xvalues, FromValues, ToValues in the series in JQuery? I saw the examples are in aspx, razor. But in JQuery Is that possible?

Basically how the Gantt chart is drawn in JQUERY?

Also the Series.Gantt() in the razor syntax is showing error. The Gantt() is not available.
Back to top
 |  Edit by user
Dragan
#4 Posted : Monday, September 23, 2013 8:19:47 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 to convert your data:
Code:
var ganttModel = [
            { task: "Task 1", from: new Date(2012, 1, 1), to: new Date(2012, 1, 2) },
            { task: "Task 2", from: new Date(2012, 1, 4), to: new Date(2012, 1, 6) },
            { task: "Task 3", from: new Date(2012, 1, 10), to: new Date(2012, 1, 20) }
        ];

        function convertModelToGanttData(model) {
            var ganttData = [];

            for (var i = 0; i < model.length; i++) {
                var item = model[i];

                ganttData.push([item.task, item.from, item.to]);
            }

            return ganttData;
        }

        $('#jqChart').jqChart({
            series: [
                {
                    type: 'gantt',
                    data: convertModelToGanttData(ganttModel)
                }
            ]
        });


You need to download the latest version (3.7.5.0) of jqChart, so you can use Gantt chart.
Best Regards,
Dragan Matek
jqChart Inc.
Back to top
Venkat0110
#5 Posted : Monday, September 23, 2013 9:12:21 AM(UTC)
Rank: Newbie

Groups: Registered
Joined: 9/23/2013(UTC)
Posts: 3

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

Can we pass this data from Model?

var ganttModel = [
{ task: "Task 1", from: new Date(2012, 1, 1), to: new Date(2012, 1, 2) },
{ task: "Task 2", from: new Date(2012, 1, 4), to: new Date(2012, 1, 6) },
{ task: "Task 3", from: new Date(2012, 1, 10), to: new Date(2012, 1, 20) }
];


Thanks,
Venkatesh
Back to top
Dragan
#6 Posted : Monday, September 23, 2013 9:16:10 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)
Sure, just call convertModelToGanttData function, which converts the model to gantt data:

Code:
function convertModelToGanttData(model) {
            var ganttData = [];

            for (var i = 0; i < model.length; i++) {
                var item = model[i];

                ganttData.push([item.task, item.from, item.to]);
            }

            return ganttData;
        }
....


{
    type: 'gantt',
    data: convertModelToGanttData(ganttModel)
}
Best Regards,
Dragan Matek
jqChart Inc.
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 1.050 seconds.