Related
I am working with chart.js and am trying to add 2 plugins to the same chart, but when applied, both of the plugins disappear and there is no direct error in the console.
Does anyone know how to implement two plugins to the same graph?
First pulgin
Second plugin referance
Basically, the graph has to show data labels on a line chart and at the same time, draw yAxis lines, but only starting from the points on the line chart.
For some reason, the chart will not show either of them when both are applied.
Chart.helpers.merge(Chart.defaults.global.plugins.datalabels, {
color : '#ffffff'
})
// Chart.plugins.unregister(ChartDataLabels);
// var chart = new Chart(ctx, {
// / plugins: [ChartDataLabels],
// options: {
// // ...
// }
// })
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type : 'line',
// The data for our dataset
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 3,
borderColor : 'rgb(255,0, 0)',
data : data1,
} ]
},
// Configuration options go here
options : {
elements : {
point : {
radius : 3
}
},
legend : {
display : false,
labels : {
fontColor : "white",
fontSize : 18
}
},
scales : {
yAxes : [ {
ticks : {
fontSize : 0,
beginAtZero : false,
max : 40,
},
gridLines : {
display : false,
drawBorder : false,
}
} ],
xAxes : [ {
ticks : {
fontColor : "white",
fontSize : 14,
beginAtZero : 0,
},
gridLines : {
display : false,
}
} ]
},
plugins : [ { // this is the magical bit :)
afterRender : function(c, options) {
let
meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data
.forEach(function(e) {
if (max == undefined
|| c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,
meta.dataset._scale.bottom);
c.ctx
.lineTo(e._model.x,
e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max,
c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
} ],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
var data1 = [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ];
myChart(data1);
HTML .js code
<script src="js/chart.js"></script>
<!-- data label .js -->
<script
src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.5.0"></script>
<!-- yAxis lines .js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>
var chart = new Chart(document.getElementById('chart'), {
type : 'line',
data : {
labels : [ '', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', '' ],
datasets : [ {
label : 'My first dataset',
borderWidth : 1,
borderColor : 'rgb(255,0, 0)',
data : [ 1, 9, 12, 3, 15, 8, 2, -5, 3, 4, 5, 7 ],
datalabels: {
align: 'end',
anchor: 'end',
backgroundColor: 'rgb(255, 120, 12, .2)',
borderRadius: 20
}
}]
},
options : {
scales : {
xAxes : [ {
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
}
} ],
yAxes : [{
gridLines : {
display : false,
color: 'rgba(255, 120, 12, .2)',
lineWidth: 5
},
ticks : {
beginAtZero: true
}
}]
},
},
plugins : [{ // this is the magical bit :)
afterRender : function(c, options) {
let meta = c.getDatasetMeta(0), max;
c.ctx.save();
c.ctx.strokeStyle = c.config.options.scales.xAxes[0].gridLines.color;
c.ctx.lineWidth = c.config.options.scales.xAxes[0].gridLines.lineWidth;
c.ctx.beginPath();
meta.data.forEach(function(e)
{
if (max == undefined || c.config.data.datasets[0].data[e._index] > max) {
max = c.config.data.datasets[0].data[e._index];
}
c.ctx.moveTo(e._model.x,meta.dataset._scale.bottom);
c.ctx.lineTo(e._model.x,e._model.y);
});
c.ctx.textBaseline = 'top';
c.ctx.textAlign = 'right';
c.ctx.fillStyle = 'black';
c.ctx.fillText('Max value: ' + max, c.width - 10, 10);
c.ctx.stroke();
c.ctx.restore();
}
}],
tooltips : {
callbacks : {
label : function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
});
>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.6.0/dist/chartjs-plugin-datalabels.min.js"></script>
<canvas id="chart"></canvas>
I'm new here and not really experienced with highcharts / javascripts and variable data from SQL.
The Situation is that I've got three Pi3 with DHT22 Sensor, the Scripts on the Pis working well, the data is stored to my NAS into a Maria5 DB.
I've managed to display the data (date/time, temperature, humidity) in a table for each sensor:
Data shown in a table
I've also managed to display the date/time and temperature (OR humidity) of all three Pi3Sensors (data) in separate highcharts on one page:
three charts with temperature
What I want to do now is to show the temperature AND humidity in each highchart of the single Pi's charts. When I enter the 2nd yAxis Data (Series 2) for the humidity manually, then it's working:
2nd data series entered manually
There must be something wrong with the variables of temperature and humidity data. I searched a lot online but wasn't able to find something that helps, or I'm just not able to understand it the right way...
In the DB are the fields 'dateandtime' (2018-04-18 15:05:00), 'unix_timestamp' (1524056702), 'sensor' (value "1", "2" or "3" for each sensor), 'temperature' and 'humidity.
The html page should be alright (index.html);
<html>
<head>
<title>Temperatur Uebersicht</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="data.js" ></script>
</head>
<body>
<div id="chart1" style="height: 400px; margin: 0 auto"></div>
</body>
</html>
The php file (values1.php) with the SQL connection / statement;
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("piSensors", $con);
$result = mysql_query("SELECT *
FROM `temperaturedata`
WHERE sensor=1
ORDER BY unix_timestamp DESC
LIMIT 288 ")
or die ("Connection error");
while($row = mysql_fetch_array($result)) {
echo $row['unix_timestamp'] . "/" . $row['temperature'] . "/" . $row['humidity'] . "/" ;
}
mysql_close($con);
?>
...and the javascript (data.js) with the two series. The data of the 2nd serie is entered manually. Here I don't know how to do it with the variables, that the actual data (of humidity) from sql is also shown in the same chart like the temperature:
$(function() {
var x_values1 = [];
var y_values1 = [];
var switch1 = true;
$.get('values1.php', function(data1) {
data1 = data1.split('/');
for (var i in data1)
{
if (switch1 == true)
{
var ts = timeConverter(data1[i]);
x_values1.push(ts);
switch1 = false;
}
else
{
y_values1.push(parseFloat(data1[i]));
switch1 = true;
}
}
x_values1.pop();
$('#chart1').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Pi1'
},
subtitle : {
text : 'PiSensor # 1'
},
xAxis : {
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : true
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineColor : '#666666',
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values1,
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : [20,30,40,20],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes();
var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min ;
return time;
}
If anyone could help out or route me on the right way, I would be really thankfull!
Edit:
I tried to manage the highchart with the two yAxis data series with this variant.
Output of "values1.php" (unix_timestamp / temperature / humidity):
1524060302/27.3/36.4/1524060002/27.3/36.4/1524059702/27.3/36.4/
Output of "values1.php" with dateandtime (dateandtime / temperature / humidity):
2018-04-18 16:05:00/27.3/36.4/2018-04-18 16:00:00/27.3/36.4/2018-04-18 15:55:00/27.3/36.4/
Picture of the DB structure: DB structure
Picture of the DB values: DB values
Edit (19.04.2018 / 12:25)
I changed the php code like you said:
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("piSensors", $con);
$result = mysql_query("SELECT *
FROM `temperaturedata`
WHERE sensor=1
ORDER BY unix_timestamp DESC
LIMIT 288 ")
or die ("Connection error");
while($row = mysql_fetch_array($result)) {
echo $row['unix_timestamp'] . "/" . $row['temperature'] . "/" . $row['humidity'] . ";" ;
}
mysql_close($con);
?>
The output of the php file is now like that:
1524134103/26.1/38.1;1524133802/26.1/38.2;1524133502/26.1/37.8;1524133202/26.2/37.9;
Also I made the changes in the javascript:
$(function() {
var x_values1 = [];
var y_values1 = [];
var y_values2 = [];
var switch1 = true;
$.get('values1.php', function(data1) {
data1 = data1.split(';').reverse();
for (var i in data1) {
let tmpData = data1[i].split('/');
y_values1.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values2.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values1);
$('#chart1').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Buro'
},
subtitle : {
text : 'PiSensor # 1'
},
xAxis : {
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values1,
color : '#FF0033',
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values2,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 45,
color: '#00cc00',
}, {
value: 60,
color: '#ff9900',
}, {
value: 100,
color: '#ff0000',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
function timeConverter(UNIX_timestamp){
var a = new Date(UNIX_timestamp * 1000);
var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var hour = a.getHours();
var min = a.getMinutes() < 10 ? '0' + a.getMinutes() : a.getMinutes();
var time = date + ' ' + month + ' ' + year + ' ' + hour + ':' + min ;
return time;
}
I added some zone-colors for the humidity (Luftfeuchtigkeit) and another dashStyle. This changes are working well.
But there's a problem with the xAxis Date & Time (or unix_timestamp right now).
xAxis DateTime - Unix_Timestamp Problem in the HighCharts
The SQL statement is still the same (unix_timestamp) and the time converter function at the end is also not changed.
Okay, I managed now to change the xAxis (datetime) with the following code:
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : false
},
But I've still two Points which should be changed.
One is the shown time on the HighCharts. The hour is 2 hours to late, the local/server time is +2 hours. I don't know how to add +2 hours to the HighChart Output on the xAxis and Tooltip, or how to adjust the time calculation.
Here are two screenshots of the mentioned problem:
Screenshot 1, 2h time difference
Screenshot 2, SQL DB Data (correct time)
The used javascript code looks now like that:
$(function() {
var x_values1 = [];
var y_values1 = [];
var y_values2 = [];
var switch1 = true;
$.get('values1.php', function(data1) {
data1 = data1.split(';').reverse();
for (var i in data1) {
let tmpData = data1[i].split('/');
y_values1.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values2.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values1);
$('#chart1').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Buro'
},
subtitle : {
text : 'PiSensor # 1'
},
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values1,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : '',
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values1,
color : '#FF0033',
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values2,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 40,
color: '#FE9A2E',
}, {
value: 60,
color: '#2E9AFE',
}, {
value: 100,
color: '#FE9A2E',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
$(function() {
var x_values3 = [];
var y_values3 = [];
var y_values4 = [];
var switch1 = true;
$.get('values2.php', function(data2) {
data2 = data2.split(';').reverse();
for (var i in data2) {
let tmpData = data2[i].split('/');
y_values3.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values4.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values3);
$('#chart2').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Wohnzimmer'
},
subtitle : {
text : 'PiSensor # 2'
},
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values3,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
data : y_values3,
color : '#FF0033',
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values4,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 40,
color: '#FE9A2E',
}, {
value: 60,
color: '#2E9AFE',
}, {
value: 100,
color: '#FE9A2E',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
$(function() {
var x_values5 = [];
var y_values5 = [];
var y_values6 = [];
var switch1 = true;
$.get('values3.php', function(data3) {
data3 = data3.split(';').reverse();
for (var i in data3) {
let tmpData = data3[i].split('/');
y_values5.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values6.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
}
//x_values1.pop();
console.log(y_values5);
$('#chart3').highcharts({
chart : {
type : 'spline'
},
title : {
text : 'Schlafzimmer'
},
subtitle : {
text : 'PiSensor # 3'
},
xAxis : {
type : 'datetime',
labels: {
format: '{value:%e.%m. %H:%M}'
},
title : {
text : 'Datum & Zeit'
},
categories : x_values5,
reversed : false
},
yAxis : [{
title : {
text : 'Temperatur'
},
labels : {
formatter : function() {
return this.value + ' C'
}
}
}, {
lineWidth: 1,
opposite: true,
title: {
text: 'Luftfeuchtigkeit'
},
labels : {
formatter : function() {
return this.value + ' %'
}
}
}],
tooltip : {
crosshairs : true,
shared : true,
valueSuffix : ''
},
plotOptions : {
spline : {
marker : {
radius : 4,
lineWidth : 1
}
}
},
series : [{
name : 'Temperatur',
color : '#FF0033',
data : y_values5,
tooltip : {
valueSuffix: ' C'
}
}, {
name : 'Luftfeuchtigkeit',
data : y_values6,
dashStyle: 'shortdot',
color : '#58ACFA',
zones : [{
value: 40,
color: '#FE9A2E',
}, {
value: 60,
color: '#2E9AFE',
}, {
value: 100,
color: '#FE9A2E',
}],
yAxis : 1,
tooltip : {
valueSuffix : ' %'
}
}]
});
});
});
I think the point is somewhere there:
for (var i in data1) {
let tmpData = data1[i].split('/');
y_values1.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[1])});
y_values2.push({x: parseInt(tmpData[0])*1000, y: parseFloat(tmpData[2])});
values1.php
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("piSensors", $con);
$result = mysql_query("SELECT *
FROM `temperaturedata`
WHERE sensor=1
ORDER BY unix_timestamp DESC
LIMIT 288 ")
or die ("Connection error");
while($row = mysql_fetch_array($result)) {
echo $row['unix_timestamp'] . "/" . $row['temperature'] . "/" . $row['humidity'] . ";" ;
}
mysql_close($con);
?>
And the 2nd Point is the Tooltip Information.
There should also displayed only the information as on the xAxis is shown.
Like "day.month hour.min" (%e.%m. %H:%M)
Maybe someone can help me out here... thx.
Edit (20.04.2018, 13:19)
I added following code to fix the issue with the time difference of 2 hours:
Highcharts.setOptions({
time: {
timezoneOffset: -2 * 60
}
});
correct display of time
(The SensorData is recorded every 5 minutes)
Now I just have to fix the tooltip information with the date/time format (only display %H:%M)
I have written a function that creates a chart based on some graphdata as parameter and renders it to a div . Now I am reusing this function to generate same type of chart on same div to load different series data . The problem is I can see the graph rendering shows previous charts labels for a second and then the new graph gets loaded with new labels . I dont want to see the old graph when my new graph gets loaded . Please help .
My chart function :
<html>
<head>
<script src="./jquery.min.jsl"></script>
<script src="./highcharts.jsl"></script>
<script src="./exporting.jsl"></script>
<meta name="viewport" content="user-scalable=no">
<script>
function renderGraph(graphdata) {
var graphObj = JSON.parse(graphdata);
var chart = null;
Highcharts.setOptions({
lang : {
numericSymbols : ["K", "M", "G", "T", "P", "E"]
}
});
var change = {
0 : '$0K',
2 : '$2K',
4 : '$4K',
6 : '$6K',
8 : '$8K'
};
var xAxisLegends = graphObj.bottomLegends;
var seriesData = graphObj.seriesData;
var xAxisLegends = graphObj.bottomLegends;
//['Q2, 16', 'Q3, 16', 'Q4, 16', 'Q1, 17'];
var columnColors = ["#69C3DB", "#3a8a9f"];
var seriesData = graphObj.seriesData;
/*[{
name : 'Budget',
showInLegend : false,
data : [2, 4, 6, 8]
}, {
name : 'Utilisation',
showInLegend : false,
data : [1, 2, 3, 4]
}];*/
// variables which have diff values according to OS
var chartProperties = {};
// properties to assign to Charts's object
var graphHeight = 0;
// height of chart
var graphWidth = 0;
//Width of the column
var pointWidth;
// Separating the graph dimensions & styling properties as per OS name & version
if (graphObj.osname == "iphone") {
chartProperties = {
type : 'column',
renderTo : 'container'
};
xAxisProp = {
gridLineWidth : 0,
categories : xAxisLegends,
crosshair : true
};
yAxisProp = {
min : 0,
gridLineWidth : 0,
tickAmount : 5,
title : {
text : ' '
},
labels : {
formatter : function() {
var value = this.axis.defaultLabelFormatter.call(this);
return '$' + value;
}
}
};
pointWidth = 5;
} else if (graphObj.osname == "android") {
chartProperties = {
type : 'column',
plotBackgroundColor : null,
plotBackgroundImage : null,
plotBorderWidth : 0,
plotShadow : false,
height : 450,
marginTop : 100,
marginLeft : 120
},
xAxisProp = {
categories : xAxisLegends,
width : 800,
tickmarkPlacement : 'on',
labels : {
y : 40,
style : {
color : '#333333',
fontSize : '25',
fontFamily : 'Metropolis-Light',
opacity : '.6'
},
}
};
yAxisProp = {
gridLineWidth : 0,
min : 0,
tickAmount : 5,
offset : 60,
title : {
text : ''
},
labels : {
align : 'left',
style : {
color : '#333333',
fontSize : '28',
fontFamily : 'Metropolis-Light',
opacity : '.5'
},
formatter : function() {
var value = this.axis.defaultLabelFormatter.call(this);
return '$' + value;
}
},
};
pointWidth = 10;
if (parseInt(graphObj.osversion) >= 500 && parseInt(graphObj.osversion) <= 600) {
graphHeight = 600;
} else {
graphHeight = 630;
}
}
chart =
Highcharts.chart('container', {
chart : chartProperties,
credits : {
enabled : false
},
tooltip : {
enabled : false
},
exporting : {
enabled : false
},
title : {
text : ''
},
xAxis : xAxisProp,
yAxis : yAxisProp,
plotOptions : {
column : {
pointPadding : 0.2,
borderWidth : 0,
groupPadding : 0.38,
pointWidth : pointWidth
}
},
colors : columnColors,
series : seriesData
});
}
</script>
</head>
<body>
<div id="container" style="height: 100%; width: 100%; position : center;"></div>
</body>
The function that calls this chart :
$.webViewPerformanceGraph.url = "/html/Performance.html";
$.webViewPerformanceGraph.addEventListener('load', function() {
$.webViewPerformanceGraph.evalJS("renderGraph('" + JSON.stringify(params) + "');");
Since you're using jQuery, have you tried simply emptying the container div as follows before redrawing the chart?
$('#container').html();
Perhaps this would be more beneficial since chart.destroy() doesn't seem to be working in your case.
From http://api.jquery.com/html/#html2:
When .html() is used to set an element's content, any content that was in that element is completely replaced by the new content. Additionally, jQuery removes other constructs such as data and event handlers from child elements before replacing those elements with the new content.
This is how I want it to look like negative values below x-axis and negative values wrapped in circular brackets.
C3.js Code
var chart = c3.generate({
bindto : "#totalDollarFlow",
size : {
height : 400,
width : 700
},
title : {
text : data.title
},
data : {
x : labels,
columns : data.columns,
axes : {
data1 : 'y',
},
type : 'bar',
types : {
data1 : 'line',
},
names : {
},
colors : {
data1 : '#2ca02c',
},
selection : {
enabled : true,
draggable : false,
multiple : true,
grouped : true
}
},
subchart : {
show : false
},
point : {
show : false
},
zoom : {
enabled : true,
rescale : true
},
grid : {
y : {
show : true
}
},
regions : [ {
axis : 'y',
start : 186,
end : 187,
class : 'regionY'
} ],
axis : {
x : {
type : 'category',
tick : {
rotate : 90,
centered : true,
fit : true,
multiline : false,
culling : {
max : 60
}
},
},
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format : d3.format("$,")
}
},
}
});
How the chart looks like at present.
I'm not sure if everything you want is possible but at least you can get close to it. For your y-Axis you can use this format:
y : {
label : {
text : '$s Millions',
position : 'outer-middle'
},
tick : {
format: function (d) {
const realNumber = d*1000000;
return realNumber.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}
}
}
To get a line at 0 you can define a grid-line for the y-axis at position 0. You can also set a text here, but only one text to describe what this line is for and not like your ticks. I think this is even better than having the timestamp floating in your chart.
grid : {
y : {
show : true,
lines: [
{value: 0},
]
}
}
This line might be a little bit thin, but you can make it thicker when you change its css. I think it was c3-ygrid-line. To get more information you can always use the reference
I currently have a working chart using this:
$.ajax({
type: "GET",
url: graphURL,
data: "",
cache: false,
success: function (response) {
//alert(response);
jsonData = JSON.parse(response);
if(jsonData != '' && jsonData != null) {
var category = jsonData.XData.split(",");
var series = jsonData.YData.split(",");
series = $.each(series, function (i, amt) {
series[i] = parseFloat(series[i]);
});
//Display chart
UserChart(series, category, jsonData.YAxisTitle);
}
}
});
... but it doesn't allow me to set options like if I wanted an area chart instead of line etc.. how do I modify the code so I could include something like the following which I see in all examples:
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL Stock Price',
data : data,
type : 'area',
threshold : null,
tooltip : {
valueDecimals : 2
},
fillColor : {
linearGradient : {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops : [[0, Highcharts.getOptions().colors[0]], [1, 'rgba(0,0,0,0)']]
}
}]
The problem is that series is the series points' data.
Try to pass a serie to UserChart.
Like the following:
var points = jsonData.YData.split(",");
points = $.each(series, function (i, amt) {
points[i] = parseFloat(series[i]);
});
// here you set your serie config
var serie = {
name: 'AAPL Stock Price',
type: 'area',
data: points,
threshold : null,
tooltip : {
valueDecimals : 2
}
};
UserChart(serie, category, jsonData.YAxisTitle);
Then in UserChart you should add the serie directly to the chart series.
Example:
var options: {
chart : {
renderTo : 'container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : []
};
function UserChart(serie, category, jsonData.YAxisTitle) {
options.series.push(serie);
// add your code
}