i use Highchart in my application which developed in asp.net MVC.
I use Line chart in my application i use this chart in my dashboard page in that page already more than 20 controls render so in that case chart display but it can't animated.
so tell me how to resolve this?
Hope there might be a conflict in js namespace, try loading the highchart js file at the end of body and initialize the chart on window.onload
Related
I'm using a polymer seed UI application, in which I needed to display some graphs so decided to use high charts. I created a custom component and added one of the charts e.g. barcharts and added this polymer component to my seed application do display the bar charts.
I am able to view the charts correctly, however, I faced an know issue of rendering the charts which didn't fit the container. In order to resolve it, I need to use highcart.reflow() event. But I don't know on which lifecycle of polymer I should do it and it will resize the charts correctly on page load.
any help is appreciated
i am facing an issue in the highcharts export. We have a custom download button and on click of that we are calling the Highchart exportChart which is redrawing the chart and is messing the chart . Can you please let us know how we can stop the redrawing of the chart while doing export ?
You may have specified some events like "load" in highcharts option, so that events may be called when you export a chart. This may cause problems. Disabling the events while exporting chart, solve the problem.
Official Docs
chart.exportChart({type: 'image/png', filename: 'file-name'},{
chart:{
events:null
}
});
This happens because of your load function in event.
I have have a Rails 4 application that calls an Ajax and shows results in a Bootstrap modal. I get an error when I try to render a Morris.js chart in the modal. What I get instead of a chart looks like this:
Could you please give me a pointer where to find a solution? I'm using Turbolinks.
Thanks a lot!
You need to redraw the graph after loading the modal with shown.bs.modal
Or you can delay the drawing of the graph:
setTimeout( function(){
Morris.Area({...})
},1200);
I have a page running a couple of charts done with HighCharts. I'm also running PhantomJS to save the pages as PDFs. Due to the way PhantomJS works, I need to disable all of the animations on HighCharts to allow it to save the page correctly. Problem is, I can't find a way to disable the animation of the datalabel on a Pie chart. The plot animation is disabled, the chart animations are disabled, but the datalabels are still animated (coming from the left of the page to sit on its correct location). How can I fix it?
You probably need to set the series.animation to false as well. See this example.
plotOptions: {
series: {
animation: false
}
},
Note that I am not able to test if the dataLabels animate or not. I have not seen them animate.
So I found the issue, it is not on the Highcharts main sourc. I'm using Dojo, and not jQuery, so I installed this adapter. Problem is, that adapter adds the animation, and not HighCharts itself. I realized it when I created the jsFiddle, and saw that using jQuery was giving a different behavior than using dojo.
I currently focus on an iOS web app using Apache Cordova and JQuery Mobile.I want to implement a tableview-like style page (it is called listview in JQuery Mobile). I implement a initial list view in html and I'd like to: when I click the different rows, the html will send message to the iOS, and then I create a request with native code. After that, I return the successful result to js and js will update the list view which looks like you click a row in a tableview and a new page is pushed in.
The problem here is:
how to add the click event?
in the click event, how can I know which row is clicked?
how the tableview-like pushing animation is implemented when I use JQuery Mobile to update the list view?
I'm fresh to the web app and it costs several hours to implement dynamicly creating a list with the request result. And I totally do not know how to go further.
thanks for your help.
I. and II. Here's an example for your first and second question:
This is a code example:
$('ul.listview-example[data-role="listview"] li').bind('click',function(event, ui){
alert($(this).attr('id'))
});
First code line will bind a click event on every listview li element. $(this) is a selected li element.
If you are using never version of jQuery us .on( instead of .bind(, in older version you can also use .live( .
EDIT :
III. I think this should cover your third question: http://jsfiddle.net/Gajotres/YShLE/