I´m do several graphic template for each type that i could use after.
All the graphs are jsp and share the characteristic that use json for the data. some graphs are updated dynamically with a timer.
My idea was to make a jsp container that i can invoke the graphs to use, but dont work well and found two problems.
The function that is used to invoke is this:
<script class="code" type="text/javascript" language="javascript">
$(document).ready(function(){
$('#result1').load('Bars1.jsp');
//$('#result2').load('Bars2.jsp');
$('#result3').load('./../Area/Area1.jsp')
});
</script>
My first problem is that the graph only works when the path of the container is the same as any of the graphics I invoke. Also works when I invoke a graph that is in another different route. But when refresh sometimes one or two graphs not appear.
But if the path to the container dont have other jsp graphic doesn't work. example
<script class="code" type="text/javascript" language="javascript">
$(document).ready(function(){
$('#result1').load('/Bars/Bars1.jsp');
$('#result2').load('/Area/Area1.jsp');
});
</script>
i´ve done everithing, use the libraries in the container, use libraries in each graph with the path to the container and dont work.
Help please. Regards.
Related
I am trying to implement Highcharts to display data on my web application. At the moment, I just want to see how Highchart works on my website so I have simply copied code from this fiddle and implemented it on my site. But for some reason, the chart does not display.
It may just be my inexperience (or quite frankly, my stupidity) but I don't know why the fiddle isn't loading. Have I missed anything?
Here is what I have done:
I have added the following to the head of the page:
<script src="https://code.highcharts.com"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="javascript/chart.js"></script>
chart.js is a seperate file, which consists of all the JavaScript from the fiddle.
Whenever you observe a problem, the first thing you need to check is whether there are any errors. When it comes to Javascript, you need to check the browser console. In this case, the $ in the error message is a strong hint that you forgot to include a script tag before the other script tags having its src attribute pointing to the location of jquery.
I feel lost, I read the getting started for Chartist.js and it seems very straight forward but I can't get any charts to show up.
I made a rails app and got the welcome page displaying text, I linked the css and javascript files, but Im not exactly sure how to get it to display. I made a new js file, added the data they have in the documentation and linked it to the main HTML page but nothing shows up?
It looks like in https://github.com/zachsergeant/Analytics/blob/master/app/views/layouts/application.html.erb you're loading chartist right before your body closes. Probably your code that generates charts is loaded somewhere within the yield of the layout template. I guess Chartist is not defined at that point. You should follow a better asynchronous script loading mechanism or simply defer the execution of your scripts using the DOMContentLoaded event.
<script>
document.addEventListener('DOMContentLoaded', function() {
// Draw charts here
});
</script>
I have a few JSON files I can use with my force directed graph and I wish to choose which one I run.
I can just change the name of what JSON is read in the HTML file
<script type="text/javascript" src="networkA.json"></script>
to
<script type="text/javascript" src="networkB.json"></script>
but I wish to do this dynamically.
So when I first load the SVG my choice of data pops up and I get to choose which one I want the force directed graph to run off.
Also, wish to change this when its running, but knowing how to do the start up will probably answer that question.
Here is a perfect demo that can change dynamically:
'http://projects.flowingdata.com/tut/interactive_network_demo/'
but I wish to do something similar on a force directed graph
Use d3.json to load the data dynamically based on UI selection, as documented here:
https://github.com/mbostock/d3/wiki/Requests
On my webpage there is supposed to be an image slider (carousel). My one problem is, it's not loading correctly. As you can see on my site there are 4 bullet points and 4 images next to them. Could you see if i am missing anything in terms of my files being incorrect? I will also add a link to the site where you can find my image slider, and i also added a link to my site to help on your end.
-Thanks!
My site: http://rootforsite.azurewebsites.net/
ImageSlider: http://bxslider.com/
Your javascript to init the bxSlider isn't working, it looks like you may have an errant "style" tag or something (it's trying to close a style block, the body, and the html all within your script), also make sure to include type="text/javascript" in your tag, and finally it's usually safest to do you jQuery onLoad functions like so:
jQuery(function($){
$(...).blahblah();
});
Then "$" will be scoped a bit better.
first of all you are using
<script src="myscripts.js"></script>
before loading jquery.
Please always use jquery scripts after loading jquery.min.js
also try to load the
<script src="js/jquery.bxslider.min.js"></script>
after bootstrap.js
I'm trying to use the jQuery.Gantt plugin with IkiWiki. My code has created the following HTML fragment:
<script src="./jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery.fn.gantt.js" type="text/javascript" charset="utf-8"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("#meetings").gantt({"minScale":"months","scale":"weeks","maxScale":"days","source":[{"desc":"Meetings","name":"meetings","values":[{"from":"/Date(1381834800000)/","label":"meeting/20131015 gs progress","to":"/Date(1381831200000)/"}]}],"navigate":"scroll"});});</script>
which should render one event on my chart. I've also copied all the CSS from the project's style.css into my CSS.
The page on which this chart renders is being served up by Apache running locally.
The problem I'm getting is that it renders like this:
PNG
The calendar display is not right:
I'm not sure how the months are supposed to be displayed;
there's a grid which I think is supposed to be further down.
One good thing is that my event is actually displayed.
I'm not sure how to proceed with debugging this.
I think it is because Jquery Gantt is not compatible with Twitter Bootstrap 3.
In this example, they use v2.3.2
Consider checking the current, min and max scale for your gantt in the initialization object. That can be changed using the scaling buttons on the gantt chart as well.
To debug, I would gladly suggest the Firebug browser plugin
jQuery.Gantt is a cool plugin, but doesn't work well for sub-scale events. Anything rendered will always fill at least one grid, and be rounded to the nearest grid insert. That's why your meeting fills a full day from the pic.
As Darwin said, your problem is related to how Bootstrap resets the CSS for the page.
The stylesheet that comes with Bootstrap 3.0 "helpfully" resets the box-sizing CSS property for every single element on the page to be border-box, whereas the plugin you're using expects content-box, which is indeed the default box model. This messes with how the plugin sizes different elements on the page, resulting in what you're seeing.
The solution and workaround are both in the tracker for the plugin itself:
https://github.com/taitems/jQuery.Gantt/issues/102 .