I am not programmer and I am very new to Highcharts.
Connection to the db works, the x,y axis of the chart and labels show up, but no data.
I got this entire script from the Highchart's forum [here][1].
Question: How to I get the graph to show the data from the columns
graduation_year and i_am_a_student?
I'm sure to the folks here it's a no-brainer, but to me it's a brick wall! TIA for any
help anyone can send my way.
this is the complete script. I added the json bit as you suggested.
<php
$db = mysql_connect("localhost","un","pw","db");
if ( $db == "" ) { echo " DB Connection error...\r\n"; exit(); }
connects to db fine
$sql = mysql_query($con,"SELECT graduation_year,i_am_a_student FROM wp_gfsept2013");
$query = mysql_query($sql);
I think my problem is with the code below. I do not have the technical knowledge
to modify it to display the data from my table. I've tried various things but no luck.
$i = 0;
while($row = mysql_fetch_array($query)){
$date = strtotime($row['date']);
$stamp = $date * 1000;
$val = (int)$row['value'];
$d[$i]['x'] = $stamp;
$d[$i]['y'] = $val;
$i++;
}
echo json_encode($data, JSON_NUMERIC_CHECK);
?>
<div id="container" style="width:800px;height:300px;margin:1em auto;"></div>
<script type="text/javascript">
$(document).ready(function() {
var chart = new Highcharts.Chart({
chart: {
defaultSeriesType:'column',
renderTo:'container'
},
credits:{enabled:false},
title:{text:'Sample Chart'},
legend:{
},
tooltip:{
},
plotOptions:{
series:{
shadow:false,
borderWidth:0,
color:'rgba(90,155,212,.75)',
}
},
xAxis:{
title:{text:''},
type:'datetime',
lineWidth:1,
lineColor:'#999',
tickColor:'#999',
tickLength:3,
},
yAxis:{
lineWidth:1,
lineColor:'#ccc',
tickColor:'#999',
tickLength:3,
tickWidth:1,
gridLineWidth:1,
gridLineColor:'#e0e0e0',
title:{text:''}
},
series:[{
data: [<?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>],
}]
});
});
</script>
</body>
</html>
Highcharts uses a number values, so I advice to set JSON_NUMERIC_CHECK flag to return correct values. If it will not solve yor problem, please attach code which you use (not from source code from chrome) but you chart confgiuration / getting json etc.
Related
I’ve got two series in my chart. I have data coming every day. I register two kinds of information for every data in both series. There are five points in the first series but four in the second one. It is vital for both to have a point for every data. I want the absent point in the second series to be filled by the average of its two neighbor points.
Does highstock have any solution for that?
example:
<script src="jquery.js"></script>
<script src="highstock.js"></script>
<script type="text/javascript">
jQuery(function(){
var $ = jQuery;
Highcharts.stockChart('chart', {
chart: {
panning: false,
},
plotOptions:{
series:{
dataGrouping: {
forced: true,
units: [['day', [1]]]
},
}
},
series: [{
type: 'line',
color:'#23bdbd',
data: [
[1558224000000,8197.68969113999992259778082370758056640625],
[1558310400000,7978.3090724399999089655466377735137939453125],
[1558396800000,7963.3277791099999376456253230571746826171875],
[1558483200000,7680.06654589000027044676244258880615234375],
[1558569600000,7881.846721050000269315205514430999755859375]
],
},
{
type: 'line',
color:'#ff5d5d',
data: [
[1558224000000,100],
[1558310400000,150],
[1558483200000,2300],
[1558569600000,5500]
],
}],
});
});
</script>
<div id="chart"></div>
You can achieve it by adding additional logic in the load event callback. Filter the data and find absent points, then add absent points using series.addPoint(). Check the code and demo posted below.
Code:
chart: {
panning: false,
events: {
load: function() {
const chart = this;
const absentPoints = chart.series[0].xData.filter(
data => chart.series[1].xData.indexOf(data) === -1
);
absentPoints.forEach(absentPoint => {
const index = chart.series[0].xData.indexOf(absentPoint);
const value =
(chart.series[1].yData[index] +
chart.series[1].yData[index - 1]) /
2;
chart.series[1].addPoint([absentPoint, value], false);
});
chart.redraw(false);
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/91ntpmyr/
API reference:
https://api.highcharts.com/class-reference/Highcharts.Series#addPoint
In this Highcharts chart the objective is to offline export using a button external to the chart.
The problem that I have is that even thought I added the offline-exporting.js file to my application, if I'm not connected to the Internet when I click the Offline Export button I get an error saying it cannot access the URL export.highcharts.com.
How to fix this error and export offline?
HTML
<button id="exp" >Offline Export</button>
<div id="container" style="height: 400px; width: 500px"></div>
Javascript:
var settings =
{
"chart": {
"type":"line"
},
"xAxis": {
"endOnTick":true
},
"series":[
{"name":"series1","data":[[1,1200],[2,2200],[3,3200],[4,1800],[5,1500]]},
{"name":"series2","data":[[1,1050],[2,2050],[3,1650],[4,1450],[5,1350]]},
{"name":"series3","data":[[1,1250],[2,2250],[3,1850],[4,1650],[5,1550]]}]
}
var chart = $('#container').highcharts(settings);
$( "#exp" ).click(function() {
alert( "Handler for .click() called." );
var chart = $('#container').highcharts();
chart.exportChart({
type: 'image/png',
filename: 'theimage'
});
});
Try to using exportChartLocal()
$( "#exp" ).click(function() {
alert( "Handler for .click() called." );
var chart = $('#container').highcharts();
chart.exportChartLocal({
type: 'image/png',
filename: 'theimage'
});
});
I'm trying to apply the new threshold/negativeColor features of Highcharts v3.0.2 to essentially the 'spline updating each second' example.
During the animation of the chart updating, I'm seeing weird artifacts in the series line - it looks like it's animating to a different set of control points.. and then it snaps back to the correct configuration when the animation (of the new data point coming in) is done.
Commenting out the threshold/negativeColor features makes this visual artifact go away.
Am I seeing a bug?
UPDATE: I'm posting the following code as an example, which is the stock highcharts demo (my local jquery is v1.10.2) with the threshold/color/negativeColor lines (first lines under series) added by me. This code seemingly misbehaves.
<html>
<head>
<script src="js/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
threshold: 0.5,
color: '#FF0000',
negativeColor: '#00FF00',
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: Math.random()
});
}
return data;
})()
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Indeed it looks like a bug, reported here. At this moment you can only disable animations.
Steps to reproduce.
We have a chart that display 4 series of data, and we have the corresponding legends with each series.
THe initial chart is loaded with 1 years worth of data.
We then remove all data-series from the chart by clicking on the 4 legends
We then change the Zoom level of the chart - e.g. going from a 6 month zoom, to a 3 month zoom. (NOTE: We change Zoom with no data-series being displayed).
We then re-enable the data-series by clicking on the legends.
The chart does not redraw correctly. To get the chart to redraw we have to reload the entire page.
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div id="container" style="height: 500px; min-width: 600px"> </div>
$(function() {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['MSFT', 'AAPL', 'GOOG'],
colors = Highcharts.getOptions().colors;
$.each(names, function(i, name) {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ name.toLowerCase() +'-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
rangeSelector: {
selected: 4
},
scrollbar: {
enabled: false
},
yAxis: {
labels: {
formatter: function() {
return (this.value > 0 ? '+' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
JsFiddle Example
It looks like a bug, so I've reported it to our devs here: https://github.com/highslide-software/highcharts.com/issues/1568
A simple workaround :
After some trial and error, I found out that if you do not disable the navigator, the above bug is not exhibited. (Navigator is enabled by default.)
Comment the line as shown below:
navigator: {
//enabled: false
}
Js Fiddle : http://jsfiddle.net/msjaiswal/FDXBu/1/
Certainly this is a bug in Highcharts but we can live with this above simple workaround.
This issue has been resolved in version 1.3.2 of HighStock.
I need to include pagination for my chart (Bar). so that i can control the number of bars that can be displayed. Has anyone tried this earlier?
If this can be achieved, Anyone help me to sort this out.
The basic idea behind changing the 'data' of your chart is to update the series information for it. So that as you press the pagination buttons for your chart, you update the series data directly.
I put together a simple fiddle example based on another question I answered previously.
Check it out here: http://jsfiddle.net/Robodude/EmMxH/71/
html:
<SELECT id="list">
<OPTION VALUE="A">Data Set A
<OPTION VALUE="B">Data Set A + B
<OPTION VALUE="C">Data Set A + B + C
</SELECT>
<button id="change">Change Data Source</button>
<div id="container" style="height: 400px"></div>
Javascript/Jquery:
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
series: []
};
$("#change").click(function(){
if ($("#list").val() == "A")
{
options.series = [{name: 'A', data: [1,2,3,2,1]}]
}
else if ($("#list").val() == "B")
{
options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]}]
}
else if ($("#list").val() == "C")
{
options.series = [{name: 'A', data: [1,2,3,2,1]},{name: 'B', data: [3,2,1,2,3]},{name: 'C', data: [1,1,1,1,1]}]
}
var chart = new Highcharts.Chart(options);
});
This is the previous question I helped answer: Reload chart data via JSON with Highcharts
Obviously, this is a pretty straight forward example. If you update your post with more information, I can possibly expand on this further.
Good luck :)
The other way to do this would be to make use of axis.setExtremes to zoom into the first page then you update the parameters for the prev/next page so rather than the chart refreshing it actual moves left/right.
Pagination in highcharts can be achieved easily, using an extra plugin, Jquery pagination plugin.
I found this forum post informative and helpful.
function pageselectCallback(page_index, jq){
var items_per_page = 3,
max_elem = 5,
from = page_index * items_per_page,
to = from + max_elem,
newcontent = '',
chartData = [];
//pie.series[0].setData( data.slice(from,to) );
if(typeof pie !== 'object') {
pie = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
series: [{
data: []
}]
});
}
pie.series[0].setData( data.slice(from, to) );
// Prevent click eventpropagation
return false;
}
And an working demo is here.