I am reading a json file
http://www.megafileupload.com/dq4u/data.json
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/highchart.js"></script>
<script>
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'heatmap'
},
title: {
text: 'pairwise LD'
},
xAxis: {
categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
plotOptions:{
series:{
turboThreshold: 0
}
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
But there is no output while when i paste the same values in the code i can see the output. Pls help me how can i fix this issue?
In you chart you use heatmap which is not build-in highstock core, so you need add a reference to http://code.highcharts.com/modules/heatmap.js.
I advice you to run a console (https://developer.chrome.com/devtools/docs/console), where all errors are returned with description, then you avoid a problems like above.
Related
I am trying to render google geochart inside partial view in mvc4 but it's showing reference error:
"google is not defined"
but in simple view it's rendering fine.below is step to render my geochat.i don't know what i am doing wrong or should fellow other step to render google geochat.
my partial view(_mymap.cshtml)
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<div id='visualization'></div>
<script type='text/javascript'>
function initialize() {
google.load('visualization', '1', { 'packages': ['geochart'] });
google.setOnLoadCallback(drawVisualization);
}
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addColumn({ type: 'string', role: 'tooltip' }); var ivalue = new Array();
data.addRows([[{ v: '002', f: 'Africa' }, 0, 'Click to Choose']]);
ivalue['002'] = 'http://en.wikipedia.org/wiki/Africa';
data.addRows([[{ v: '150', f: 'Europe' }, 1, 'Click to Choose']]);
ivalue['150'] = 'http://en.wikipedia.org/wiki/Europe';
data.addRows([[{ v: '019', f: 'Americas' }, 2, 'Click to Choose']]);
ivalue['019'] = 'http://en.wikipedia.org/wiki/Americas';
data.addRows([[{ v: '142', f: 'Asia' }, 3, 'Click to Choose']]);
ivalue['142'] = 'http://en.wikipedia.org/wiki/Asia';
data.addRows([[{ v: '009', f: 'Australia' }, 4, 'Click to Choose']]);
ivalue['009'] = 'http://en.wikipedia.org/wiki/Oceania';
var options = {
backgroundColor: { fill: '#FFFFFF', stroke: '#FFFFFF', strokeWidth: 0 },
colorAxis: { minValue: 0, maxValue: 4, colors: ['#A8A8A8', '#939473', '#B1B38B', '#90AD89', '#87AAAD', ] },
legend: 'none',
backgroundColor: { fill: '#FFFFFF', stroke: '#FFFFFF', strokeWidth: 0 },
datalessRegionColor: '#f5f5f5',
displayMode: 'regions',
enableRegionInteractivity: 'true',
resolution: 'continents',
sizeAxis: { minValue: 1, maxValue: 1, minSize: 10, maxSize: 10 },
region: 'world',
keepAspectRatio: true,
width: 600,
height: 400,
tooltip: { textStyle: { color: '#444444' }, trigger: 'focus' }
};
var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
//append_to_list(data.getValue(selection[0].row, 0));
});
chart.draw(data, options);
}
$(document).ready(function () {initialize();});
</script>
drawVisualization function is missing closing brace inside script tag. You have closed it after the end script tag in your code.
$(document).ready(function () {initialize();});
</script>
} //this brace need to be inside script tag
The loader uses document.write to inject JS and CSS, this can't be done after the document has finished loading(what is the case here, because you call initialize on domready)
define the callback in the call of google.load and not via setOnLoadCallback
function initialize() {
google.load('visualization',
'1',
{ 'packages': ['geochart'] , callback: drawVisualization});
}
I am new to Highcharts and i like it.I am trying to create a line graph over column graph.but i make only column graph [link]http://jsfiddle.net/sunman/S9ChJ/
But here is my problem is i could not create a line graph upon column chart .so please tell me how it is possible.i have already searched for this and in that code i want change for line graph. so please help me
Here this code i am trying .but not shows me any graph
$(function () {
var chart;
$(document).ready(function() {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Project faclityv Rating'
},
subtitle: {
text: 'testing'
},
xAxis: [{
categories: [A,B,C,D,E]
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value} Rs.',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Bsp Cost',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'facility rating',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
//format: '{value} out of 100',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
},
series: [{
name: 'Facility Rating',
type: 'column',
yAxis: 1,
data: [10,15,20,25,30],
tooltip: {
valueSuffix: ' out of 100'
}
}, {
name: 'Bsp Cost',
type: 'spline',
data: [5,10,15,20,25],
tooltip: {
valueSuffix: 'Rs.'
}
}]
});
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0].data = json[1]['data'];
options.series[1].data = json[1]['data'];
chart = new Highcharts.Chart(options);
});
});
});
here is data.php
$query = mysql_query("SELECT projects_detail.Project_name,facility_rating.facilities_total,cost.bsp
FROM projects_detail LEFT OUTER JOIN facility_rating
ON projects_detail.project_id= facility_rating.project_id
LEFT OUTER JOIN cost ON facility_rating.project_id = cost.project_id");
$category = array();
$category['name'] = 'Project';
$series1 = array();
$series1['name'] = 'Facilities Rating';
$series2 = array();
$series2['name'] = 'BSP values';
while($r = mysql_fetch_array($query)) {
$category['data'][] = $r['Project_name'];
$series1['data'][] = $r['facilities_total'];
$series2['data'][] = $r['bsp'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
array_push($result,$series2);
print json_encode($result, JSON_NUMERIC_CHECK);
You need to add extra line serie.
json = [{
data: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l']
}, {
data: [1, 2, 3, 1, 2, 3, 4, 1, 3, 3, 3, 3, 3, 3, 5, 1]
}];
options.xAxis.categories = json[0]['data'];
options.series[0].data = json[1]['data'];
options.series[1].data = json[1]['data'];
http://jsfiddle.net/S9ChJ/1/
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 have problem with items order in legend, when I using Google Chrome browser and when I have more than 10 items. In all other browsers items are displayed in appropriate order, but in Chrome - not.
version: Highcharts JS v2.1.6 (2011-07-08)
Chrome versions: 19.0.1084.56 and 20.0.1132.47
The chart looks like below:
Please see following code:
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
</head>
<body>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
plotOptions: {
pie: {
size: '80%',
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false,
color: '#000000',
connectorColor: '#000000',
distance: 10
},
showInLegend: true
}
},
legend: {
itemWidth: 100
},
series: [{
type: 'pie',
data: [
['label1', 10],
['label2', 20],
['label3', 30],
['label4', 40],
['label5', 155.89],
['label6', 50],
['label7', 60],
['label8', 70],
['label9', 80],
['label10', 90],
['label11', 65.70],
['label12', 100],
]
}]
});
});
</script>
<div id="chart" style="width: 460px; height: 290px; margin: 0 auto">
</div>
</body>
</html>
Solution: update highcharts library to 2.2.5.