I implemented kendo chart of Telerik and below is my code after applying updated values.
I would like to smoothly update only bar - like below LINK:
http://www.jqueryscript.net/demo/Dynamic-Animated-jQuery-Bar-Charts-Plugin-LiveGraph/demo/
My existing code to refresh graph is:
var chart = $("#divBarChart").data("kendoChart");
chart.options.series[0].data = globalSeriesValue
chart.refresh();
Please guide.
in Kendo - the Chart API exposes setDataSource() method. So when you say you want to refresh just the bars its actually nothing but providing a new data source to the chart. This way the chart is not redrawn rather just the points on the chart are repainted.
here is the documentation link:http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setDataSource
I have created a demo for you here: http://dojo.telerik.com/#kashyapa/Ekara
Related
In Vaadin 14.4.2, I have a scenario in which I have added a chart inside a splitLayout. However, when I, as a user, expand or shrink the splitLayout, the corresponding chart does not resize. The other components, such as the grid do automatically resize. Is there some "magic" configuration option to get the chart to behave like other components? (The screenshot below shows the chart not having resized, even though the grid beneath it did properly automatically resize.) (Also fyi, I call this: spectraChart.setSizeFull(); so the chart should be using up all the available space.) (Another FYI: I could probably "trap" the splitLayout resize even then redo the plotting, but it seems to me that this should ideally not be necessary in the a 'framework' solution such as Vaadin, since a chart is a component that should behave like other components, such as the grid.)
Yes, unfortunately that is true. You can workaround the issue by doing explicit JavaScript call to Charts to reflow when splitter position has been changed. The code snippet below finds all charts and reflows them:
innerLayout.addSplitterDragendListener(event -> {
getUI().ifPresent(
ui -> ui.getPage()
.executeJavaScript(
"Array.from(window.document.getElementsByTagName('vaadin-chart')).forEach( el => el.__reflow());"
));
});
Is there a way to modify a Vaadin chart by moving a bar or a point from the chart itself? i.e. I have a bar chart with a certain value in one of the bars, I want to get a new value by dragging that bar to that new value.
There is something similar in this example, that is why I wonder if it is possible to extend this option to something like what I need.
Thanks!!!!
I assume that vaadin uses Highcharts if this is the case, maybe you can use plugins, if so I recommend:
http://www.highcharts.com/plugin-registry/single/3/Draggable%20Points
Source code in case you had to rewrite it:
https://rawgit.com/highslide-software/draggable-points/master/draggable-points.js
Regards.
I have a page which has a few links. Clicking on a link generates a list of different charts in the bottom of the page without page reload. Put it another way, each link clears previous charts, gets new data from the server, invokes Highcharts to draw new charts. No page reload.
Here comes the issue.
I am using the following Javascript to collect the charts on the page and send the data to the server.
var svgArray=[];
$(Highcharts.charts).each(function(i, chart){
if (chart) {
svgArray.push(chart.getSVG());
}
});
I notice that Highcharts.charts array grows by ADDING new charts to its end of when a link is clicked. I dont need old charts. I just want to collect new charts.
How can I initialize Highcharts or Highcharts.charts when a link is clicked.
Thanks and regards.
Here is what I did and it appears to get rid of charts created earlier. When a link is clicked and before the new charts get drawn, I try to destroy all charts the following way:
$(Highcharts.charts).each(function(i, chart){
if (chart) {
chart.destroy();
}
});
It seems working, but I am not sure if this is the right or best way or it can help others. I love to hear the input from experts.
Thanks!
I want to create partial views such that each partial view corresponds with one type of chart (say bar chart, pie chart etc.). The chart should be generated on the partial view just by passing the model to it.
I am working on the charts for the first time so not very much aware of the components/libraries available. All the example I seem to find on internet works by creating all the charts at the time of requirement and saving the for further use. Eg. http://czetsuya-tech.blogspot.in/2012/02/how-to-render-chart-object-in-view-in.html#.Uk_r_oaGoUU
Please let me know if any clarification is required.
While searching for similar thing I found the following that I think could be helpful to you as well:
http://forums.asp.net/t/1874913.aspx
I originally asked this question on the Highcharts forum a few days ago but received no answer so let me ask it here:
I want to have a chart where I can toggle the 'reversed' property of the Y-axis after the chart has been initialized and then see the chart redrawn. My first thought was to put something like the following code inside of an event handler (say in response to a button click), but it doesn't seem to do anything.
chart.yAxis[0].reversed = !chart.yAxis[0].reversed;
chart.redraw();
I don't think it's possible (see this forum post).
In particular, the last response on that post concludes with this:
I would suggest a workflow for your gui that updates a structure that keeps the options and then creates a new chart based on the options. The api we have has more of a focus on changing the data that is displayed than changing how the data is displayed.
So you might have to create two charts (one for each axis direction), only display one of them at a time, and toggle between them at runtime.
Update:
The accepted answer on this duplicate question suggests it is possible by doing this:
chart.yAxis[0].update({
reversed: !reversed
});