Im quite new at android and java. So not asking for definite answer just a right direction.
Site is using the highcharts, the thing Im getting is a highchart data.
http://webpage/javascript/city/newyork.js
new Highcharts.Chart({
chart: { renderTo: 'graph1' },
yAxis: { min: 0, max: 100 },
plotOptions: { line: { dataLabels: { y: 20 } } },
series: [{ data: [95,96,96,45,37,36,42,51,54,61,62,49,42,39,47,56,60,63,61,49,35,35,39,46,52] }]
});
new Highcharts.Chart({
chart: { renderTo: 'graph2', defaultSeriesType: 'column' },
yAxis: { min: 0, max: 3 },
plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } },
series: [{ data: [0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00] }]
});
new Highcharts.Chart({
chart: { renderTo: 'graph4' },
plotOptions: { line: { dataLabels: { formatter: function() { if(this.x != ' ') return this.y; } } } },
series: [{ data: [1015,1016,1018,1018,1017,1015,1015,1016,1017,1017,1018,1017,1015,1013,1012,1013,1011,1010,1011,1010,1008,1006,1007,1008,1009] }]
});
$(document).ready(
function($){
$('#sevendays > li').live(
'click hover',
function(){
$('#sevendays > li').removeClass('selected');
$(this).addClass('selected');
$('.day').hide();
$('#chosen-day > div:nth-child(' + ($(this).index() + 1) + ')').show();
}
);
$('#chonsen-city a').click(
function(){
icity = $(this).attr('rel');
$('#chosen-city').load('/ajax/chosen-city.php', {ig: icity});
return false;
}
);
});
The thing I need is to get array of the numbers for the graph1, graph2 & graph4 data so i can draw my own graphs. Most tutorials are about json parsing, but since this is not json format Im a bit lost.
Again, just the right direction, some readable material.
Thank you.
You can loop through the series of each chart and build an array of the y values:
http://jsfiddle.net/jlbriggs/JVNjs/298/
var data1 = new Array();
for(var i = 0; i < chart1.series[0].data.length;i++){
data1.push(chart1.series[0].data[i].y);
}
Related
I am working on jasper but i don't want to sort the data in the query as many other element of the report using the same query.
So i would like to sort it on the pie chart itself as example on this fiddle http://jsfiddle.net/highcharts/3bDMe/1/. How can it be done without button click? I meant as the chart load it automatically sort by slice value ascending.
$(function () {
$(document).ready(function () {
// Build the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 6.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 88.5],
['Opera', 26.2],
['Others', 30.7]
]
}]
});
$('#sort').click(function() {
chart.series[0].data.sort(function(a, b) {
return b.y - a.y;
});
var newData = {};
for (var i = 0; i < chart.series[0].data.length; i++) {
newData.x = i;
newData.y = chart.series[0].data[i].y;
newData.color = Highcharts.getOptions().colors[i];
chart.series[0].data[i].update(newData, false);
// Workaround:
chart.legend.colorizeItem(chart.series[0].data[i], chart.series[0].data[i].visible);
}
chart.redraw({ duration: 2000 });
});
});
});
In the load event you can create a new data array with sorted values and use setData method to apply changes:
chart: {
...,
events: {
load: function() {
var data = this.series[0].data,
newData = [];
data.forEach(function(point) {
newData.push({
y: point.y,
name: point.name
})
});
newData.sort(function(a, b) {
return a.y - b.y;
});
this.series[0].setData(newData);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6vzd8ak7/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData
I´m trying to display a timeline using Highchart, my problem is that when you put the mouse over one element of the series, it highlight and shows the tool-tip of other element of the same series. What I´m doing wrong?
You can see a http://jsfiddle.net/ncdysafk/
var chart;
var options = {
chart: {
events: {
load: function(){
this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
}
},
renderTo: 'container',
type: 'columnrange',
inverted: true,
zoomType: 'y'
},
title: {
text: 'Portes de hoy'
},
xAxis: {
categories: ["SERIE1","SERIE2","SERIE3"]
},
yAxis: {
type: 'datetime',
title: {
text: 'Horas del día'
}
},
plotOptions: {
series: {
stickyTracking: true,
events: {
click: function(evt) {
this.chart.myTooltip.refresh(evt.point, evt);
},
mouseOut: function() {
this.chart.myTooltip.hide();
}
}
},
columnrange: {
grouping: false
}
},
legend: {
enabled: true
},
series: [{"name":"SERIE2","data":[{"x":1,"low":1425538800000,"high":1425543300000},{"x":1,"low":1425567600000,"high":1425571200000},{"x":1,"low":1425584000000,"high":1425589100000}]},{"name":"SERIE3","data":[{"x":2,"low":1425538800000,"high":1425543300000},{"x":2,"low":1425567600000,"high":1425571200000}]}]
};
chart = new Highcharts.Chart(options);
This is bug in 4.1.3/2.1.3 version of Highcharts/Highstock. Bug reported is here. Already fixed, that means try https://github.highcharts.com/highstock.js and https://github.highcharts.com/highcharts-more.js files from master branch. Working demo http://jsfiddle.net/ncdysafk/1/
I am fairly new to Highcharts. I have a pie chart that is being rendered fine with dynamic data (JSON String) . But I want to customize certain slices to be Sliced: true and Selected: True. I am not sure how to do it. Please find my code as below,
<div id="container_${page_id}" style="min-width: 310px; height: 400px; margin: 0 auto;"></div>
var series = [];
var total = 0;
$.each(data, function(index, value) {
series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
console.log("statisticData",value.statisticData);
console.log("value.sizes",value.sizes);
total += parseInt(value.count);
});
var chartSessionStatus = new Highcharts.Chart({
chart: {
renderTo: $("#container_"+testSessionPageId).get(0),
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
exporting: {
enabled: true,
buttons: {
contextButton: {
menuItems: [{
text: 'Statistics',
}]
}}
},
tooltip: {
formatter: function() {
return this.point.name.split('_')[0] + ': <b>'+this.y+'</b>';
}
},
title: {
text: '<h4 style="font-style: bold">Tenant Statistics</h4>'
},
legend: {
labelFormatter: function() {
return this.name.split('_')[0] + ' (' + this.y+')';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
distance: 0,
useHTML: true,
formatter: function() {
if( this.y > 0)
return '<b>'+this.point.name.split('_')[0] +'('+ this.y +')</b>';
}
},
showInLegend: true,
size: 150
}
},
series: [{
type: 'pie',
name: 'Tenant Statistics',
data: series
}]
});
});
Main point of concern, in the series , I have the option for data as "data : series" but I would like to customize certain slices in this series. But since the data is dynamic I am not sure how to use only certain parts of the json string
The Json that i receive is in the following format :
[{"statisticData":"Tests Created","sizes":"3"},{"statisticData":"Students","sizes":"2"},{"statisticData":"Users","sizes":"7"},{"statisticData":"Schools","sizes":"10"}]
Any Help is greatly appreciated !!! Thanks in advance.
After getting json, you can parse it / add slice parameter and then use in highcharts. So instead of pushing :series.push([value.statisticData+'_'+value.sizes,parseInt(value.sizes)]);
you can push something like:
series.push({
name: value.statisticData+'_'+value.sizes,
y: parseInt(value.sizes),
sliced: true,
selected: true
});
HI all i am some data in a pie chart...on hover of slice i get the hover like this
[Hr Resources:x=Hr Resources,y=12]
i want my tooltip to show like this
[ProjectName=Hr,Logged Bugs=12]
how do i do this..here is how i am binding my data to the pie chart
<script type="text/javascript">
$(function () {
$.getJSON('<%= Url.Action("GetData","JqueryCharts") %>', {}, function (data) {
var json = data;
alert(json);
var jsondata = [];
for (var i in json) {
// var serie = new Array(json[i].Projects, json[i].Bugs);
jsondata.push([json[i].Projects, json[i].Bugs]);
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Resource Reports of BugTracker'
},
plotOptions: {
pie: {
showInLegend: true,
animation: false,
allowPointSelect: true,
cursor: 'pointer'
}
},
legend: {
enabled: true
},
series: [{
type: 'pie',
name: 'Resource Reports',
data: jsondata
}]
});
});
});
</script>
can any one help where i have to change this
By default, Highchart tooltip picks up, series name in the tooltip.
You can customize tooltip using:
tooltip: {
formatter: function() {
return '<b>ProjectName = '+ this.point.name +', Logged Bugs= '+ this.y + '</b>';
}
}
Here is the example
Highchart has a very good documentation at :http://api.highcharts.com/highcharts#tooltip
I have this code for a query in a file called querytojson.php:
if(!$query = #pg_query("SELECT AVG(\"UploadSpeed\") AS \"UploadSpeed\",
AVG(\"DownloadSpeed\") AS \"DownloadSpeed\",
AVG(\"Latency\") AS \"Latency\",
AVG(\"Jitter\") AS \"Jitter\",
AVG(\"PacketLoss\") AS \"PacketLoss\" FROM \"ZipPerformance\" "))
die("<br>Errore nella query: " . pg_last_error($query));
while($row = pg_fetch_assoc($query)){
// aggiungo all'array
$risultati[] = $row;
}
// stampo a video i risultati formattati secondo la sintassi di JSON
echo json_encode($risultati);
the json data is in this format:
[{"UploadSpeed":"0.342153197182936","DownloadSpeed":"4.35602301750153","Latency":"110.290067528565","Jitter":"0.0333323723888251","PacketLoss":"0.164373075044556"}]
Now I'd want to create a graph with Highcharts library like this, the file is called index1.html:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: 'HOBBIT'
},
tooltip: {
},
labels: {
html: 'index.html'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Velocità di connessione'
}
},
series: []
};
})
I'd want to pass json data directly to index.html.
I've done somthing similar to this. The way i did it was I created the chart in a sperate js file and just called the chart as a function passing in the JSON object as a variable. This is an example of one of my scripts in use on my site. In your case the labels and values are the same variable so the loop iteration is different, but the idea is still the same.
var chart;
function pieChart(id, values, labels, animate){
if (animate === undefined ){
animate = true;
}
var arrays = new Array();
for (i=0;i<values.length;i++) {
arrays[i] = [labels[i], values[i]];
}
chart = new Highcharts.Chart({
chart: {
renderTo: id,
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Event Occurrence',
style: {
color: '#000000'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
}
},
series: {
animation: animate
}
},
series: [{
type: 'pie',
name: 'Probability',
data: arrays
}]
});
}