High charts using knockout

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
LVL 16
Rose BabuSenior Team ManagerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
RobConnect With a Mentor Owner (Aidellio)Commented:
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
 
Steve BinkCommented:
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
 
RobOwner (Aidellio)Commented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Rose BabuSenior Team ManagerAuthor Commented:
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
 
Rose BabuSenior Team ManagerAuthor Commented:
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
 
RobOwner (Aidellio)Commented:
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
 
Rose BabuSenior Team ManagerAuthor Commented:
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
 
Rose BabuSenior Team ManagerAuthor Commented:
My project is fully implemented with that technology
0
 
RobOwner (Aidellio)Commented:
If you can post the relevant parts of your code it would really help.
0
 
Rose BabuSenior Team ManagerAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.