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>
Related
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'm currently creating a system that produces different kind of graphs. I want to create a chart and table, that when a chart is DRILLDOWNED, the table will sync as well. Is there a way to output the current data presented by HighCharts to JSON? Then this JSON will be inputted into a datatable? Thanks!
check this JsFiddle Demo
You can obtain the id by e.seriesOptions.id which is the key to your data. Then you can use this id as the key to get appropriate data and update your data table from within the drillUp and drillDown events.
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JS
$(function() {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drillup: function(e) {
//alert('drill Up');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
},
drilldown: function(e) {
//alert('drill Down');
console.log(this);
console.log(e.seriesOptions.id);
console.log(this.options.series[0].name);
console.log(this.options.series[0].data[0].name);
}
}
},
title: {
text: 'DrillUp button styling'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Dieren',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruit',
y: 2,
drilldown: 'fruits'
}, {
name: "Auto's",
y: 4
}]
}],
drilldown: {
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 0,
x: 0
},
theme: {
fill: 'white',
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
},
series: [{
id: 'animals',
data: [
['Katten', 4],
['Honden', 2],
['Koeien', 1],
['Schapen', 2],
['Varkens', 1]
]
}, {
id: 'fruits',
data: [
['Appels', 4],
['Sinaasappels', 2]
]
}]
}
})
});
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>
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 am new to Scencha. I am using a bar chart example of Scencha charts. I could not change colors of the charts, it comes by default. Where can I change the color in the following code? How can I transpose bar chart also, it comes as left to right?
var barChart = new Ext.chart.Panel({
title: 'Bar Chart',
layout: 'fit',
iconCls: 'bar',
dockedItems: {
iconCls: 'shuffle',
iconMask: true,
ui: 'plain',
handler: onRefreshTap1
},
items: [{
xtype: 'chart',
cls: 'barcombo1',
theme: 'Demo',
store: store1,
animate: true,
shadow: false,
legend: {
position: {
portrait: 'right',
landscape: 'top'
}
},
interactions: [
'reset',
'togglestacked',
{
type: 'panzoom',
axes: {
left: {}
}
},
{
type: 'iteminfo',
gesture: 'taphold',
panel: {
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Details'
}],
html: 'Testing'
},
listeners: {
'show': function(me, item, panel) {
var storeItem = item.storeItem;
// panel.update('<ul><li><b>Month:</b> ' + storeItem.get('name') + '</li><li><b>Value: </b> ' + storeItem.get('2008') + '</li></ul>');
}
}
},
{
type: 'itemcompare',
offset: {
x: -10
},
listeners: {
'show': function(interaction) {
var val1 = interaction.item1.value,
val2 = interaction.item2.value;
barChart.descriptionPanel.setTitle('Trend from ' + val1[0] + ' to ' + val2[0] + ' : ' + Math.round((val2[1] - val1[1]) / val1[1] * 100) + '%');
barChart.headerPanel.setActiveItem(1, {
type: 'slide',
direction: 'left'
});
},
'hide': function() {
barChart.headerPanel.setActiveItem(0, {
type: 'slide',
direction: 'right'
});
}
}
}],
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['TY', 'LY'],
label: {
renderer: function(v) {
return v.toFixed(0);
}
},
title: 'Hits (Billions)',
minimum: 0
},
{
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Weeks'
}],
series: [{
type: 'bar',
label: {
Field:'TY'
},
xField: 'name',
yField: ['TY', 'LY'],
axis: 'bottom',
highlight: true,
showInLegend: true
}]
}]
});
Change the type 'bar' to 'column' in the following snippet:
series: [{
type: 'bar',
label: {
Field:'TY'
},