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>
Related
I am working on django project
I want to do a highchart dependency wheel but I don't know why the chart not showing , you will see my code below ,
in my dependencywheel.html I did already {%load static%} in the top ,
<script>
Highcharts.chart('container', {
title: {
text: 'Highcharts Dependency Wheel'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. From {point.exped} to {point.destin}: {point.count}.'
}
},
series: [{
keys: ['exped', 'destin', 'count'],
data: '{%url "data"%}',
type: 'dependencywheel',
name: 'Dependency wheel series',
dataLabels: {
color: '#333',
textPath: {
enabled: true,
attributes: {
dy: 5
}
},
distance: 10
},
size: '95%'
}]
});
</script>
that's my views.py
#login_required
def depend(request):
return render(request,'dependWheel.html',{})
def jsonDepend(request):
dataset = mail_item_countries_depend.objects.all().values_list('exped','destin','count')
data = list(dataset)
return JsonResponse(data, safe=False)
the chart is not showing , how can I load my data
that's the answer:
<script type="text/javascript">
$(function(){
$.getJSON('data',function(data){
Highcharts.chart('container', {
title: {
text: 'Highcharts Dependency Wheel'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. From {point.from} to {point.to}: {point.weight}.'
}
},
series: [{
keys: ['from', 'to', 'weight'],
data:data,
type: 'dependencywheel',
name: 'Dependency wheel series',
dataLabels: {
color: '#333',
textPath: {
enabled: true,
attributes: {
dy: 5
}
},
distance: 10
},
size: '95%'
}]
});
});
});
</script>
I'm working on an application that will generate some charts and I'm using chartjs to draw them.
The issue I'm facing is this: the charts will be generated with dynamic data. The application may generate up to 9 datasets and rarely they will have the same size. How can I make chartjs advance or fill the values when the datasets size won't match?
I saw some examples here at stackoverflow and even at chartjs github page but they didn't work me.
This is an example of what I have so far: https://jsfiddle.net/camarrone/49onz8no/1/
Two datasets with different data array. The first value for the second dataset doesn't exist hence it should be zero or null. Like this: https://jsfiddle.net/camarrone/d39a0qgw/
This is "failing" code for reference:
<html>
<head>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
type: 'line',
fill: false,
label: 'Label_1',
borderColor:"hsl(181.40751321285697,45.9256727159548%,27.54659126333186%)",
data: [7,3,11,2,3]
},
{
type: 'line',
fill: false,
label: 'Label_2',
borderColor:"hsl(181.91996173600447,39.046658571489985%,65.63412032509264%)",
data: [1,6,1,2]
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
}
});
</script>
</body>
</html>
For those facing the same issue and future reference. Here is the working code for my case:
<html>
<head>
<script type='text/javascript' src='./momentjs-with-locales.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
</head>
<body>
<div style="width: 900px; height: 500px">
<canvas id="chart1"></canvas>
</div>
<script>
let chart1 = new Chart(document.getElementById("chart1"), {
type: 'line',
data: {
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
datasets: [
{
fill: false,
label: 'Page View',
borderColor: "hsl(226.15793242887034,78.48665583019744%,62.177112879909686%)",
data: [
{
labels: ["2018-04-21T16:00:00", "2018-04-21T18:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date('2018-04-21T16:00:00'),
y: 7
},
{
x: new Date("2018-04-21T18:00:00"),
y: 3
},
{
x: new Date("2018-04-21T20:00:00"),
y: 11
},
{
x: new Date("2018-04-23T12:00:00"),
y: 2
},
{
x: new Date("2018-04-23T13:00:00"),
y: 3
}
],
},
//dataset 2
{
fill: false,
label: 'View Content',
borderColor: "hsl(232.84952363040048,93.45575469963681%,28.844243872178236%)",
data: [
{
labels: ["2018-04-21T17:00:00", "2018-04-21T20:00:00", "2018-04-23T12:00:00", "2018-04-23T13:00:00"],
},
{
x: new Date("2018-04-21T17:00:00"),
y: 1
},
{
x: new Date("2018-04-21T20:00:00"),
y: 6
},
{
x: new Date("2018-04-23T12:00:00"),
y: 1
},
{
x: new Date("2018-04-23T13:00:00"),
y: 2
}
],
},
],
},
options: {
animation: {
duration: 0
},
title: {
display: false,
text: ''
},
legend: {
labels: {
useLineStyle: true
},
position: 'bottom',
},
scales: {
xAxes: [
{
type:'time',
distribution: 'series',
time: {
unit: 'day',
displayFormat: {
day: 'DD/MM/YYYY'
}
},
}
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
}
]
}
}
});
</script>
</body>
</html>
DEMO online:
I am not using x/y formatted datasets, so I kept looking. I ended up finding that inserting 'null' values solved my problem--the arrays can then be the same length, and not have drops to zero polluting the shapes.
However, note that this seems to not work with log scales on line graphs. Luckily, the only graphs I use uneven-length datasets on is probably best presented in linear form, but it is irritating.
Note also that you may want to utilize the { spanGaps: false } option.
I have a Highcharts chart which gets it's data from a JSON request.
function slowips(target){
var options = {
chart: {
renderTo: target,
type: 'spline',
borderColor: '#0072C6',
borderWidth: 3
},
title: {
text: 'Responsetime'
},
subtitle: {
text: 'Nr.1 is slowest'
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
yAxis: {
title: {
text: 'Milliseconds'
},
min: 0
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%Y'
},
labels: {
enabled: true,
},
minorTickLength: 0,
tickLength: 0,
},
plotOptions: {
spline: {
animation: false,
enableMouseTracking: false,
marker: {
enabled: false
}
}
},
series: [{}]
};
$.getJSON('graphs/test.php', function(data) {
options.series = data;
var chart = new Highcharts.Chart(options);
});
}
slowips();
This is an example JSON input:
[ { "name":"sddf", "data": [ ["2013-02-01 00:01:00", 2 ], ["2013-02-02 00:02:00", 2.55 ] ] } ]
Also tried:
[ { "name":"sddf", "data": [ [Date.UTC(12, 3, 09), 2 ], [Date.UTC(12, 3, 10), 2.55 ] ] } ]
The first JSON example renders a chart, but with incorrect X axis data. The second JSON does not render the chart.
Please help out!
You need to use timestamps, so when you load first JSON, then you need to parse it by Date.UTC() / Data.parse(), but functions cannot be places in json inside (as you have in second example).
when i runs the index.html i'm getting only a pie chart but with no color description .
can anyone please tell me how bring the color Symbol-outline like as shown below
my code is as given below
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Ext.chart.series.Pie Example</title>
<link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/>
<script src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script>
<script src="app.js"></script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
app.js
Ext.onReady(function() {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: [{
'name': 'metric one',
'data': 10
}, {
'name': 'metric two',
'data': 7
}, {
'name': 'metric three',
'data': 5
}, {
'name': 'metric four',
'data': 2
}, {
'name': 'metric five',
'data': 27
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample',
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
});
You forgot to add legend config
...
height: 350,
legend: {
position: 'right'
},
...
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store
UPD:
Ext.define('myStore', {
extend: 'Ext.data.Store',
model: 'myModel',
proxy: {
type: 'ajax',
api: {
read: '/urlhere'
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
}
}
});
expected data: {data: json array here, success: true/false, total: 123}
I'm trying to add 3 Y axis, so I'll have 1 Y axis for every data serie.
This is my JSON, which is valid:
[{"name":"data1","data":[[1361574000000,121201],[1362006000000,122019],[1363388400000,122788],[1363820400000,123740],[1364511600000,124703],[1365112800000,125618],[1365544800000,126553],[1366063200000,127496],[1366668000000,128500],[1367272800000,129433],[1368309600000,130277],[1368655200000,131267],[1369346400000,132191],[1369864800000,133143]]},{"name":"data2","data":[[1361574000000,0],[1362006000000,40.6],[1363388400000,35.7],[1363820400000,41.24],[1364511600000,40.56],[1365112800000,38.96],[1365544800000,39.8],[1366063200000,40.58],[1366668000000,40.79],[1367272800000,38.06],[1368309600000,37.95],[1368655200000,41.31],[1369346400000,40.16],[1369864800000,38.79]]},{"name":"data3","data":[[1361574000000,0],[1362006000000,1.46],[1363388400000,1.42],[1363820400000,1.42],[1364511600000,1.37],[1365112800000,1.41],[1365544800000,1.41],[1366063200000,1.35],[1366668000000,1.45],[1367272800000,1.36],[1368309600000,1.36],[1368655200000,1.36],[1369346400000,1.37],[1369864800000,1.359]]},{"name":"data4","data":[[1361574000000,0],[1362006000000,59.276],[1363388400000,50.694],[1363820400000,58.5608],[1364511600000,55.5672],[1365112800000,54.9336],[1365544800000,56.118],[1366063200000,54.783],[1366668000000,59.1455],[1367272800000,51.7616],[1368309600000,51.612],[1368655200000,56.1816],[1369346400000,55.0192],[1369864800000,52.71561]]}]
The JS code
$(function() {
$.getJSON('testdata.php', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
title : {
text : 'Temperature'
},
yAxis: [{
title: {
text: 'A'
}
}, {
title: {
text: 'B'
}
}, {
title: {
text: 'C'
}
}, {
title: {
text: 'D'
}
}],
series: [{
type: 'line',
name: 'data1',
data: data1,
yAxis: 1,
}
}, {
type: 'line',
name: 'data2',
yAxis: 2,
data: data2
}, {
type: 'line',
name: 'data3',
yAxis: 3,
data: data3
}, {
type: 'line',
name: 'data4',
yAxis: 4,
data: data4
}]
});
});
});
However, the chart won't load as soon as I add multiple Y axis. What am I doing wrong?
yAxis starts with 0, not with 1, so you are trying to set last series to non existing series.
[{
...
} ,{
type: 'line',
name: 'data4',
yAxis: 4, // max is 3
data: data4
}]
Second issue is to change options to proper format (mistaken by series name):
[{
...
} ,{
type: 'line',
name: 'data4',
yAxis: 3,
data: data[3].data //
}]
It finally works now! Thank you!!
Working code (combined with JSON already stated above):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('testdata.php', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
title : {
text : 'Temperature'
},
yAxis: [{
title: {
text: 'A'
}
}, {
title: {
text: 'B'
}
}, {
title: {
text: 'C'
}
}, {
title: {
text: 'D'
}
}],
series: [{
type: 'line',
name: 'data1',
yAxis: 0,
data: data[0].data,
}, {
type: 'line',
name: 'data2',
yAxis: 1,
data: data[1].data
}, {
type: 'line',
name: 'data3',
yAxis: 2,
data: data[2].data
}, {
type: 'line',
name: 'data4',
yAxis: 3,
data: data[3].data
}]
});
});
});
</script>
</head>
<body>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>