Highcharts Line Chart populating without data lines - javascript

This chart worked for years with no issue and a few days ago I noticed the lines are not populating. Cannot find a fix here or on highcharts forums. Typically, when something is wrong with the javascript, nothing populates but in this case, everything populates but the lines and associated data.
Thank you in advance!
JSFiddle: https://jsfiddle.net/jstark/zf3ma5so/2/
$(function () {
$('#container101').highcharts({
chart: {
type: 'line',
spacingBottom: 5,
spacingTop: 15,
spacingLeft: 35,
spacingRight: 35
},
title: {
text: 'Graduation Diploma Types Awarded by Year',
style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "24px", "fontWeight":"bold"}
},
xAxis: {
categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019', '2020', '2021'],
crosshair: true
},
yAxis: {
min: '40',
max: '60',
title: {
text: 'Percentage Awarded',
style: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"},
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%',
borderColor: 'gray',
borderRadius: 10,
shadow: false
},
credits: {
enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0,
itemMarginBottom: 20,
itemStyle: {"font-family": "'Open Sans', sans-serif", "color": "#373737","fontSize": "16px", "fontWeight":"bold"}
},
series: [{
name: 'Advanced/CCR/Honors Diploma',
color: '#01a2d7',
data: [46, 45, 48, 49, 50, 50, 52, 47, 49, 49, 50, 49],
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#01a2d7'
}
}, {
name: 'Standard Diploma',
color: '#01519c',
data: [51, 52, 51, 50, 50, 50, 48, 53, 51, 51, 50, 51],
marker: {
fillColor: '#FFFFFF',
lineWidth: 2,
lineColor: '#01519c'
}
}]
});
});


The min/max properties on yAxis should be numbers instead of strings.
min: 40,
max: 60,
instead of
min: '40',
max: '60',

Related

Trouble gettings CanvasJS to color just the coordinates in the tooltip

The tooltip text:
10
Dataseries 1: 71
Dataseries 2: 77
I'm trying to get the tooltip so the Dataseries 1: and Dataseries 2: remain their current color, and the 10, 71, and 77 are colored red. I have tried toolTipContent: " x: <span style='\"'color: red;'\"'>{x}</span> y: {y} <br/> name: {name}, label:{label} ", but it doesn't change anything. I'm sure its a stupid mistake on my part, but I'm new to using CanvasJS and haven't been able to get anything to work. (https://jsfiddle.net/lightmaster/8p3ygwf1/)
var chart = new CanvasJS.Chart("chartContainer", {
backgroundColor: "RGBA(37, 41, 45, 0.9)",
animationEnabled: true,
title: {
text: " ",
fontSize: 11,
fontColor: ' #ccc',
fontFamily: "arial",
},
toolTip: {
fontStyle: "normal",
cornerRadius: 4,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
toolTipContent: " x: {x} y: {y} <br/> name: {name}, label:{label} ",
shared: true,
},
axisX: {
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 10,
labelFontColor: ' #ccc',
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
titleFontFamily: "arial",
labelFontFamily: "arial",
interval: "auto",
intervalType: "hour",
minimum: 0,
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#ccc",
labelFontSize: 14,
labelBackgroundColor: "#FF8841",
}
},
axisY: {
title: "Temperature (°F) Recorded",
titleFontColor: "#ccc",
titleFontSize: 10,
titleWrap: false,
margin: 10,
lineThickness: 1,
gridThickness: 1,
gridDashType: "dot",
includeZero: false,
gridColor: "RGBA(64, 65, 66, 0.8)",
labelFontSize: 11,
labelFontColor: ' #ccc',
titleFontFamily: "arial",
labelFontFamily: "arial",
labelFormatter: function(e) {
return e.value.toFixed(0) + " °F ";
},
crosshair: {
enabled: true,
snapToDataPoint: true,
color: "#9aba2f",
labelFontColor: "#fff",
labelFontSize: 12,
labelBackgroundColor: "#FF8841",
valueFormatString: "#0.# °F",
}
},
legend: {
fontFamily: "arial",
fontColor: "#ccc",
},
data: [
{
type: "column",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55 },
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14 }
]
},
{
type: "spline",
dataPoints: [
{ x: 10, y: 77 },
{ x: 20, y: 53 },
{ x: 30, y: 58 },
{ x: 40, y: 61 },
{ x: 50, y: 99 },
{ x: 60, y: 60 },
{ x: 70, y: 20 },
{ x: 80, y: 31 },
{ x: 90, y: 26 }
]
}
]
});
chart.render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

At the chart level, instead of toolTipContent you need content. Your toolTipContent code is currently being ignored because that's the property used only at the data level. Here is how you can set a style directly, doing basically what you asked for:
toolTip: {
fontStyle: "normal",
cornerRadius: 14,
backgroundColor: "RGBA(37, 41, 45, 0.9)",
content: "<span style='\"'color: red;'\"'>{x}</span><br/> <span style='\"'color: {color};'\"'>{name}</span> <span style='\"'color: red;'\"'>{y}</span>",
shared: true,
}
Because you are using shared: true, your x value will show up twice. If you don't want that, look into the contentFormatter function for Shared toolTip section in the docs.

Data format issue in Vue JS

I'm trying to implement vue-chart-js in my VueJS 2.0 application, I went through the documentation and I'm using the component like:
<div class="row">
<vue-chart type="bar" :options="options" :data="chartData" style="width: 100%;height: 310px;"></vue-chart>
</div>
In data() I'm defining:
//for chart
options: {
legend: {
display: false
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
//stacked: true,
ticks: {
beginAtZero: true,
}
}],
xAxes: [{
display: true,
//stacked: true,
ticks: {
beginAtZero: true,
barPercentage: 0.2,
autoSkip: false,
},
}]
},
I did some static data set to get my chart working so my chartData looks like this:
if(type==="week"){
this.chartData.labels=['1st Week', '2nd Week', '3rd Week', '4th Week', '5th Week', '6th Week']
this.chartData.datasets= [
{
label:'Investor',
data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 10, 20, 30, 40, 50],
backgroundColor: "rgb(26, 179, 148)",
borderColor: "rgba(26, 179, 148,1)",
},
{
label:'Research',
data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
backgroundColor: "rgb(138, 209, 194)",
borderColor: "rgba(26, 179, 148,1)",
},
]
}
else if(type==="month"){
this.chartData.labels=['1st Month', '2nd Month', '3rd Month', '4th Month', '5th Month', '6th Month']
this.chartData.datasets= [
{
label:'Investor',
data: [90, 80, 70, 60, 50, 40, 30, 20, 10, 100, 10, 20, 30, 40, 50],
backgroundColor: "rgb(26, 179, 148)",
borderColor: "rgba(26, 179, 148,1)",
},
{
label:'Research',
data: [50, 40, 30, 20, 10, 50, 40, 30, 20, 10, 50, 40, 30, 20, 10],
backgroundColor: "rgb(138, 209, 194)",
borderColor: "rgba(26, 179, 148,1)",
},
]
}
Now I pointed the same to the api calls so I did something like this:
axios.get('api/interaction/chart?timeFormat='+type, {headers: getHeader()}).then(response => {
if(response.status === 200)
{
this.chartData = response.data.chartData
console.log(this.chartData)
}
})
In response or in console.log I'm having the format something like this:
{
"labels":["1st Week","2nd Week","3rd Week","4th Week","5th Week","6th Week"],
"datasets":[
{"label":"Investor","data":[0,0,0,0,0,0],"backgroundColor":"rgb(26, 179, 148)","borderColor":"rgb(26, 179, 148,1)"},
{"label":"Research","data":[0,0,0,0,0,0],"backgroundColor":"rgb(138, 209, 194)","borderColor":"rgb(26, 179, 148,1)"}
]
}
I'm getting an error of:
Invalid prop: type check failed for prop "data". Expected Object, Array, got String.
found in---> <VueChart>
I tried using JSON.parse(response.data.chartData) but this also not helping me out. Guide me on this.
Thanks

unequal intervals highchart gauges

I am using Angular Gauge from HighChart and wanted to know if it is possible to have unequal intervals. Currently, unequal intervals on the Y-axis effects the size of each plot band in the gauge.How can I have equal plot band sizes with unequal intervals on Y-axis.
Here is an example of the intervals-0-86, 86-88, 88-90, 90-96 and 96-100.
I have tried so far-
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'Percentage %'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 0,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 50,
tickInterval: 6,
tickWidth: 2,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '15px'
}
},
title: {
text: ''
},
plotBands: [{
from: 0,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Any help is appreciated!

Well, As per your requiremnt It seems like you want to achieve similar to this..
where min and max should updated accordingly.
Solution-
As I am understanding you want to set all value in red below 86%. correct? so why don't you change the min value of the chart. I mean while passing value to chart manipulate your input data accordingly and pass corresponding label to it.
Hoping this will help you :)

Well, High Chart doesn't provide direct method to show selected labels on the axis.
So there is alternative way to achieve this.
Below is the running code for this-
JSFiddle- https://jsfiddle.net/vikash2402/Lxoc4d8r/16/
$(function() {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: 'This is custom High Chart'
},
pane: {
center: ['50%', '85%'],
size: '130%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#EEE',
innerRadius: '80%',
outerRadius: '100%',
shape: 'arc'
}
},
exporting: {
enabled: false
},
tooltip: {
enabled: false
},
// the value axis
yAxis: [{
min: 80,
max: 100,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'outside',
minorTickColor: '#666',
tickPixelInterval: 20,
//tickInterval: 1,
tickWidth: 0,
tickPosition: 'outside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 1,
distance: 20,
rotation: 'auto',
style: {
fontSize: '14px'
}
},
title: {
text: ''
},
plotBands: [{
from: 80,
to: 86,
color: '#bf0000',
innerRadius: '60%',
outerRadius: '100%'
}, {
from: 86,
to: 88,
innerRadius: '60%',
outerRadius: '100%',
color: '#fcfe00'
}, {
from: 88,
to: 90,
innerRadius: '60%',
outerRadius: '100%',
color: '#00ae50'
}, {
from: 90,
to: 96,
innerRadius: '60%',
outerRadius: '100%',
color: '#2f74b4'
}, {
from: 96,
to: 100,
innerRadius: '60%',
outerRadius: '100%',
color: '#7131a0'
}]
}],
plotOptions: {
gauge: {
dial: {
backgroundColor: "silver",
baseLength: "80%",
baseWidth: 4,
borderColor: "grey",
borderWidth: 1,
radius: "90%",
rearLength: "0",
topWidth: 1
},
pivot: {
backgroundColor: "silver",
borderColor: "grey",
borderWidth: 1,
radius: 5
},
dataLabels: {
y: 3,
style: {
fontSize: "15px"
},
borderWidth: 0,
useHTML: false
}
}
},
series: [{
name: 'Speed',
data: [90],
tooltip: {
valueSuffix: ''
}
}]
});
try{
var DisplayLabels = [86, 88, 90, 96];
var labels = $(".highcharts-yaxis-labels > text>tspan");
labels.each(function(i, node){
if( DisplayLabels.indexOf(parseInt($(node).text())) == -1){
$(node).hide();
} else{
$(node).text($(node).text() + "%");
}
});
} catch(err){
console.dir(err);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
Hoping this will help you :)

Highcharts - Same chart multiple times in same page

How can I use, multiple charts in same page with same data?
I am trying like below, but only getting first chart working
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>
$(function () {
// Everything in common between the charts
var commonOptions = {
colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
labels: {
style:{ color: '#bbb' }
},
lineColor: '#e4e4e4',
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' }
},
tickInterval: 100,
lineColor: '#e4e4e4',
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
backgroundColor: "rgba(0 ,0, 0, 0.5)",
}],
// Area Chart
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 1,
fillOpacity: 0.1,
marker: {
lineWidth: 1.5,
symbol: 'circle',
fillColor: 'white',
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
$('.areaChartTwoWay').highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Days', },
text: 'Date',
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Legend 2',
lineColor: '#fb8b4b',
marker: { lineColor: '#fb8b4b', fillColor: 'white', },
data: [150, 105, 130, 160, 185, 280, 185, 160, 135, 200],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Legend 1',
lineColor: '#99cc03',
marker: { lineColor: '#99cc03', fillColor: 'white', },
data: [82, 68, 90, 69, 75, 62, 46, 36, 79, 34],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}));
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>

Try to move call of highchart in each(..) like this one:
$(function () {
// Everything in common between the charts
var commonOptions = {
colors: ['#fe5758', '#99cc03', '#33b5e6', '#fd8f40', '#e7ca60', '#40abaf', '#f6f7f8', '#e9e9eb'],
chart: {
style: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12px',
color: '#585858',
}
},
title: {
text: null
},
subtitle: {
text: null
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
xAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
labels: {
style:{ color: '#bbb' }
},
lineColor: '#e4e4e4',
lineWidth: 1,
tickLength: 0,
},
yAxis: {
title: {
style: {
fontFamily: 'Roboto',
color: "#bbb",
}
},
offset:-6,
labels: {
style:{ color: '#bbb' }
},
tickInterval: 100,
lineColor: '#e4e4e4',
lineWidth: 1,
gridLineDashStyle: 'dash',
},
series: [{
backgroundColor: "rgba(0 ,0, 0, 0.5)",
}],
// Area Chart
plotOptions: {
area: {
stacking: 'normal',
lineWidth: 1,
fillOpacity: 0.1,
marker: {
lineWidth: 1.5,
symbol: 'circle',
fillColor: 'white',
},
legend: {
radius: 2,
}
}
},
tooltip: {
useHTML: true,
shared: true,
backgroundColor: '#5f5f5f',
borderWidth: 0,
style: {
padding:10,
color: '#fefefe',
}
},
legend: {
itemStyle: {
fontFamily: 'Roboto Light',
fontWeight: 'normal',
fontSize: '12',
color: '#666666',
},
marker: {
symbol: 'square',
verticalAlign: 'middle',
radius: '4',
},
symbolHeight: 6,
symbolWidth: 6,
},
};
$('.areaChartTwoWay').each(function() {
$(this).highcharts(Highcharts.merge(commonOptions, {
chart: { type: 'area' },
xAxis: {
title: { text: 'Days', },
text: 'Date',
type: 'datetime',
dateTimeLabelFormats: {
day: '%eth %b'
},
},
yAxis: {
title: { text: 'Count', },
},
series: [{
name: 'Legend 2',
lineColor: '#fb8b4b',
marker: { lineColor: '#fb8b4b', fillColor: 'white', },
data: [150, 105, 130, 160, 185, 280, 185, 160, 135, 200],
legendIndex:1,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}, {
name: 'Legend 1',
lineColor: '#99cc03',
marker: { lineColor: '#99cc03', fillColor: 'white', },
data: [82, 68, 90, 69, 75, 62, 46, 36, 79, 34],
legendIndex:0,
pointStart: Date.UTC(2016, 2, 11),
pointInterval: 24 * 3600 * 1000 // one day
}]
}))});
$('.highcharts-grid > path:last-child').remove();
$('.highcharts-markers > path:last-child').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 200px;"></div>
<div class="areaChartTwoWay" style="min-width: 150px; height: 250px;"></div>

Implementing HighCharts

https://lh6.googleusercontent.com/-eTP5pEh4kFs/T7BoGRdwlmI/AAAAAAAAAHc/AQzgo6qkBkQ/w1257-h669-k/graph.JPG
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'World\'s largest cities per 2008'
},
xAxis: {
categories: [
'Tokyo',
'Jakarta',
'New York',
'Seoul',
'Manila',
'Mumbai',
'Sao Paulo',
'Mexico City',
'Dehli',
'Osaka',
'Cairo',
'Kolkata',
'Los Angeles',
'Shanghai',
'Moscow',
'Beijing',
'Buenos Aires',
'Guangzhou',
'Shenzhen',
'Istanbul'
],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
' millions';
}
},
series: [{
name: 'Population',
data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});
[Help]
How could I implement this using HighCharts a js plugin..? Any comment, advices would be very much appreciated..

I'm guessing that what you want is multiple series. So, let's say you want "Population (total)", "Population (male)", and "Population (female)" you just add more series to the array.
Please ignore the fact that my "male + female = total" numbers don't add up.
Also the resulting chart is very busy, but I'll leave that to you. Usually when creating a bar chart with multiple series, you'll want to keep the number of bars fairly small. Otherwise it might be better to use a line chart or area chart or whichever fits your need (sorry I don't read Japanese very well).
But this point you in the direction you want to go.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: 'World\'s largest cities per 2008'
},
xAxis: {
categories: [
'Tokyo',
'Jakarta',
'New York',
'Seoul',
'Manila',
'Mumbai',
'Sao Paulo',
'Mexico City',
'Dehli',
'Osaka',
'Cairo',
'Kolkata',
'Los Angeles',
'Shanghai',
'Moscow',
'Beijing',
'Buenos Aires',
'Guangzhou',
'Shenzhen',
'Istanbul'
],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) +
' millions';
}
},
series: [{
name: 'Population',
data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'Male',
data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
{
name: 'Female',
data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18,
17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8,
11.7, 11.2],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
});
});

Categories

Resources