jqplot error: Uncaught Canvas dimension not set - javascript

I have a simple graph made from an array that looks like this:
var plot2 = [[1,1.3,"1.3"],[2,0.3,"0.3"],[3,3.3,"3.3"],[4,1.7,"1.7"]];
and then it's added to a div like this.
var plot1 = $.jqplot ('graph', [plot2],{
grid:{
background:"transparent",
borderColor:"#6c9922",
gridLineColor:"#6c9922",
shadow:false
},
axes: {
xaxis: {
tickOptions:{formatString:'%.0f'},
pad: 0,
min:0,
max:5
},
yaxis: {
tickOptions:{formatString:'%.1f'},
pad: 0,
min:0,
max:5
},
},
series:[{
lineWidth:2,
markerOptions: {size:2,style:"circle"}
}],
seriesDefaults:{
showMarker:true,
pointLabels:{ show:true }
},
seriesColors:["#ffffff"]
});
My problem is that some users of my website is reporting that they can't see the graph, both using latest Chrome and Firefox, and that they get and error saying
Uncaught Canvas dimension not set jquery.jqplot.min.js:57
Some of them say that the graph only works if they have zoom-level set to 100%.
None of this makes much sense to since and everything works perfect on every system I've tried.
So does anybody have any idea what can be wrong?
I've searched for the error but the only place I can find it is in the source code of the jqplot plugin.

I made the following changes to the attributes array, which seemed to work. It must have had something to do with the min and/or max values on the axes, though I don't know for sure, since I never got any error.
var plot1 = $.jqplot ('graph', [plot2],{
grid:{
background:"transparent",
borderColor:"#6c9922",
gridLineColor:"#6c9922",
shadow:false
},
axes: {
xaxis: {
tickOptions:{formatString:'%.0f'},
pad: 0
},
yaxis: {
tickOptions:{formatString:'%.1f'},
pad: 0
},
},
series:[{
lineWidth:2,
markerOptions: {size:2,style:"circle"}
}],
seriesDefaults:{
showMarker:true,
pointLabels:{ show:true }
},
seriesColors:["#ffffff"]
});

Related

How to create Highcharts plotbands along every point in line chart

I want to create a linechart with HighCharts that has a plotband along every point of the line. Like so: https://imgur.com/a/WVj7uJb
(They are using HighCharts as well, so it must be possible).
However, I can't seem to manage getting it for every point specific. Whenever I add plotbands, it just draws a band using the highest and lowest point like so: https://imgur.com/a/PZdKIBz
How I currently render the chart (note the plotbands part):
Highcharts.chart('chart', {
chart: {
type: 'line',
},
title: {
text: `${this.variable}`,
},
credits: {
enabled: false,
},
xAxis: {
type: 'category',
title: {
text: "Date"
},
},
yAxis: {
title: {
text: this.unit
},
plotBands: [
{
color: "orange",
from: 12,
to: 14
},
{
color: "orange",
from: 10,
to: 13
} // and so on.
]
},
tooltip: {
headerFormat: `<div>Date: {point.key}</div>`,
pointFormat: `<div>${this.unit}: {point.y}</div>`,
useHTML: true,
},
series: seriesList,
} as any);
So exact example would render a plotband from 10 to 14 along the whole linechart, instead of to different points: one from 12 to 14, and one from 10 to 13.
Any ideas as to how I can accomplish this? I have seen something with 'path', but I can't find anything about it.
Thanks in advance.
In that case, you should use arearange series instead of plotBand.
Demo:
https://www.highcharts.com/demo/arearange-line
API Reference:
https://api.highcharts.com/highcharts/series.arearange

Using markings In Flot on a time axis

I have a graph that monitors the traffic of people visiting a website and it currently shows all of it's data no problem:
Every month or so I update and send out a newsletter to people that are subscribed to me and I want to know if there is a way to show on that graph the time that those newsletters came out.
So if I was looking at the past week of site-traffic in my graph and my newsletter was sent out on Monday, a line would appear on that day on the graph:
I know I can sort of do this with markings, a way to add lines to a graph in flot that already exists
{ xaxis: { from: 1, to: 2 }, color: "#000000" } //Creates a vertical line from 1 to 2
But that doesn't seem to work the same when you have time mode enabled. E.g. The parameters I'm giving it for markings won't show up when time mode is on
So my question is: How do I add a marking to the graph that appears on a specific date with flot?
EDIT
$.plot("#chart_filled_blue", data1, $.extend(true, {}, Plugins.getFlotDefaults(), {
xaxis: {
min: start,
max: end,
mode: "time",
tickSize: [1, type],
tickLength: 0
},
series: {
lines: {
fill: true,
lineWidth: 1.5
},
points: {
show: true,
radius:4,
lineWidth: 1.1
},
grow: { active: true, growings:[ { stepMode: "maximum" } ] }
},
grid: {
hoverable: true,
clickable: true,
markings: [{
xaxis: {
from: 1530421200,
to: 1530507600
},
color: "#000000"
}]
},
tooltip: true,
tooltipOpts: {
content: '%s: %y'
}
}));
Markings work just fine in flot with time axes. Can you post some code to help understand the issue better?
You'll have to set the marking from and to to the timestamp you want the marking to appear:
grid: {
markings: [{
xaxis: {
from: 1336201200000,
to: 1336201200000
},
color: "#ff0000"
}]
}
This JSFiddle has a working example of a time series axis and markings.

Highcharts not "graphing" in Firefox or Safari

I'm having an odd problem where my Highcharts graph is only properly "graphing" on Chrome. The graph frame itself shows up just fine (the axis' names, labels, white background, etc), but the actual columns do not get animated, nor do they show up on the graph to represent the actual data. It just appears to look like an empty graph.
The data is being called via AJAX. Everything on that end is fine. The code itself is also very simple, so not sure what could be causing this. Here is the code, any help would be greatly appreciated:
Highcharts.chart('modal-graph-wrapper', {
chart: {
type: 'column'
},
title: {
text: 'Build Time vs. Step'
},
yAxis: {
title: {
text: 'Length of Time (seconds)'
},
categories: timeArray
},
xAxis: {
categories: nameArray
},
plotOptions: {
series: {
pointStart: 0
}
},
series: [{
name: 'Build Time (seconds)',
data: timeArray,
lineWidth: 3,
marker: {
radius: 3,
fillColor: '#337ab7'
}
}]
});
I ended up figuring it out. It is because the Date.parse function does not work as expected in Firefox or Safari; whereas in Chrome it works as anticipated. Restructuring the time format solved my issue. Thanks!

HighStocks/HighCharts scrollbar not displaying with large datasets causing xAxis labels to disappear and making bars not show

I'm creating a HighStock column bar chart. I have enabled the scrollbar using scrollbar: enabled. The scrollbar works fine for smaller datasets, but this dataset has a lot of categories(I've only included half as many as I need). For some reason, after a certain number, the rects for the bar chart won't properly show(or show wrong values) and the xAxis labels display as numbers rather than their actual names. Also, I'm trying to add IDs to each of the bars to add click events, but it only adds IDs to bars that are properly rendered initially. I have also noticed that I can properly add IDs even with a scrollbar to smaller data sets because all of the rect elements are properly rendered. Is there any way to make this scrollbar work for larger datasets?
You'll see what the problem described above looks like in this link:
https://jsfiddle.net/sauravvenkat/96ue59qy/
Highcharts.chart('container', {
chart: {
type: 'column',
color: 'rgb(245,111,35)',
},
title: {
text: 'Physicians By Specialty'
},
subtitle: {
text: 'Source: Physician Specaialty'
},
xAxis: {
type: 'category',
title: {
text: null
},
scrollbar: {
enabled: true
},
// min: 0,
max: 7,
tickLength: 0,
labels: {
rotation: -60
}
},
yAxis: {
title: {
text: 'Profiles',
align: 'high'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
name: 'Totals',
color: 'rgb(245,111,35)',
data: [["Spec1",1000],["Spec2", 1000], ["Spec3",500],["Spec4",300],["Spec5",1000],["Spec6", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300],["Spec37",300], ["Spec38",300], ["Spec39",300], ["Spec40",300], ["Spec41",300], ["Spec42",300], ["Spec43",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Spec47",1000],["Spec48", 1000], ["Spec49",500],["Spec50",300],["Spec51",1000],["Spec52", 1000], ["Spec53",500],["Spec54",300],["Spec55",1000],["Spec56", 1000], ["Spec57",500],["Spec58",300],["Spec59",300],["Spec60",300], ["Spec61",300], ["Spec62",300], ["Spec63",300], ["Spec64",300], ["Spec65",300], ["Spec66",300], ["Spec67",300], ["Spec68",300], ["Spec",300],["Spec24",1000],["Spec25", 1000], ["Spec26",500],["Spec27",300],["Spec28",1000],["Spec29", 1000], ["Spec30",500],["Spec31",300],["Spec32",1000],["Spec33", 1000], ["Spec34",500],["Spec35",300],["Spec36",300], ["Spec44",300], ["Spec45",300], ["Spec46",300],["Unknown",250]]
}]
});
It happens because the number of points in series is bigger than the default value of the cropThreshold property (more about below, in the API Reference section). As a solution, set the property with the bigger value.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.column.cropThreshold
Example:
https://jsfiddle.net/q8pn2dwf/

Setting options.rangeSelector.selected to 0 does not set zoom to correct level in highstock

I am trying to change the default zoom level on a simple highstock chart. I've been looking around for a solution and came up with this:
rangeSelector: {
selected:0,
},
This did not work with the code below
chart = new Highcharts.StockChart({
chart: {
renderTo: 'dummycontainer'
},
rangeSelector: {
selected:0,
},
credits: {
enabled: false
},
yAxis: {
title: {
text: ''
},
max: 100
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> <br/>', //({point.change}%)
valueDecimals: 2
},
series: [{
name: 'MMP',
data: [
],
marker : {
enabled : true,
radius : 3
},
shadow : true
}]
});
What could be causing this?
rangeSelector: {
selected:0
}
very much works
Change default time range | Highchart & Highstock # jsFiddle
Check for any other javascript related errors in your browser's javascript console. If you are trying out on IE or even otherwise I would recommend removing the trailing comman(,) from selected:0, like in the code above or the demo.
Trailing commas lead to invalid json and some browsers may not behave correctly with them. You can validate your json # http://jsonlint.com/ or try the JSLint option in jsFiddle.

Categories

Resources