I am using highcharts basic column type graph for displaying data in graphs in my vue app. But I am facing an issue that series.name doest show the name of the first value for data. Below is the code and the screenshot of the issue. Please help me find where I am going wrong.
I have added a debugger and displaying the response I am getting. Please check.
<script>
import {Chart} from 'highcharts-vue';
export default {
components: {
highcharts: Chart
},
data: function() {
return {
chartOptions: {
chart: {
type: 'column'
},
xAxis: {
categories: [],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Reporting'
}
},
legend: {
enabled: false
},
title: {
text: ''
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: '',
data: []
}]
}
}
},
created: function () {
this.fetchReports();
},
methods: {
fetchReports: function () {
var that = this;
url = '/my_views/reports.json'
this.$axios.get(url)
.then(response => {
that.chartOptions.xAxis.categories = response.data.dates;
that.chartOptions.series = response.data.series;
debugger
});
}
}
};
</script>
The data I am getting as response is as below:
response.data
=> {series: Array(3), dates: Array(4)}
response.data.series
{data: [0,2,1,0], name: "Wills"}
{data: [0,0,1,0], name: "Vicky"}
{data: [0,6,1,0], name: "Jamie"}
The issue here is that the in the series.name for pointFormat in tooltip appear as nil for the just the first value for rest the name show up just as in the picture below. Please help me find where I am going wrong.
Related
I've multiple charts in an ASP.NET MVC view page and using HighCharts to render data dynamically from controller to view. So simply am doing this in the controller:
public JsonResult GetDataFromDatabase()
{
return Json(aLst, JsonRequestBehavior.AllowGet);
}
In the view, doing something as follows:
<div id="containerDatabaseData">
</div>
Script:
var baseTopsideModuleDry = [];
var baseTopsideModulebaseOp = [];
function LoadDynamicData(data) {
//$('#containerDatabaseData').highcharts().destroy();
if (data && data != null) {
for (var i = 0; i < data.length; i++) {
baseTopsideModuleDry.push(data[i].BaseDry);
baseTopsideModulebaseOp.push(data[i].BaseOp);
}
console.log("New Dataset " + baseTopsideModuleDry);
console.log("New Dataset" + baseTopsideModulebaseOp);
Highcharts.chart('containerDatabaseData', {
chart: {
type: 'column'
},
title: {
text: '#ViewBag.ProductName By Disciplines'
},
subtitle: {
text: ''
},
xAxis: {
categories: [
'Structural Primary',
'Structural Secondary',
'Mechanical',
'Piping',
'Electrical',
'Instrument',
'Telecommunication',
'Safety',
'Architectural ',
'Other/ Future Load ',
'Live Load'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Weight Data'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0,
borderWidth: 0
}
},
series: [
{
name: 'Dry',
data: baseTopsideModuleDry
}, {
name: 'Operating',
data: baseTopsideModulebaseOp
}]
});
}
}
But in some cases, I got this exception in the inspect element: Highcharts error #13, though I can understand the exception. But this occurs in some cases, not every time when I add or edit data in the front-end. Is there any appropriate workaround on this? Here are the screenshots that I encountered:
Error 1
Error 2
I have tried several times using other examples available but still no luck
here's the code https://jsfiddle.net/mrbfqay6/
P.S: you just need to add a random amount in first input field and then click submit to generate graph. Thanks
function renderChart(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
marginRight: 20,
events: {
load: function() {
// nothing to do here right now
}
}
},
title: {
text: 'Some random data'
},
xAxis: {
tickPixelInterval: 50
},
yAxis: {
title: {
text: 'Value'
}
},
exporting: {"enabled":true},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: true
},
exporting: {
enabled: false
}, plotOptions: {
column: {
stacking: 'normal',
}
},
series: [{
name: ' Amortization',
data:amort_data,
}
,{
name: 'Saving',
data: wow_saving,
stack:'wow'
},
{
name: 'Financing',
data: lease_data,
stack: 'wow'
}
]
});
}
You have defined options for exporting twice:
chart = Highcharts.chart({
exporting: {
"enabled": true
},
...,
exporting: {
enabled: false
},
...
});
Which results in disabled exporting. You just need to enable it.
Live demo: https://jsfiddle.net/BlackLabel/na5rc2s9/
API Reference: https://api.highcharts.com/highcharts/exporting.enabled
in my code im trying to display all the enrolled students per year and i want to summarize them all in 1 column per year.
is there anyway to add filter or most likely in the code itselft to combine all the data per year?
var strCampus = "ORT";
$(function() {
$.getJSON("http://localhost:37590/Get_OGSData/" + strCampus, function(data) {
console.log(data);
Highcharts.chart('container', {
chart: {
type: 'column'
},
rangeSelector: {
selected: 1
},
title: {
text: 'On Going Students per Year'
},
subtitle: {
text: 'Click each column to see details'
},
xAxis: {
type: 'category',
categories: data.map(function(x) {
return x.YEAR;
})
},
yAxis: {
title: {
text: 'On Going Students'
}
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
//format: '{point.y:.1f}'
}
}
},
tooltip: {
enabled: false,
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:2f}</b> of total<br/>'
},
series: [{
colorByPoint: true,
data: data.map(function(x) {
return x.OGS * 1;
})
}]
});
});
});
i want to combine all the data per year in 1 column
You can use dataGrouping with options below:
dataGrouping: {
approximation: 'sum',
forced: true,
units: [
['year', [1]]
]
}
Live demo: http://jsfiddle.net/BlackLabel/me3Lzur6/
API reference: https://api.highcharts.com/highstock/series.column.dataGrouping
I am using HighCharts to make a graph with columns, drilldown series and scatter. The problem which I am having, is that the HighChart is created before the $.getJSON function is succesfully exicited. I have found several other articles, but non yet where two $.getJSON functions are called. The code which I am using:
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container_genomefraction',
type: 'column',
events: {
// Declare the events changing when the drilldown is activated
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
},
title: {text : "Gbp"}
}, false, false);
options.seriesOptions.dataLabels = {
format: '{point.y:.1f}'
};
options.seriesOptions.tooltip = {
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b> of total<br/>'
};
},
// Declare the events changing when the drillup is activated
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
},
title: {text : "Percentages"}
}, false, false);
}
}
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: [{
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},{
min: 0,
title :{
text : 'input'
},
labels: {
format : '{value}'
},
opposite: true
}],
legend: {
enabled: false
},
plotOptions: {
series: {
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: null, // inherit from series
size : 50
},
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
// Declare an empty series
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
// Declare an empty drilldown series
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
// Your $.getJSON() request is now synchronous...
$.ajaxSetup({
async: false
});
// Get the input into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
// Get the drilldown estimated and total size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
$.ajaxSetup({
async: true
});
});
My JSONs are formatted:
fraction.json
[{"name":"1","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3}]},{"name":"input","dataLabels":"{enabled,false}","yAxis":1,"type":"scatter","data":[{"y":38,"name":1,"drilldown":1},{"y":"","name":2,"drilldown":2},{"y":27,"name":3,"drilldown":3}],"tooltip":{"headerFormat":"<span style='font-size:11px'>{series.name}<\/span><br>","pointFormat":"<span style='color:{point.color}'>{point.name}<\/span>: <b>{point.y}<\/b><br\/>"}}]
drilldown.json
[{"name":1,"id":1,"data":[["Total",2],["Estimated",2.5]]},{"name":2,"id":2,"data":[["Total",3.9],["Estimated",4.5]]},{"name":3,"id":3,"data":[["Total",3.7],["Estimated",3.5]]}]
When the page is loaded, the graph displays the values of the previous search done and when I reload the page, the correct data is shown. Could someone please help me out?
Add the second getJSON method in the first getJSON success callback like this:
//Get the genome fraction into one series
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
//Get the drilldown estimated and total genome size into one series
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});
well im with a problem with a Highchart Graphic. This one -> http://www.highcharts.com/demo/column-basic
I have a database with a table call "Days" and "Works" and i want to put the days that i have in the "categories []" and the work in series[];
BUT
i dont know how my JSON need to be, or the best way to do it is with a JS array
I tried this way:
js_array = new Array(<?php echo implode(',', $array1); ?>);
xAxis: {
categories: js_array,
crosshair: true
},
or just categories:<?php echo json_encode($array1);?>
but dont succeed.
can you help me?
I do this using asp.net (MVC5), but I think is the same idea for php, hope it helps.
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: "Client's downloads"
},
subtitle: {
text: 'Click the columns to view products.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total downloads'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
},
series: [{
name: "Downloads",
colorByPoint: true,
data: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text> #item.Name <text>",</text>
<text>y: </text> #item.Downloads <text>,</text>
<text>drilldown: "</text>#item.Name<text>"},</text>
}
]
}],
drilldown: {
series: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text>#item.Name<text>",</text>
<text>id: "</text>#item.Name<text>",</text>
<text>data: [</text>
foreach (var download in item.ProductDownloads)
{
<text>["</text> #download.Product <text>", </text> #download.Downloads <text>],</text>
}
<text>]</text>
<text>},</text>
}
]
}
});
});
</script>