For some reason I am unable to set the properites of a Javascript Object created in literal form.
Using PHP to write the Javascript code. The first chart Object chartObject1 displays correctly but the second chart chartObject2 does not display the title because I am attempting to set the title text property outside of the literal definition.
Why won't it let me set the property using chartObject2.title.text = "chart2"; ??
<?php
$chart_text = <<<EOD
<script type="text/javascript">
var chartObject1 = Object;
$(document).ready(function(){
chartObject1 = new Highcharts.Chart({
chart: {
renderTo: 'chart1',
type: 'bar'
},
title: {
text: 'chart1'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]},
{
name: 'John',
data: [5, 7, 3]}]
});
});
</script>
EOD;
print ($chart_text);
$chart_text = <<<EOD
<script type="text/javascript">
var chartObject2 = Object;
$(document).ready(function(){
chartObject2 = new Highcharts.Chart({
chart: {
renderTo: 'chart2',
type: 'bar'
},
xAxis: {
categories: ['Spiders', 'Grasshoppers', 'Scorpions']
},
yAxis: {
title: {
text: 'Bugs eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]},
{
name: 'John',
data: [5, 7, 3]}]
});
chartObject2.title.text = "chart2";
});
</script>
EOD;
print ($chart_text);
?>
because its a Highcharts object, you would need to use their api to change the text.
Like this:
chartObject2.setTitle({text: "chart2"});
Related
Working with a simple highcharts bar graph such as so: http://jsfiddle.net/bvuWR/106/
$(function () {
var chart;
$(document).ready(function() {
$("#updateAxis").click(function(){
chart.xAxis[0].setCategories(['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Lemon']);
for (var i = 0; i < chart.series.length; i++)
{
chart.series[i].addPoint(Math.random() * 5, true, true);
}
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
});
});
Is there any way that I can grab data passed as a data series and add under the category?
This example has the data hardcoded in the config, however, I'll be passing the values to the data series dynamically and the value in the category would need to change as well.
You can set axis type as category and define categories from points names.
xAxis: {
type: 'category'
},
series: [{
name: 'John',
data: [{
y: 5,
name: 'Apples'
}, {
y: 2,
name: 'Oranges'
}, {
y: 3,
name: 'Pears'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/d41cvheL/
API: https://api.highcharts.com/highcharts/xAxis.categories
i'm new in HTML and PHP. i follow the getting starts guide of Highcharts.com and i wrote the HTML file below. i save it like index2.htm, but it show me only "Before the script..." and no chart appear.
please help me.
Thanks a lot
<DOCTYPE HTML>
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<title>Highcharts Example</title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<p>Before the script...</p>
<script>
$(function () {
var myChart = Highcharts.chart('container', {
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, 19]
}]
});
});
</script>
</body>
</html>
</pre>
The reason it doesn't work is that you've wrapped it in an anonymous jquery function and haven't included a JQuery reference.
If you just change you're script to be:
var myChart = Highcharts.chart('container', {
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, 19]
}]
});
Here's a simple fiddle of it working
You need to load jquery as the example you are looking at uses it. Add the jquery cdn to the head to load jquery:
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
See my code below:
<DOCTYPE HTML>
<html>
<head>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
<title>Highcharts Example</title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
<p>Before the script...</p>
<script>
$(function () {
var myChart = Highcharts.chart('container', {
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, 19]
}]
});
});
});
</script>
</body>
</html>
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']
I have been using highchart for graphical display of my records. HighChart works fine with my php variable with comma separated values in it. However, I couldn't get this done using javascript variable with comma separated values. Please help me with this. Your help is much appreciated. Thanks. My codes are shown below.
Javascript
<script type="text/javascript">
var res = [];
var data_graph = [];
function show_graphics(){
$.post("<?php echo base_url(); ?>main_controller/show_monthly_analytics_ajax", '', function(data){
if( data.notify == "Success" ){
Object.keys(data.upload_data).forEach(function(key) {
res.push(data.upload_data[key]);
});
data_graph = res.join(",");
console.log(data_graph );
} else{
console.log(data.notify);
}
},'json');
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
data: [data_graph]
}]
});
}
</script>
When I look at the console, the values being showed of the variable array data_graph seems right but the chart never showed a graph. What is the problem with this?
Modification
<script type="text/javascript">
var res = [];
function show_graphics(){
$.post("<?php echo base_url(); ?>main_controller/show_monthly_analytics_ajax", '', function(data){
if( data.notify == "Success" ){
Object.keys(data.upload_data).forEach(function(key) {
res.push(data.upload_data[key]);
});
//aa = res.join(",");
console.log(res);
} else{
console.log(data.notify);
}
},'json');
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 10,
beta: 25,
depth: 70
}
},
title: {
text: '3D chart with null values'
},
subtitle: {
text: 'Notice the difference between a 0 value and a null point'
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: Highcharts.getOptions().lang.shortMonths
},
yAxis: {
title: {
text: null
}
},
series: [{
name: 'Sales',
data: [res]
}]
});
}
</script>
Response
The data part/section for series property should be an array of numbers.
According to your explanation, your implementation is as if you would have the following:
series: [{
name: 'Sales',
data: ['1, 2, 1, 0'] // this is an array with one string element, which is wrong
}]
But, it should be:
series: [{
name: 'Sales',
data: [1, 2, 1, 0]
}]
See JSfiddle demo here
EDIT
Besides the change that I suggested above, consider that the $.post call is an async execution. Then, you should only draw the chart when data is 'ready' by moving $('#container').highcharts(...) block inside the success callback as follows:
if( data.notify == "Success" ){
Object.keys(data.upload_data).forEach(function(key) {
res.push(data.upload_data[key]);
});
$('#container').highcharts({
...
...
series: [{
name: 'Sales',
data: res
}]
});
} else {
console.log(data.notify);
}
I'm trying to dynamically create highcharts on the same page in a bootstrap carousel.
I have a function "createChart" like this:
createChart(questiontitle, answers);
function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options); // Create new chart with general options
chart.renderTo(container);
for (var i = 0; i < answers.length; i++) {
categories.push(answers[i].Text);
}
console.log(categories);
chart.xAxis[0].setCategories(categories);
chart.setTitle({ text: 'eerzera' });
// redraw chart
chart.redraw();
}
I have a div like this:
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
As you can see I have "chart.renderTo" but I always get the same error:
Highcharts Error #13
Rendering div not found
This error occurs if the chart.renderTo option is misconfugured so
that Highcharts is unable to find the HTML element to render the chart
in.
My variable options is like this:
var options = {
chart: {
type: 'bar'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
}
How is this possible?
If your goal is to keep this dynamic, by being able to build multiple charts with multiple renderTo's but using the same options, you can do it like this:
change
function createChart(questiontitle, answers){
chart = new Highcharts.Chart(options);
chart.renderTo(container);
to:
function createChart(questiontitle, answers){
chart = $('#container').highcharts(options);
or, if not using jQuery,
function createChart(questiontitle, answers){
options.chart.renderTo = 'container';
chart = new Highcharts.Chart(options);
In case someone stumbles on this while Googling, when you specific the element in renderTo, you shouldn't include the # if that element is an ID.
If you have this element <div id="graph-container"></div>
This fails:
renderTo: '#graph-container'
This works:
renderTo: 'graph-container'
Reference to the Highcharts docs
Something like this: chart.renderTo(container); doesn't exists in Highcharts.
To set renderTo use options:
var options = {
chart: {
type: 'bar',
renderTo: 'container'
},
You may be facing the same problem that i was.
Try to put your highchart script right after your div's declaration just like in the example bellow so it can recognize your div's id:
<head>
<title>HighCharts :D</title>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<div id="container" style="width: 600px; height: 400px; margin: 0 auto">
</div>
<script type="text/javascript">
var myChart = Highcharts.chart('container', {
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]
}]
});
myChart.renderTo('container');
</script>
</body>