?
Solved

High charts using knockout

Posted on 2015-01-21
10
Medium Priority
?
744 Views
Last Modified: 2015-01-30
I need to implement high chart using knockout binding handlers. ..
I have to dynamically bind Jon data to the chart series to render the chart...
Any help is appreciated
0
Comment
Question by:Rose Babu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
10 Comments
 
LVL 51

Expert Comment

by:Steve Bink
ID: 40563201
I just recently implemented Highcharts using a JSON data source.  Since I was hooking Highcharts into an existing process, it was a little messy, but it came out OK.  

What area are you having trouble with?
0
 
LVL 43

Expert Comment

by:Rob
ID: 40563501
I need to implement high chart using knockout binding handlers. ..
Why? Modifying the data source and redrawing the chart will dynamically update the chart.

As a note, putting the JSON data into a knockout observable and then modifying the JSON data within the observable will NOT trigger knockout to do raise any events.  

I need more information about why you want to include knockout with your chart.
0
 
LVL 16

Author Comment

by:Rose Babu
ID: 40565726
As a note, putting the JSON data into a knockout observable and then modifying the JSON data within the observable will NOT trigger knockout to do raise any events.



Yes it is not triggering ...how can I generate chart in knockout ..With default data it is loading but with json data it s not working
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 16

Author Comment

by:Rose Babu
ID: 40565734
Hi Steve ...I also supposed to generate chart with json value in knockout. .I can generate chart with handlers using default value by cannot make it work dynamically with json call
0
 
LVL 43

Expert Comment

by:Rob
ID: 40565736
observables only keep track of whether the object is or isn't in the array.  It will not keep track on the properties of your JSON data unless you make them observables as well but that gets tricky with ajax loaded data so we should avoid that for now.

You stiill haven't answered why you need to use knockout?  just load the JSON data via ajax and create the chart.  No need to store the JSON data in a knockout ViewModel.
0
 
LVL 16

Author Comment

by:Rose Babu
ID: 40565737
Hi Steve ...I also supposed to generate chart with json value in knockout. .I can generate chart with handlers using default value but cannot make it work dynamically with json call
0
 
LVL 16

Author Comment

by:Rose Babu
ID: 40565740
My project is fully implemented with that technology
0
 
LVL 43

Accepted Solution

by:
Rob earned 2000 total points
ID: 40565752
Ok, so it sounds like you're storing the JSON data for the chart in an observable, hoping that any change made to that JSON data will automatically update the chart.  That's not the way knockout works, however you can force it to refresh by simply removing the object from the observable and adding it back in.

Make sense?

e.g. a very simple json example

// some observable that is initialised with null
vm.chart_data = ko.observable(null);
...
ko.applyBindings(vm);
...

// ajax here:
$.ajax({
     ...
     success: function(data) {
         vm.chart_data.removeAll();
         vm.chart_data(data); // reset the data in the observable and trigger a change event for the chart
     }
});

Open in new window

0
 
LVL 43

Expert Comment

by:Rob
ID: 40565754
If you can post the relevant parts of your code it would really help.
0
 
LVL 16

Author Closing Comment

by:Rose Babu
ID: 40581079
your sample code block helped me to proceed further ..Thanks rob jurd
.I have one more question open for formatting the legends can u suggest some help on that question...
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question