I would like to display values on boxAndWhisker graph with canvasJS.
I can display axis with X labels and Y values but i can't display boxAndWhisker graph
This is my code
<c:out value="${pointdata}" escapeXml="false" />
<script type="text/javascript">
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "sondes 42"
},
subtitles: [{
text: "controle"
}],
axisY: {
title: "intensite des sondes",
},
data: [{
type: "boxAndWhisker",
yValueFormatString: "###.##",
dataPoints : <%out.print(dataPoints) ;%>
}]
});
chart.render();
}
My pointdata values(json format) :
[{"y":[146.86,141.54,166.51,121.42],"label":"May 7, 2021 3:24:10 PM"},{"y":[146.86,141.54,166.51,121.42,142.23,135.64,121.04,130.38,132.5,134.26,140.98,121.07,131.79,145.17],"label":"May 6, 2021 3:05:23 PM"},{"y":[146.86,141.54,166.51,121.42,142.23,135.64,121.04,130.38,132.5,134.26,140.98,121.07,131.79,145.17,108.57,119.04,120.21,107.85,106.53,99.82,115.4,95.98],"label":"May 17, 2021 11:46:58 AM"}]
The display graph
I don't know how to display boxAndWhisker
Related
I am trying to reduce the space between bars, and I am pretty sure it has to be within this piece of code. I removed the code that displays the legend and yAxes assuming I would not need to edit those parts.
barchart = new Chart(myChart, {
type:'bar',
data:{
labels: {{ data.x_vals | tojson }},
datasets:[{
label:'Liquid Level',
data:{{ data.y_vals }},
backgroundColor: gradient,
borderWidth:1, //Effects plotted line on chart
borderColor:'white',
hoverBorderWidth:1,
hoverBorderColor:'#000',
barPercentage: 1.0,
categoryPercentage: 1.0
}]
},
options:{
// legend is here
},
scales: {
// yAxes is here
xAxes: [{
display: true,
ticks: {
autoSkip: true,
padding: 4,
fontSize: 12
}
}]
},
You can set the category and bar percentages to 1:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'blue',
categoryPercentage: 1,
barPercentage: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
EDIT:
Make sure you have at least chart.js version 2.9 installed since any version below its not implemented yet
I need to show only “Date and Month” in x-axis in Area spine chart. Currently, it shows YYYYMMDD h:i:s but I need to show only DDMM in x-axis.
I need to show only “Date and Month” in x-axis in area spine chart. For e.g Currently, it shows values (2010-10-05, 2012-02-12) values in x-axis but I need to show it (like 5 October, 12 February).
I am using the below code in Area Spine Chart of canvasjs.
$( document ).ready(function () {
var chart1 = new CanvasJS.Chart("chartContainer1",
{
animationEnabled: true,
title:{
text: "Voting Trends"
},
axisY: {
title: "VOTES",
gridThickness: 0
},
data: [{
type: "splineArea",
color: "rgba(54,158,173,.7)",
markerSize: 5,
xValueFormatString: "",
dataPoints: [
{x: "10 Jul", y: 1, indexLabel: "1"},
{x: "11 Jul", y: 2, indexLabel: "2"},
]
}]
});
chart1.render();
});
This code is not generating any values in the x-axis. Hence the graph does not show exact points on it.
I just need to show these values in x-axis as:
11 July, 12 July, 13 July, etc.
Any help would be appreciate.
CanvasJS supports numeric and date-object in x-values and not string. Passing x-value as date-object and setting valueFormatString to "D MMMM" shows axis labels as 5 October, 12 February, etc.
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title:{
text: "Voting Trends"
},
axisX: {
valueFormatString: "D MMMM",
interval: 1,
intervalType: "day"
},
axisY: {
title: "VOTES",
gridThickness: 0
},
data: [{
type: "splineArea",
color: "rgba(54,158,173,.7)",
markerSize: 5,
dataPoints: [
{x: new Date("Jul 10 2019"), y: 1, indexLabel: "1"},
{x: new Date("Jul 11 2019"), y: 2, indexLabel: "2"},
]
}]
});
chart.render();
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 250px; width: 100%;"></div>
I'm using google charts to create dvb-c channels availability charts. The data for charts is red from local json file. The charts are working really fine, but I would like to add one feature to it, but I need some assistanse with it.
The feature I would like to add is custom tooltips, but I have no idea how to do it. I know I have to add the wanted data to json, but like I said Im not sure how to do it and how do I have to change my html code to make it work. I want tooltip to read local html file and show the content on tooltip.
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart" style="width:3000px; height:600px;"></div>
</body>
<script>
// Visualization API with the 'corechart' package.
google.charts.load('visualization', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
$.ajax({
url: "./avail.json",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
var channels = [['Channel', 'HKI (%)', 'LTI (%)']]; // Define an array and assign columns for the chart.
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([value.Channel, value.HKI, value.LTI]);
});
// Set chart Options.
var options = {
title: 'DVB-C Availability (HKI & LTI)',
series: {
0: { color: '#ff3385', lineWidth: 5, pointSize: 5 },
1: { color: '#000000', lineWidth: 1, pointSize: 3},
},
vAxis: { "title": "Availability (%)", maxValue: 100 },
hAxis : { "title": "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true' }, slantedText:true, slantedTextAngle:45 },
chartArea:{left:70,top:50,right:40,width:"90%",height:"70%"},
tooltip: {isHtml: true, trigger: 'both'},
legend: { position: 'top', textStyle: { color: '#555', fontSize: 14} }
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(channels)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(figures, options); // Draw the chart with Options.
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Got an Error');
}
});
}
</script>
</html>
Here is little snippet of my current json file:
[
{ "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
{ "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
{ "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
]
Should I add something like this to json ?
[
{ "Channel": "MTV Rocks", "HKI": 99.104700, <object data="./hki1.html"></object> "LTI": 98.760400, <object data="./lti1.html"></object> },
{ "Channel": "MTV3 HD", "HKI": 99.724600, <object data="./hki1.html"></object>"LTI": 99.724600, <object data="./lti1.html"></object> },
{ "Channel": "MTV3", "HKI": 100.000000, object data="./hki1.html"></object>"LTI": 100.000000, object data="./lti1.html"></object> },
]
If this is the right way to change json, I have no idea how to change the html code to make this work.
Maybe someone can help me out with this ?
first, 'visualization' is not a valid version number for google charts.
it looks the this was left over from the old library loader code.
use 'current' instead...
google.charts.load('current', { packages: ['corechart'] });
next, you'll need to copy the html from the file into the json,
rather than trying to reference an external file.
the tooltip is only expecting an html snippet, not a full blown file.
to add the custom tooltip, first we need to add the column for the tooltip.
it should be an object, as follows...
{type: 'string', role: 'tooltip', p: {html: true}}
if you want a tooltip for both "HKI" & "LTI",
you need to add the above tooltip column after each column heading...
var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];
include the html when loading the rows...
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
'<div>custom html goes here</div>',
value.LTI,
'<div>custom html goes here</div>'
]);
});
see following working snippet for an example...
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = [
{ "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
{ "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
{ "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
];
var channels = [['Channel', 'HKI (%)', {type: 'string', role: 'tooltip', p: {html: true}}, 'LTI (%)', {type: 'string', role: 'tooltip', p: {html: true}}]];
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
'<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.HKI + '</div></div>',
value.LTI,
'<div class="ggl-tooltip"><div>' + value.Channel + '</div><div>' + value.LTI + '</div></div>'
]);
});
// Set chart Options.
var options = {
title: 'DVB-C Availability (HKI & LTI)',
series: {
0: {color: '#ff3385', lineWidth: 5, pointSize: 5},
1: {color: '#000000', lineWidth: 1, pointSize: 3},
},
vAxis: {title: "Availability (%)", maxValue: 100},
hAxis : {title: "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true'}, slantedText:true, slantedTextAngle:45},
chartArea:{left: 70, top:50, right:40, width:"90%", height:"70%"},
tooltip: {isHtml: true, trigger: 'both'},
legend: {position: 'top', textStyle: { color: '#555', fontSize: 14}}
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(channels)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(figures, options); // Draw the chart with Options.
}
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
if you want to display an external html file as the tooltip,
it may make sense to hide the standard tooltip,
and display the external file 'onmouseover'
see following working snippet for an example...
google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawLineChart);
function drawLineChart() {
var data = [
{ "Channel": "MTV Rocks", "HKI": 99.104700, "LTI": 98.760400 },
{ "Channel": "MTV3 HD", "HKI": 99.724600, "LTI": 99.724600 },
{ "Channel": "MTV3", "HKI": 100.000000, "LTI": 100.000000 },
];
var channels = [['Channel', 'HKI (%)', 'LTI (%)']];
// Loop through each data and populate the array.
$.each(data, function (index, value) {
channels.push([
value.Channel,
value.HKI,
value.LTI
]);
});
// Set chart Options.
var options = {
title: 'DVB-C Availability (HKI & LTI)',
series: {
0: {color: '#ff3385', lineWidth: 5, pointSize: 5},
1: {color: '#000000', lineWidth: 1, pointSize: 3},
},
vAxis: {title: "Availability (%)", maxValue: 100},
hAxis : {title: "Channels", showTextEvery:1, textStyle : {fontSize: 8, bold:'true'}, slantedText:true, slantedTextAngle:45},
chartArea:{left: 70, top:50, right:40, width:"90%", height:"70%"},
tooltip: {trigger: 'none'},
legend: {position: 'top', textStyle: { color: '#555', fontSize: 14}}
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(channels)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
var frame = document.getElementById('tooltip');
// hide external html on mouse out
google.visualization.events.addListener(chart, 'onmouseout', function () {
frame.className = 'hidden';
});
// display external html on mouse over
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
if (props.row === null) {
return;
}
var chartLayout = chart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('point#' + (props.column - 1) + '#' + props.row);
frame.style.left = bounds.left + 'px';
frame.style.top = bounds.top + 'px';
// replace this
frame.src = 'https://www.december.com/html/demo/hello.html';
// with this
//frame.src = '../' + figures.getColumnLabel(props.column) + (props.row + 1) + '.html';
frame.className = 'tooltip';
});
chart.draw(figures, options);
}
.hidden {
display: none;
visibility: hidden;
}
.tooltip {
background-color: #ffffff;
position: absolute;
height: 200px;
width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
<iframe class="hidden" id="tooltip"></iframe>
I'm trying to update a highcharts highstock chart with live data from a json file on my server.
now I have a chart that gets its data from a json file (that I create with php that requests the data from my MySQL database) like so:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKcoin Price LTCCNY</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('json/lastTradesOkcoinLTCCNY.json', function(data) {
Highcharts.setOptions({
global: {
useUTC: false
}
});
// create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'OkCoin Price LTCCNY'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
xAxis: {
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'Price LTCCNY'
},
gridLineWidth: 1,
minorTickInterval: 'auto',
minorTickColor: '#FEFEFE',
labels: {
align: 'right'
}
}],
plotOptions: {
series: {
lineWidth: 1
}
},
tooltip: {
valueDecimals: 5,
valuePrefix: '$ '
},
series : [{
name : 'LTCCNY Price',
data : data,
dataGrouping : {
units : [
['minute',
[1, 5, 10, 15, 30]
], ['hour', // unit name
[1]
]
]
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
So far no problems, I get a chart from the json file. But of course it doesn't update if new data becomes available (only if I reload the page) .
What I want to do is after loading this chart, add live data to it as it becomes available.
something like this example, but instead of random data the chart will be updated with data from a (second) live updating json file on my webserver. The json file will be created by php (this part is working just fine) But I can't figure out how to add the data from the json file to the my existing highstock chart.
I also found
this this example on highcharts.com and that more or less does what I try to do, but I can't integrate the 'requestData' function into my existing chart.
So what I want to do is use the 'requestData' function from the second example with the high stock chart I already have. My second json file (with the live data) looks the same as in the second example (timestamp, price):
[1389022968000,173.3]
Can anyone help me a bit?
nevermind, I figured it out myself...
here's my solution:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OKCoin LTCCNY Price</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var chart; // global
function requestData() {
$.ajax({
url: 'tickOkCoinLTCCNY.json',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 2; // 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, 10000);
},
cache: false
});
}
$(function() {
$.getJSON('../okcoin/json/lastTradesOkcoinLTCCNY.json', function(data) {
// set the allowed units for data grouping
var groupingUnits = [[
'minute', // unit name
[1,5,15,30] // allowed multiples
], [
'hour',
[1, 2, 3, 4, 6]
]];
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
events: {
load: requestData
}
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'hour',
count: 12,
text: '12h'
}, {
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'day',
count: 3,
text: '3d'
}, {
type: 'day',
count: 7,
text: '7d'
}, {
type: 'all',
text: 'All'
}],
selected: 2
},
title: {
text: 'OKCoin LTCCNY Price'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
title: {
enabled: true,
text: 'Time',
style: {
fontWeight: 'normal'
}
}
},
yAxis: [{
title: {
text: 'LTCCNY'
},
lineWidth: 2
}],
series: [{
name: 'LTCCNY',
data: data,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
</script>
</head>
<body>
<script src="../Highstock/js/highstock.js"></script>
<script src="../Highstock/js/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
I am using jqplot charts for drawing different charts on html5 canvas. All charts are working well in all browsers but vertical bar(stacked and clustered) and line charts are getting overlapped in safari. Any reason why is this happening?
The following code lines i have used to draw clustered bar chart:
function DrawChart(chartId, chartType, categories, seriesWithData, grouping)
{
/*for(var i=0;i<seriesWithData.length;i++)
{
eachSeriesArr = seriesWithData[i].split(";");
seriesLabels[i] = eachSeriesArr.splice(0,1);
eachSeriesArr.splice(eachSeriesArr.length-1, 1);
for(var j=0; j<eachSeriesArr.length;j++)
{
eachSeriesArr[j] = Math.round(eachSeriesArr[j]).toString();
}
globalSeriesArr.push(eachSeriesArr);
} */
// Testing with hard coded value
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plotChart = $.jqplot(chartId, [s1,s2,s3], {
seriesDefaults:{
showLabel: true,
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
//showDataLabels: true,
barDirection: 'vertical',
},
pointLabels: {show: true}
},
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
autoscale: true,
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: categories,
},
yaxis: { pad: 1.0 }
},
legend: {show: true, placement: 'outside', location: 'e' },
});
}
//This is the canvas div in html file
<div id="rId2" style="width:640px;height:426px;"></div>
<script type="text/javascript">
$(document).ready(function(){
alert('document loaded completely');
DrawChart('rId2', 'barChart;col', new Array(
"Category 1",
"Category 2",
"Category 3",
"Category 4"
), new Array(
"Series 1;4.3;2.5;3.5;4.5;",
"Series 2;2.4;4.4000000000000004;1.8;2.8;",
"Series 3;2;2;3;5;"
), 'clustered')
});
</script>
`
I am calling this function (defined in a javascript file) on document ready function from html file
Is anything missing?