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
Related
When i draw a chart with 4 lines, each with its own data ofc, i programmatically create the options for the LineChart that has 4 Yaxis, first one on the left and the rest on the right side. Now, after the chart is drawn and i de-select some datasources from the list (less lines to draw), the now-obsolete yAxis ticks stay there, even when the chart correctly draws only the selected lines, and the options are updated as well correctly. I cant think of a way to remove them!
I have googled for 2 days and cant find a solution. I am using react in functional style and it makes things more complicated because every advice seems to be in the classic style.
I am using react-chartjs-2 wrapper as well, if this helps.
I am also quite new to react, and asking in Stackoverflow, so please cut me some slack :)
I assume the chart is being re-rendered or something because the amount of lines etc do change.
In the images, the "createYaxis" that is shown in the console.log is the generated yAxes- part of the options object (which is functional otherwise). The problem yAxises are on the right side in red and yellow. Images show before and after situation.
Image of the options-object generated by the code below the img:
var yAxisItems = [];
function createYaxises (num){
var arr = [];
for (var i=0;i<num.length;i++){
if (i===0){
arr.push({
display: true,
id: i,
type: 'linear',
position: 'left',
gridLines: {
display:false,
//color: 'blue'
},
ticks: {
fontColor: lineColourArray[i],
fontSize: 14,
}
})
}
else {
arr.push({
display: true,
id: i,
type: 'linear',
position: 'right',
gridLines: {
display:false,
//color: 'blue'
},
ticks: {
display:true,
fontColor: lineColourArray[i],
fontSize: 14,
}
})
}}
yAxisItems = arr;
console.log("createyaxis arr: " , arr);
console.log("createyaxis: " , yAxisItems); //JSON.stringify(yAxisItems));
}
//get data for selected sensors and set it to chart data
const handleGetSelectedSensorData = function () {
var d = getSelectedSensorData();
console.log("d: ", d);
var dSets = [];
if (d[0]){
d.map((dItem,index)=> {
var newDsetData =[];
if (dItem.data){
dItem.data.map((innerDataItem)=> {
var dSet = {};
dSet.x = innerDataItem.timestamp;
dSet.y = innerDataItem.v;
newDsetData.push(dSet);
})
var newset = {
data: newDsetData,
label: dItem.sensorTag,
borderColor: lineColourArray[index],
fill: false,
pointRadius: 1.5,
backgroundColor:lineColourArray[index],
borderWidth: 2,
showLine: true,
pointHoverRadius: 5,
lineTension: 1,
};
dSets.push(newset);
}})
var dDataTemp = {};
var optionsTemp = new Object();
dDataTemp.datasets =dSets;
//create yaxises only once
createYaxises(dDataTemp.datasets);
//more than one set (TODO)
//console.log("dDataTemp.datasets : ", dDataTemp.datasets)
if (dDataTemp.datasets.length >1){
console.log("dset > 1");
for(var i=0;i< dDataTemp.datasets.length;i++) {
dDataTemp.datasets[i].yAxisID = i;
console.log("setting options");
optionsTemp ={
tooltips: {
enabled: true,
intersect:false,
mode:'x',
callbacks: {
title: function(tooltipItem, data) {
var toSplit = tooltipItem[0].label.split(",");
return (toSplit[0]);
},
label: function (tooltipItem) {
var split = tooltipItem.xLabel.split(',');
//return ( Number(tooltipItem.yLabel).toFixed(3));
return (split[2] + " : " + Number(tooltipItem.yLabel).toFixed(3));
}
},
},
hover: {
mode: 'nearest',
intersect: true,
},
title:{
display:true,
text:'Valittu sensoridata',
fontSize:20
},
legend:{
display:true,
position:'right'
},
scales: {
xAxes: [{
display: true,
type: 'time',
ticks: {
}
}],
yAxes:
yAxisItems
}
}
}
setOptions(optionsTemp);
console.log("options: " , optionsTemp);
setdData(dDataTemp);
}}
else {
console.log("error in handleGetSelectedSensorData()");
}
}
And the Line is just added like this:
<Line data={dData} options = {options} />
Instead of setting display: true set display: 'auto', this will make the axis dissapear as long as there is no dataset visable that is linked to that scale, as soon as a dataset becomes visable that is linked to that scale it will show the scale again.
Doc: https://www.chartjs.org/docs/master/axes/cartesian/#common-options-to-all-axes
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?
Hello there stack overflow programmers, i have a question related to getting data from my database using ajax and display it in piechart from chartjs library. Now i am trying to make dynamic data to be accepted by format within piechart format.
Here is my ajax and its response: ( still it doesn't show my piegraph. i dont know why)
function getpieclinic() {
$.ajax({
type: "POST",
url: siteurl+"patients_report/piedataclinic",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(response) {
// alert("hi");
var aData = response.d;
var arr = [];
$.each(aData, function (inx, val) {
var obj = {};
obj.color = val.color;
obj.value = val.value;
obj.label = val.label;
arr.push(obj);
});
var ctx = $("#myChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(arr);
}
function OnErrorCall_(response) {}
}
the response of my ajax is these:
[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}]
now, i want to make a dynamic format of piechart chartjs data format to be able to display it. this is the default format from the example:
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [
{
value: 700,
color: "#f56954",
highlight: "#f56954",
label: "Chrome"
},
{
value: 500,
color: "#00a65a",
highlight: "#00a65a",
label: "IE"
},
{
value: 400,
color: "#f39c12",
highlight: "#f39c12",
label: "FireFox"
},
{
value: 600,
color: "#00c0ef",
highlight: "#00c0ef",
label: "Safari"
},
{
value: 300,
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Opera"
},
{
value: 100,
color: "#d2d6de",
highlight: "#d2d6de",
label: "Navigator"
}
];
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieData, pieOptions);
You could accomplish this in the following way ...
// for demonstration purposes only
// use response.d in real case scenario
var response = [{ "clinic_name": "Clinic 1", "total_checked_up": "10" }, { "clinic_name": "Clinic 2", "total_checked_up": "20" }, { "clinic_name": "Clinic 3", "total_checked_up": "30" }, { "clinic_name": "Clinic 4", "total_checked_up": "40" }]; // response from ajax request
OnSuccess_(response);
function OnSuccess_(response) {
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [];
// create PieData dynamically
response.forEach(function(e) {
var random_color = '#' + Math.floor(Math.random() * 16777215).toString(16);
PieData.push({
value: e.total_checked_up,
color: random_color,
highlight: random_color,
label: e.clinic_name
});
});
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 0, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieData, pieOptions);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="pieChart"></canvas>
I'm new to high charts.
I'm dynamically making 2 ajax calls(inside getData() Function) and plotting the high chart with 2 series(with 2 y axis).
each ajax call with return the json data.
1st json data (sample)
[{"dt":"May 15, 2000","index":"2,007.030850"},{"dt":"May 16, 2000","index":"2,025.956108"}]
2nd json data (sample)
[{"dt":"May 15, 2000","nav":"145.236000"},{"dt":"May 16, 2000","nav":"146.602974"}]
I'm creating two series with 2 ajax calls. in the 2nd ajax call, i'm dynamically adding a y-axis for the 2nd series data.
$(document).ready(function() {
function getData() {
var chart = Highcharts.charts[0];
/* 1st Ajax Call to get the json data to plot the first series */
$.ajax({
type: 'POST',
dataType: 'json',
url: '/Six/TSServlet?file=ivv-sixIshareFundsHistoryIndex.json',
data: '',
async: false,
success: function(data) {
var categories1 = [];
var seriesData1 = [];
var yaxis;
$.each(data, function(i, e) {
categories1.push(e.dt);
/* below step to remove , is not important, done for my program */
yaxis = parseFloat(e.index.replace(/,/g, ''));
seriesData1.push(yaxis);
})
// add x-axis catagories
chart.xAxis[0].update({
categories: categories1,
tickInterval: 150
}, true);
// add the 1st series
chart.series[0].setData(seriesData1);
}
});
/* 2nd Ajax Call to get the json data to plot the second series */
$.ajax({
type: 'POST',
dataType: 'json',
url: '/Six/TSServlet?file=ivv-sixIshareFundsHistoryNav.json',
data: '',
async: false,
success: function(data) {
var categories2 = [];
var seriesData2 = [];
var yaxis;
$.each(data, function(i, e) {
categories2.push(e.dt);
/* below step to remove , is not important, done for my program */
yaxis = parseFloat(e.nav.replace(/,/g, ''));
seriesData2.push(yaxis);
})
/* This is the problem area, dynamically adding a dual y axis for the 2nd series */
chart.addAxis({ // Secondary yAxis
id: 'NAV-Series-Axis',
title: {
text: 'NAV Series'
},
lineWidth: 2,
lineColor: '#08F',
opposite: true
});
// add the 2nd series
chart.addSeries({name: "NAV Series",yAxis: 'NAV-Series-Axis',data: seriesData2});
}
});
} //getdata function ends here .............
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
renderTo: 'container',
events: {
load: function() {
var series = this.series[0];
getData();
}
}
},
title: {
text: 'Six Share Funds History'
},
labels: {
formatter: function() {
return this.value + ' %';
}
},
xAxis: {
tickLength: 10
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' + this.x + '<br/>' + Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
"Name": []
}]
});
});
});
My issue is i'm getting 2 axis for 2 series graph, but no tick marks on the right hand side y-axis. how to solve this issue? ideally i should see 100(one tick mark), 200 (one tick mark) etc on the right hand side blue bar(just like left hand side y-axis has 500,1000 etc)
Please see the screen shot, i dont see the tick marks on the right hand side blue bar (for the 2nd series graph)
Edited to add jsp:
<div id='TimeSeriesId'>
<div id="container" style="width: 100%; height: 600px;"></div>
</div>
You can add several Y-axes simply by making yAxis an array with more than 1 element. Each can have all of the usual axis attributes (see highcharts API).
yAxis: [{ // Primary yAxis
labels: { ...
},
title: { ...
},
opposite: true
}, { // Secondary yAxis
title: { ...
},
labels: { ...
}
}, { // Tertiary yAxis
title: { ...
},
labels: { ...
},
opposite: true
}],
...
To dynamically add them, use chart.yAxis = new Array(); chart.yAxis[1].title = ... etc.
I have some difficulties displaying a graph with Highstock. It seems like I can't have access to the x-axis part where the graph should be displayed. I am new with Highstocks so my code could seem like a mess but my idea was the following:
First access the json file from the server. Convert it in the right format [[datestamp, value], ....]. Then display the graph.
Here is my Json file (file.json):
[{"date":"2013-10-04T22:31:12.000Z","value":30000},{"date":"2013-10-04T22:31:58.000Z","value":35000},{"date":"2013-10-04T22:32:05.000Z","value":60000},{"date":"2013-10-04T22:32:12.000Z","value":45000}]
My code is the following:
$(function() {
chartOjb = new Object();
var mydata = [];
$.getJSON('file.json', function(data) {
$.each(data, function (index, item) {
chartOjb.name = getTimestamp(item.date);
chartOjb.data = item.value;
mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });
});
$('#container').highcharts('StockChart', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: mydata
}
},
scrollbar: {
liveRedraw: false
},
xAxis: {
type: 'datetime',
title: 'Time',
//minRange: 3600 * 1000/15 // one hour
},
rangeSelector : {
selected : 1
},
title : {
text : value
},
series : [{
name : 'Capacité',
data : data,
tooltip: {
valueDecimals: 2
}
}] }); });
});
Thank you very much for your help
Could you add your function getTimestamp()? Maybe there is something wrong.
Keep in mind that:
x-value should be timestamp,
when using a lot of objects { x: x, y: y }, set turboThreshold