My json data array is as below:
[{"item":"Mango","price":30.0,"date":"Feb 18, 2016 6:54:49 PM"},{"item":"karela","price":45.0,"date":"Feb 20, 2016 3:39:08 PM"},{"item":"karela","price":455.0,"date":"Feb 24, 2016 3:59:28 PM"},{"item":"karela","price":65.0,"date":"Feb 29, 2016 10:46:16 AM"},{"item":"karela","price":45.0,"date":"Feb 29, 2016 10:47:05 AM"},{"item":"iphone","price":300.0,"date":"Mar 2, 2016 3:32:14 PM"}]
I want to set the "price" as Y-Axis data and "date" as X-Axis data in Highcharts.
This above array generated from a MySQL database.
The above array updates when new data will come and when new data will come then I want to update my graph with new data every time.
For that I am using Ajax.
And one more thing if my time interval is 1 second, then graph also display with nice look.
Create a websocket program at backend and connect to that socket using the HTML 5 feature websocket use following code .Its a powerful dynamic code i wrote after that i dropped it ,because of license issue.High chart is not a free licence one
$('#Chart').highcharts('StockChart', {
colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee",
"#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
chart: {
//type: 'areaspline',
events: {
load: function () {
// set up the updating of the chart each second
var series1 = this.series[0];
var webSocket =
new WebSocket('ws://'+Config.ip+':'+Config.port+'/websocket');
webSocket.onerror = function(event) {
alert(event.data);
};
webSocket.onopen = function(event) {
webSocket.send($scope.IDSelected);
return false;
};
webSocket.onmessage = function(event) {
var point = JSON.parse(event.data);
var dataPoint1 ={
x:(new Date()).getTime(),
y: Math.round(point.point1),
color:'#00ff00',
segmentColor :'#00ff00',
real_valueMap : Math.round(point.point1)
}
series1.addPoint(dataPoint1);
};
}
} },
title: {
text: "Title"
}
xAxis: {
type:"datetime",
plotBands: [{ // visualize the weekend
from: 4.5,
to: 6.5,
color: 'rgba(68, 170, 213, .2)'
}]
},
yAxis: {
title: {
text: 'Percentage'
}
},
tooltip: {
shared: true,
valueSuffix: ' units'
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
},
spline: {
turboThreshold: 2000}
},
series: [{
marker: {
states: {
hover: {
fillColor: {}
}
}
},
type: 'coloredline',
name: 'GraphName1',
data: (function () {
// generate an array of random data
var data = [];
return data;
}())
} ]
});
Related
So, What I have is a condition in a MySQL to show the first 1000 data points first and then the other 2000 datapoints after that in Highcharts.
if lastindex==0:
cur.execute("SELECT data,value FROM table where id<1001")
else:
cur.execute("SELECT data,value FROM table where id>1001 and id<3000")
data = cur.fetchall()
//python Code to fetch SQL data
Now what I am doing is that I am rendering that data into the Highcharts, the data is being rendered. but the problem arises that after showing the first 1000 data points, the Highcharts value starts from 0 and then shows the other 2000 points
the data is not displaying continuously as it should plot the send array data just after the end of the first data.
I think the Highcharts is being called Twice, What can I do to append the 2nd set of data to the first set without reloading the whole chart.
Here's a snip of my Highchart's js
Highcharts.chart("chartcontainer", {
chart: {
type: 'line',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
var series = this.series[0],
chart = this;
setInterval(function() {
//some logic regarding the chart
//..
v = {
y: y,
x: x
};
console.log("V value", v);
series.addSeries(v, false, true);
counter++;
localcounter++;
} else
{
oldcounter=counter;
flagToreload=1;
}
}, 1000/130);
setInterval(function() {
chart.redraw(false);
}, 100);
}
}
},
time: {
useUTC: false
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'Value',
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
gridLineWidth: 1
},
tooltip: {
headerFormat: '<b>{series.name}</b><br/>',
pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
},
exporting: {
enabled: false
},
series: [{
animation: false,
name: 'Random data',
data: (function() {
// generate an array of random data
var data = [],
time = counter,
i;
for (i = -1000; i <= 0; i += 1) {
data.push([
counter,
null
]);
}
return data;
}())
}]
});
What I want is just to append the event data rather than loading the whole chart.
How can I reload a particular Highchart value without reloading the whole chart ?
What do you think about updating the current series with new data, which will be an array of old data merged with the new one?
chart: {
events: {
load(){
let chart = this,
currentSeries = chart.series[0],
newData;
newData = [...currentSeries.userOptions.data, ...data1]
setTimeout(()=> {
chart.series[0].update({
data: newData
})
}, 5000)
}
}
},
See the demo
What I want to accomplish is to join/merge two or more regions in Highmaps. E.g. say you want to show the population for Europe + Asia, then when you hoover Asia or Europe they appear as one connected region with the acumulated population
I tried the following, but with no success:
var data = [
[['eu', 'as'], 0],
['af', 2],
['na', 4],
['sa', 5]];
With the fiddle: https://jsfiddle.net/2ek3mp1s/3/
Any ideas?
Of course, one option is to change the underlying geo data. But if you don't want to do that, you can tweak the mouseOver event so that it highlights at the same time the countries with the same value.
Here's a demo:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data = [
['eu', 0],
['as', 0],
['af', 2],
['na', 4],
['sa', 5]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'custom/world-continents'
},
title: {
text: 'Highmaps basic demo'
},
plotOptions: {
map: {
point: {
events: {
mouseOver: function() {
var v = this.value
Highcharts.each(this.series.points, function(p) {
if (v == p.value) {
p.setState('hover')
}
});
},
mouseOut: function() {
Highcharts.each(this.series.points, function(p) {
p.setState('')
});
}
}
},
allAreas: false,
}
},
subtitle: {
text: 'Source map: World continents'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Random data',
states: {
hover: {
color: '#BADA55'
}
},
dataLabels: {
enabled: true,
format: '{point.name}'
}
}]
})
<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world-continents.js"></script>
<div id="container"></div>
Jsfiddle: https://jsfiddle.net/user2314737/uhp2wgkn/
See also Highcharts "Categorized areas" demo
Not solving my exact issue, but found a way to achieve similar for Europe. In this case I connect Sweden and Finland("name": "path7025"):
http://jsfiddle.net/huqfkc2y/
by adding their respective region. Case dismissed.
Referred this link and having doubt with this code {$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?'},
I have Json data, if i replace instead of JSON link in the stockchart,chart get disappeared. If have only from last month,the chart should display from the last month. I don't know how to replace the link with my data. And i have 2 series, can I change to line to bar in stock highcharts to column?
Please share the points for 2 series column charts with the data from server side.
I have tried,replaced the link with my server side data.
var data1=([1501545600000,150.05],[1501632000000,157.14],[1501718400000,155.57],[1501804800000,156.39],[1502064000000,158.81],[1502150400000,160.08],[1502236800000,161.06],[1502323200000,155.32],[1502409600000,157.48],[1502668800000,159.85], [1502755200000,161.60],[1502841600000,160.95],[1502928000000,157.86],[1503014400000,157.50],[1503273600000,157.21],[1503360000000,159.78],[1503446400000,159.98],[1503532800000,159.27],[1503619200000,159.86]);
var data2=([1504224000000,164.05],[1504569600000,162.08],[1504656000000,161.91],[1504742400000,161.26],[1504828800000,158.63],[1505088000000,161.50],[1505174400000,160.86],[1505260800000,159.65],[1505347200000,158.28],[1505433600000,159.88],[1505692800000,158.67],[1505779200000,158.73],[1505865600000,156.07],[1505952000000,153.39],[1506038400000,151.89],[1506297600000,150.55],[1506384000000,153.14]);
var startDate = new Date("April 01, 2016 00:00:00");
var today = new Date();
var count = parseInt((today.getTime() - startDate)/(24*3600*1000)) -1;
$.getJSON(data1, function (data1) {
// Create the chart
Highcharts.stockChart('ytdChart', {
chart: {
alignTicks: false
//type:column
},
xAxis: {
range: 9 * 30 * 24 * 3600 * 1000 // nine months
},
rangeSelector : {
enabled:false,
},
navigator: {
enabled: false
},
credits: {
enabled: false
},
title: {
text: 'YTD'
},
scrollbar: {
enabled: false
},
series: [{
// type: 'column',
name: 'YTD monthly charge',
data: data1,
tooltip: {
valueDecimals: 2
}
}
//{
//type:column,
// name: 'YTD Total',
// data: data2,
// tooltip: {
// valueDecimals: 2
// }
}
]
});
});
1) I am wondering how I can remove the date picker from the right side of the chart? I really only need the left rangeSelector buttons i.e. 24 hours, 6 hours...
2) is there anyway to turn off the dataLabels when you click on one of the rangeSelector options as well?
When zoomed in to show 5 minutes worth of data the dataLabels are handy, but when looking at 24 hours worth they make the chart quite unusable due to crowding. It would be nice if they could be automagically turned off when I zoomed out.
Huge thanks for your help, if this is indeed possible.
For the second option, i'm looking to toggle the visibility of
plotOptions:{series: {
dataLabels:{
enabled:true,
Fiddle Link
After customization of range selector from Highstock Example
/**
* Load new data depending on the selected min and max
*/
function afterSetExtremes(e) {
var chart = Highcharts.charts[0];
chart.showLoading('Loading data from server...');
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?start=' + Math.round(e.min) +
'&end=' + Math.round(e.max) + '&callback=?', function (data) {
chart.series[0].setData(data);
chart.hideLoading();
});
}
// See source code from the JSONP handler at https://github.com/highcharts/highcharts/blob/master/samples/data/from-sql.php
$.getJSON('https://www.highcharts.com/samples/data/from-sql.php?callback=?', function (data) {
// Add a null value for the end date
data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);
// create the chart
Highcharts.stockChart('container', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: data
}
},
scrollbar: {
liveRedraw: false
},
title: {
text: 'AAPL history by the minute from 1998 to 2011'
},
subtitle: {
text: 'Displaying 1.7 million data points in Highcharts Stock by async server loading'
},
rangeSelector: {
buttons: [{ //customization of buttons
type: 'hour',
count: 24,
text: '24h'
}, {
type: 'hour',
count: 6,
text: '6h'
}, {
type: 'minute',
count: 5,
text: '5m'
}],
inputEnabled: false, // it remove datepicker
},
xAxis: {
events: {
afterSetExtremes: afterSetExtremes,
setExtremes: function(e) {
if(typeof(e.rangeSelectorButton)!== 'undefined')
{
if(e.rangeSelectorButton.text=='5m'){
addlables(); //function to add data label
}else{
removelables(); // function to remove data lable
}
}
}
},
minRange: 300 * 1000 // 5min * 1000
},
yAxis: {
floor: 0
},
plotOptions:{
series: {
dataLabels:{
enabled:false,
}
}
},
series: [{
data: data,
dataGrouping: {
enabled: false
}
}]
});
});
function removelables(){
var chart = $('#container').highcharts();
var opt = chart.series[0].options;
opt.dataLabels.enabled = false;
chart.series[0].update(opt);
}
function addlables(){
var chart = $('#container').highcharts();
var opt = chart.series[0].options;
opt.dataLabels.enabled = true;
chart.series[0].update(opt);
}
I am trying to prepare a Tornado Chart using the column chart in Highcharts. Here is my fiddle.
My current code is:
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Net Sales'
},
subtitle: {
text: 'MM $'
},
xAxis: {
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs']
},
yAxis: {
title: {
text: 'MM $'
}
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y;
}
}
},
scatter:{
marker:{
symbol:'line',
lineWidth:11,
radius:8,
lineColor:'#f00'
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Temperatures',
data: [
[12.15, 46.86],
[15.45, 42.28],
[27.77, 31.24]
]
},
{
name:'Base',type: 'scatter',data:[120],
}]
});
The problem is that the last series (Annual Costs) does not show, as it is in reversed order. Also, I'd like the Tornado Chart to look more like this:
Note that the labels in this chart are different from the actual values plotted. Also note that the bar in the center - in the example code, there would be a vertical line at 29.5. I would also like to support a combined uncertainty bar like the one at the bottom. Any suggestions would be greatly appreciated.
Your last bat is not showing, because first number is lower than second, see: http://jsfiddle.net/kErPt/1/
If you want to display another values at labels, then add that info first. Example:
data: [{
low: 12,
high: 15,
lowLabel: 35,
highLabel: 46
}, {
low: 2,
high: 35,
lowLabel: 15,
highLabel: 26
} ... ]
And then use dataLabels.formatter for series.
To add vertical line use plotLines.
I'm not sure what is the last bar called 'combined uncertainty'.
I've used Highcharts with separate series (thanks jlbriggs) to create a Tornado Chart: http://jsfiddle.net/uRjBp/
var baseValue = 29.5;
var outputTitle = "Net Sales";
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
//type:'column'
//type:'area'
//type:'scatter'
//type:'bubble'
},
credits: {},
exporting: {},
legend: {},
title: {
text: outputTitle
},
subtitle: {
text: "MM $"
},
tooltip: {
formatter: function() {
var msg = "";
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
var low = round(this.series.chart.series[0].data[index].y+baseValue);
var high = round(this.series.chart.series[1].data[index].y+baseValue);
if (this.x === "Combined Uncertainty") {
msg = "Combined Uncertainty in "+outputTitle+": "+low+" to "+high;
} else {
var lowLabel = this.series.chart.series[0].data[index].label;
var highLabel = this.series.chart.series[1].data[index].label;
msg = '<b>'+outputTitle+'</b> goes from '+ low +' to '+ high+'<br/> when '+this.x +
' goes from <br/> '+lowLabel+" to "+highLabel;
}
return msg;
}
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
formatter: function () {
var index = this.series.chart.xAxis[0].categories.indexOf(this.x);
if (this.series.userOptions.labels === undefined) {
return this.y+baseValue;
}
return this.key === "Combined Uncertainty" ? "":this.series.userOptions.labels[index];
}
}
}
},
xAxis: {
title: {
text: 'Factor'
},
allowDecimals:false,
categories: ['Annual Revenue', 'Number of Years', 'Annual Costs', 'Combined Uncertainty']
},
yAxis: {
title: {
text: 'MM $'
},
labels: {
formatter:function() {
return this.value+baseValue;
}
}
},
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[{y:12.15-baseValue, label:10},{y:15.45-baseValue, label:1},{y:31.25-baseValue, label:2},{y:12.15-baseValue, color:'#99CCFF', label: ""}],
labels:[10,1,2,]
},{
name: 'High',
grouping:false,
type:'bar',
data:[{y:46.86-baseValue, label:30},{y:42.28-baseValue, label:3},{y:27.77-baseValue, label:4},{y:46.86-baseValue, color:'#99CCFF', label:""}],
labels:[30,3,4,]
},
{
name: 'Median',
type: 'scatter',
data: [null,null, null,27-baseValue],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
function round(num) {
return Math.round(num*100)/100;
}
usually, this kind of chart is done using a separate series for the left and right portions
One way to do this is by setting one set of data as negative numbers, and then using the formatters to make the axis labels, datalabels, and tooltips display the absolute values
example:
http://jsfiddle.net/jlbriggs/yPLVP/68/
UPDATE:
to show a line as in your original chart, you can extend the marker symbols to include a line type, and use a scatter series to draw that point:
http://jsfiddle.net/jlbriggs/yPLVP/69/
If you don't want to have the extra code for the line marker type, you could use any of the other existing marker symbols for the scatter series.