Im trying to get my bar chart to display the a simple series of data.
Its displaying the data correctly however it is filling up the grid with zero values of data that does exist between the range.
See the image.
$.plot($('#somediv'), result, {
lines: {
show: false
},
bars: {
barWidth: 12,
horizontal: false,
align: "center",
show: true,
zero:false,
fill:true,
fillColor:'#fefefe',
},
points: {
show: false,
symbol: "circle",
fill: false
},
grid: {
hoverable: true,
backgroundColor: '#fefefe',
borderColor: '#eee',
borderWidth: 1,
clickable: true
},
series: {
lines: {
show: false,
lineWidth: 1
},
shadowSize: 0
},
xaxis: {
mode: null,
},
yaxis: {
min: 0
},
selection: {
mode: "y"
},
});
and here is the data
[{"label":"Sales","data":[["180","23"],["3","12"],["183","10"],["154","5"],["239","4"]]}]
and here is the result in the screenshot.
The data series on the bottom is the product ID, the y axis is the # of Sales of each product
What I want is that each tick shows 1 bar, but I cant understand the documentation from
https://github.com/flot/flot/blob/master/API.md
Flot isn't filling the grid with nulls; it is correctly plotting the x-values - 180, 3, 183, etc. that you gave it. If those values don't actually correspond to positions on an axis, you should simply use 1, 2, 3, ... instead.
Related
I want to create pie chart using plotly library. So basically my app has an option to select labels and values field from a dropdown list and there could be any data. I am passing that to construct a pie chart. Here is the problem arises- when I select proper labels and values then it is showing the pie graph and when I select some other options it is not showing anything. For that scenario I want to show some message like - "PIE CHART CANNOT BE CREATED FOR SELECTED DATAS" or something like that. How could I achieve it?
Here is the code -
let object = {};
object = this.graphService.plotPie(
this.x_axis,
this.y_axis,
this.x_axis_title,
this.y_axis_title
);
Plotly.newPlot(
"myDiv1",
object["data"],
object["layout"],
{ showSendToCloud: true },
{ responsive: true },
{ scrollZoom: true }
);
-----------------------------------------------------------------------------
plotPie(x_axis, y_axis, x_axis_title, y_axis_title) {
var data = [
{
values: [19, 26, 55] || x_axis,
labels: ["Residential", "Non-Residential", "Utility"] || y_axis,
// domain: {column: 0},
name: "Pie",
hoverinfo: "label+value",
hole: 0.4,
type: "pie"
}
];
var layout = {
// title: `Pie Graph ${x_axis_title} vs ${y_axis_title}`,
font: {
family: "Arial Black",
size: "14px"
},
height: 300,
margin: {
l: 50,
t: 40,
b: 40,
r: 40
},
legend: {
orientation: "h",
x: 0,
y: 1.3
},
xaxis: {
showgrid: true,
zeroline: false,
showline: true,
linewidth: 2,
linecolor: "black",
tickfont: {
size: 11
}
},
yaxis: {
showgrid: true,
zeroline: false,
showline: true,
linewidth: 2,
linecolor: "black",
tickfont: {
size: 11
}
},
plot_bgcolor: "white",
paper_bgcolor: "white",
showlegend: true
};
return { data, layout };
}
Actual result would be - For valid data selection it should display the pie chart and for invalid data selection it should display some Error message;
I have a problem when I use Flot
I notice that it happens at the same minute but different second
2018/10/16 13:12:55 71.755
2018/10/16 13:12:09 71.700
2018/10/16 13:10:52 70.781
Here is my configuration:
//Display graph
$.plot($("#data-chart"), ds, {
colors: [$chrt_second, $chrt_fourth, "#666", "#BBB"],
grid: {
show: true,
hoverable: true,
clickable: true,
tickColor: $chrt_border_color,
borderWidth: 0,
borderColor: $chrt_border_color
},
zoom: {
interactive: true
},
pan: {
interactive: true
},
selection: {
mode: "xy"
},
xaxis: {
ticks: 5,
mode: "time",
timeformat: "%d/%m/%y",
},
yaxis: {
min: 0,
ticks: 5,
max: 110,
panRange: [-10000, 10000]
},
tooltip: true,
legend: {
show: true,
noColumns: 4, // 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: [5, 10], // distance from grid edge to default legend container within plot
backgroundColor: "#efefef", // null means auto-detect
backgroundOpacity: 1 // set to 0 to avoid background
},
tooltipOpts: {
content: "<b>Date: %x</b> = <span>%y.3</span>",
dateFormat: "%d/%m/%y %H:%M:%S",
defaultTheme: false
},
});
Can someone help me?
I'm working on a gauge module which is intended to look as follows:
Hydration Guage
Currently, I have the following model working:
(Please refer to the fiddle for the most updated code)
GaugeFiddle
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'gauge'
},
title: {
text: 'Hydration Index'
},
pane: {
startAngle: -140,
endAngle: 140,
size: 200,
background: {
backgroundColor: {
linearGradient: [0, 300, 300, 300],
stops: [
[0, 'rgb(152, 230, 230)'],
[1, 'rgb(0, 0, 10)']
]
},
innerRadius: '70%',
outerRadius: '100%',
shape: 'arc',
}
},
yAxis: {
reversed: true,
min: 0,
max: 100,
plotBands: [{ // mark the weekend
}],
tickInterval: 600
},
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%',
backgroundColor: 'black',
borderColor: 'white',
borderWidth: 0.5,
rearLength: 0,
baseWidth: 10,
topWidth: 1,
baseLength: '0%'
},
pivot: {
radius: 0
}
},
},
series: [{
name: 'Hydration percent',
data: [20],
}],
credits: {
enabled: false
},
});
});
1) How would I add those curved edges on only one side of the gauge?
2) Can I reverse the direction of the needle from clockwise to counterclockwise? Currently, I have the yaxis reversed so the graph works how it is supposed to, but it counter-intuitively starts at high and proceeds from there onward (So if my chart goes from 0-100 and my data value is 10, it would start at 100 and go to 10 by default).
3) Finally, is there any way for me to add the dynamic text that changes based on the result?
It's possible but a bit tricky - you can modify SVG's path before it's renderer by modyfying Axis.getPlotBandPath method. See a demo below.
You can simply disable initial animation and set value = 0. Then, in callback, update the point to the correct value:
series: [{
name: 'Hydration percent',
animation: false,
data: [
0
]
}],
And callback:
function(chart) { // on complete
chart.series[0].points[0].update(80);
...
}
It's not a problem using Renderer.text. For example:
chart.myLabel = chart.renderer.text('Test', 10, 10).add(); // store in some variable
Then update text:
chart.myLabel.attr({
text: 'Nice!'
});
Here is a working demo: http://jsfiddle.net/8p8ab8bg/
Basically, I am pulling data using AJAX from MySQL to plot line chart.
Now I want different colors for points on my line chart based on data. As in if data falls within the range it will be a different color and outside range it will be a different color. Someone please suggest or guide. Code used below:
I have tried using Flot threshold plugin which is available below but it's not working.
var offset = 0;
//plot(html);
var options = {
colors: ["#3fcf7f"],
threshold: {
below: 200,
colors: ["#ff7070"]
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.2
}]
},
},
points: {
radius: 5,
show: true
},
shadowSize: 2
},
grid: {
color: "#fff",
hoverable: true,
clickable: true,
tickColor: "#f0f0f0",
borderWidth: 0
},
//colors: ["#ff7070"],
xaxis: {
mode: 'time',
timeformat: '%d/%m/%y',
//rotateTicks: 90
},
yaxis: {
ticks: 5,
tickDecimals: 0,
},
tooltip: true,
tooltipOpts: {
content: "%y.1 on %x.4",
defaultTheme: false,
shifts: {
x: 0,
y: 20
}
}
};
console.log(html.data);
console.log(html.data[0][0]);
data.push(html);
// A null signifies separate line segments
$.plot("#flot-color", data, options);
There is no colors property, and the color and threshold properties belong inside the series property. Change your options to this:
var options = {
series: {
color: "#3fcf7f",
threshold: {
below: 200,
color: "#ff7070"
},
lines: {
...
Fiddle that shows a working chart.
I have a HighCharts chart that combines a spline and a column. The column data defines a single Y value---indicating a single column---and uses pointRange to indicate what X value range that single column covers. Everything works fine as long as the pointRange is less than the maximum X value in the spline data. But when the pointRange is greater than the maximum X value in the spline data, HighCharts radically truncates the point range, e.g. from my desired 10,000 to about 4200, about half the maximum X value. The label also shifts radically to the left, as if the column has a significant extent for X values less than 0, which do not exist in the data I pass.
(I would like to post a snapshot of the problem, but my reputation is insufficient.)
Is this a HighCharts bug, or am I missing something here? Bayes suggests the latter of course, but I can't fine what I am missing. Hence this request to the gods of stackoverflow.
Here is a fiddle illustrating my problem: http://jsfiddle.net/Bridgeland/UVF4P/1/ If you change the pointRange from 10000 to 8000, you can see the result that I expected, albeit with slightly smaller column.
Here's my code, with much of the data omitted for brevity:
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
(And you might be wondering why I have a column chart with a single column? My chart generally has more columns. The single column is a pathological case for a particular combination of data. But despite the pathology, I would still like it to display properly.)
It seems that Highcharts do not permit to have a pointRange greater than the max value in x or the minRange value.
You can fix that by doing :
$(function () {
$('#container').highcharts({
title: {
text: 'pointRange is too small'
},
yAxis: {
min: 0,
max: 1
},
xAxis: {
min: 0,
minRange: 10000
//^^^^^^^^^^^
},
legend: {
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
[0, 1],
[215, 1],
// middle of spline data omitted for brevity
[8189, 0.007198560287942413],
[8404, 0],
[8620, 0]
],
type: 'spline',
marker: {
enabled: false
},
zIndex: 1
}, {
data: [0.5],
type: 'column',
pointInterval: 10000,
pointPadding: 0.01,
groupPadding: 0,
borderWidth: 0,
shadow: false,
pointPlacement: 'between',
pointRange: 10000,
zIndex: 0,
minPointLength: 3,
dataLabels: {
enabled: true,
inside: true,
color: 'white',
formatter: function () {
return 'Misplaced'
}
}
}]
})
})
Since you set pointInterval at 10000, I think you can do the same thing with the minRange value ?
Can't you also set a xAxis max of, say, 10500? Wouldn't that allow the column to expand to 10k?