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.
Related
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.
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 **
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
I'm trying to figure out if highcharts can do the following:
Render a standard horizontal bar chart that contains separate table data beneath it (imagine a bar chart with an html-like table beneath it.)
The user would be able to export the entire svg using the exporting.js file that highcharts provides.
This might seem vague, I'm trying to think through this though. I'm not familiar with highcharts at all, but have looked thoroughly at the documentation. It is my understanding that something like this wouldn't be possible using highcharts, as it's text capabilities / options aren't that flexible to represent a data table.
Any possible insight would be great, thanks to everyone!
D.
If you check the HighCharts forum you can see a hack to get that.
It is not very clean but it does wonders. If your datatable if very large you may want to think about only showing portions of the data at a time (using zoom in chart).
Stumbled on this years later looking for something related, but I also found this JSFiddle, which might be closer to what has been requested instead of the broken link above.
Highcharts.drawTable = function () {
// SVG fun
};
window.chart = Highcharts.chart('container', {
...chartConfig
});
It literally draws the table in SVG, using the series data. Not saying this is ideal, but it does, however, work for image export, whereas the showTable option doesn't.
Highcharts.chart('container', {
...chartConfig,
exporting: {
showTable: true
}
});
The third and probably best compromise is to use the subtitle HTML text to insert your table.
Highcharts.chart('container', {
...chartConfig,
subtitle: {
title: '<div>Anything goes</div>',
useHTML: true
}
});
Dynamically setting this for the chart at export (allowing you to keep whatever subtitle you want to display on the webpage) involves calling the setTitle method:
chart.setTitle({text: "New Title"});
Details:
I'm basically trying to implement the functionality of the example here (http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultvb.aspx) on my own site, but instead of using a data source control located in the page markup (like in the example: SessionDataSource), I'm using a dataset that I get from some server code-behind. I am able to successfully get my double-clicked row into edit mode with my dropdowns successfully populated, however when clicking onto another row to update the one in edit mode, no-dice.
I've discovered that apparently the client-side JavaScript function updateItem() does not initiate an AJAX callback like I originally thought, so I've been trying to work my way around that. Currently I'm using my RadAjaxManager to perform an AJAX callback with the row index number like so:
function RowClick(sender,eventArgs)
{
if(editedRow && hasChanges)
{
hasChanges = false;
$find("<%= RAM.ClientID %>").ajaxRequest(editedRow);
}
}
This gets me to my server code. Awesome. But,
Problem: I must be accessing something wrong, because the GridDataItem cell text that I'm trying to obtain for the edited row all has the value " ".
Dim gdi As GridDataItem = FieldOpsScheduler.Items(rowIndex)
Dim d As DateTime = DateTime.Parse(gdi.Item("EndDate").Text) //<--FAIL
I've been scouring the Internet for hours now trying to find how I can pull off what I'm trying to do, but to no avail.
Additional Info: I'm using GridDropDownListColumnEditors on the front-side to do the editing for my table, declared like so:
<telerik:GridDropDownListColumnEditor ID="ddlce_SunAct" runat="server" DropDownStyle-Width="60px"></telerik:GridDropDownListColumnEditor>
So does anybody have any ideas on what I have to do to access the values that have been changed in my RadGrid?? Is the problem that I somehow need to rebind my RadGrid when clicking on a new row? If so how do I do that? Any solutions or ideas would be greatly appreciated. (Also although I'm doing this in VB.NET, feel free to write responses in C# if you wish as I understand that too. :-) ) Thank you in advance.
With manual binding updateItem() should still raised the UpdateCommand server event of the grid, but you will have to update the grid source by hand. Modify the local version of the online demo where you Telerik AJAX controls installation is and go from there.
Dick
http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html
If anyone else has the same problem as I did, go to the above link and scroll down to the section titled "Accessing the value of cells in edit mode".