I'm working with Flot Charts (http://www.flotcharts.org) and having problems getting some plugins to work. Below is my line graph and I can't get the tooltips plugin to show (https://github.com/krzysu/flot.tooltip). I also couldn't get an axis labels plugin to work either. However, the resize plugin works good. What's up with my code? I appreciate any help.
<head>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.tooltip.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
<!--<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script>-->
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$.ajax({
//usually, we'll just call the same URL, a script
//connected to a database, but in this case we only
//have static example files so we need to modify the
//URL
url: "views/sales_year_line_data.php",
method: 'GET',
dataType: 'json',
success: onOutboundReceived
});
function onOutboundReceived(series) {
var length = series.length;
var finalData = series;
var options = {
lines: { show: true, fill: true},
points: { show: true, hoverable:true },
grid: { show: true, aboveData: false, color: "rgba(255, 255, 255, 1.0)", borderWidth: 0, hoverable: true, clickable: true },
legend: {position: "sw", backgroundOpacity: 0},
xaxis: { ticks: [[1,'Jan'],[2,'Feb'],[3,'Mar'],[4,'Apr'],[5,'May'],[6,'Jun'],[7,'Jul'],[8,'Aug'],[9,'Sep'],[10,'Oct'],[11,'Nov'],[12,'Dec']] },
yaxis: { show: false },
tooltip: { show: true, content: "%s | x: %x; y: %y"}
};
$.plot($("#test-flot"), finalData, options);
}
});
</script>
</head>
I used the jquery.flot.tooltip.js from cloudflare.com cdn and now the tooltips work.
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
Related
Getting this error while running a HighCharts in my JSP Application.
Uncaught TypeError: $(...).highcharts is not a function(anonymous function) # VendorReports:125n.Callbacks.j # jquery-1.11.0.js:893n.Callbacks.k.fireWith # jquery-1.11.0.js:928n.extend.ready # jquery-1.11.0.js:982K # jquery-1.11.0.js:989
Please suggest what to do
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
$(function () {
$('#container').highcharts({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples' ]
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
//Nothing wrong with this code
I was having this issue, too. Ensure jQuery is imported before highchart.js. That fixed the issue for me.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
What happens if you replace
$('#container').highcharts({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column'
},
/* ... */
by
var chart = new Highcharts.Chart({
colors: ["#7cb5ec", "#f7a35c"],
chart: {
type: 'column',
renderTo: 'container'
},
/* ... */
?
I had the same issue as you a while ago and I resolved it by using this type of initialization.
I was using an old version of the high charts version. From their website I assumed that the version listed under Specific version was their latest version and used that so it wouldn't auto update on me. However the version they had listed was super old so changing it to the actual latest version fixed the issue.
The approach taken from the official examples is working well. They defined the include script tag within the body tag therefore the solution given by Kabulan0lak is better I think.
<html>
<head>
<title>Highcharts Example</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'spline'
}
// ... other options and data/series
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
It happens with me too. In my case, I need click in a button to load the chart and if I click twice or more the chart stops to work. I was setting the color like this:
Highcharts.setOptions({
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
})
});
$.getJSON("./myDataGraph.php", function(response){
// Create the chart
var chart = Highcharts.chart('myGraph', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
... });
I couldn't solve the error, but I remove the "Highcharts.setOptions" and the chart works!!!
Ok so I am trying to make a basic bar chart using highcharts and I am trying to use data that is contained in a QuickBase database, I have managed to pull the data from the server, I used an API call and have the data using this
http://pastebin.com/fJry1jA8
<!Doctype html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-more.src.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.src.js"></script>
<script>
var dbidApplication = "-EDITED OUT-";
var dbidTable = "-EDITED OUT-";
var apptoken = "-EDITED OUT-";
$.ajaxSetup({data: {apptoken: apptoken}});
var promise1 = $.get(dbidApplication , {
a: "dbpage",
pagename: "chart.html"
});
var promise2 = $.get(dbidTable, {
act: "API_GenResultsTable",
query: "{14.EX.'_FID_9}",
clist: "7.24.25.26.27.28.29.30.31.32.33.34.35.36.37",
jsa: 1,
options: "num-1",
});
$.when(promise1, promise2).then(function(chartArgs, dataArgs) {
var chart = chartArgs[0];
var markup = new Highcharts.Chart(chart, qdb_data);
console.log(markup);
});
</script>
<div id="container" style="width:100%; height:400px;"></div>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'bar',
renderTo: 'container',
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
</script>
</body>
</html>
I've looked up examples of what people have told me, but now I am confused between being told I need to parse,pluck,get,and a list of other things that I have no clue what to look into so I can actually use this data, but I am looking for an explanation of whats actually going on also (I really don't find it helpful to see a bunch of code where half of it I don't understand because I haven't learned to that yet, its rather depressing)
I m trying to reproduce HighChart graph .it is working fine on JsFiddle ..but on My local web app it is throwing Error :
JavaScript runtime error: Object expected
Error comes on this code segment in file highcharts.src.js
/ Set up auto resize
if (optionsChart.reflow !== false) {
addEvent(chart, 'load', function () {
chart.initReflow();
});
}
this I my JSFiddle
http://jsfiddle.net/u9xES/550/
this is my WebPage
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(function () {
var highOptions = {
chart: {
type: 'line',
renderTo: 'container2',
zoomType: 'x',
marginTop: 100
},
title: {
text: 'Score'
},
subtitle: {
text: ' '
},
xAxis: {
title: {
text: 'XXX'
},
categories: [],
labels: {
rotation: 45,
step: 1,
y: 30
}
},
yAxis: [{ // left y axis
title: {
text: 'XXX'
},
min: 0,
max: 9,
plotLines: [{
value: 7.5,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'XXX'
}
}]
}],
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function () {
return Highcharts.numberFormat(this.y, 1);
}
}
}
},
legend: {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true
},
series: []
};
highOptions.xAxis.categories = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8];
highOptions.subtitle.text = "XXX:";
chart = new Highcharts.Chart(highOptions);
var aName = "Fin";
newLP = [0.1, 5.52, 0.2, 6.16, 0.3, 6.34, 0.4, 6.69, 0.5, 6.36, 0.6, 7.44, 0.7,
7.44, 0.8, 7.44];
chart.addSeries({
name: aName,
data: newLP
}, false);
chart.redraw();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="container2">
</div>
</form>
</body>
</html>
I am not getting any idea ..why it is running fine on JSFiddle .But not on my Web App ..there is no other plugin install ..please suggest
The sequence of the scripts are important in this case, the correct sequence FOR CHROME should be:
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
Other browsers may have different methods in determining which js file to load first. So you have to test with other browsers if they all work fine.
Just googling around a bit for that error, and it seems that it always has to deal with how
<script type="text/javascript">
is defined.
Have you tried changing it to:
<script type="text/javascript" language="javascript">
i have this code that works in JSFiddle: http://jsfiddle.net/B2jan/
But, when i put the SAME code to my website it doesn't work. Here i put the simple code:
<div id="container" style="height: 400px; min-width: 600px"></div>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="/datepicker/js/jquery-1.3.2.min.js"></script>
<script>
$(function() {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series: [{
name: 'AAPL Stock Price',
data: [
[1364463576000, 46906],
[1364463578000, 50379],
[1364463580000, 33733],
[1364463582000, 5612],
[1364463981000, 14213],
[1364464007000, 11208],
[1364490137000, 38047],
[1364665254000, 14964],
[1364665256000, 11443],
[1364665257000, 9005],
[1364665259000, 5283],
[1364665260000, 1731]
],
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
</script>
Is a copy-paste of jsfiddle, i don't undertand why don't work.
Thanks!
EDITED:
I put the files on a host of internet and a localhost using Xammp, but is the same result.
So, it looks like you have made a change to the code and it is not a direct copy and paste. Did you change anything?
EDIT: Ahhhhhh, I spotted it, you were not copying the final closing tags of the Chart! :)
});
Look at the end of your code.
This works for me.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 480
},
title : {
text : 'AAPL Stock Price'
},
series: [{
name: 'AAPL Stock Price',
data: [
[1364463576000, 46906],
[1364463578000, 50379],
[1364463580000, 33733],
[1364463582000, 5612],
[1364463981000, 14213],
[1364464007000, 11208],
[1364490137000, 38047],
[1364665254000, 14964],
[1364665256000, 11443],
[1364665257000, 9005],
[1364665259000, 5283],
[1364665260000, 1731]
],
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 400px; min-width: 600px"></div>
</body>
</html>
Add jQuery Library that JSFiddle is using.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
I'm trying to graph a histogram of 1 series with 100 inputs. However, jqPlot keeps rendering my data as a line graph when I specify it to render a bar graph instead. My code is a modified version of the bar graph examples.
<script type="text/javascript" src="dist/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="dist/src/plugins/jqplot.pointLabels.min.js"></script>
$(document).ready(function(){
var hits = [123, 54, 897, ...]
var plot1 = $.jqplot('chart1', [hits], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
series:[ {label:'Hits'} ],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
autoscale: true,
renderer: $.jqplot.CategoryAxisRenderer,
numberTicks: 4,
tickInterval: 25
},
yaxis: {
autoscale: true
}
}
});
});
Does anybody know what I'm doing wrong?
Add seriesDefaults options to your jqplot options :
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
}