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.
So I'm looking for a way to make one of the lines on my chart NOT smooth and the other smooth. There is a master option to make every line on the chart smooth but not a particular line that I know of.
Here is my chart of what it looks like
PS. Im using JQ Plots http://www.jqplot.com/index.php
Here is my JS code.
//STOCK HIGH VS LOW
var line1 = [['2017-11-27',175.0800],['2017-11-28',174.8700],['2017-11-29',172.9200],['2017-11-30',172.1400],['2017-12-01',171.6700],['2017-12-04',172.6200],['2017-12-05',171.5200],['2017-12-06',170.2047],['2017-12-07',170.4400],['2017-12-08',171.0000],['2017-12-11',172.8900],['2017-12-12',172.3900],['2017-12-13',173.5400],['2017-12-14',173.1300],['2017-12-15',174.1700],['2017-12-18',177.2000],['2017-12-19',175.3900],['2017-12-20',175.4200],['2017-12-21',176.0200],['2017-12-22',175.4240],['2017-12-26',171.4700],['2017-12-27',170.7800],['2017-12-28',171.8500],['2017-12-29',170.5900],['2018-01-02',172.3000],['2018-01-03',174.5500],['2018-01-04',173.4700],['2018-01-05',175.3700],['2018-01-08',175.6100],['2018-01-09',175.0600],['2018-01-10',174.3000],['2018-01-11',175.4900],['2018-01-12',177.3600],['2018-01-16',179.3900],['2018-01-17',179.2500],['2018-01-18',180.1000],['2018-01-19',179.5800],['2018-01-22',177.7800],['2018-01-23',179.4400],['2018-01-24',177.3000],['2018-01-25',174.9500],['2018-01-26',172.0000],['2018-01-29',170.1600],['2018-01-30',167.3700],['2018-01-31',168.4417],['2018-02-01',168.6200],['2018-02-02',166.8000],['2018-02-05',163.8800],['2018-02-06',163.7200],['2018-02-07',163.4000],['2018-02-08',161.0000],['2018-02-09',157.8900]];
var line2 = [['2017-11-27',173.3400],['2017-11-28',171.8600],['2017-11-29',167.1600],['2017-11-30',168.4400],['2017-12-01',168.5000],['2017-12-04',169.6300],['2017-12-05',168.4000],['2017-12-06',166.4600],['2017-12-07',168.9100],['2017-12-08',168.8200],['2017-12-11',168.7900],['2017-12-12',171.4610],['2017-12-13',172.0000],['2017-12-14',171.6500],['2017-12-15',172.4600],['2017-12-18',174.8600],['2017-12-19',174.0900],['2017-12-20',173.2500],['2017-12-21',174.1000],['2017-12-22',174.5000],['2017-12-26',169.6790],['2017-12-27',169.7100],['2017-12-28',170.4800],['2017-12-29',169.2200],['2018-01-02',169.2600],['2018-01-03',171.9600],['2018-01-04',172.0800],['2018-01-05',173.0500],['2018-01-08',173.9300],['2018-01-09',173.4100],['2018-01-10',173.0000],['2018-01-11',174.4900],['2018-01-12',175.6500],['2018-01-16',176.1400],['2018-01-17',175.0700],['2018-01-18',178.2500],['2018-01-19',177.4100],['2018-01-22',176.6016],['2018-01-23',176.8200],['2018-01-24',173.2000],['2018-01-25',170.5300],['2018-01-26',170.0600],['2018-01-29',167.0700],['2018-01-30',164.7000],['2018-01-31',166.5000],['2018-02-01',166.7600],['2018-02-02',160.1000],['2018-02-05',156.0000],['2018-02-06',154.0000],['2018-02-07',159.0685],['2018-02-08',155.0300],['2018-02-09',150.2400]];
var plot2 = $.jqplot('chart1', [line1, line2], {
title: 'AAPL High vs Low',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: { show: true },
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%b %#d, %#I %p' },
min: 'November 20 2017',
tickInterval: '1 month'
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'average',
y: 171.21, //**AVERAGE_FLOAT_VALUE**
lineWidth: 2,
color: '#FF5555',
shadow: false
}}
]
},
series: [{ lineWidth: 4,
markerOptions: { style: 'square' }
}],
series: [
{ label: 'High' },
{ label: 'Low' }
],
});
If it cant be done in JQ Plots, do you guys know of any other charts that can do this.
Pretty much Im looking for a chart to look like this in the end.
Replying kinda late but..
Yes you can do it in jqplot as well.
Instead of using a seriesDefaults option, go directly and add it in each series you want:
series: [
{
// custom line
lineWidth:2,
markerOptions: { style:'diamond' }
},
{
// here is your smooth line
rendererOptions: {
smooth: true,
},
markerOptions: { style:"circle" }
}
]
Disclaimer: I read it on the internet . . . but apparently d3 can do this (https://gist.github.com/thiyagu-p/3925981). Also, if you Google 'd3 moving average and volume' you get some interesting results. YMMV.
I don't know about jqPlot but you could certainly do this with RGraph:
https://www.rgraph.net/demos/svg-line-trading.html
And if you wanted the gray decorative bar at the back you could use another Bar chart to get this effect before drawing the Line charts and give it some dummy data of:
[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1]
Not getting any errors from firebug. Not showing in any browser. Was working previously and stopped working about a week ago. Sample of the code...
$(document).ready(function () {
//Generic names for multiple graphs
var First = $('#hfFirstOrder').val().split(",");
var Second = $('#hfSecondOrder').val().split(",");
var Third = $('#hfThirdOrder').val().split(",");
var ticks = $('#hfDaysOrder').val().split(",");
var maxValue = parseInt($('#hfMaxOrder').val());
var FirstArray = [];
var SecondArray = [];
var ThirdArray = [];
for (i = 0; i < First.length; i++) {
FirstArray.push(parseInt(First[i]));
SecondArray.push(parseInt(Second[i]));
ThirdArray.push(parseInt(Third[i]));
}
plotGraph("stackedPurchase", [FirstArray, SecondArray, ThirdArray], true, ticks, "Orders", maxValue, '#000', "Completed",
'#00F', "Ship/Pick", '#F00', "Back Order");
function plotGraph(chartName, total, stackBool, tick, yLabel, maxValue, SC1, SL1, SC2, SL2, SC3, SL3) {
plot = $.jqplot(chartName, total, {
stackSeries: stackBool,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: { barMargin: 20, barWidth: 10 },
showMarker: false,
pointLabels: { show: false }
},
axes: {
xaxis: {
label: "Days",
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tick
},
yaxis: {
label: yLabel,
padMin: 0,
tickInterval: parseInt(maxValue * .1),
min: 0,
max: maxValue,
tickOptions: { formatString: '%d' }
}
},
series: [{ color: SC1, label: SL1 },
{ color: SC2, label: SL2 },
{ color: SC3, label: SL3 }
],
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
}
});
And then there's a call in the html for
<div id="stackedPurchase" style="height:450px;width:900px;" runat="server"></div>
And the various hidden values are csv strings from the code behind. According to firebug they are being passed in correctly (right formats and correct number of each variable). Judging from my coding experiences recently, its probably something obvious.
Got a partial answer, the first two graphs work now because someone else at work moved the folders that the jqplot stuff was in without informing me. Changing the address in the scripts at top fixed the problem.
But for some reason the third one isn't working.
plotGraph("graphQuote", [FirstArray, SecondArray, ThirdArray], false, ticks, "Quotes", maxValue, '#F00', "Request RFQ", '#00F', "RFQ", '#0F0', "Customer Quote");
SecondArray is all zero values, FirstArray is mostly zero and ThirdArray has a value in most of its fields. Ticks has correct dates.
Alright, found the problem. Apparently
parseInt(maxValue * .1)
gets pissy and returns 0 if maxValue is less than 10, and jqplot doesn't like 0 as a tick interval. Found a better way to do intervals and now everything works.