I have a simple column graph in highcharts with two data series. I want to accomplish the following two things:
First, show only the first pair of columns (Case 1).
Then, when the user clicks anywhere, reveal all the remaining columns (Cases 2 and 3).
How can that be done?
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Case 1', 'Case 2', 'Case 3'],
},
series: [{
name: 'Type A',
data: [ 10, 20, 30 ]
}, {
name: 'Type B',
data: [ 15, 20, 25 ]
}]
});
});
This is the workaround I'm going to use:
first set the data to 0
insert a button; when pressed, modify the data
For this, add a button in the HTML part:
<button id="button" class="autocompare">Reveal whole graph</button>
... and add a button handler in the JS part:
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Case 1', 'Case 2', 'Case 3']
},
series: [{
name: 'Type A',
data: [10, 0, 0]
}, {
name: 'Type B',
data: [15, 0, 0]
}]
});
// Button handler
$('#button').click(function () {
var chart = $('#container').highcharts();
chart.series[0].setData([10, 20, 30]);
chart.series[1].setData([15, 20, 25]);
this.disabled = true;
});
});
If there a better answer without modifying the data, please let me know.
Related
The funnel chart doesn't render as it's supposed to for the huge value difference between the cells. For example, the topmost cell(head) value being 2000000 and the bottommost cell(neck) value being 500.
Below is the screenshot of the example editor. Please help me in shaping the funnel chart in a triangular form irrespective of the huge value difference between the cells. Thank you in advance.
current
expectation
In case you're unable to see the screenshot here's the data you can use in apache-echart example editor,
option = {
legend: {
data: ['Ad Request', 'Impressions', 'Clicks', 'Orders', 'Revenue']
},
series: [
{
name: 'test-funnel',
type: 'funnel',
data: [
{
value: 50,
name: 'Revenue'
},
{
value: 100,
name: 'Orders'
},
{
value: 1000,
name: 'Clicks'
},
{
value: 10000,
name: 'Impressions'
},
{
value: 2000000,
name: 'Ad Request'
}
],
label: {
position: 'inside'
}
}
]
};
If you want a triangle with the funnel chart, you need something linear in your data because ECharts seems to expect an arithmetic progression with positive integers for this particular case. It can be:
1, 2, 3, 4, 5
3, 6, 9, 12, 15
50, 100, 150, 200, 250
...
Warning: you will have unexpected results if you try this with negative values, zero and decimals.
I do not know what you are trying to do exactly, but if you need to display the actual values on hover thanks to a tooltip, you may use a formatter function with a switch to determine which label to return.
Here is an example:
let option = {
legend: {
data: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5']
},
series: [
{
name: 'Series',
type: 'funnel',
data: [
{
value: 1,
name: 'Label 5'
},
{
value: 2,
name: 'Label 4'
},
{
value: 3,
name: 'Label 3'
},
{
value: 4,
name: 'Label 2'
},
{
value: 5,
name: 'Label 1'
}
],
label: {
position: 'inside'
}
}
],
tooltip: {
formatter: params => {
switch (params.data.value) {
case 5:
return '2,000,000';
case 4:
return '10,000';
case 3:
return '1,000';
case 2:
return '100';
case 1:
return '50';
}
}
}
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 100%;
height: 500px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
Be aware that the shape will not remain a triangle if you click on some elements in the legend!
I am trying to update my current highchart that I have to a new chart type, however I am having difficulty doing so.
I have embedded javascript in my page, the following is below
<script>
chart = $(function () {
$('#chart_example').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Traffic'
},
xAxis: {
categories: ['November', 'December', 'January']
},
yAxis: {
title: {
text: 'Views'
}
},
series: [{
name: 'Hello',
data: [50, 30, 60]
}]
});
});
</script>
I have the following two scripts below at the bottom of the page
<script src="http://code.highcharts.com/highcharts.js"></script>
....
<script src="custom_script"></script>
</body>
</html>
Inside the custom script, I want to update the highcharts library from a line graph into a bar graph. I looked at the API and found an update method
that takes in new options. So I tried the following:
$(document).on('click' , '#button' , function() {
var options = new Object();
options.chart = new Object();
options.chart.type = 'bar';
options.chart.renderTo = 'container';
chart.update(options, true);
//the container the chart is in
$('#chart_example').show();
...
However I get
Uncaught TypeError: chart.update is not a function(anonymous function) # custom_script=1:41m.event.dispatch # jquery.min.js:3m.event.add.r.handle # jquery.min.js:3
My thought was that the order of the javascript is wrong but I seem to have the javascript in the right order. My questions are then:
1) Is this chart variable set correctly? My understanding is that a variable that is unset with var is automatically global.
2) What is the cause of this error and how do I fix it so that it updates properly?
Thank you in advance!
http://jsfiddle.net/2j1g200g/29/
var options = {
chart: {
type: 'line',
renderTo: 'chart_example'
},
title: {
text: 'Traffic'
},
xAxis: {
categories: ['November', 'December', 'January']
},
yAxis: {
title: {
text: 'Views'
}
},
series: [{
name: 'Hello',
data: [50, 30, 60]
}]
};
chart = new Highcharts.Chart(options);
options.chart.type = 'bar';
chart = new Highcharts.Chart(options);
Run this, it should get what you want. I included a button for demonstration.
chartOptions = {
chart: {
type: 'line'
},
title: {
text: 'Traffic'
},
xAxis: {
categories: ['November', 'December', 'January']
},
yAxis: {
title: {
text: 'Views'
}
},
series: [{
name: 'Hello',
data: [50, 30, 60]
}]
};
$('#chart_example').highcharts(chartOptions);
$(document).on('click' , '#button' , function() {
chartOptions.chart.type = 'bar';
$('#chart_example').highcharts(chartOptions);
});
<button id="button">rechart</button>
<div id="chart_example"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
I have created a chart with drilldown using sample given on fiddle
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/async/
When I click on first level it is sucessfully adding chart for next level by using
chart.addSeriesAsDrilldown(e.point, series);
My problem is, now i want newly added chart also have drilldown. I dont know how to achieve this. Any help will thankful.
Regards
I found the solution to this. Actually when data is fetched from web service as json for the next level of drilldown I had to make sure the property drilldown needed to be set to true which I was not doing earlier after some research I found it. I have given some data in json format below with reference to the example on fiddle.
When first level was clicked I was going to web service and fetching data as
"{\"name\":\"Animals\",\"data\": [[\"Cows\", 2],[\"Sheep\", 3]],\"drilldown\": true}"
which was not enabling drilldown for the next level. In order to allow drill down further I had to modify the above data as below where in I have added property drilldown to be as true
(name == "Animals") resp = "{\"name\":\"Animals\",\"data\": [{\"name\":\"Cows\", \"y\": 2, \"drilldown\": \"true\"},{\"name\":\"Sheep\",\"y\": 3,\"drilldown\":\"true\"}]}";
That is all, seems simple :)
Will try to create sample on Fiddle if I get time and will update link if done so.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
{
name: 'Toyota',
y: 4,
drilldown: true
},
['Volkswagen', 2],
['Opel', 5]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 1000);
}
}
}
},
title: {
text: 'Async drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
})
});
I have multiple series rendered in my chart but I am not able to figure out how to change the name or other attributes for each series. The legend just has them as series 1, series 2, and series 3.
Here is my code:
<script type="text/javascript">
$(function() {
$.getJSON('decodeseries.php', function(data) {
// Create the chart
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {title: {text: 'Wave Height ( In Ft )'}},
xAxis: {type: 'datetime'},
title : {
text : '5 Day Forecast'
},
series: data [{
name: 'Location 1',
data: data
}, {
name: 'Location 2',
data: data
}, {
name: 'Location 3',
data: data
}]
});
});
});
</script>
JSon:
[{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}]
This actually doesn't show the chart, but its what I have been trying so far. The chart works with the above JSON when I simply use the following:
series: data
Any help would be appreciated!
Thanks
To set the color/name of a data series in your data element you need to give it those properties. As near as I can tell your data JSON is actually composed of 3 series of data:
[
{"data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"data":[[1385510600000,1.88],[1385521500000,0.792]]}
]
I would change it (however it was made) to this:
[
{"name":"Location 1", "color": "acolor", "data":[[1385510400000,0.88],[1385521200000,0.722]]},
{"name":"Location 2", "color": "anothercolor", "data":[[1385510500000,0.98],[1385521400000,0.752]]},
{"name":"Location 3", "color": "yetanothercolor", "data":[[1385510600000,1.88],[1385521500000,0.792]]}
]
You chart code above does not render because you are doing:
series: data [{
name: 'Location 1',
data: data
}, {
name: 'Location 2',
data: data
}, {
name: 'Location 3',
data: data
}]
And it is trying to assign the data property in data to series.data which is not valid. Essentially your are saying make each of the 3 series.data = series.data.data.
Using my example above do something like :
$('#container').highcharts({
chart: {
type: 'area'
},
yAxis: {title: {text: 'Wave Height ( In Ft )'}},
xAxis: {type: 'datetime'},
title : {
text : '5 Day Forecast'
},
series: data
});
I'm trying to embed a small chart (using Highcharts) on my webpage. I've provided an example of what I'm trying to do. When the page loads, the chart takes up the entire page by overwriting whats in the mainDiv (which I haven't included in here). I've tried modifying the dimensions of the division and the chart. I've also looked at the 'renderTo' parameter for 'chart', and tried rendering it as an object reference.
Does anyone know what might be causing this issue? Am I missing a critical parameter in my chart? Or have I written my code incorrectly? Thanks.
<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="container" style="width:10px; height:10px;"></div>
<script>
$(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]
}]
});
});
</script>
I fixed this by changing the id attribute of my element from "container" to just "contain" (and obviously changed any code that previously referenced "container" to just reference "contain").
For whatever reason this fixed my problem, although I'm still not quite sure why. Perhaps "container" is a keyword used by Highcharts.
Final code looked like this:
<!-- mainDiv is what's getting overwritten -->
<div id="mainDiv"></div>
<div id="contain" style="width:10px; height:10px;"></div>
<script>
$(function () {
$('#contain').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]
}]
});
});
</script>
Not sure if this will work but have you tried the renderTo: 'divname' option... Something like...
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
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]
}]
});