I have a variable
var country = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'];
I want to set the categories of my chart into variable country. Please help..
I am new to Highcharts. Thanks
var chart = new Highcharts.Chart({
chart: {
renderTo: 'chart',
type: 'column'
},
title: {
text: 'Compliance Tracker '
},
xAxis: {
categories:
You can simply put it like this :
var country = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'];
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: country,
title: {
text: null
}
}....
......
});
Here is the working fiddle : http://jsfiddle.net/3gGYK/
I hope, you want to know the same.
Related
I currently have this code snippet:
function createChartByDay(id, title, subtitle, lineTitle, xTitle, xyData){
Highcharts.chart((id ? id : 'grafic-container'), {
chart: {
type: 'spline'
},
title: {
text: (title ? title : '')
},
subtitle: {
text: (subtitle ? subtitle : '')
},
xAxis: {
title: {
text: 'Horas'
},
type: 'datetime',
dateTimeLabelFormats:{
day:"%H",
month:"%m",
year:"%d/%m/%Y"
}
tickInterval: 3600 * 1000, // Establece el intervalo es decir una hora.
labels: {step: 1} // Establece los labels cada cuanto saltos se mostraran.
},
yAxis: {
title: {
text: 'Visitas'
}
},
series: [{
name: 'Nro Visitas',
data: xyData,
}],
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%d/%m/%Y - %H:%M}: {point.y} visitas'
},
});
}
And the result is the following:
The problem is that there is a superposition of labels at the bottom, how could you solve it? Try setting min and max but the Datetime format is confusing.
Thanks since now.
Example taken from high charts cookbook (PACK T Books)
following code is running
launch : function() {
var viewport = Ext.create('Ext.container.Viewport',{
layout: 'border',
items: [{
region: 'west',
width: 200,
title: 'test',
html: 'testing'
}]
});
}
As soon as I insert the following code for high charts nothing gets displayed in the browser (app.js)
Ext.require('Ext.container.Viewport');
Ext.Loader.setPath('Chart', '../resources/Chart');
Ext.require('Chart.ux.Highcharts');
Ext.require('Chart.ux.Highcharts.Serie');
Ext.require('Chart.ux.Highcharts.LineSerie');
Ext.application({
name : 'Fiddle',
launch : function() {
var chart = Ext.create('Chart.ux.Highcharts',{
region: 'center',
id: 'chart',
initAnimAfterLoad: false,
chartConfig: {
chart: {
type: 'line',
showAxes: true
},
title: {
text: 'a simple graph'
}
}
});
var viewport = Ext.create('Ext.container.Viewport',{
layout: 'border',
items: [{
region: 'west',
width: 200,
title: 'test',
html: 'testing'
},chart]
});
chart.addSeries([{
name: 'Series #1',
data: [1,2,3]
}],false);
}
});
/var/www/html/example/index.html includes
ext-all.css | ext-all.js | jquery.dev.js |jquery-1.11.3.min.js |highcharts.src.js |highcharts-more.src.js |
Please suggest some solution or any alternative.
Maybe not the best title, but what I'm trying to do is change the subtitle of my chart to include the last temperature displayed in it. Something like this
Last value: 4 degrees
The chart's data is in a csv file.
$(document).ready(function () {
var lastVal = 0;
$.get('csv/Temp.csv', function (csv) {
$('#Temp').highcharts({
chart: {
type: 'spline',
zoomType: 'xy'
},
data: {
csv: csv
},
title: {
text: 'Outside Temperature'
},
subtitle: {
text: 'Last value: '
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
});
If I change the subtitle to:
subtitle: {
text: function () {
lastVal = this.yData[this.yData.length - 1];
return 'Last Value: ' + lastVal;
}
},
I only get the text. How do I do this?
You can change the chart subtitle programmatically using the function (API):
chart.setTitle(Object title, object subtitle, Boolean redraw)
An example would be:
chart.setTitle(null, { text: "New subtitle" }, true);
If you want this to happen on load with data from CSV, you could do it like this (JSFiddle):
chart: {
events: {
load: function(event) {
var lastValue = this.series[0].data[this.series[0].data.length-1].y;
this.setTitle(null,{ text: 'Last y-value: '+lastValue }, true);
}
}
}
I'm trying to put two Rally charts inside a container to have a control over their layout. Unfortunately, for some reason, it doesn't work.
Plase see the code (the full HTML provided for convinience):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
launch: function () {
//Write app code here
var me = this;
me._createAtTheStartAddedChart();
me._createStateChart();
console.log('chart 1', me._atTheStartAddedChart);
console.log('chart 2', me._stateChart);
me._chartContainer = Ext.create('Ext.Container', {
itemId: 'cont',
renderTo: Ext.getBody(),
layout: {
type: 'hbox',
align: 'middle'
}
,
items: [
me._atTheStartAddedChart,
me._stateChart
]
});
me.add(me._chartContainer);
},
_createAtTheStartAddedChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
var chart = me._createChart(series);
me._atTheStartAddedChart = chart;
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
var chart = me._createChart(series);
me._stateChart = chart;
},
_createChart: function (series) {
var chart = Ext.create('Rally.ui.chart.Chart', {
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
return chart;
}
});
Rally.launchApp('CustomApp', {
name:"Random App Name42726",
parentRepos:""
});
});
</script>
</head>
<body>
</body>
</html>
The charts are created successfully, but they are not displayed at all. There is no error related to their display, so I don't even know where to look for the issue.
Maybe someone knows how to put the charts horizontally (I don't really need Ext.Container here, any other container will be fine as well)?
There is also an error Uncaught Highcharts error #16: www.highcharts.com/errors/16 (Highcharts already defined in the page), not sure what's the reason for it as well.
I made those charts display - you may see full app and the screenshot showing both pie charts in this repo.
Here is the js file. The main change was where in the code the chart was added to container. I moved that to _createChart function. Highchart error 16 does not prevent the charts from loading. You may eventually create two containers and add the charts to separate containers, but this works in its simplest form:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
items: [
{
xtype: 'container',
itemId: 'mychart',
columnWidth: 1
}
],
launch: function() {
this._createAtTheStartAddedChart();
this._createStateChart();
},
_createAtTheStartAddedChart: function () {
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
this._createChart(series);
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
this._createChart(series);
},
_createChart: function (series) {
var chartDiv = this.down("#mychart");
chartDiv.add({
xtype: 'rallychart',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
}
});
I am newbie parsing JSON object to highchart and I would like to plot basic bar graph.
I have done on the title of graph. The problem is that the series that I would like to show is not showing.(count as series and qpAnswer as xAxis).
Here is my JSON data
[
{
qpQuestion: "Is that a dog?",
qpAnswerId: "1",
qpAnswer: "Yes",
count: "0"
},
{
qpQuestion: "Is that a dog?",
qpAnswerId: "2",
qpAnswer: "No",
count: "0"
},
{
qpQuestion: "Is that a dog?",
qpAnswerId: "3",
qpAnswer: "ok",
count: "0"
}
]
Here is my JS
var url="sections.php?request=graph";
$.getJSON(url,function(data1){
var options={
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: data1[0].qpQuestion
},
xAxis:{
categories: data1.qpAnswer
title: {
text: 'Answer'
}
},
yAxis: {
min: 0,
title: {
text: 'Answer Count'
}
},
series:data1
};
var chart = new Highcharts.Chart(options);
});
You can pre-process the data to form like
var answers = ['Yes','No' ,'OK'];
var answer_counts= [
{name: 'Yes', data : [2,0,0]},
{name: 'No', data: [0,3,0]},
{name: 'OK', data: [0,0,1]} ];
Then plot it with
var options={
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text:'QA Answers'
},
xAxis:{
categories: answers,
title: {
text: 'Answer'
}
},
yAxis: {
min: 0,
title: {
text: 'Answer Count'
}
},
series:answer_counts
};
var chart = new Highcharts.Chart(options);
I have done in the fiddle, http://jsfiddle.net/gwC2V/1/
Let us know if it helps.
Below Example can help you
The JSON file
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
use getJSON() to retrive data from JSON file and Populate to CHART
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Here is link