I'm trying to generate a heatmap using data inserted by gon.
The frame for the chart is generated correctly in the browser, but the chart is missing, just blank.
and in the console I get:
Uncaught Highcharts error #17: www.highcharts.com/errors/17
which seems to be generated by the initSeries method in highcharts after a comment mentioning:
// No such series type
I'm using RoR4, with this in the Gemfile:
gem "highcharts-rails", "~> 3.0.0"
and this in the application.js:
//= require jquery
//= require jquery_ujs
//= require tether
//= require bootstrap-sprockets
//= require highcharts
//= require highcharts/highcharts-more
//= require turbolinks
//= require_tree .
my SLIM:
td
.card
.card-img-top(data-template-chart=true data-id=template.to_param)
my includes (from the compiled HTML):
<script src="/assets/highcharts.self-d34c91baaad4188e2d81d954aa38de43ec4916882f39d2d908f86d47a6e942b0.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/highcharts/highcharts-more.self-995bc649d8f9f68a0bb6bfb3242b35a20c494d716164fa0c93a74630b291113b.js?body=1" data-turbolinks-track="true"></script>
Inspecting the "sources" in the browser I can see both files being loaded
my coffeescript:
$(window).bind 'page:change', ->
initPage()
initPage= ->
$('[data-template-chart]').each( ->
curId = $(this).data("id")
data = gon.templates[curId]
$(this).highcharts
chart:
height: 150
width: 150
title: text: ''
xAxis:
showLastLabel: false
tickLength: 16
yAxis:
title: text: null
labels: format: '{value}:00'
minPadding: 0
maxPadding: 0
startOnTick: false
endOnTick: false
tickPositions: [0, 6, 12, 18, 24]
tickWidth: 1
min: 0
max: 23
reversed: true
colorAxis:
stops: [
[0, '#3060cf']
[0.5, '#fffbbc']
[0.9, '#c4463a']
[1, '#c4463a']
]
min: -15
max: 25
startOnTick: false
endOnTick: false
# labels: format: value
series: [
{
type: 'heatmap'
data: csv: data
borderWidth: 0
nullColor: '#EFEFEF'
colsize: 24 * 365
}
]
)
I'm guessing the issue is with the highcharts-more library, which is being loaded in the browser, but it doesn't seem to be available, and I'm guessing it's a problem with the javascript generated by coffeescript.
This is the compiled version:
(function() {
var initPage, update_form;
$(function() {
return initPage();
});
$(window).bind('page:change', function() {
return initPage();
});
update_form = function() {
var chart, end_quote, extremes, start_quote;
chart = $('#template_chart').highcharts();
extremes = chart.xAxis[0].getExtremes();
start_quote = Math.ceil(extremes.min);
end_quote = Math.floor(extremes.max);
$('#template_match_start_quote_id').val(gon.ids[start_quote]);
return $('#template_match_end_quote_id').val(gon.ids[end_quote]);
};
initPage = function() {
$('select[flexible_select]').flexible_select();
return $('#template_chart').each(function() {
var categories, prices;
prices = gon.prices;
categories = gon.ids;
return $(this).highcharts({
chart: {
zoomType: "x",
events: {
redraw: function() {
return update_form();
}
}
},
title: {
text: null
},
xAxis: {
categories: categories,
labels: {
enabled: false
}
},
yAxis: {
title: {
text: "Price",
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
},
tooltip: {
shared: true
},
legend: {
enabled: false
},
credits: {
href: "http://www.pattern4all.com",
text: "source: www.pattern4all.com"
},
series: [
{
name: "Price",
data: prices,
type: "line",
marker: {
enabled: false
},
tooltip: {
valuePrefix: "$"
},
style: {
color: Highcharts.getOptions().colors[1]
}
}
]
});
});
};
}).call(this);
Turns out that:
I needed to add
//= require highcharts/modules/heatmap
to my application.js I thought it was a redundant inclusion, but apparently it's not.
Also the GEM readme, at: https://github.com/PerfectlyNormal/highcharts-rails mentions to install: gem "highcharts-rails", "~> 3.0.0" but 3.0.0 is not the latest version, I updated the gem inclusion to: gem "highcharts-rails", "~> 4.1.9", which is currently the latest, and the problem seems fixed.
Even removing completely the version specification would work:
gem "highcharts-rails"
getting the project to use the latest version.
I'm going to make a pull request to update the readme.
Related
I am working on a website which needs to show something on the chart (highchart) upon clicking of a button.
The issue is: when the page is first loaded, the label on the vertical axis can not be seen, no matter how big I set the margin for the chart. However, after the button is clicked for the first time, the labels can be seen and remains so.
There was no such problem before I set "reversed", "opposite" for xAxis and "reversed" for yAxis as true.
What causes this phenomenon and how can I solve this?
See the JSFiddle for detail. (There are some logic mistakes in the code which is irrelevant for my question.)
I just discovered that when I first load the JSFiddle, the vertical axis of the graph shows up with label; but when I click on "Run" additionally, the graph is refreshed with a vertical axis without label. Maybe I can simulate certain process which takes place when a JSFiddle is loaded to make sure that the vertical axis of the graph shows up with labels. But I am not sure how to do that.
Browser: Google Chrome Version 69.0.3497.92 (Official Build) (64-bit) (up to date)
My OS: Windows 10
Code for the generation of the chart:
function createColumnHorizChart(argMinY = minYAxis, argMaxY = maxYAxis) {
var chart = new Highcharts.Chart({
chart: { //not to be changed lightly
renderTo: 'contr2',
type: 'bar',
width: 749,
marginTop: 5,
marginLeft: 1,
marginRight: 90,
marginBottom: 55
},
colors: [
'#0000ff'
],
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
categories: ['smaller than 100', '100 - 110', '110 - 120', '120 - 130', '130 - 140', '140 - 150', 'bigger than 150'],
gridLineWidth: 1,
startOnTick: true,
title: {
text: 'Money Unit (MU)'
},
opposite: true,
reversed: true
},
yAxis: {
reversed: true,
min: 0,
max: 15,
tickInterval: 5,
title: {
text: 'Frequency',
}
},
tooltip: {
positioner: function(boxWidth, boxHeight, point) {
return {
x: point.plotX - 50,
y: point.plotY - 10
};
},
style: {
fontSize: "10px",
fontWeight: "unbold"
},
formatter: function() {
return Math.round(chartData[index - 2] * 100) / 100;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: false
}
},
series: {
borderColor: '#FFFFFF',
animation: false, //disable all the animations,
pointPadding: 0,
groupPadding: 0,
borderWidth: 1,
shadow: false
}
},
series: [{
enableMouseTracking: false,
data: Array(7).fill(0)
}]
});
return chart;
}
So, it's only possible to reproduce on Windows platform. Could you provide us also with minified demo where the problem occurs? I'm asking because in current demo there are a lot of lines which are unnecessary.
Additionally, until we find the source of the problem, you can workaround it by calling this.reflow() in chart.events.load event handler.
chart: {
events: {
load: function() {
this.reflow()
}
}
}
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow
I'm not sure why but it works fine when you remove the marginLeft property or set it to 0.
I want to display chart in view in rails app. use this link http://jsfiddle.net/zz7pB/ contain chart
in application.html.erb and try it in view
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
in application.js
//= require_tree
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require chart ---> name of controller
chart.js in app -> assets -> javascripts
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
in index.html.erb
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
i want display this chart in my app this all information. This live chart
when inspect element display div put not contain chart.
i read this Where should I place my jQuery code in my Ruby on Rails applications? but not solve it
This error appear in the console in the browser
EDITED:
Step 1
I created a new rails application and, Jquery-rails Gem added to the Gemfile.
Gemfile
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
application.js
//= require jquery
//= require jquery_ujs
And then run bundle install
Step 2
Downloaded HighchartJs and ExportingJs files and placed in assets/javascripts/plugins folder. And, These libraries are imported to application.js as below.
application.js
//= require plugins/highcharts
//= require plugins/exporting
Step 3
Created chart.js file and imported to application.js
//= require chart
Then paste your Js code in this file. All should work now.
Tips Please follow more tutorials to learn how to debug javascript with browser console.
I am creating highchart graph using the following code in a HTML file using JQuery 1.8 and Highcharts 4.1.9.
<div id="JSGraphContainer" class="GraphContainerJS" "></div>
<script>
$(function() {
var line;
var plotList= [];
data = {"vals": [['1244246400000', 11],
['1244332800000', 22],
['1244419200000', 11],
['1244505600000', 22],
['1244592000000', 33],
['1244678400000', 11],
['1244764800000', 22]
]};
$("#JSGraphContainer").highcharts({
chart: {
type: 'line',
zoomType: "x",
plotBorderWidth: 1,
plotBorderColor: 'black',
},
title: {text: null},
xAxis: {
crosshair: true,
type: 'datetime',
opposite: true,
tickmarkPlacement: "on",
gridLineDashStyle: "Dash",
gridLineWidth: 1,
tickWidth : 0,
plotLines: plotList,
},
yAxis: {
title: { text: null },
tickAmount: 5,
gridLineDashStyle: "Dash",
opposite: false
},
series: [{ data: data.vals }],
plotOptions: {
series: {
marker: {
enabled: true
}
}
},
legend: {enabled : false},
tooltip: {
formatterdd: function() {
return ((new Date(this.x)).toDateString()) + ", " + this.y;
},
pointFormat: '<span style="color:{point.color}">\u25CF</span><b>{point.y}</b><br/>',
crosshairs: {
color: 'green',
dashStyle: 'solid'
}
}
});
});
</script>
My test code which is meant to extract generated SVG out for comparison purpose is
WebElement elem = driver.findElement(By.className("GraphContainerJS"));
String contents = (String)((JavascriptExecutor)driver).executeScript("return arguments[0].innerHTML;", elem);
System.out.println(contents);
When I use FirefoxDriver then I get the correct SVG printed out to sysout but when I use JavaScript enabled HTMLUnitDriver, then I get the different SVG output which doesn't match firefox and doesn't render anything when copied on an html file. I tried to use firefox capabilities as
new HtmlLUnitDriver(DesiredCapabilities.firefox());
but it doesn't help. I am hoping there must be a way to configure HtmlUnitDriver, if at all, to get the right output.
Appreciate any pointers.
there is already a method called getSVG in highcharts which can be used.
svg = chart.getSVG()
.replace(/</g, '\n<')
.replace(/>/g, '>');
http://jsfiddle.net/Nishith/g10j2ymc/
so I used the flot-tickrotor plugin to rotate the ticks on the xaxis of my flot chart, the problem now though is, it shows up twice;
do any of you know why this is happenning?
here's the code I'm using for this, you'll notice I'm not specifically adding the ticks;
//sample data
var mainDataSet = {name:'1 - WOMENS OUTERWEAR', Actual: 181.8, Budget:15.7, BudgetVar: 8.4 } ,
{name:'2 - WOMENS LINGERIE', Actual: 12.5, Budget:6.0, BudgetVar: -1.3 } ,
{name:'3 - KIDSWEAR', Actual: 8.7, Budget:13.2, BudgetVar:0.8 } ,
{name:'5 - MENSWEAR', Actual: 4.9, Budget:4.4, BudgetVar: 0.5 } ,
{name:'6 - WOMEN FOOTWEAR+ACCES', Actual: 354.0, Budget:16.5, BudgetVar: 14.7 }
];
var graph_options = {
series: {
lines: { show:false , fillColor:'#CDD0D1', fill:true},
points: { show: false },
color: '#3B80F7',
},
grid: {
hoverable: true,
clickable: true,
show:true,
borderWidth: 0.5,
backgroundColor: { colors: ["#FFF", "#CDD0D1"] }
},
xaxis: {
mode: "categories",
//tickLength: 1,
rotateTicks: 45
}
};
var barGraphData = []; //graph_settings
var graph_settings = {label: dataSets[c].label,
data: mainDataSet,
bars: { show: true , align: "center", barWidth: 0.5},
color: '#3B80F7'
};
barGraphData.push(graph_settings);
var barGraph = $.plot($("#bar_graph_canvas"), barGraphData, graph_options);
Ok, so according the issue log for flot charts this is a known issue for flot since 0.8.1, the work around is to add this in your styling until the issue is resolved;
div.xAxis div.tickLabel { display:none }
NB: make sure you put this in a style tag INSIDE YOUR HEAD TAG or BEFORE you include your flot chart plugin, so that the default styling can be overridden
I am using highcharts to generate graphical data pulled from a database.
I am having trouble using the exporting module. I have included the exporting property:
exporting{
enabled:true
}
but the buttons do not appear...
I have also linked the exporting.js to the file too...no buttons appear..
Has anyone else had this issue?
EDIT:
Here is the code:
$.ajax({
type:"POST",
url: "retrievechartdata.php",
data: {questionId:qId, questionIdTwo:qIdTwo, title:title, titleTwo:titleTwo, from:from, to:to},
dataType: "json",
success: function(data) {
//$("#response").html("<div class='successMessage'>"+ data.valuesTwo +"</div>");
var maxY = parseInt(data.max) + 1;
var minY = parseInt(data.min);
if(minY > 0){
minY = 0;
}else{
minY -= 1;
}
var cdata = new Array();
cdata= data.values.split(',');
for(var i=0;i<cdata.length;i++)
{
cdata[i]= parseInt(cdata[i]);
}
var leg = false;
var title = data.questionTitle;
if(data.valuesTwo != "FALSE"){
leg = true;
title += " & "+data.questionTitleTwo;
var cdataTwo = new Array();
cdataTwo = data.valuesTwo.split(',');
for(var i=0;i<cdataTwo.length;i++)
{
cdataTwo[i]= parseInt(cdataTwo[i]);
}
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
},
credits: {
enabled: false
},
title: {
text: title
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 14 * 24 * 3600000, // fourteen days
lineWidth: 1,
lineColor: '#999999',
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: data.questionTitle
},
labels: {
y: 2
},
lineWidth: 1,
lineColor: '#999999',
gridLineWidth: 1,
gridLineColor: '#eaeaea',
min: minY,
max: maxY,
startOnTick: false,
showFirstLabel: false
},
tooltip: {
shared: true
},
legend: {
enabled: leg
},
plotOptions: {
area: {
Color: {
linearGradient: [0, 0, 0, 600],
stops: [
[0, 'rgb(69, 114, 167)'],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 5
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: [{
type: 'spline',
name: data.questionTitle,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(data.year, data.month, data.day),
data: cdata,
lineColor: '#f6a828',
color: '#418ed6'
},
{
type: 'spline',
name: data.questionTitleTwo,
pointInterval: 24 * 3600 * 1000,
pointStart: Date.UTC(data.year, data.month, data.day),
data: cdataTwo,
lineColor: '#808080',
color: '#ff0000'
}],
exporting: {
enabled: true
}
})
Which version of Highcharts you are using? Which version of jQuery?
Currently is the v2.1.6, I recommend you use the latest release because they are continuously fixing bugs, adding new functionality, etc.
Prior to v2.0 there is no support to the exporting feature
The only things you need to do in order to bring the exporting module working are:
1- First: Add the js script after the highcharts script, like this:
...
<script type="text/javascript" src="../js/highcharts.js"></script>
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="../js/modules/exporting.js"></script>
...
The exporting module is enabled by default, so there is no need to have the code you posted, so you can remove it:
exporting{
enabled:true
}
2- Second: Be sure to publish the exporting-server/index.php file correctly.
Here you have what the official documentation reads about the exporting module installation:
Exporting module
From version 2.0 an exporting module is available for Highcharts, which allows users to download images or PDF's of your charts. This module consists of an extra JavaScript file, exporting.js, and a web service or server module written in PHP. Highslide Software offers the exporting web service free of charge. If you include the exporting module in your charts, two buttons will appear in the upper right. One button prints the chart, which is done on the client side only. The other button handles exporting. By default, an SVG representation of the chart is sent by POST to http://export.highcharts.com, where it is converted using Apache's Batik converter to PDF, PNG or JPEG.
See the navigation and exporting reference items for a full documentation for the options available. Also see under "Methods and Properties" in the reference for members releated to exporting.
Here you can see the configuration options regarding the exporting module: http://www.highcharts.com/ref/#exporting
Hope it helps you.
Make sure the script tag has
type="text/javascript"