I'm using KendoUI and I have created the following Chart. I need to be able to make the Legend item "Product 1" in this case a hyper link. How Do I do that?
My Markup:
<div id='chart' ></div>
My Script:
jQuery('#chart').kendoChart({
seriesDefaults: {
type: "line",
missingValues: "interpolate"
},
legend: {
position: "bottom"
},
valueAxis: [{
title: {
text: "Score"
},
min: 75,
max: 90,
},
{
name: "hidden",
visible: false,
min: 75,
max: 90},
{
name: "ProductSurveys",
min: 15,
max: 55,
title: {
text: "Survey Count"
},
color: "#4c4c4c"}],
series: [{
type: "line",
name: "<a href='http://jsfiddle.net/rodneyhickman/wCB5a/' >Product 1</a>",
color: "#004990",
width: 1,
markers: {
background: "#004990"
},
tooltip: {
visible: true,
template: "<b>Product 1</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [87.11, 87.27, 87.21, 86.84, 85.47, 84.87, 84.52, 85.19, 85.19, 85.2, 84.68, 83.78, 82.14]},
{
type: "line",
name: "Market Segment Average",
color: "#da7633",
width: 1,
markers: {
background: "#da7633"
},
tooltip: {
visible: true,
template: "<b>Market Segment Average</b><br/>Current Score: #= value #<br/>#= category # "
},
data: [77.73, 77.27, 77.22, 76.68, 76.19, 75.7, 75.86, 76.09, 76.33, 76.15, 75.75, 75.4, 75.9]},
{
type: "column",
data: [50, 48, 48, 46, 46, 48, 49, 46, 39, 37, 36, 34, 27],
name: "Survey Count",
color: "#e9eafe",
axis: "ProductSurveys"}],
categoryAxis: {
labels: {
rotation: -45,
step: 1,
skip: 0
},
categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar", "Apr"],
axisCrossingValue: [0, 0, 100, 100]
}
});
This is the jsFiddle Project of my failed attempt: http://jsfiddle.net/wCB5a/1/
Any Help would be appreciated.
Telerik let me know that this functionality doesn't exist currently in KendoUI (version 2012.1.233) and the feature was noted and it may be in a future versions.
My work around to this problem was to hide the legend. Create my own legend with the hyperlink.
Related
question for Nivo library users.
I'm trying to implement a feature where you can brush and zoom line charts, something like this: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
Since Nivo doesn't support this, has anyone found a solution to have dynamic dates(meaning you don't have to manually add X nodes), as AxisX where they are populated by dates that comes from backend.
export const LineChart = () => {
const data = [
{
id: "japan",
color: "blue",
data: [
{
x: "Jan",
y: 100,
},
{
x: "Feb",
y: 130,
},
{
x: "Mar",
y: 80,
},
{
x: "Apr",
y: 130,
},
{
x: "May",
y: 30,
},
{
x: "Jun",
y: 90,
},
{
x: "Jul",
y: 110,
},
],
},
];
return (
<ChartCard title="Meetings">
<ResponsiveLine
data={data}
colors="#156C79"
lineWidth={1}
margin={{ top: 30, right: 30, bottom: 50, left: 60 }}
axisBottom={{
tickSize: 0,
tickPadding: 10,
}}
axisLeft={{
tickSize: 0,
tickPadding: 25,
}}
enableGridY={false}
enablePoints={false}
enableArea={true}
areaOpacity={1}
curve="cardinal"
theme={{
textColor: "#9C9C9C",
}}
defs={[
{
id: "gradientC",
type: "linearGradient",
colors: [
{ offset: 20, color: "#13807E" },
{ offset: 100, color: "#00EA96" },
],
},
]}
fill={[{ match: "*", id: "gradientC" }]}
/>
</ChartCard>
);
};
Thanks
The following is the "dashbaord.js" file in a admin dashboard script.
I want to transfer data from my index.php to display different Apex chart data
instead of the "series1", "series2" and the "categories" I want to send custom values. How can I do that ?
I can manage php, but I know nothing about javascript.
I tried to put <?php.. inside the .js file and it didnt work.
// currently sale
var options = {
series: [{
name: 'series1',
data: [6, 20, 15, 40, 18, 20, 18, 23, 18, 35, 30, 55, 0]
}, {
name: 'series2',
data: [2, 22, 35, 32, 40, 25, 50, 38, 42, 28, 20, 45, 0]
}],
chart: {
height: 240,
type: 'area',
toolbar: {
show: false
},
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
xaxis: {
type: 'category',
low: 0,
offsetX: 0,
offsetY: 0,
show: false,
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan"],
labels: {
low: 0,
offsetX: 0,
show: false,
},
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
},
markers: {
strokeWidth: 3,
colors: "#ffffff",
strokeColors: [ CubaAdminConfig.primary , CubaAdminConfig.secondary ],
hover: {
size: 6,
}
},
yaxis: {
low: 0,
offsetX: 0,
offsetY: 0,
show: false,
labels: {
low: 0,
offsetX: 0,
show: false,
},
axisBorder: {
low: 0,
offsetX: 0,
show: false,
},
},
grid: {
show: false,
padding: {
left: 0,
right: 0,
bottom: -15,
top: -40
}
},
colors: [ CubaAdminConfig.primary , CubaAdminConfig.secondary ],
fill: {
type: 'gradient',
gradient: {
shadeIntensity: 1,
opacityFrom: 0.7,
opacityTo: 0.5,
stops: [0, 80, 100]
}
},
legend: {
show: false,
},
tooltip: {
x: {
format: 'MM'
},
},
};
var chart = new ApexCharts(document.querySelector("#chart-currently"), options);
chart.render();
I have a chart with legend items which are overlapping each other (this is the image for itemDistance option set to 20 - clearly the distance between items is less than 20px, it seems that 20px is item distance between legend symbols):
The chart is fixed and legend is displayed properly only after resizing the window (image for exactly same configuration object - the only window has been resized):
I can't figure out what I have done wrong or if I have just encountered a bug in Highcharts. I'm using Highcharts v. 7.2.0 with HighchartsReactOfficial library v. 2.2.2. My configuration object:
const options: Highcharts.Options = {
chart: {
type: 'spline',
spacingLeft: 40,
spacingRight: 40,
},
title: {
style: {
display: 'none',
},
},
subtitle: {
style: {
display: 'none',
},
},
credits: {
enabled: false,
},
legend: {
itemDistance: 20,
itemStyle: {
color: '#7990A1',
},
},
plotOptions: {
series: {
marker: {
symbol: 'circle',
lineWidth: 1,
},
shadow: true,
},
},
series: [{
name: 'test1',
type: 'spline',
color: '#576A7B',
data: [23, 3, 33, 54, 29, 38],
},
{
name: 'test2',
type: 'spline',
color: '#FE7B1A',
data: [45, 21, 76, 43, 67, 59],
},
{
name: 'test3',
type: 'spline',
color: '#00BAFF',
data: [7, 19, 5, 9, 12, 11],
},
{
name: 'test4',
type: 'spline',
color: '#000000',
data: [40, 3, 71, 20, 28, 31],
},
],
yAxis: {
title: {
style: {
display: 'none',
},
},
showFirstLabel: false,
},
xAxis: {
categories: ['2019-05-15', '2019-05-16', '2019-05-17', '2019-05-18', '2019-05-19', '2019-05-20'],
},
};
Used by rendering component:
<HighchartsReact highcharts={Highcharts} options={options} />
Help will be greatly appreciated.
I have a chart using chart.js .. The problem is the vertical line is not working with the category axis i.e years label [year 0, year 1, year 2, year 3..].
Below is the example of working chart with annotations for showing
horizontal line.
var lines = [{
type: 'line',
mode: 'horizontal' ,/*set vertical for vertical line */
scaleID: 'y-axis-label', /* id of the axis */
value: 50,
borderColor: '#E35500',
borderWidth: 3
}];
var config = {
type: 'bar',
data: {
labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
// labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
datasets: [{
type: 'line',
label: 'Cost',
data: [35, 15, 25, 14, 10, 7],
borderColor: '#E35500',
fill: false,
lineTension : 0,
borderJoinStyle: 'miter',
}, {
type: 'line',
label: 'Cash Flow',
data: [-50, 180, 170, 220, 160, 190],
borderColor: '#FFC000',
fill: false,
lineTension : 0,
},
{
type: 'bar',
label: 'Benifit(One time)',
backgroundColor: "#005998",
data: [0,50, 60, 80, 50, 60],
}, {
type: 'bar',
label: 'Benifit(Recurring)',
backgroundColor: "#0FAAFF",
data: [0,150, 150, 180, 120, 140],
}],
lineAtIndex: 2
},
options: {
title: {
display: true,
text: 'Cash Flow Analysis and Breakdown'
},
annotation: {
drawTime: "afterDraw",
annotations: lines
},
scales: {
xAxes: [{
stacked : true,
beginAtZero: true,
barPercentage: 0.3,
id : 'x-axis-label',
position:'bottom',
scaleStartValue: 20,
labelString: 'Year',
gridLines: {
display:false
},
}],
yAxes: [{
stacked : true,
id : 'y-axis-label',
ticks: {
max: 300,
min: -50,
stepSize: 50,
},
position:'left',
gridLines: {
display:false
},
}]
},
legend : {
position: 'right',
labels:{
boxWidth:20,
}
},
maintainAspectRatio: false,
scaleBeginAtZero: true
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:100%; height:800px">
<canvas id="canvas"></canvas>
</div>
Below is the example of not working chart with annotations plugin for showing
vertical line.
var lines = [{
type: 'line',
mode: 'vertical' ,/*set vertical for vertical line */
scaleID: 'x-axis-label', /* id of the axis */
value: 50,
borderColor: '#E35500',
borderWidth: 3
}];
var config = {
type: 'bar',
data: {
labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
// labels: ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"],
datasets: [{
type: 'line',
label: 'Cost',
data: [35, 15, 25, 14, 10, 7],
borderColor: '#E35500',
fill: false,
lineTension : 0,
borderJoinStyle: 'miter',
}, {
type: 'line',
label: 'Cash Flow',
data: [-50, 180, 170, 220, 160, 190],
borderColor: '#FFC000',
fill: false,
lineTension : 0,
},
{
type: 'bar',
label: 'Benifit(One time)',
backgroundColor: "#005998",
data: [0,50, 60, 80, 50, 60],
}, {
type: 'bar',
label: 'Benifit(Recurring)',
backgroundColor: "#0FAAFF",
data: [0,150, 150, 180, 120, 140],
}],
lineAtIndex: 2
},
options: {
title: {
display: true,
text: 'Cash Flow Analysis and Breakdown'
},
annotation: {
drawTime: "afterDraw",
annotations: lines
},
scales: {
xAxes: [{
stacked : true,
barPercentage: 0.3,
id : 'x-axis-label',
position:'bottom',
}],
yAxes: [{
stacked : true,
id : 'y-axis-label',
}]
},
legend : {
position: 'right',
labels:{
boxWidth:20,
}
},
maintainAspectRatio: false,
scaleBeginAtZero: true
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:100%; height:800px">
<canvas id="canvas"></canvas>
</div>
What can i do to make a vertical line like at 4.5 years?
Thanks in advance.
The annotations for Chart.js aren't the best, and they struggle in particular with Category scales (it seems linear scales are the only one they work reliably for). However there is a way around it.
Instead of putting your labels directly into the chart, instead have an array of indices as the labels and then add a callback method to format the ticks with these index values.
Unfortunately, with category scales there is no way to specify anything other than one of the tick labels so 4.5 will not work, only 4 or 5. If you want 4.5 then you'll need to have a linear scale and then apply a similar technique as I've showed you here to it.
I have edited your code snippet to show what I mean.
EDIT: I edited the code snippet to show how this can be achieved using linear scales. You must specify a x and y value in your dataset data. I have only edited the one dataset for brevity sake.
var lines = [{
type: 'line',
mode: 'vertical' ,/*set vertical for vertical line */
scaleID: 'x-axis-label', /* id of the axis */
value: 4.5,
borderColor: '#E35500',
borderWidth: 3
}];
var labels = ["Year 0", "Year 1", "Year 2", "Year 3", "Year 4", "Year 5", "Year 6"];
var config = {
type: 'bar',
data: {
datasets: [{
type: 'line',
label: 'Cost',
data: [{x:0, y:35}, {x:1,y:15}, {x: 2, y:25}, {x:3, y:35}, {x:4,y:15}, {x: 5, y:25}],
borderColor: '#E35500',
fill: false,
lineTension : 0,
borderJoinStyle: 'miter',
}],
lineAtIndex: 2
},
options: {
title: {
display: true,
text: 'Cash Flow Analysis and Breakdown'
},
annotation: {
drawTime: "afterDraw",
annotations: lines
},
scales: {
xAxes: [{
stacked : true,
barPercentage: 0.3,
id : 'x-axis-label',
position:'bottom',
type: 'linear',
ticks: {
callback: (index) => {
return labels[index];
}
}
}],
yAxes: [{
stacked : true,
id : 'y-axis-label',
}]
},
legend : {
position: 'right',
labels:{
boxWidth:20,
}
},
maintainAspectRatio: false,
scaleBeginAtZero: true
}
};
window.onload = function() {
var ctx = document.getElementById("canvas").getContext("2d");
new Chart(ctx, config);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<div style="width:100%; height:800px">
<canvas id="canvas"></canvas>
</div>
I'm trying to create a butterfly chart using Highcharts. I want to plot it as
The Code is as follows
// Data gathered from http://populationpyramid.net/germany/2015/
$(function () {
// Age categories
var categories = ['0-4', '5-9', '10-14', '15-19',
'20-24', '25-29', '30-34', '35-39', '40-44',
'45-49', '50-54', '55-59', '60-64', '65-69',
'70-74', '75-79', '80-84', '85-89', '90-94',
'95-99', '100 + '];
$(document).ready(function () {
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Population pyramid for Germany, 2015'
},
subtitle: {
text: 'Source: Population Pyramids of the World from 1950 to 2100'
},
xAxis: [{
categories: categories,
reversed: false,
labels: {
step: 1
}
}, /*{ // mirror axis on right side
opposite: true,
reversed: false,
categories: categories,
linkedTo: 0,
labels: {
step: 1
}
}*/],
yAxis: {
title: {
text: null
},
labels: {
formatter: function () {
return Math.abs(this.value) + '%';
}
}
},
plotOptions: {
series: {
stacking: 'normal'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
}
},
series: [{
name: 'Male',
data: [-2.2, -2.2, -2.3, -2.5, -2.7, -3.1, -3.2,
-3.0, -3.2, -4.3, -4.4, -3.6, -3.1, -2.4,
-2.5, -2.3, -1.2, -0.6, -0.2, -0.0, -0.0]
}, {
name: 'Female',
data: [2.1, 2.0, 2.2, 2.4, 2.6, 3.0, 3.1, 2.9,
3.1, 4.1, 4.3, 3.6, 3.4, 2.6, 2.9, 2.9,
1.8, 1.2, 0.6, 0.1, 0.0]
}]
});
});
});
Here is my fiddle link, how can I get my xAxis labels in between the series. Please guide me to achieve this.
I would approach this differently than morgan did, though that example is certainly useful.
I would do this as a standard bar chart, making use of multiple yAxis objects (one for each series), which also allows for using the reversed property of the left-facing series.
Code Example:
yAxis: [{
title: { text: null },
width: 200,
reversed: true
},{
offset: 0,
title: { text: null },
left: 300,
width: 200
}],
series: [{
yAxis: 0,
data: [...]
}, {
yAxis: 1,
data: [...]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/L80cdxm0/
Example Output:
An inverted columnrange chart combines with the cross-specific-values plugin is a way to go. A column range chart allows you to specify position of the columns and make the space for labels. The plugin moves the axis to the center of the chart.
Highcharts.chart('container', {
title: {
text: 'Butterfly Chart Example'
},
subtitle: {
text: 'stackoverflow.com'
},
chart: {
type: 'columnrange',
inverted: true,
marginTop: 100
},
legend: {
verticalAlign: 'top',
y: 60,
x: -25,
itemDistance: 50
},
xAxis: {
categories: ['G7', 'A8', 'V9', 'V4', 'V3', 'V1', 'V5'],
crossing: 118,
lineWidth: 0,
tickLength: 0,
},
yAxis: {
gridLineWidth: 0,
tickInterval: 50,
min: 0,
max: 250,
lineWidth: 1,
title: {
text: null
}
},
plotOptions: {
series: {
grouping: false
}
},
series: [{
name: 'South',
color: 'blue',
data: [
[55, 100],
[60, 100],
[65, 100],
[55, 100],
[75, 100],
[52, 100],
[60, 100]
]
}, {
name: 'North',
color: 'orange',
data: [
[120, 170],
[120, 150],
[120, 175],
[120, 130],
[120, 125],
[120, 148],
[120, 145]
]
}]
});
example: http://jsfiddle.net/7d4mrhuv/