How to use jQuery when redrawing a chart? - javascript

I currently have a chart which I place in my page by calling
function myChart(aParameter) {
// here is some code which queries data based on aParameter
// and sets a variable later used for series: [...] in the chart below
$("#mychartid").highcharts({...})
}
This function is then called when a choice on some radio buttons is done:
$('#productselect input[type=radio]').change(function(){
myChart($(this).val())
})
It works fine, but is not effective: the complete redrawing of the chart moves the page and I need to scroll back on the chart.
When searching for a solution, I found a good question and answers which gives some details on how to correctly update a chart (which I hope will fix my issue). It suggests to first create a chart (chart = new Highcharts.Chart(chartOptions)) and then use incantations of chart.series[0].setData(data,true); to update the data.
The point I am missing is how to initially position such a chart on my page (using jQuery), similar to my $("#mychartid").highcharts({...}) above?

You can still create the chart exactly as you are, except that you assign it to a variable. So
$("#mychartid").highcharts(chartOptions);
var chart = $("#mychartid").highcharts();
Then you can perform whatever actions you want on chart, including the
chart.series[0].setData(data,true);
Example:
http://jsfiddle.net/3d3fuhbb/111/
** UPDATED to correct code **

Related

Primefaces Bar Chart disable all Series

i have a system running with Primefaces on a Server for some Diagramms, like the Bar Chart and stuff.
My Problem is: the bar chart is full with Series so it is a little slow, but more importantly is that it is not very clear. So I wanted to have a function to unclick/disable all Series from the start and then manually enable which one I need, but I am not an expert in Javascript nor with Primefaces.
I found out that I can do something with the Extender but it turns out the show function there disables the whole chart so it doesnt render.
Does anyone already solved something like this or has a tip for me?
So i did find the solution myself. For everyone who is searching something similiar:
function toggleAllLabels(model) {
for(var i = 0; i < model.getElementsByClassName("jqplot-table-legend-label").length; i++){
model.getElementsByClassName("jqplot-table-legend-label")[i].click();
}
}
where model is the (Bar-)Chart Object. The idea is: you simulate a click on every label so it is triggered and disabled. The function has to be called from the page with the chart and with the argument "model" for the id of the Chart Object.

C3: Adding y2 axis on the fly

I know that I can create additional Y axis by using the c3.generate(...) as shown in this example.
My question is: can I achieve the same in another moment (e.g. on a click event)?
My application already uses user inputs (e.g. clicks) to dynamically add new columns, by directly by using the load() function and providing the data series (without using generate).
Does something similar exist for dynamically showing other Y axis?
Thank you
If you want to change only the column which are used as reference for the axis, then you can just load it with the load() function:
chart.load({
axis:{
colA:'y',
colB: 'y2
}
})
When you want to switch the visibility of the y2 axis, then you cannot use the load function since it has only limited access (see reference at the API-part).
The only way I see is manipulating the chart configuration on the fly by using chart.internal.config, you can just give it a try.

Chartkick Rails 4 Bar Chart Issue with Multiple Charts

I have a problem where I have multiple poll questions on a page. Simply enough, after a question is answered an AJAX call is made to the controller and a js.erb is rendered displaying a chart using the Chartkick gem and the Google jaspi library. This works fine for only a single chart. However, having several bar charts (one for each answered question) is a problem. What happens is the most recently answered question overwrites the chart of the question in the wrong div and just displays loading in the last answered question.
Here is the basic code.
In View:
<div id="results-<%= i %>" style="display: none; margin-top: -20px;"></div>
Once the question is answered the above div is shown with the chart.
In the controller:
data = [
{
data: results_array
}
]
respond_to do |format|
#div_id = div_id
#poll_data = data
format.js
end
And then in the js.erb file that is rendereed in the above block:
$("#results-<%= #div_id%>").html('<%= escape_javascript(bar_chart(#poll_data, library: {legend: "none"})) %>').show();
Any help would be greatly appreciated. I need to display the correct charts for each question and have them dependably loaded. Is there a way to distinguish between instances of charts or objects that I am missing? Thanks.
I had same problem with Chartkick, I have just changed the 'id' of every chart I wanted to use. The solution I found is on link below: https://github.com/ankane/chartkick/issues/193
I know is bit to late for this answer, but maybe it will help someone else.
I am currently using Chartkick to prepare my chart and I have found out the following.
If you are using Chartkick to render a chart, it will render a chart an give it a div with id of 'chart-xx' (xx is number, starting from 1). So in my case, I have 5 charts, when I am done rendering (loading the chart for the first time, it will have 5 charts with ID of:
'chart-1', 'chart-2','chart-3','chart-4','chart-5'
in my application.
I am running on rails, therefore I tried to re-render the chart by calling AJAX and replace the html element which I stored my chart. However, it seems that when you call the AJAX and re-render Chartkick back again. It started with 'chart-1' again, therefore it is replacing your first chart. (I haven't dive into the source code to have a look however it seems that there is some line of codes that automatically replace the chart based on the div: chart-1)
After trying our several methods, eventually I have found out that the most effective way will be replace the javascript element straight. Therefore I have done the following using Javascript:
new Chartkick.LineChart($('#' + target).children().first().attr('id'), data);
target is the element where you store the chart and data being the raw JSON object you retrieved from your AJAX call. As illustrated as follows:
<div id="target">
<div id="chart-1">
</div>
</div>
Doing so will allow searching of the chart element and force the existing chart element on the page to re-render and generate a new chart.
(NOTE: Do not convert the data object to String [e.g. JSON.Stringify(data)]. Doing so will let the chartkick.js misunderstood that the provided object is a string and it will attempt to perform a GET call on the string provided.
Hope this helps.

How can I update a bar chart in d3.js?

I'm trying to update a d3.js bar chart whenever a user clicks a button.
I've been tying to add in a transition somewhere as show here but it doesn't update my data on the fly.
I'm working with this jsfiddle.
I've tried something like the following code but it doesn't update my data:
btn.onclick = function(){
data.push({date: new Date(2013, 3, 10), total: 78});
updatePlot();
}
function updatePlot(){
d3.select('#graphTest').transition();
}
How can I change my updatePlot method so that it updates the data in my bar graph?
It looks like you're skipping a few steps. D3 doesn't actually do a ton of magic for you behind the scenes. You still need to push the data around and update the DOM yourself. D3 just provides a convenient programming model for managing this process.
So, with any visualization you've got the following interesting pieces:
Data array
DOM nodes
Data array elements bound to DOM nodes.
Attributes and styles on DOM nodes.
Your code is updating the data array but it's not managing any of the other parts. You need to drive your updated data back in to the DOM (and specifically the attributes/styles that make the nodes visible).
So update plot will need to do the following:
Call selection.data to bind the new data to the existing DOM. You can defined a key function to control how data maps to DOM nodes.
Handle the enter, exit and update selections however you like.
Transition the attributes and styles based on the new data.
For #3, this isn't just a matter of calling selection.transition, but instead you need to think about which attributes and styles you wish to transition. Calling attr and style on a transition is exactly like calling them on a selection, except the DOM gets updated many times with interpolated values instead of just once with the final value.
To understand this process better you should read Thinking with Joins and Working with Transitions.

Toggle between charts using highcharts

I have requirement where in need to switch between different charts using options from drop down or radio button. The chart i click must overwrite previous chart and show different chart with same data.
I have simulated similar kind of code but finding it difficult to overwrite with previous.
Here is the jsfiddle reference in my comments:
Any help appreciated.
Thanks,
Sohan
You can also use update() function, which allows to update type of serie, so data will be the same, but line can be replaced with column or other types.
http://api.highcharts.com/highcharts#Series.update()
EDIT:
$.each(chart.series,function(i,serie){
serie.update({
type:'column'
});
});
Couple of series:
http://jsfiddle.net/GGvmM

Categories

Resources