I'm using the High Charts library with rails using the gem found here. Everything is working very nicely, except when I try and add a plotLine to either axis, I can't seem to figure it out. Here are the two options that I've tried so far and their results. Any insight into what is happening would be much appreciated.
Option 1:
chart.yAxis([{title: 'Y-Axis', min: 0, plotLines: {value: 25}])
Result: I get an error in the JavaScript of
Uncaught TypeError: Object #<Object> has no method 'concat'
Specifically, this is referencing the following code in highcharts.js
each((options.plotLines || []).concat(options.plotBands || []), function (plotLineOptions) {
//plotLinesAndBands.push(new PlotLineOrBand(plotLineOptions).render());
axis.addPlotBandOrLine(plotLineOptions);
});
When I pause the execution there the options.plotLines variable is an Object and not an Array, hence no concat method.
Option 2:
chart.yAxis([{title: '', min: 0, plotLines: [{value: 25}]}])
Result: The page fails to render with the following error message from Rails.
You must pass a Hash to Highcharts::Axis::PlotLines. You passed [{:value=>25}]
I'm not sure what to make of this, however, given the API documentation of high charts I would of expected this to work, as I would like to give more than 1 plotLine.
I have also attempted to use chart.renderer.path but that has failed as well. Can someone please explain what is going on, and hopefully suggest a way that I can draw a horizontal line across a High Charts graph in Rails with this gem.
Thanks
I actually figured this out by manipulating the underlying javascript produced by the HighCharts ruby object. Here is the code to do it
chart.yAxis([{title: '', min: 0, plot_lines_replace: plot_lines}])
# Because of a bug in this High Charts rails library, I'm going to have
# to add the plot_lines myself through the javascript
return chart.to_s.gsub("plot_lines_replace", "plotLines").html_safe
This will modify the plot_lines_replace string with plotLines in the javascript and it will work correctly.
Related
Normally with Rails, I'd use will_paginate and call it a day, but I'm using Rails5 purely as an API, and front-end is completely Angular2.
I've looked into NG Bootstrap4's Pagination but I'm having quite a few issues getting it to do anything besides render - And I can imagine why. What is the proper process for Paginating on Angular? I tried using will-paging to paginate the JSON but instead I just limit the results.
I also looked into ng2-pagination which seemed to have a lot of the features I wanted, but I started getting
Uncaught TypeError: ctorParameters.map is not a function errors for everything so I thought maybe I should take it a step back.
Would the proper process be to use the controller in Rails to append a 'page' parameter to the JSON Results? Or would something more like Virtualization be the route I should go?
Having quite a few issues - Even once I have the bar active, it obviously can't control my script.
getDecks(): Observable<Deck[]> {
return this.http.get(this.decksUrl)
.map((response: Response) => <Deck[]>response.json())
.catch(this.handleError);
}
this is the call that contacts the API and gets the response - I feel like I would involve the 'page' here to actually allow Pagination to do something?
I was able to figure it out - multiple issues. For those wondering:
Uncaught TypeError: ctorParameters.map is not a function seems to be a compilation issue with newer packages.
Different library but similar issues
I upgraded Ang2 + Respective libraries to remove error. From there the instructions made a lot more sense.
The pipe should be built directly into your ngFor
<span *ngFor="let deck of decks| paginate: { itemsPerPage: 10, currentPage: p }" class="list-group-item list-group-item-action">
Then placing
<pagination-controls (pageChange)="p = $event"></pagination-controls>
Where-ever you want an async bar resolves the issue.
Works perfectly - Library is Ng2-Pagination
I am attempting to build a small proof-of-concept web application using the web2py framework. I'm so close, but my basic lack of knowledge of what's going on means I'm just hacking at it with pure guesswork rather than understanding what's going on. I was hoping someone on here could explain where I am going wrong...
The functionality I'm after is that the data needed to create the draggable items is held in a database table (and will ultimately form a hierarchy) with as little information held in the HTML as possible.
There's a fair bit of information for just about everything in this stack, so much so that I'm drowning in it, I don't know where to start. I suppose I should begin with what I've got so far...
The HTML:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
...
<script>
$(document).ready(function(){
$.ajax( {
type: "POST",
url: 'dragndrop.py',
success: function( response ) {
$("#draggable7").html(response);
}
} )
});
</script>
<div id="draggable7"></div>
The dragndrop.py script:
## My main draggable spawner
selected = [row.id for row in db(db.t_user_shop_layouts.id==7).select()]
return ''.join([DIV('draggable'.join(k), _class='draggable ui-widget-content', _snap=".ui-widget-header", _snapMode= "inner", _grid= [ 80, 80 ], _style='position: relative;') for k in selected])
And, just for completeness, the model web2py script (although the column I'm interested in is the "id" column, which is auto-generated):
db.define_table('t_shop_layout_items',
Field('f_item_display_name_string', type='string', notnull=True,
label=T('Item Display Name String')),
Field('f_item_icon_file', type='upload',
label=T('Item Icon File')),
Field('f_item_parent_id', type='integer',
label=T('Item Parent Id')),
auth.signature,
format='%(f_item_display_name_string)s',
migrate=settings.migrate)
I'm forcing the db call to only pick up one row at the moment (id == 7) just to get the ball rolling, but eventually what I'd like to do is have the (db.id == db.f_item_parent_id) items shown first. Then when double-click, any (db.f_item_parent_id == this.id) children get spawned using helpers. Then I'm going to get an 80x80 grid size target to land on to set shop layout, and save to db. But all this paragraph is for later, I'm just giving you an idea of where I'm going with it.
Finally, some great tutorials that have helped me along the way, but were either not web2py (PHP seems popular for this) or not dynamically spawning (but hard-coded in the HTML, or what-have-you. If I've missed something obvious, please let me know:
An excellent fiddle: http://jsfiddle.net/robertrozas/qLhke/25/ and its stack overflow beginnings Jquery drag drop form hidden value inserting into php mysql
The web2py documentation: http://web2py.com/books/default/chapter/34/11/jquery-and-ajax
OK, hope that's enough! Any help would be appreciated!
In web2py, you do not create .py files and then use them as URLs. Instead, you create functions in controllers and have URLs of the form /appname/controller/function. See the documentation on dispatching. It is also best to use the built-in URL() function to generate URLs. Also, this should probably be a GET request rather than POST.
You might also want to look into web2py's built-in ajax() function as well as Ajax components.
Regarding your data model, if the f_item_parent_id field is a self reference, then you should define it as a reference field (i.e., type='reference t_shop_layout_items').
More generally, before proceeding further, it will probably be very helpful if you read more of the documentation, particularly chapters 4, 5, 11, and possibly 12.
I have a question regarding highcharts, I'm generating a graph and sometimes the backend returns null for some days.
Json:
{"series":[{"id":548,"data":[null,1287.5,null,186.7777,null,null,null],"name":"Example"}],"categories":["May 04","May 05","May 06","May 07","May 08","May 09","May 10"]}
Im getting a graph like this
Which I think is completely fine. The requirement changed and the customer doesn't like to see it like this, he wants to have the two points liked by a line. I told him that it will give the impression of false data for the date in the middle, he said that he wants data but no point in the middle.
Is this possible?, I couldn't fine anything like that on the documentation. In this case to put 0 instead of null is not possible because of the nature of the data.
Simply set connectNulls: true, see API.
I've got a rails 4 app and I'm using chartkick. I'm currently using pie charts, and I'm wondering if there is a way I can get each section of my pie chart to navigate to an endpoint or a url or anything really.
How would someone tackle that? Would it be done in the ERB file, or the controller? And how would it be done?
I've spent a lot of time trying to figure this one out myself. Unfortunately, there does not seem to be a simple 'add the link here and go' kind of option.
Chartkick allows you to specify whether you want to use the Google Charts Library or the Highcharts library. Both of these libraries allow you to draw charts where you can specify the 'click' action of a particular data point / data series. To utilize this, you can draw your chart using straight JQuery/JS -- it's much easier than it seems if you're only used to the standard chartkick stuff.
Here is the HighCharts documentation for this:
http://api.highcharts.com/highcharts#plotOptions.pie.events.click
Here is an awesome blog post showing how to setup the JS/Jquery (you can convert this to Coffescript really easy using http://js2.coffee)
http://birdchan.com/home/2012/09/07/highcharts-pie-charts-can-have-url-links/
His approach there works great, and, you can make it easier by creating an endpoint on your resource's controller that serves up the data hash you'll need for the chart, replacing:
data: [
{name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'},
{name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'},
{name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'}
]
With something like:
$.ajax {
url: "/place/resources/resource_id/top_members.json"
success: (data) ->
draw_some_pie_chart(data)
}
Or you can also use the GON gem to make that hash available as a variable in your Coffeescript/JS file.
I'm sure there is a more specific/thorough way to answer your question. I can update my answer if you'd like to post samples of the code you're trying to use
We are using highcharts as our charting library. It's great and exporting works well in all scenarios except one. We have a donut chart with two levels. When it is rendered in the browser it shows up fine:
If you now export this chart using the default highcharts service it shows a bit like this:
Anyone know why this is happening and if there is any way we can fix this?
I would recommend creating a fiddle of your problem, and emailing HighCharts support about it (or link the fiddle here), they are very helpful and usually respond quickly.
Your problem does however seem to be related to your code as I also generate and export donut charts with no problems
My mistake in the configuration was when I was dynamically updating the colour:
chart.series[0].data[s].update({color: "#FFFFFF")}, false);
This didn't just mean I was updating the color but also the whole point. This meant that by running the above I was running y to nothing! Although the chart displayed ok the data sent to the exporting service was with unset values for the slices.. hence the empty slices in the chart. to fix it I had to do something like:
chart.series[0].data[s].update({
color: "#FFFFFF",
y: chart.series[0].data[s].y,
name: chart.series[0].data[s].name,
)}, false);