Develop Reference

Interactive Highcharts change onclick event

I'm trying to use a pie Highchart to change the series of a line chart. It worked as expected until the different series to choose from have different number of elements. I don't know how to update the values of the series AND the categories shown on xAxis.
Html code:
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container-pie" style="height: 300px;"></div>
<div id="container-line" style="height: 300px;"></div>
JS code:
Highcharts.setOptions({
credits: {
enabled: false
}
});
var circuits = {
linechart_Mar_22: {
name: 'Circuit 1',
areaName: 'First floor',
color: Highcharts.getOptions().colors[0],
data: [3, 15, 26, 13, 23, 91, 13],
ents: ["A", "B", "D", "E", "F", "G", "H"]
},
linechart_Dec_21: {
name: 'Circuit 2',
areaName: 'Second floor',
color: Highcharts.getOptions().colors[1],
data: [92, 34, 56, 88, 18, 23],
ents: ["A", "B", "C", "D", "E", "F"]
},
linechart_Sep_21: {
name: 'Circuit 3',
areaName: 'Parking',
color: Highcharts.getOptions().colors[2],
data: [29, 12, 53, 19, 29, 10, 34, 77],
ents: ["A", "B", "C", "D", "E", "F", "G", "H"]
},
linechart_Jun_21: {
name: 'Circuit 4',
areaName: 'Roof',
color: Highcharts.getOptions().colors[3],
data: [88, 92, 91, 23, 50, 29, 31, 10],
ents: ["A", "B", "C", "D", "E", "F", "G", "H"]
}
};
Highcharts.chart('container-pie', {
chart: {
type: 'pie'
},
title: {
text: 'Areas'
},
tooltip: {
enabled: false
},
plotOptions: {
pie: {
cursor: 'pointer',
point: {
events: {
click: function() {
var circuitName = this.name,
circuitSeries = [];
for (var name in circuits) {
circuits[name].areaName === circuitName ? circuitSeries.push(circuits[name]) : null;
}
if (Highcharts.charts.length === 1) {
Highcharts.chart('container-line', {
chart: {
type: 'column'
},
title: {
text: 'Circuit'
},
series: circuitSeries,
xAxis: {
type: 'category',
tickInterval: 1,
gridLineWidth:1,
labels: {
enabled: true, step:1,
rotation: 90
},
categories: circuits[name].ents
},
});
} else {
Highcharts.charts[1].update({
series: circuitSeries
});
}
}
}
}
}
},
series: [{
name: 'Areas',
data: [{
name: 'First floor',
y: 1
}, {
name: 'Second floor',
y: 1
}, {
name: 'Parking',
y: 1
}, {
name: 'Roof',
y: 1
}]
}]
});
You can use this fiddle to see what happens.
http://jsfiddle.net/cjxm0huz/

Place tick marks between bars in Plotly.js

Is it possible in Plotly.js to place tick marks between the bars? Here i'd like the ticks to represent cut points in a continuous distribution and the bars to represent counts within the intervals between. An alternative is to make the axis labels ranges, e.g. "5-<10", "10-<25", "25-<50", etc. but it seems cleaner to show the breaks.
Below is a mockup in Paintbrush showing the desired effect, here i added tick marks and moved the number labels by dragging. Also is a Codepen link to toy data: https://codepen.io/proto/pen/bKGOXg
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
width: 500,
height: 360,
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);

So I checked the plotly documentation, please checkout the documentation available here
We have a property under the bar chart object called offset. Plotly describes this property as.
offset (number or array of numbers)
Shifts the position where the bar is drawn (in position axis units).
In "group" barmode, traces that set "offset" will be excluded and
drawn in "overlay" mode instead.
When I set the property to 0.1, I am getting the expected result. Please checkout the below example and let me know if this solves your issue!
var chart = {
data: [
{
rowKey: "current",
name: "current",
x: ["0.1", "0.5", "1", "2", "5", "10", "25", "50", "100", "250", "500"],
offset: 0.1,
y: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
values: [
0.006369426751592357,
0.012738853503184714,
0.03821656050955414,
0.03184713375796178,
0.10828025477707007,
0.24203821656050956,
0.2229299363057325,
0.20382165605095542,
0.12101910828025478,
0.006369426751592357,
0.006369426751592357
],
text: [
"1%",
"1%",
"4%",
"3%",
"11%",
"24%",
"22%",
"20%",
"12%",
"1%",
"1%"
],
labels: [
"0.1",
"0.5",
"1",
"2",
"5",
"10",
"25",
"50",
"100",
"250",
"500"
],
type: "bar",
hoverinfo: "x+y",
textposition: "auto",
orientation: "v",
mode: "lines+markers",
marker: { color: null, colors: null },
uid: "2cf1e3"
}
],
layout: {
colorway: [
"#3399CC",
"#99BB66",
"#2266AA",
"#FFCC00",
"#888888",
"#FFAA00",
"#800080"
],
color: "purple",
plotlyType: "bar",
type: "bar",
orientation: "v",
barmode: "",
showlegend: false,
dataValues: true,
series: { hoverinfo: "x+y" },
legend: {
orientation: "v",
yanchor: "bottom",
xanchor: "right",
traceorder: "normal"
},
titlefont: { size: 12 },
margin: { l: 80, r: 10, t: 140, b: 80 },
xaxis: {
tickangle: 0,
tickfont: { size: 12 },
titlefont: { size: 12, weight: 700 },
type: "category",
title: "scenario",
range: [-0.5, 10.5],
ticks: "outside",
autorange: true
},
yaxis: {
title: "",
type: "linear",
tickformat: ".0%",
hoverformat: ".0%",
range: [0, 0.25477707006369427],
autorange: true
},
transposeData: false,
showOverall: false,
width: 500,
height: 360,
showLegend: true,
reverse: {},
titles: {},
swapCategoryAndLegend: false
},
options: {
displayModeBar: false,
modeBarButtonsToRemove: ["sendDataToCloud", "hoverCompareCartesian"]
}
};
Plotly.newPlot("myDiv", chart);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width: 100%; height: 500px;"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>

Dynamic div id for directive html

I have a problem using dynamic div id in directive template to rendering graph. The error that I get is
Cannot set property 'innerHTML' of null
My template.html
<div id="{{title}}" style="height: 40vh;"></div>
The directive is simply rendering graph on given div id
link: function (scope, element, attrs) {
let chart = AmCharts.makeChart(scope.title, {
type: "stock",
theme: "light",
dataSets: [scope.data.dataset],
panels: [{
showCategoryAxis: false,
recalculateToPercents: "never",
title: scope.data.title,
valueAxes: [{
title: scope.data.type,
titleFontSize: 10,
titleBold: false
}],
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
bullet: "round",
bulletBorderColor: "#FFFFFF",
bulletBorderAlpha: 1,
balloonText: "[[title]]: <b>[[value]]</b>",
compareGraphBalloonText: "[[title]]: <b>[[value]]</b>",
compareGraphBullet: "round",
compareGraphBulletBorderColor: "#FFFFFF",
compareGraphBulletBorderAlpha: 1
}],
stockLegend: {
periodValueTextRegular: "[[value.close]]"
},
}],
panelsSettings: {
mouseWheelZoomEnabled: true,
marginLeft: 60
},
valueAxesSettings: {
axisAlpha: 1,
gridThickness: 0,
axisThickness: 1,
inside: false
},
categoryAxesSettings: {
minPeriod: "ss"
},
chartScrollbarSettings: {
graph: "g1",
usePeriod: "10mm",
updateOnReleaseOnly: false
},
chartCursorSettings: {
cursorPosition: "mouse"
},
periodSelector: {
dateFormat: "YYYY-MM-DD JJ:NN:SS",
periods: [{
period: "hh",
count: 1,
label: "1 hour"
}, {
period: "hh",
count: 2,
label: "2 hours"
}, {
period: "hh",
count: 5,
label: "5 hour"
}, {
period: "hh",
count: 12,
label: "12 hours"
}, {
period: "MAX",
label: "MAX"
}]
}
});
}
Anybody have an idea how to get around this problem, thanks in advance.

Try setting the ID on the div by using ng-attr-. For example: <div ng-attr-id="title" style="height: 40vh;"></div>

How to draw connecting lines for bar charts in Kendo-UI

I have recently started on Kendo-UI.
I have the following bar charts. I would like to add the draw lines that connects bar charts as shown in the second figure.
Here is what I have:
Here is what I wish to achieve:
function createChart() {
$("#chart").kendoChart({
title: {
text: "Hybrid car mileage report"
},
legend: {
position: "top"
},
series: [{
type: "column",
data: [20, 40, 45, 30, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "column",
data: [20, 30, 35, 35, 40],
stack: true,
name: "on gas",
color: "#0399d4"
}],
valueAxes: [{
title: { text: "miles" },
min: 0,
max: 100
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
Here is my jsfiddle: http://jsfiddle.net/mskjbLwx/

Add two another series with type: line to connect bar.
See example: JSFiddle, may be that help you.
function createChart() {
$("#chart").kendoChart({
title: {
text: "Hybrid car mileage report"
},
legend: {
position: "top"
},
transitions: true,
series: [{
type: "line",
missingValues: "interpolate",
markers: {
visible: false
},
data: [10, 20, 30, 40, 50],
stack: true,
tooltip: {
visible: true
},
name: "on battery",
color: "orange",
visibleInLegend: false
}, {
type: "column",
data: [10, 20, 30, 40, 50],
stack: true,
name: "on battery",
color: "#003c72"
}, {
type: "line",
missingValues: "interpolate",
markers: {
visible: false
},
data: [5, 15, 25, 35, 45],
stack: true,
tooltip: {
visible: true
},
name: "on gas",
color: "green",
visibleInLegend: false
}, {
type: "column",
data: [5, 15, 25, 35, 45],
stack: true,
name: "on gas",
color: "#0399d4"
}],
valueAxes: [{
title: {
text: "miles"
},
min: 0,
max: 100
}],
categoryAxis: {
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
axisCrossingValues: [0, 0, 10, 10]
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
{ font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
<base href="http://demos.telerik.com/kendo-ui/area-charts/multiple-axes">
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"> </script>
<body>
<div id="example">
<div class="demo-section k-content">
<div id="chart"></div>
</div>

How to set the legend series dynamically in kendo ui

How can we set the series with same field name having different values. So that the legends can be displayed with different values.
I had tried in this way code:
$(document).ready(function(){
var db = new kendo.data.DataSource({
data: data,
group: {
field: "studentmarks"
}
});
db.read();
$("#Chart").kendoChart({
theme: $(document).data("kendoSkin") || "silver",
dataSource: db,
aggregate: [{ field: "studentmarks", aggregate: "sum"}],
group: { field: "studentsmarks" },
title: {
text: "Studentdetails"
},
dateField: "time",
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line",field:"ID"
},
series: [{
name: "marks",
data: data,
filter: "studentmarks",
color: "#FC0505",
width: 2,
visibleInLegend: "studentmarks",
markers: {
visible: false
},
tooltip: {
visible: true,
format: "{0}%"
}
}, {
name: "ID",
filter: "studentmarks",
data: data,
axis: "",
color: "#2605FC",
width: 2,
markers: {
visible: true
},
tooltip: {
visible: true,
format: "{0}"
}
}, {
name: "phone",
filter: "studentmarks",
data: data,
axis: "",
color: "#ED9AA5",
width: 2,
markers: {
visible: true
},
tooltip: {
visible: true,
format: "{0}%"
}
},
{
name: "cbs",
filter:"studentmarks",
data: data,
axis: "",
color: "#9AA5ED",
visible: true,
opacity: .4,
width: 2,
markers: {
visible: true
},
tooltip: {
visible: true,
format: "{0}%"
}
}],
valueAxis: [{
title: { text: "" },
name: "ID",
majorUnit: 0.5,
max: 5.0,
min: 0
}, {
name: "ink",
title: { text: "" },
min: 0,
max: 6727.14,
majorUnit: 1000,
minorUnit: 500
}],
navigator: {
series: {
type: "area",
color: "red",
field: "studentmarks",
//stack: "true",
//value:"",
data: data,
aggregate: "min",
name: "sai",
select: {
from: "2009-01-01 17:08:04",
to: "2013-12-24 20:30:26"
},
//labels: { color: "green", visible: false },
tooltip: { background: "green", format: "{0}", color: "white", visible: true }
}
}
});
});

Perhaps this will help?
var checkCookie = function(){
var chartData1 = [{
name: "Hans",
color: "black",
data: [1,2,3,4,5]
}]
var chartData2 = [{
name: "Hans",
color: "black",
data: [1,2,3,4,5]
}, {
name: "Franz",
color: "red",
data: [6,7,8,9,10]
}]
if (cookieThere) {
return chartData1
} else {
return chartData2
}
}
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
chartArea: {
background: "",
height: 150
},
legend: {position: "bottom"},
seriesDefaults: {
type: "column",
stack: true,
overlay: {gradient: "none"},
},
series: checkCookie(),
...
});

var mydata=checkCookie();
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
chartArea: {
background: "",
height: 150
},dataSource:{
data:mydata,
serverSorting: false,
group: {
field:"name",
},sort: [{field: "name", dir: "asc"},
schema:{
model:{
fields:{
"name":{"type":"string"},
"data":{"type":"number"}
}
}
}
},
legend: {position: "bottom"},
series: [{type:"column", field:"data", stack:true,colorField: "color"}],