FusionCharts Gauges have same code but different outputs - javascript

For a project i'm creating a dashboard and i would like 3 gauges on the platform. Those gauges are placed in a bootstrap card with a column value of 4. In the dashboard there are 3 cards next to eachother.
I'm able to render the gauges for every card and every gauge has the same properties but outputs to a different diff and with a different value for the gauge dial.
In the screenshot you can see the issue:
Every Gauge has a data set:
const performanceChart = {
chart: {
caption: "Gauge 3",
lowerlimit: "0",
upperlimit: "100",
showvalue: "1",
numbersuffix: "%",
theme: "fusion",
showtooltip: "0"
},
colorrange: {
color: [
{
minvalue: "0",
maxvalue: "50",
code: "#F2726F"
},
{
minvalue: "50",
maxvalue: "75",
code: "#FFC533"
},
{
minvalue: "75",
maxvalue: "100",
code: "#62B58F"
}
]
},
dials: {
dial: [
{
value: "{{$performance}}"
}
]
}
};
And a function to render it:
FusionCharts.ready(function() {
var performance = new FusionCharts({
type: "angulargauge",
renderAt: "performance-container",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: performanceChart,
}).render();
});
All the functions are the same but the datasource and the renderAt: are different.
How does this problem occur? And how can i solve the issue where every added gauge grows.

I tried replicating the issue and could not find any erroneous behavior in the gauge width or gauge dial value if the same code is provided for the different gauges.
Please refer to this fiddle to find my way of replicating the behavior: http://jsfiddle.net/omk32qwu/
for (let i = 1; i <= 3; i++) {
var performance = new FusionCharts({
type: "angulargauge",
renderAt: `container${i}`,
width: "100%",
dataFormat: "json",
dataSource: performanceChart,
}).render();
}
Please replicate the behavior where you are getting the different dial values for the same dial value provided in the code and share with me.
Hope this would help.

Related

Wrap Label Text In Fuion Charts (Pie-Chart)

Length of the text is too long to fit in my column in a row
label issue
is there any way to solve this issue in Fusion charts?
Below is the code for pie chart -
var initMemberInvestedSectorWiseCharts = function (membersInvestedSectorWiseData) {
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'pie2d',
renderAt: 'members-invested-sectorwise',
width: '100%',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": ``,
"subCaption": "",
"numberPrefix": "",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"theme": "fusion",
},
"data": membersInvestedSectorWiseData
}
}
);
chartObj.render();
});
}
Simply area your cursor withinside the components bar in which you need to feature the smash and press the ALT+ENTER keys. Hit ENTER again, and you`ll see the textual content wrap on lines. You now have the textual content organized the manner you want it withinside the spreadsheet and withinside the graph.

ApexCharts day-label on xaxis is showing inconsistently

I'm using ApexCharts to display a rangeBar. If I slide the rangeBar from side to side, the date on the xaxis is showing inconsistently. For instance on this image, I have two days - the 26th and the 27th, but the day label is hidden.
If I zoom out and zoom in, the day-label is showing.
I've been looking at ApexCharts docs several times, and have tried many different things to enforce this day label to always show, but without any luck.
Here is my configuration
var options = {
series: [
{
data: arr
}
],
colors: [
"#00be00",
],
chart: {
height: 150,
width: '100%',
type: 'rangeBar',
toolbar: {
tools: {
download: false,
// pan: false,
},
},
},
plotOptions: {
bar: {
horizontal: true
}
},
xaxis: {
type: 'datetime',
},
};
Can I somehow force the day-label to always show?

dynamic chart with Highcharts using json

I've a question about how to create a dynamic chart using json, I tried and my graph didn't show a result, when I checked out, I've no error with my code. This is my code :
<script>
var chart; // global
function requestData() {
$.ajax({
url: 'api_heartrate.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>`
this is my json :
http://health.barrukurniawan.tech/api_heartrate.php
[{"time":"2018-08-02 09:30:11","nilai_sensor":"78"}]
I tried following a tutorial from this link :
Highcharts Dynamic Chart with MySQL Data doesn't reload
Thanks for your attention, gladly waiting for an answer :)
There are multiple small errors in your approach
eval is bad, parse it using JSON.parse instead.
During load, chart is not defined yet, so your callback will not work.
Highcharts needs time in milliseconds since 1970.
highcharts expects an object {x: , y: ,...} you give it {time: , nilai_sensor: }.
Solutions:
point = JSON.parse(point)
events: {
load: function() {
setInterval(function() {
requestData(chart)
}, 1000);
}
}
new Date(point[0].time).getTime()
{x: new Date(point[0].time).getTime(), y: point[0].nilai_sensor}
Here is a working example using your input with static data(and some added time to keep it moving): https://jsfiddle.net/ewolden/md975oLk/23/

Change data source of Chart on select

I need a little bit of help to change data from a chart, when an option is selected from a drop-down menu. I've searched for similar questions but nothing was really helpful.
So far I have this code and I don't understand what am I missing that it's not working?
the html:
<div id="scroll-container">
<select id="menu">
<option value="Oil">Oil</option>
<option value="Gas">Gas</option>
</select>
<div id="container_Oil" data-role="ejmchart" style="height: 320px"></div>
</div>
and the javascript part:
<script>
$(function () {
var value = document.getElementById("menu").value;
var chart = document.getElementById("container_Oil");
$('#menu').change(function(evt){
var dataSelection = eval($("#menu").val());
var chart = $('#container_Oil').ejChart ({
dataSource: dataSelection
})
})
})
</script>
The date I am using for the chart, I have in another file, app.js and it contains the following:
var Oil = ...
var Gas = ...
$("#container_Oil").ejChart(
{
primaryXAxis:
{
//labelFormat: 'dd, MM',
//labelFormat: "{value}",
range: { min: 1, max: 30, interval: 2 },
font: { size: '10px' },
labelRotation: 20,
visible :false
},
primaryYAxis:
{
labelFormat: "{value}",
//range: { min: 39, max: 40, interval: 0.1 },
rangePadding: 'normal',
font: { size: '10px' },
visible : false
},
commonSeriesOptions: {
tooltip: { visible: true },
type: 'line', enableAnimation: false,
marker:
{
shape: 'circle',
size:
{
height: 5, width: 5
},
visible: true
},
border: { width: 2 }
},
series: [{
//Binding series with a JSON data source
dataSource: Oil,
//Mapping name of the field containing X value to series
//xName: 'Day',
//Mapping name of the field containing Y value to series
yName: 'Actual',
name: 'Actual'
},
{ dataSource: Oil,
//xName: 'Day',
yName: 'Plan',
name: 'Plan'
}
],
canResize: true,
load: 'onchartload',
title: { text: 'Product - Oil', font: { size: '12px' } },
legend: { visible: true, position: "top" }
});
I want when I select for example Gas in the selector to change the dataSource for the chart from Oil to Gas.
I tried debugging and it said that "Oil" and "Gas" were undefined. Then I tried to put the data for "Oil" and "Gas" in the same file with the script. No more error, but still not working. I think I am missing something important in my code, but I can't seem to understand what. A little help would be more than welcomed!
Perhaps it only creates the charts on page load? Since it's only two charts, you could create them both on page load, and then hide and show the divs depending on the dropdown value for a quick fix.
Did you tried?
$('#menu').on( "change", function(evt){
Instade of:
$('#menu').change(function(evt){

ExtJS 4.2 - Chart Redraw, still see old labels

I have some problem with my line chart that I am making.
I am making it so it will automatically update every second,
and it will take the value in the "Ping Time" text field,
then place it onto the chart, at the next "Minute" index.
What is wrong however, is that, when the chart updates, it would not properly refresh the axis. You can see this in action here:
http://jsfiddle.net/HTj5Q/71/
The concerned pieces of code would be the chart creation,
Ext.create('Ext.chart.Chart',{
renderTo:Ext.getBody(),
id:'ChartTest',
xtype: 'chart',
width: 400,
height:300,
store: testStore,
axes:[
{
title:'Ping Time',
type: 'Numeric',
position: 'left',
grid:true,
fields: ['ping'],
},
{
title:'Minutes',
type: 'Numeric',
position: 'bottom',
grid:true,
fields:['id'],
minimum:0,
}
],
series: [
{
type:'line',
xField:'id',
yField:'ping',
tips: {
trackMouse: true,
width: 80,
height: 40,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('id'));
this.update(storeItem.get('ping'));
}
}
}
],
});
As well as the refreshing code
var task = Ext.TaskManager.start({
run: function () {
min=min+1;
// max=max+1;
// Ext.getCmp('ChartTest').axes.items[1].maximum=max;
Ext.getCmp('ChartTest').axes.items[1].minimum=min;
test= Ext.getCmp('PingTime').getValue();
temp = temp+1;
Ext.getCmp('display').setValue('Temp = '+temp+' Test = '+test);
testStore.add({id:temp,ping:test});
var rec= testStore.getAt(0);
Ext.getCmp('display2').setValue('rec is '+rec.get('id'));
if(rec.get('id')<temp-8)
{
testStore.remove(rec);
}
Ext.getCmp('ChartTest').redraw();
},
interval: 2000
});
Try to use
Ext.getCmp('ChartTest').surface.removeAll();
before redraw() method.
It's not a complete solution because of there are some issues are still remained. For instance if you change a value in the "Ping time" textfield significantly Y axis will be broken. Moreover it may not works properly in the all browsers but I guess this additional information may help you to find out a final solution.

Categories