I've been reading through the documentation and googling for hours and have not made any progress on finding these categories. I am building the grapg.
var udsChart; //global UDS chart variable
function requestData() {
$.ajax({
url: 'getJsonData.aspx?ID=udsLevel1',
success: function (point) {
udsChart.series[0].setData(point, true);
setTimeout(requestData, 1000);
},
cache: false
});
}
udsChart = new Highcharts.Chart({
chart: {
renderTo: 'udsGraphDiv',
defaultSeriesType: 'column',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
text: 'xAxis'
},
yAxis: {
text: 'yAxis'
},
series: [{
name: 'Random data',
data: []
}]
});
Either your categories should fixed and you can setData via setData function with array of values. But if categories also changing , try this
success: function (data) {
var categories= [];
var seriesData = [];
$.each(data,function(item){
categories.push(item[0]);
seriesData.push(item[1]);
});
udsChart.xAxis[0].setCategories(categories); //setting category
udsChart.series[0].setData(seriesData , true); //setting data
setTimeout(requestData, 1000);
}
You just need to set xAxis category property.
Here is an example.
var data = [["01/22/2016",108],["01/24/2016",45],["01/25/2016",261],
["01/26/2016",224],["01/27/2016",307],["01/28/2016",64]];
var cat = [];
data.forEach(function(item) {
cat.push(item[0]);
});
udsChart = new Highcharts.Chart({
chart: {
renderTo: 'udsGraphDiv',
defaultSeriesType: 'column',
events: {
//load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
text: 'xAxis',
categories: cat
},
yAxis: {
text: 'yAxis'
},
series: [{
name: 'Random data',
data: data
}]
});
You are missing simple property: xAxis.type. Set it to category and will work, like this:
xAxis: {
text: 'xAxis',
type: 'category'
},
Try this one
udsChart.xAxis["categories"] = ['a','b','c']
Related
I'm fairly new to Highcharts. We were previously using Logi Analytics, which did
a lot of stuff in the background that we had no control over. Now that were trying to re-create the same charts, were running into issues on how to do some of these things. I am trying to use the same data set for multiple series elements. For example, I will have a column chart, then a line chart on top of it. If it helps, I keep this code in a .ts file and compile into JS to deploy. Here's what I currently have that works:
let myChart = Highcharts.chart('container', {
chart: {
type: 'column'
},
plotOptions: {
series: {
events: {
//do something
}
}
},
title: {
text: 'My Title'
},
xAxis: {
categories: dataCategories
},
yAxis: {
title: {
text: 'Percentages'
}
},
series: [
{
name: 'Data Table',
data: data,
cursor: 'pointer'
}
]
});
My data is embedded with Java. Example of data:
let data =
[
{
'location': 'someplace',
'dept': '999',
'deptDescription': '999 DEPT',
'code': '',
'name': 'NO NAME',
'hours1': 32.5,
'hours2': 4.7,
'hours3': 0.0,
'hours4': 0.0
}
];
How I set my yAxis and categories:
for (let row of data) {
row.y = row.hours1;
dataCategories.push(row.deptDescription);
}
I want to use the same data because I have the same x axis and my data contains the new y axis as well. Possibly something like this:
series: [
{
type: 'column'
name: 'Data Table',
data: data,
cursor: 'pointer'
},
{
type: 'line',
name: 'Data Table2',
data: data,
cursor: 'pointer'
}
]
I want to use HighCharts because of the zoom function! Everything works great. There is one thing which I would like differently, but I can't seem to get it to work... My code:
http://jsfiddle.net/ma50685a/16/
$(function() {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
series: {
type: 'column'
}
},
title: {
text: 'Overview of veggies'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Sarah',
data: [2,2,3,0,8]
}, {
name: 'Ben',
data: [6,0,0,13,2]
}, {
name: 'Kiki',
data: [3,5,1,16,3]
}, {
name: 'Anna',
data: [0,5,1,3,2]
}],
credits: {
enabled: false
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
}
});
});
On the x-axis I would like to display the categories! Is this possible because now it shows date?
As was mentioned, a stockchart works with datetime axis, but you can use a normal chart with a navigator enabled.
window.chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: true,
series: {
type: 'column'
}
},
example: http://jsfiddle.net/ma50685a/26/
Navigator axis is still datetime, though. But I think mocking the datetime axis to look as the category is achievable.
Optionally, you can implement a master-detail chart.
http://www.highcharts.com/demo/dynamic-master-detail
Not very elegant but i think this is what you want :
http://jsfiddle.net/ma50685a/23/
$(function() {
// Create the chart
var categoriesCptChart = 0;
var categoriesCptStock = 0;
var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'];
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
type: 'column'
},
rangeSelector: {
enabled: false
},
navigator: {
series: {
type: 'column'
},
xAxis: {
labels: {
formatter: function() { return categories[categoriesCptStock++ % categories.length]}
}
}
},
title: {
text: 'Overview of veggies'
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'Sarah',
data: [2,2,3,0,8]
}, {
name: 'Ben',
data: [6,0,0,13,2]
}, {
name: 'Kiki',
data: [3,5,1,16,3]
}, {
name: 'Anna',
data: [0,5,1,3,2]
}],
credits: {
enabled: false
},
xAxis: {
labels: {
formatter: function() { return categories[categoriesCptChart++ % categories.length]}
}
}
});
});
I am using HighCharts to visualize percentages from projects, which are downdrilled into variables which make the percentages!
I will give my code :
$(function () {
// Create the chart
var options = {
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Comparison'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
enabled: true,
text: 'Percentages',
style: {
fontWeight: 'normal'
}
},
labels: {
format: '{value}%'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
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/>'
},
series: [{
name: '',
colorByPoint: true,
data: []
}],
credits: {
enabled: false
},
drilldown: {
series: [{
name : '',
id: '',
data: []
}]
}
};
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
});
Example of the JSONs:
fraction.json
[{"name":"","colorByPoint":true,"data":[{"name":1,"y":80,"drilldown":1},{"name":2,"y":87,"drilldown":2},{"name":3,"y":105.71428571429,"drilldown":3},{"name":5,"y":"","drilldown":5},{"name":6,"y":53.160248409091,"drilldown":6}]}]
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]]},{"name":5,"id":5,"data":[["Total",""],["Estimated",0.44]]},{"name":6,"id":6,"data":[["Total",0.233905093],["Estimated",0.44]]}]
I would like the graph to show percentages above the column and on the yAxis when the graph is first loaded, but absolute values when the drilldown is activated. I didn't manage to get it until now. Could you help me?
There are two ways of doing those changes - a static and dynamic way. Static way - define data labels and tooltip options for drilldown series.
Dynamic way - apply the options on drilldown/drillup events.
events: {
drilldown: function(options) {
this.yAxis[0].update({
labels: {
format: '{value}'
}
}, 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/>'
};
},
drillup: function () {
this.yAxis[0].update({
labels: {
format: '{value}%'
}
}, false, false);
}
}
example: http://jsfiddle.net/d4fmaeea/
Two warnings:
In your json files, you have points which has value equals to "" which is not a valid type (must be number/null) and it may cause some issues, e.g. column with value 0 will have the same height as the column with value 10.
$.getJSON() is an asynchronous function. You use getJSON to assign list to options.series but that part may be executed after the chart was created so you would end up with the chart with no top-level series, only the drilldown ones.
Async part of code:
$.getJSON('/uploads/fraction.json', function (list) {
options.series = list;
});
$.getJSON('/uploads/drilldown.json', function (list2) {
options.drilldown.series = list2;
var chart = new Highcharts.Chart(options);
});
I have been trying to customize an excellent jsfiddle that I was fortunate enough to be directed to in an earlier question here: Switching between many Highcharts using buttons or link text
I am very new to javascript programming (and highcharts also) and I am having some difficulties in retrieving my own data from a database. Currently I have set up my charts like the following:
$('chart1').ready(function() {
var options = {
chart: {
renderTo: 'chart1',
type: 'column',
marginTop: 40,
marginBottom: 75
},
legend: {
enabled: false
},
title: {
text: 'Revenues',
x: 25 //center
},
xAxis: {
title: {
text: ''
},
categories: []
},
yAxis: {
showInLegend: false,
tickAmount: 11,
endOnTick: false,
startOnTick: true,
labels: {
formatter: function () {
return Highcharts.numberFormat(this.value, 0, '.', ',');
}
},
title: {
text: '<?php echo $unitCurr; ?>'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ Highcharts.numberFormat(this.y, 0,'.',',');
}
},
series: []
}
var tableName = '<?php echo $tableName; ?>'
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
chart = new Highcharts.Chart(options);
});
});
At the bottom you will notice that I am using JSON to retrieve information from my database and everything works just fine. In my earlier question I was asking about how to switch charts using buttons instead and was directed to the following jsfiddle: http://jsfiddle.net/jlbriggs/7ntyzo6u/
This example consists of 3 charts but I have just been trying to manipulate the first chart in order to find out if I could make my own data display instead of the random data that is being generated:
var chart,
chartOptions = {},
chartData = {};
chartData.chart1 = randomData(25);
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
But no matter how much I tried, I just can't seem to change the "data: chartData.chart1" in such a way that it retrieve the arrays I get from my $.getJSON function. Can any of you help me explain why, for instance, the below code doesn't work?. Here I try to exchange the ChartData.chart1 array for my database data. I'm not experienced enough to tell whether its the whole random number generation part of the code that prevents it from working or if it's my understanding thats severely lacking. (I have made sure that the data from data.php is indeed available, since I can display it in a normal array when I try).
var chart,
chartOptions = {},
chartData = {};
chartData.chart2 = randomData(10, true);
chartData.chart3 = randomData(65, true, 300);
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartData.chart1 = json[6]['data'];
});
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
Any assistance you can provide will be greatly appreciated!
You're actually very close to something that will work. Your problem is related to the timing of async calls relative to inline code, and also the way assignments work in javascript.
As a quick example, here's some code:
x = {foo:5};
y = x.foo;
x.foo = 9;
At the end of this, x.foo is 9, but y is still 5.
Your line of code
chartData.chart1 = json[6]['data'];
doesn't execute until after the call to the server completes; it's contained within a call back function. However, this section of code
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: chartData.chart1
}]
};
executes immediately. See the problem? You've cooked the current value of chartData.chart into chartOptions.chart1 BEFORE the server call has completed. That's why you're not seeing your data.
Instead, try something like this:
chartOptions.chart1 = {
chart: {
type: 'column'
},
title: {
text: 'Chart 1 Title'
},
yAxis: {
title: {
text: 'Chart 1<br/>Y Axis'
}
},
series: [{
name: 'Chart 1 Series',
data: []
}]
};
$.getJSON("../../companies/charts/data.php", {id: escape(tableName)}, function(json) {
chartOptions.chart1.series[0].data = json[6]['data'];
});
Now when your data comes back, you're putting it into the object that is actually being used to render the chart (once you click on the right button). Keep in mind that it's going to be empty until the server call completes.
I am having a list name aaa. It is an list of list
aaa[0] = [[{'a',1},{'b',2}]
aaa[1] = [[{'q',2},{'bd',0}]
aaa[2] = [[{'sa',3},{'bs',6}]
aaa[2] = [[{'sa',5},{'vb',8}]
I got the response from the model
Now I need to populate this value into Chart
My Chart will contain four lines for aaa[0] ,aaa[1] ,aaa[2] ,aaa[3]
Here is my High Chart Code
<script>
$(document).ready(function () {
//Default time zone
moment.tz.setDefault("America/New_York");
// Global option to disable UTC time usage
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Chart configurations
var options = {
chart: {
renderTo: 'container2',
type: 'area',
marginRight: 45,
zoomType: 'x'
},
title: {
text: 'aaaa'
},
xAxis: {
type: 'datetime',
minRange: 8 * 24 * 3600000,
labels: {
format: '{value:%m-%d-%Y}',
rotation: 45
}
},
yAxis: {
title: {
text: 'count'
},
labels: {
formatter: function () {
return this.value;
}
}
},
plotOptions: {
area: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
}
},
series: [{
fillOpacity: 0.1,
name: 'aaa',
pointInterval: 24 * 3600 * 1000,
pointStart: 1375295400000,
data: GetPercentage()
}]
};
// Rendering the Highcharts
chart = new Highcharts.Chart(options);
function GetPercentage() {
var data = #Html.Raw(JsonConvert.SerializeObject(Model.aaa));
// alert(data)
#foreach(var val in Model.aaa) //loop of getting a list from aaa
{
var percentages = [];
for (var x = 0; x < #val.Count; x++)
{
//Here I need to push the list
}
//percentages.sort(SortByDate);
// return percentages;
}
}
//Sort the array based on first array element
function SortByDate(a,b){
//alert(a[0] +" - " +b[0]);
return (a[0] - b[0]);
}
//Timeout function to reload page on everyone hour
setTimeout(function () {
location.reload(true);
}, 60* 60 * 1000);
//Progress bar to display feed delivery percentage
$('.progress .progress-bar').progressbar({
transition_delay: 500,
display_text: 'fill',
refresh_speed: 500
});
});
</script>
Could anyone help me to diplay a chart with four lines ?
Thanks in advance
Here you can see the series is an object array
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
You should add more objects into series array to create more than one line.