For my current project, I need to fetch data from the server and update the chart with a seperate navigator series data. When I do this, the diagram itself is shrinking, each time I call
chart.update({
navigator: {
//actually it doesn't matter what is written here
}
});
It looks like it shrinks exactly as much space as would needed for another navigator.
See this jsFiddle
It's already fixed on a master branch of Highcharts repository. In order to use the newest version of library please change links from:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
to:
<script src="https://github.highcharts.com/stock/highstock.js"></script>
<script src="https://github.highcharts.com/modules/exporting.js"></script>
You can use those links until the new release comes out (what should happen this week), but we don't recommend using GitHub version on production enviroment.
Live example: http://jsfiddle.net/pavnLexd/
Related
error thrown by highchart-more library while clicking on print chart (exporting button).
i'm trying to export (print chart) a columnrange graph.
Even i found that the demo example on highchart is also throwing the same error.
https://www.highcharts.com/demo/columnrange?cf_chl_jschl_tk=75ef57b90426bb8711968566eb4df741cf64c9a6-1591202845-0-AZwTKQgqzxGQZDW-Rq4JOgEgcwcOmwgfRMadAmbWU1-gwfLNp3h-bTchWfh2zFIRQTkOHFAlxZTshcL9Zn5dvQqDHGY7VRsSpCOoL-tzk-fkIW2gwOt7DrGyZSWjuljLg-CvjjO2Z87if54GYlLmpeVuDHpL-5Vfl0mleCW0U8WdHUjmRyswY_332RrXJxtjoJhCBqY0AYpW9NnDXfK7Kl6dRkat5Roeeso4bEjY2hkWnylV7Eo0K7BxzEBPDAXQZZLionI8SGtXNon3v12b3MBE_TwsReW9JfaECbtlnzDmWnq4PA1G8u_hWU7B8pYEx9LQ9r40INKMVf1Jdkcsf_H6CMmZ6C211e9cvI06KHhP
This is a Highcharts bug that is reported here: https://github.com/highcharts/highcharts/issues/13575
The issue is resolved and the fix will applied in the next version. As a workaround you can use the code from master or some previous version:
<script src="https://code.highcharts.com/8.0.4/highcharts.js"></script>
<script src="https://code.highcharts.com/8.0.4/highcharts-more.js"></script>
<script src="https://code.highcharts.com/8.0.4/modules/exporting.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5019/
Highcharts file service: https://code.highcharts.com/
I am quite New to typescript and I have tried to set up a typescript Project in Visual studio 2015 as HTML Application With Typescript. My problem is how to import or Reference highcharts without errors. I need a short description on how to set up the easist highchart in my typescript file. The description should explain from the start
1) creating the Project, and adding highchart (npm, tsd...) to the Project,
2) setting up the index.html file and app.ts (or the name of Your typescript file),
3) adding References in the html file and app.ts, especially in app.ts where you set import or References, like using import statement or
< reference path="typings/tsd.d.ts" />
< reference path="typings/highcharts/highcharts.d.ts" />
4) Set require statements and put into a variable
(I can't get this code to work ... Please use Your way to do this
var Highcharts = require('highcharts');
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts);
// Create the chart
Highcharts.chart('container', { /*Highcharts options*/ });
5) Finally you render the highchart either in app.ts or by using the id in the index.html file
<div id="container" style="width:100%; height:400px;"></div>
I hope somebody can help me out here. I could of course have done all this in index.html but I want to make use of the debugging possibilities in typescript.
I know this question has been asked 3 years ago, so I was wondering is there anything new and/or better than it was 3 years ago.
Currently, I am using GoogleVisualr ( http://googlevisualr.herokuapp.com/ ) and I like it...it is simple and easy, but it lacks radar charts :(
So, I was wondering is there any other free and easy charting solutions? Javascript or flash is good for me, but I need to have radar charts.
Thank you
Dorijan
I use and recommend Highcharts. It's not free, but it works well and has lots of features. Also, it's very well documented and has tons of working code examples on the site.
Development licenses (I believe) are free so you can try it out at no cost then pay only if you decide to use it. The price isn't too high either considering the time it saves.
Check following code,
<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("visualization", "1.0", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70],
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Refer for more info
Have you looked at d3.js?
Also found someone who has [shared] (https://groups.google.com/forum/m/#!msg/protovis/GsFB1l1Mo_g/geLerhwvbdQJ) their code to create radar graphs using protovis which still available.
Finally, someone else's [sample] (https://gist.github.com/1630683) of radar graphs using d3.
I have followed all the instructions to get the back button to appear but it's not working.
Here is what I'm following:
*The auto-generated Back button feature is off by default.
To activate auto generated back buttons on specific pages, simply add the data-add-back-btn="true" attribute on the page container and the magic will be back. To activate this globally, set the addBackBtn option in the page plugin to true. Here is an example of how to set this:
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
Note: You must include this script before the jQuery Mobile library is referenced in the head of your page for this to work. The mobileinit event is triggered immediately upon execution, so you need to bind event handlers before jQuery Mobile is loaded. Learn more about setting global config options.*
I've also cleared the cache and I still don't get the back button...
I'm I missing something new?
OK I found the solution.
I've decided to post it here for anyone who might have the same problem.
The code must be instead in a specific order.
After the jquery library but before the jqm library...
Make sure that this snippet is AFTER jQuery library loads but BEFORE jQueryMobile library is loaded... so:
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script type="text/javascript" src="jquery.mobile-1.0b1.js"></script>
Solution found here:
http://forum.jquery.com/topic/i-need-back-button-back
I'm using "Jquery UI 1./Dan Wellman/Packt Publishing" to learn JQuery UI. I'm working on the 'Dialog widget' chapiter.
After I've completed a series of exercises in order to build a Dialog widget (using Google Chrome), I then tried my work with Internet Explorer and Firefox.
The result has been disappointing.
Chrome was perfet
With Internet Explorer, (1) the title of the Dialog widget did not appear, (2) The location of the dialog widget was not correct (given the position: ["center", "center"]). It was rather offset toward left.
With Firefox, the location was respected. However, only the outer container was visible. the content was missing, just a blank container.
Also using Option Show:true and Hide:true did only work with Chrome.
I wonder now if JQuery UI was meant to be used only with Google Chrome. I just think that I might be missing some directives to make it work with major browsers (as the author claimed in his book).
Here's the code. Since, I'm using ASP.NET MVC, certain codes, such as the element to the css, do not appear. But, for the rest, all the functioning code is bellow.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<p>
The goal of this tutorial is to explain one method of creating
model classes for an ASP.NET MVC application. In this tutorial,
you learn how to build model classes and perform database access
by taking advantage of Microsoft LINQ to SQL. In this tutorial,
we build a basic Movie database application. We start by creating
the Movie database application in the fastest and easiest way possible.
We perform all of our data access directly from our controller actions.
</p>
<div style = "font-size:.7em" id = "myDialog" title = "This is the title">
In this tutorial -- in order to illustrate how you can build model classes
-- we build a simple Movie database application.
The first step is to create a new database. Right-click the
App_Data folder in the Solution Explorer window and select the menu option
Add, New Item. Select the SQL Server Database template, give it the name
MoviesDB.mdf, and click the Add button (see Figure 1).
</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptContent"
runat="server">
<script src="../../Content/development-bundle/jquery-1.3.2.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.core.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.dialog.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.draggable.js"
type="text/javascript"></script>
<script src="../../Content/development-bundle/ui/ui.resizable.js"
type="text/javascript"></script>
<script
src="../../Content/development-bundle/external/bgiframe/jquery.bgiframe.js"
type="text/javascript"></script>
<script type = "text/javascript">
$(function() {
var execute = function() { }
var cancel = function() { }
var dialogOpts = {
position: ["center", "center"],
title: '<a href="/Home/About">A link title!<a>',
modal: true,
minWidth: 500,
minHeight: 500,
buttons: {
"OK": execute,
"Cancel": cancel
},
show:true,
hide: true,
bgiframe:true
};
$("#myDialog").dialog(dialogOpts);
});
</script>
Thank for helping.
EDIT
I've re-done the same exercise yesterday. From the beginning to the end, each time I've introduced a behavior, I've tested my work in all 3 browsers (IE, Firefox, Chrome).
Everything works until I add option Show and Hide. Then only Chrome works.
If I remove Show and Hide, everything works again.
If I keep only Show and Hide, everything works perfectly
Maybe Show and Hide options for dialog widget do not mix up well with other options.
Thanks for helping.
No, jQuery UI works in any of those browsers. It's probably either the steps you're following don't work so well with the version you're using or the version you're using is old. I've used jQuery UI without issue on both browsers. If you don't believe me, then open this URL in your browser:
http://jqueryui.com/demos/dialog/
In Firefox 3.6, it loads just fine for me.
I'm not an expert on jQuery UI, but providing the code here might help.
jQuery supports all the major browsers however there are know issues with;
Firefox 1.0.x
Internet Explorer 1.0-5.x
Safari 1.0-2.0.1
Opera 1.0-8.x
Konqueror
We have successfully implemented a Dialog widget without major issues. We did have some problems making sure the correct versions of the libraries were created. I would suggest you build a custom file using the jQuery UI download tool. This will put all the necessary files in a single minified file.
If the Dialog examples don't help then posting code will be necessary to obtain further help.
EDIT:
I have anchors created with the classes dialogOpen and dialogClose and use the following code to utilise the created UI Dialog;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 840,
height: 560
};
$(".dialogOpen").click(function(){
$("#myDialog").dialog("open");
return false;
});
$(".dialogClose").click(function(){
$("#myDialog").dialog("close");
return false;
});
$("#myDialog").css('display','block').dialog(dialogOpts);
$(".ui-dialog-titlebar").hide();
});
NB: The use of the css function when creating the dialog stops the content appearing on the page before the Dialog is created. We needed this because our dialog has flash.
You may be missing something. It surely works in all major browsers.
jQuery is ment to be cross browser. Any errors with this can have to reasons
- Programmer's error
- Explicit incompatibilty
There are some explicit incompatibility's with IE5.5 and IE6 in jQuery. They are in the comments of jQuery and a good js compatible IDE like netbeans will allow targeting and warn you about it.
I never had any problems with the dialog widget positioning or contents.
jQuery UI is most definitly not designed to work with Google Chrome only.
I've successfully created applications using jQuery UI working on all major browser platforms.
jQuery UI (and jQuery) contain code to work around certain browser issues.
Of course there can be issues in jQuery UI which show on IE, like this one, but those are certainly not by design.