I currently use a Flot chart which is supposed to render dynamically.
The code basically reiterates over all divs with the name "characterChart", and creates multiple Flot charts depending on the index.
This is the code basically:
<div id="salesSelectorItems" class="chart-data-selector-items mt-3">
#foreach($characters as $key=>$character)
<div class="chart chart-sm" data-sales-rel="{{ $character->id }}" id="flotDashSales_{{ $key }}" name="characterChart" class="chart-active" style="height: 203px;"></div>
#endforeach
<script>
var flotDashSalesData = [];
$(document).ready(function() {
$('div[name=characterChart]').each(function (index, value) {
flotDashSalesData[index] = [{
data: [
["Jan", 140],
["Feb", 240],
["Mar", 190],
["Apr", 140],
["May", 180],
["Jun", 320],
["Jul", 270],
["Aug", 180]
],
color: "#0088cc"
}];
});
});
</script>
</div>
Now, there is the code (in a separate included file) which includes all the data for the chart:
var flotDashSales = [];
$('div[name=characterChart]').each(function (index, value) {
console.log(index);
flotDashSales[index] = $.plot('#flotDashSales_' + index, flotDashSalesData[index], {
series: {
lines: {
show: true,
lineWidth: 2
},
points: {
show: true
},
shadowSize: 0
},
grid: {
hoverable: true,
clickable: true,
borderColor: 'rgba(0,0,0,0.1)',
borderWidth: 1,
labelMargin: 15,
backgroundColor: 'transparent'
},
yaxis: {
min: 0,
color: 'rgba(0,0,0,0.1)'
},
xaxis: {
mode: 'categories',
color: 'rgba(0,0,0,0)'
},
legend: {
show: false
},
tooltip: true,
tooltipOpts: {
content: '%x: %y',
shifts: {
x: -30,
y: 25
},
defaultTheme: false
}
});
});
As you can see, what I did to try and achieve this is created an array, reiterated over all the divs with the name characterChart and created multiple charts by the index.
However, it is still not working.
What am I doing wrong?
I have managed to resolve it by removing:
$(document).ready(function() {
I assume that it tried to initialize the components twice, resulting in the Flot not showing.
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'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 try drawing a polar chart by 'HighChart' that each series have 2 data category between 0 to 100 that have overlap on other.
My problem is when data value is greater than 90, dataLabel of 2 category have overlap.
I want set dataLabel position dynamically by formatter function.
All my try to do this was failed.
Is there solution to solve this problem?
In below is my simplified code. And in this JSFiddle.net you can see result and edit it
var chart;
var options={
chart:
{
renderTo: 'container',
type: 'column',
polar: true
},
xAxis:
{
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis:
{
gridLineWidth: 0,
labels:
{
enabled: false
}
},
colors: ['#F47414', '#A8CBFF'],
plotOptions:
{
column:
{
grouping: false,
shadow: false
},
series:
{
dataLabels:
{
enabled: true /// for use My solution, comment this line
/* ------------------------------------------------------------
/// My solution is using formatter to set y align based on value. But I don't know why this don't work.
enabled: true,
formatter: function ()
{
if (this.y>=90 && this.y<100)
{
console.log(this.series.options.dataLabels.y);
this.series.options.dataLabels.y =+ 20;
}
}
---------------------------------------------------------------*/
}
}
},
series:
[
{name: 'GoalPerecent', data:[100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]},
{name: 'ActualPerecent', data:[95, 20, 23, 45, 98, 10, 35, 73, 33, 85, 64, 10]}
]
}
$(document).ready(function()
{
chart = new Highcharts.Chart(options);
});
I've got a pie chart up and running and the client I'm doing it for is requesting the name, which appears in the tooltip hover, to be in the pie wedge so that when it's printed out the names appear. I have tried using a png to overlay the chart with no luck, tried distance: -60 and
dataLabels: {inside: true,}
but none of them respond. I asked here yesterday and someone mentioned that there's a line in the highcharts-more.src.js file which reads: "Align column data labels outside the columns. #1199." - is there anyway I can specify in the following JS to have the data labels, or names in this case, appear in the pie slices?
JS:
$(function () {
$('#container').highcharts({
chart: {
polar: true
},
title: {
text: 'Chart'
},
pane: {
startAngle: 0,
endAngle: 360
},
xAxis: {
tickInterval: 45,
min: 0,
max: 360,
labels: {
formatter: function () {
return;
}
}
},
yAxis: {
min: 0
},
plotOptions: {
series: {
pointStart: 0,
pointInterval: 45,
dataLabels: {
inside: true,
offset: -100,
formatter: function() {
if(this.y !== 0) {
return this.y.toFixed(1);
}
}
}
},
column: {
grouping: false,
pointPadding: 0,
groupPadding: 0
}
},
colors: [
'#FFD700',
'#458B00',
'#0099CC'],
series: [
{
type: 'column',
name: 'Behaviour',
shadow: true,
data: [
{y:0},
{y:0},
{y:0},
{y: 78, name: 'Be Deliberate', inside: true},
{y: 82, name: 'Consistent, reliable', inside: true},
{y:0},
{y:0},
{y:0}
],
dataLabels: {
enabled: true,
inside: true,
verticalAlign: 'top',
color: '#333333'
}
}, {
type: 'column',
name: 'Communication',
shadow: true,
data: [
{y:0},
{y:0},
{y:0},
{y:0},
{y:0},
{y: 80, name: 'Listen empathy'},
{y: 76, name: 'Communicate clear'},
{y: 88, name: 'Be honest transparent'}],
dataLabels: {
enabled: true,
inside: true,
color: '#333333'
}
}, {
type: 'column',
name: 'Action',
data: [
{y: 60, name: 'Act in clients best interests'},
{y: 70, name: 'Commit to do right thing'},
{y: 68, name: 'Deliver on promise'},
{y:0},
{y:0},
{y:0},
{y:0},
{y:0}
],
shadow: true,
groupPadding: 0,
pointPlacement: 'on',
dataLabels: {
enabled: true,
inside: true,
distance: -60,
color: '#333333'
}
}]
});
});
HTML:
<div id="container" style="min-width: 810px; max-width: 900px; height: 900px; margin: 0 auto"></div>
Here's a fiddle, can anyone help?
You had the correct location however your return was never including the text you need.
Try:
dataLabels: {
inside: true,
offset: -100,
formatter: function () {
if (this.y !== 0) {
return this.key + ' - ' + this.y.toFixed(1);
}
}
}
If you add return modification you will see the same text in the tooltip appear in the dataLabel...And you now also see how that is rather ugly given the length of the text you are trying to render. There are overlaps all over the place. You can try and mitigate this by having the dataLabels moved further out from the bar (it is a bar, not a pie wedge as this is a polar chart and not a pie chart). You can try and mess with the formatting more but I think this is going to get uglier fast.