highchart csv export in gauge option gives first calumn with value 0 - csv

var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#FADCB5',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
csv:{
columnHeaderFormatter:function(item, key, series){
if(key === 'y'){
return 'Total Stock (%)';
}else if(key === '' || key === undefined){
return 'Micromarket';
}
}
},
buttons:{
contextButton:{
menuItems: [{
textKey: 'downloadCSV',
onclick: function (){
this.downloadCSV();
}
}]
}
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#F2A23C'], // orange
[0.5, '#F2A23C'],
[0.9, '#F2A23C']
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
},
}
}
};
// The speed gauge
$('#container').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: ''
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [18.41],
includeInCSVExport:false,
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{}</span><br/>' +
'<span style="font-size:12px;color:silver"></span></div>'
},
tooltip: {
valueSuffix: ' %'
}
},{
name: 'Foo',
type: 'gauge',
data: [18.41]
}]
}));
// Bring life to the dials
setInterval(function () {
// Speed
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if(chart){
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if(newVal < 0 || newVal > 100){
newVal = point.y - inc;
}
point.update(newVal);
point = chart.series[1].points[0];
point.update(newVal);
}
}, 2000);
Hi
There is issue with my csv export for gauge chart.
when I export a chart as a csv it downloades the chart as first column with value 0.
Is there any way to avoid that and get only one column for gauge type charts.
currently my csv contains data like below after downloading :
e.g. Micromarket | total stock (%)
0 | 18.41
But i want data should be like this after download :
e.g. total stock (%)
18.41
Please refer my below JS fiddle link for reference.
https://jsfiddle.net/pc9ggjm4/1/

Related

Highcharts - how change JSON to csv

I have a small problem...
$(function () {
$.get('../../../abc-test.csv', function(data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
$('#test').highcharts({
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
data: {
csv: data
//csv: document.getElementById('csv').innerHTML
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
abc-test.csv:
Date,Open,High,Low,Close,Volume
2013-12-20,9371.08,9413.09,9352.98,9400.18,161686900
2013-12-19,9279.68,9351.9,9257.24,9335.74,98276500
2013-12-18,9145.35,9190.73,9122.05,9181.75,82342700
2013-12-17,9142.75,9161.8,9085.12,9085.12,72207500
2013-12-16,9004.62,9187.78,8997.75,9163.56,99105600
2013-12-13,9016.78,9046.63,8990.58,9006.46,67761700
2013-12-12,9032.67,9060.54,8984.28,9017,75120200
2013-12-11,9093.26,9153.14,9065.51,9077.11,64845800
2013-12-10,9180.29,9223.73,9091.97,9114.44,74363400
Why this code dont't work ?
Don't work:
- Two panes, candlestick and volume
- OHLC
- 1.7 million points with async loading...
The issue is in the "date" in csv or something else ... ?

Highcharts bargraph from json data in angularJS

I have a highcharts bargraph whose values are received from json whose format is as follows:
"bargraph":
[
{
"categories": "['S', 'M', 'T', 'W', 'T', 'F']",
"series1": "[800, 1100, 80, 1800, 1600, 2000]",
"series2": "[800, 1100, 80, 1800, 1200, 800]"
}
]
How can i embed those values for my bargraph in angularJS
HTML Code:
<div id="bargraph" bargraph={{bargraph}}><\div>
Directive:
angular.module('example').directive('bargraph', function () {
element.highcharts({
xAxis: [
{
categories: [] //embed categories value here
},
series: [
{
name: 'series1',
data: [] //Embed series1 data here
},
{
name: 'series2',
data: [] //Embed series2 data here
}
]
})
})
Please provide a suitable way to embed the data from json.
Here is a directive i copied and pasted from my webapp it is how i render highcharts using a directive NOTE: not all of this directive is applicable to you and some of it is specific to what i needed but you get the idea.
lrApp.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
transclude: true,
replace: true,
link: function (scope, element, attrs) {
var chart = null;
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null,
},
colors: scope.$eval(attrs.colors) || null,
title: {
style: {
display: 'none'
}
},
xAxis: {
//categories: ['{"-7 days"|date_format}','{"-6 days"|date_format}','{"-5 days"|date_format}','{"-4 days"|date_format}', '{"-3 days"|date_format}', '{"-2 days"|date_format}', '{"-1 day"|date_format}', '{$smarty.now|date_format}'],
categories: scope.$eval(attrs.dates) || null,
gridLineDashStyle: 'ShortDot',
gridLineColor: "#C0C0C0",
gridLineWidth: 1,
labels: {
y: 27
}
},
yAxis: {
title: {
text: null
},
min: 0,
gridLineDashStyle: 'ShortDot',
gridLineColor: "#C0C0C0",
gridLineWidth: 1
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
shadow: false,
lineWidth: 3
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y + '</b>';
}
}
};
//Update when charts data changes
scope.$watch(attrs.value, function (newVal, oldVal) {
if (!newVal.length) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var deepCopy = true;
var newSettings = {};
chartsDefaults.series = newVal;
chartsDefaults.colors = scope.$eval(attrs.colors);
chartsDefaults.xAxis.categories = scope.$eval(attrs.dates);
console.log(chartsDefaults);
chart = new Highcharts.Chart(chartsDefaults);
});
}
}
});
and this is how it used it obviously you would change "line" to bar:
<chart value="stats.sets" dates="stats.days" colors="stats.colors" type="line"></chart>

Multiple series from JSON Highstock

I have a problem with my HighStock, I need another series from JSON.
My code in get_json.php
include('config.php');
$cp = $_REQUEST["c_prot"];
$r=("SELECT * FROM data WHERE cp='$cp'");
$result=mysql_query($r);
while($row = mysql_fetch_array($result)){
$date= strtotime($row['cas'])*1000; // timestamp
$values=hexdec($row['data']); // series1
$val=hexdec($row['src']); // series2
$array[]=array($date, $values,$val); //output array
}
echo json_encode($array);
JSON output is in correct format: [1364852734000, 557, 2884],....
But problem is, that I didn't find how to add second series from JSON to Highstock code
I would like to display in chart x-axis: timestamp
y-axis: series1->data
series2->src
chart now displays only on x-axis timestamp and on y-axis data...but series2 doesn't work:/
High Stock code:
<script>
$(function () {
$.getJSON('http://localhost/vojto/get_json.php?c_prot=<?=$_REQUEST['
c_prot '];?>', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
chart: { //zooming
zoomType: 'x',
height: 400,
},
legend: { //legenda
enabled: true,
align: 'left',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 1,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
rangeSelector: { //range selector
buttonTheme: {
width: 40,
},
buttonSpacing: 3, //mezera mezi buttony
enabled: true,
buttons: [{
type: 'minute',
count: 60,
text: 'Hour'
}, {
type: 'day',
count: 1,
text: 'Day'
}, {
type: 'week',
count: 1,
text: 'Week'
}, {
type: 'all',
text: 'Reset'
}]
},
title: { //title grafu
text: 'Chart'
},
series: [{ //serie
name: 'Data',
data: data,
color: '#57c72f',
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}],
xAxis: { // X-osa
type: 'datetime',
title: {
text: 'Date/time axis',
},
minRange: 600000,
},
yAxis: {
min: 0,
},
navigator: {
series: {
color: '#57c72f',
fillOpacity: 0.3,
}
},
credits: {
enabled: false
},
tooltip: { // formátování hodnot po najetí kurzoru... hover
formatter: function () {
var s = '<b>' + Highcharts.dateFormat('DateTime ' + '%d-%m-%y ' + '%H:%M:%S', this.x) + '</b>';
$.each(this.points, function (i, point) {
s += '<br/>Data value : ' + point.y;
});
/* formát 23-04-13 09:34:27 */
return s;
}
},
});
});
});
</script>
In you script:
$array = [];
while($row = mysql_fetch_array($result)){
$date= strtotime($row['cas'])*1000; // timestamp
$values=hexdec($row['data']); // series1
$val=hexdec($row['src']); // series2
$array[0][]=array($date, $values); //output array
$array[1][]=array($date ,$val);
}
You need paste values to appropriate series index. In other words you can prepare your $array() and add point to one of series. To be honest I have no data so It is only concept.

highcharts correct json input

UPDTAED:Now with the below code, the json is parsing correctly ,
But the columns are not displayed on the initial load, if i put the cursor over i can see the tooltip displaying the series name and value. However, if i re-size the browser window the columns appear. i tried adding chart.redraw(); after the updatedChart(); but it dosent help my div is as below
<div id="container" style="min-width: 400px ; height: 650; margin:0 auto"></div>
Any ideas please? Also, i cannot re-produce this problem on jsfiddle and have tested this on safari,chrome and firefox (all showing this strange behavior)
var chart;
options = {
chart: {
renderTo: 'container',
type: 'column',
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series:
[]
};
$(document).ready(function() {
chart= new Highcharts.Chart(options)
console.log("calling update chart");
updateChart();
});
function updateChart() {
$.ajax({
type: "GET",
url: "test.json",
async: false,
dataType: "json",
success: function(data){
console.log(data);
var i=0;
$.each(data,function(index,item){
console.log(data.Chart1[index]);
console.log("i value is "+i);
chart.addSeries(data.Chart1[index]);
i++;
});
}
});
}
}
my json input file is below
[
{
name: 'name1',
y: [32.6,16.6,1.5]
}, {
name: 'name2',
y: [6.7,0.2,0.6]
}, {
name: 'name3',
y: [1,3.7,0.7]
}, {
name: 'name4',
y: [20.3,8.8,9.5]
},{
name: 'name5',
y: [21.5,10,7.2]
}, {
name: 'name6',
y: [1.4,1.8,3.7]
}, {
name: 'name7',
y: [8.1,0,0]
}, {
name: 'name8',
y: [28.9,8.9,6.6]
}
]
Edited:
var chart = null,
options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Some title'
},
subtitle: {
text: 'subtitle'
},
xAxis: {
categories: [],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'y-Axis',
align: 'high'
}
},
tooltip: {
formatter: function() {
return '' + this.series.name + ': ' + this.y + ' ';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: []
};
$(document).ready(function() {
updateChart();
});
function updateChart() {
$.getJSON('test.json', function(data) {
// check if the chart's already rendered
if (!chart) {
// if it's not rendered you have to update your options
options.series = data;
chart = new Highcharts.Chart(options);
} else {
// if it's rendered you have to update dinamically
jQuery.each(data, function(seriePos, serie) {
chart.series[seriePos].setData(serie, false);
});
chart.redraw();
}
});
}
Fiddle: LINK

Add multiple series from json file to highcharts

Please help,
I have only known about highcharts, Json and Jquery for 5 days. I have a Json file with info about 3 sets of results. I am trying to put 3 different lines on a highcharts chart. I do not know the syntax for this. i know that calling the options object allows you to add series and categories. I do not know the syntax to accomplish this
Here is the code so far:
var chart;
var eng_data;
var data;
var options, series;
$(document).ready(function () {
options = {
chart: {
renderTo: 'container',
zoomType: 'x',
spacingRight: 20
// events: { load: requestData }
},
title: {
text: null
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Drag your finger over the plot to zoom in'
},
xAxis: {
type: 'datetime',
maxZoom: 7 * 24 * 3600000, // 7 days
title: {
text: null
}
},
yAxis: {
title: {
text: 'Percentages'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
area: {
fillColor: {
linearGradient: [0, 0, 0, 300],
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(2,0,0,0)']
]
},
lineWidth: 1,
marker: {
enabled: false,
states: {
hover: {
enabled: true,
radius: 2
}
}
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
}
}
},
series: []
};
});
$.getJSON('eng.txt', function (eng_data) {
for (var i = 0; i < eng_data.length; i++) {
series = {
data: []
};
if (i == 1 && i <= 4) {
// options.addSeries({
data: eng_data[i];
name: "English";
pointInterval: 72 * 3600 * 1000;
pointStart: Date.UTC(2012, 0, 01)
// });
}
if (i == 5 && i <= 8) {
// options.addSeries({
data: eng_data[i];
name: "Maths";
pointInterval: 72 * 3600 * 1000;
pointStart: Date.UTC(2012, 0, 02)
// });
}
if (i == 9 && i <= 12) {
// options.addSeries({
data: eng_data[i];
name: "Science";
pointInterval: 72 * 3600 * 1000;
pointStart: Date.UTC(2012, 0, 03)
// });
}
options.series.push(series);
var chart = new Highcharts.Chart(options);
}
});