I am using normal stacked column Highchart for displaying two items where sometimes any of the item value might become zero. In that case i am not getting next chart elements of that stack displayed instead only one of stack element is displayed. my sample code snippet mentioned below which might not straight forward to reproduce the issue but anyway
chartType : 'chart',
options : {
chart : {
animation : false,
type : 'column',
height : chart_height
},
credits : {
enabled : false
},
legend : {
enabled : true
},
title : {
text : null
},
colors : ['#ED561B', '#50B432'],
plotOptions : {
series : {
stacking : 'normal',
minPointLength : 3
}
},
tooltip : {
useHTML : true
},
xAxis : {
categories : categories,
},
yAxis : {
title : {
text : translations['chart.tooltip_packets'],
useHTML : Language.isRtl() ? Highcharts.hasBidiBug : false
},
opposite : Language.isRtl()
}
},
series : [{
index : '0',
name : 'SSS',
data : [0, 15, 10, 20, 13, 14]
tooltip : {
style : {
color : '#ED561B'
},
headerFormat : '',
pointFormatter : function () {
return '<strong>' + translations['chart.tooltip_packets'] + '</strong><br/>' + this.category + ': ' + this.y;
}
}
}, {
index : '1',
name : 'DDD',
data : [800, 0, 0, 0, 0, 0]
tooltip : {
style : {
color : '#50B432'
},
headerFormat : '',
pointFormatter : function () {
return '<strong>' + translations['chart.tooltip_packets'] + '</strong><br/>' + this.category + ': ' + this.y;
}
}
}
]
My chart looks like
In chart, i have zero value SSS in the first stack and rest of the DDD have zero values but had some value of SSS there which is missing on the chart.
I don't know what is the issue here. Can any one help me?
ok i find out the problem. turn out that you set a size for points that has value 0 with this line
minPointLength: 3
and the values with 10 15 20 are at yAxis starting at 0 but also the point with 0 value are starting at 0 and by you setting minPointLength the points with 0 value are bigger than the others and are on top of the others, so the stacked values are 0-15 and the 0 has extra size that is not stacked. did i explained myself correctly?
Related
I am trying to plot a flot graph, but the date won't show. I do have flot.time loading and the time stamps are correct as I validated them. Can anyone see anything wrong with the code. The graph plots perfectly, but it shows the time stamp instead of the date.
if ($("#site-stats").length) {
var companies = [[1534892400000,4], [1534978800000,1], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,3], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,1], [1536361200000,0], [1536447600000,0], [1536534000000,4], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];
var users = [[1534892400000,6], [1534978800000,8], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,4], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,2], [1536361200000,0], [1536447600000,0], [1536534000000,5], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];
var plot = $.plot($("#site-stats"), [{
data : companies,
label : "Company Registrations"
}, {
data : users,
label : "User Registrations"
}], {
series : {
lines : {
show : true,
lineWidth : 1,
fill : true,
fillColor : {colors : [{ opacity : 0.1}, {opacity : 0.15}]}
},
points : {show : true},
shadowSize : 0
},
xaxis : {
mode : "time",
dateFormat : "%y-%0m-%0d"
},
yaxes : [{
min : 0,
tickLength : 2
}],
grid : {
hoverable : true,
clickable : true,
tickColor : $chrt_border_color,
borderWidth : 0,
borderColor : $chrt_border_color,
},
tooltip : true,
tooltipOpts : {
content : "Your sales for <b>%x</b> was <b>%y</b>",
dateFormat : "%y-%0m-%0d",
defaultTheme : false
},
colors : [$chrt_main, $chrt_second],
xaxis : {
ticks : 10,
tickDecimals : 0
},
yaxis : {
ticks : 20,
tickDecimals : 0
},
});
}
});
You have two xaxis properties in your options object:
xaxis : {
mode : "time",
dateFormat : "%y-%0m-%0d"
},
and
xaxis : {
ticks : 10,
tickDecimals : 0
},
The second overwrites the first one with the time format. Put them together and it works fine (see this fiddle):
xaxis: {
mode: "time",
dateFormat: "%y-%0m-%0d",
ticks: 10,
tickDecimals: 0
},
I have to set up a graph for a web application, and I decided to use Highcharts because it seems to be the most flexible. I managed to create what I wanted, but I can't do it in one graphic, I have to create two.
My goal is to have a bar graph, with negative values on the left and positive values on the right, and category names in the middle (and being able to place HTML in it but it's secondary).
Here is the link to what I have today:
$(function() {
Highcharts.setOptions({
chart : {
type : 'bar'
},
title : { text : '' },
subtitle : { text : '' },
plotOptions : {
bar : { dataLabels : { enabled : true }}
},
legend : { enabled : false },
credits : { enabled : false },
yAxis : {
title : false,
opposite : true
},
xAxis : {
categories : ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels : { format : "" },
type : "category",
visible : false,
title : false,
showEmpty: false,
reversed : true
}
});
// Graphique gauche (négatifs)
var leftChart = new Highcharts.Chart({
chart: { renderTo: 'gphLeft' },
yAxis: { reversed : false },
xAxis: { opposite : true },
series : [{
data : [null, -150, null, null, -680]
}]
});
// Graphique droite (positifs)
var rightChart = new Highcharts.Chart({
chart: { renderTo: 'gphRight' },
yAxis: { reversed : false },
xAxis: { opposite : false },
series : [{
data : [180, null, 258, 487, null]
}]
});
});
I have tried different techniques and answers found on the Internet, but I can't find a solution.
(I hope you understand, because I use a translator)
Can somebody help me?
I am currently working on an angular 5 application adn using highcharts for charts. I have a stacked bar chart with me. It plots the volume of positive, neutral, negative data across various categories.
The xAxis categories are
['Cat1', 'Cat2', 'Cat3', 'Cat4', 'Cat5']
and stacking normal
plotOptions: {
series: {
stacking: 'normal'
}
}
and the series data is in the format
series : [
{name : 'positive', data : [1,5,6,8,9]},
{name : 'neutral', data : [2,6,7,8,3]},
{name : 'negative', data : [3,6,4,2,8]}
]
It works great. Now, I have an array called categorySentimentData, where each object contains a company value as well as seriesData value (which is in the required format to be fed to our chart).
{company : company.companyname,
seriesData : [
{name : 'positive', data : positiveArray},
{name : 'neutral', data : neutralArray},
{name : 'negative', data : negativeArray}
]
Now I have a select tag whose options are various company names. When i select a different company, the chart should be fed with the appropriate series data and redrawn.
My chart creation code :
this.categorySentimentChart = new Highcharts.Chart('compChart',{
chart : {
type : 'bar'
},
title : {
text : this.selectedCompany
},
xAxis : {
categories : categoryList,
},
yAxis : {
title : {
text : ''
}
},
legend : {
reversed : true,
layout : 'horizontal',
align : 'center',
verticalAlign : 'bottom'
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series : this.categorySentimentData.filter((com) => com.company == this.selectedCompany)[0].seriesData
});
I have searched for ways to change series data and redraw the chart. They all have the same code
chart.series[0].setData([1,2,3,4,5]);
Is there a way i can reset the entire series data and redraw it? This is function i currently use when a company is selected
onCompanyChange() {
let targetSeriesData = this.categorySentimentData.filter((com) => com.company == this.selectedCompany)[0].seriesData;
this.categorySentimentChart.series.forEach((item, index) => {
this.categorySentimentCompetitorChart.series[index].setData(targetSeriesData[index], false);
});
console.log(this.categorySentimentCompetitorChart.series);
this.categorySentimentCompetitorChart.redraw(); }
But this isn't working. The chart disappears as soon as I click a company. Please guide me on how to achieve the desired functionality. Here is a jsfiddle link recreating the scenario as close as possible https://jsfiddle.net/j8zyx6ba/19/ . TIA
I am having an issue with rangeSelector in HighCharts/HighStocks. For some reason, selections are disables. My question is this, how can I make sure that all range selection buttons are active since data is available for a specific range. Here is a example. link
$(function() {
var seriesOptions = [], seriesCounter = 0, names = ['t1'];
function createChart() {
$('#container').highcharts('StockChart', {
loading: {
style: {
backgroundColor: 'silver'
},
labelStyle: {
color: 'white'
}
},
rangeSelector : {
selected : 1
},
yAxis : {
plotLines : [ {
value : 0,
width : 2,
color : 'silver'
} ]
},
plotOptions : {
},
tooltip : {
valueDecimals : 2
},
series : seriesOptions
});
}
$.each(names, function(i, name) {
$.getJSON('https://dl.dropboxusercontent.com/u/34899000/data.json?dt=' + name.toLowerCase(), function(
data) {
seriesOptions[i] = {
name : name,
data : data
};
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
You must enable the range selector buttons, so in your case you must add an attribute allButtonsEnabled and set it to true
rangeSelector: {
allButtonsEnabled: true,
selected: 1
},
See documentation
http://api.highcharts.com/highstock#rangeSelector
allButtonsEnabled: Boolean
Since 2.0.3
Whether to enable all buttons from the start. By default buttons are
only enabled if the corresponding time range exists on the X axis, but
enabling all buttons allows for dynamically loading different time
ranges. Defaults to false.
In your fiddle enabling all buttons doesn't do anything since the time axis is 1 month which is the minimum range.
I am working on an application where I am trying to plot a similar graph to what is plotted at Open Weather. I am using the FlotJS library to query their API and plot the graphs.
Here is my code. I apologize for the verbosity.
/*
* RUN PAGE GRAPHS
*/
// load all flot plugins
loadScript("js/plugin/flot/jquery.flot.cust.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.resize.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.time.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.tooltip.min.js", generatePageGraphs);
});
});
});
function generatePageGraphs(){
var fetchWeatherUrl = '//api.openweathermap.org/data/2.5/forecast?lat=' + farmLat + '&lon=' + farmLng;
$.ajax({
method: 'get',
dataType: "jsonp",
url: fetchWeatherUrl,
success: function(response){
var temp = [];
var humidity = [];
var rain = [];
$.each(response.list, function(i, item){
if(moment(item.dt, 'X').isSame(moment(), 'day')){
var temperature = ( ( parseFloat(item.main.temp)-273.15 )*1.80 ).toFixed(0);
temp.push([moment(item.dt, 'X').valueOf(), temperature]);
humidity.push([moment(item.dt, 'X').valueOf(), parseFloat(item.main.humidity)]);
if(item.rain != undefined){
rain.push([moment(item.dt, 'X').valueOf(), parseFloat(item.rain["3h"])]);
}
}
});
var mainWeatherGraphData = [{
label: "Temperature",
data: temp,
lines: {
show: true
},
points: {
show: true
}
},
{
label: "Humidity",
data: humidity,
lines: {
show: true
},
points: {
show: true
},
yaxis: 2
},
{
label: "Rain",
data: rain,
bars: {
show: true,
barWidth: 1000*60*30,
align: 'center'
},
yaxis: 3
}];
var mainWeatherGraphOptions = {
xaxis : {
mode : "time",
},
yaxes : [
{
position: 'left'
},
{
position: 'right'
},
{
position: 'right'
}
],
tooltip : true,
tooltipOpts : {
content : "<b>%s</b> on <b>%x</b> will be <b>%y</b>",
dateFormat : "%y-%m-%d",
defaultTheme : false
},
legend : {
show : true,
noColumns : 1, // number of colums in legend table
labelFormatter : null, // fn: string -> string
labelBoxBorderColor : "#000", // border color for the little label boxes
container : null, // container (as jQuery object) to put legend in, null means default on top of graph
position : "ne", // position of default legend container within plot
margin : [0, 5], // distance from grid edge to default legend container within plot
backgroundColor : "#efefef", // null means auto-detect
backgroundOpacity : 0.4 // set to 0 to avoid background
},
grid : {
hoverable : true,
clickable : true
}
};
var mainWeatherGraph = $.plot($("#mainWeatherGraph"), mainWeatherGraphData, mainWeatherGraphOptions);
}
});
// Daily forecast
fetchForecastUrl = 'http://api.openweathermap.org/data/2.5/forecast/daily?lat=' + farmLat + '&lon=' + farmLng;
$.ajax({
method: 'get',
dataType: "jsonp",
url: fetchForecastUrl,
success: function(response){
var temp = [];
var humidity = [];
var rain = [];
$.each(response.list, function(i, item){
var temperature = ( ( parseFloat(item.temp.day)-273.15 )*1.80 ).toFixed(0);
temp.push([moment(item.dt, 'X').valueOf(), temperature]);
humidity.push([moment(item.dt, 'X').valueOf(), parseFloat(item.humidity)]);
if(item.rain != undefined){
rain.push([moment(item.dt, 'X').valueOf(), parseFloat(item.rain)]);
}
});
var dailyForecastGraphData = [{
label: "Temperature",
data: temp,
lines: {
show: true
},
points: {
show: true
},
},
{
label: "Humidity",
data: humidity,
lines: {
show: true
},
points: {
show: true
},
yaxis: 2
},
{
label: "Rain",
data: rain,
bars: {
show: true,
barWidth: 1000*60*60*8,
align: 'center'
},
yaxis: 3
}];
var dailyForecastGraphOptions = {
xaxis : {
mode : "time",
},
yaxes : [
{
position: 'left'
},
{
position: 'right'
},
{
position: 'right'
}
],
tooltip : true,
tooltipOpts : {
content : "<b>%s</b> on <b>%x</b> will be <b>%y</b>",
dateFormat : "%y-%m-%d",
defaultTheme : false
},
legend : {
show : true,
noColumns : 1, // number of colums in legend table
labelFormatter : null, // fn: string -> string
labelBoxBorderColor : "#000", // border color for the little label boxes
container : null, // container (as jQuery object) to put legend in, null means default on top of graph
position : "ne", // position of default legend container within plot
margin : [0, 5], // distance from grid edge to default legend container within plot
backgroundColor : "#efefef", // null means auto-detect
backgroundOpacity : 0.4 // set to 0 to avoid background
},
grid : {
hoverable : true,
clickable : true
}
};
var dailyForecastGraph = $.plot($("#dailyForecastGraph"), dailyForecastGraphData, dailyForecastGraphOptions);
}
});
}
The two graphs are almost identical except the data which they are portraying.
The main (first) graph has the all the y axis plotted correctly. And we can see the axis for all 3 correctly. The daily (second) graph does have the rain y axis, although the options for them are similar.
Other than this, all tooltips are working fine but the temperature tooltips where I can see the placeholder %y and not the real value.
I have been debugging this code for the past 2 hours and I am not a Flot expert and I am not able to figure what is wrong.
Can anybody look at the code and tell me what is going wrong? Thank you in advance.
While you're creating your temperature data arrays, you need to parse the temperature value as a float. Make sure to parse the value as a float for both graphs. You're doing this for your humidity variable, and that is why the tooltip is working for that series.
var temperature = ((parseFloat(item.main.temp) - 273.15) * 1.80).toFixed(0);
temp.push([moment(item.dt, 'X').valueOf(), parseFloat(temperature)]);
JSFiddle updated with all of the same versions used in the theme you're using: JSFiddle