i made a chart, with highstock, that contains the enabled scrollbar but when i focus the mouse on it, it happens a strange behavoir: the chart goes down and covers the scrollbar.
the options that i used are:
var options = {
chart: {
title: {
text: ''
},
renderTo: 'containerGrafico'
},
yAxis: {
title: '',
tickPixelInterval: 30,
labels: {
formatter: function () {
return '€ ' + Highcharts.numberFormat(this.value, 0);
}
}
},
xAxis: {
categories: seriesMesi,
labels: {
formatter: function () {
return arrayMesi[this.value.substring(4, 6)] + " " + this.value.substring(0, 4);
}
},
max: 6
},
scrollbar: {
enabled: true,
barBackgroundColor: 'transparent',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'transparent',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
series: [
{
name: 'Totale Versato',
color: '#96B7D8',
type: 'column'
},
{
name: 'Prelievi',
color: '#D1D1D1',
type: 'column'
}]
};
anybody can tell me where i'm wrong?
thank you very much
Cinzia
In general, categorized axis for Highstock isn't supported.
Anyway, for me it works properly, see: http://jsfiddle.net/3bQne/1004/
Try to update to latest (1.3.10) version and remove categories. Or use Highcharts with categorized axis.
If none of above will help - recreate issue on jsFiddle.
Related
am look to answer this bug on Apache Echarts with vue 3 Composition API
am using apache echarts for rendering maps as a background, the maps is become from GeoJSON data of province accross my country : Source GeoJSON, the rendering process of GeoJson was successfuly as expected, but take a this code bellow, Here is problems occurs, am expected that after rendering the chart, the series that was defined is expect rendered also, but there is not yet, so whats am wrong? FYi : am need to rendr the chart and make tooltip of each province section of chart series (simplify Chloropeth Mapping), am following many guide but there is not works yet. am also referring of the official documentation of apache echart example her Chloropet Apacghe Echarts, but not working as expeccted. so is there can give me the suggestion of am wrong ? great thanks for all, looking best oppinions and suggestion from you here is my result that is not expected :
just rendered maps, not the defined series
and here is my expectation(same as example) : Expected the series is rendered in maps section and if am hovered my cursor the tooltip is show the data value of the given series;
Apache Echart COnfiguration in Vue (as reactive)
title: {
text: 'Peta Sebaran Arsiparis （2022）',
subtext: 'Open source data',
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
geo: {
map: "indonesia-province",
roam: true,
nameProperty: "Propinsi",
tooltip: {
show: true
},
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2
},
label: {
show: false
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: generateRegions(provinceNames)
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{ // 地图配置
name: 'Province daatatasdbashdvjk',
type: 'map',
map: 'indonesia-province', // 自定义扩展图表类型
nameProperty: "Propinsi",
geoIndex: 0,
data: generateMapData(provinceNames)
}
],
}
I have a data portal, in which a user can visualize the data by graph or by map. Strange thing is, that when I click on the map symbol and the new page is being loaded with the map instead of the graph now, the correctly colored map appears for a very short moment, but is then overridden or overlaid by an empty map.
Here is a short video which demonstrates the problem. And here is the site.
When I reload the page, it sometimes work.
Here is the code for the map:
$(function () {
$.getJSON('map.csv', function (data)
{
// Initiate the chart
$('#container').highcharts('Map', {
title:
{
text: "Medium size cities (More than 300 000 people in 2014), % total",
style:
{
fontFamily: 'Arial',
fontSize: '20px',
/* fontWeight: 'bold', */
lineHeight: '22px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
subtitle:
{
text: "2035",
style:
{
fontFamily: 'Arial',
fontSize: '14px',
/* fontWeight: 'bold', */
lineHeight: '22px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
legend:
{
title:
{
text: "% of population",
style:
{
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
y: -20
},
mapNavigation:
{
enabled: true,
buttonOptions:
{
verticalAlign: 'middle'
}
},
tooltip:
{
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
useHTML: true,
padding: 0,
formatter: function ()
{
return '<b>' + this.point.name + '</b><br>'
+ this.point.value + '<br>'
+ this.series.name ;
}
},
credits:
{
position:
{
align: 'left',
x: 10,
y: -5
},
style:
{
fontSize: '11px',
lineHeight: '12px'
},
mapText: '',
text: 'Source: World Urbanization Prospects; UN Environment Live',
href: 'http://esa.un.org/unpd/wup/'
},
colorAxis:
{
max: 100 },
plotOptions: {
series: {
point: {
events: {
click: function (e) {
location.href = 'graphexe_gegslive.php?selectedID=ulv_8&selectedCountries%5B%5D=' + this.id + '&selectedLanguage=en&selectedDatasettype=&selectedYears=all&type=gegslive&selectedYear=2016&selectedModule=graph';
}
}
}
}
},
series : [
{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'iso2'],
name: "% of population",
states:
{
hover:
{
color: '#BADA55'
}
}
}]
});
});
});
</script>
What is causing this problem? Thanks for any hints.
You are loading the chart twice and both times this is done asynchronously.
The order is unstable, but one time you are loading empty data (jQuery's getJSON has data as an empty array) and the second load is with correct data.
You should check why there are two places where the chart is created and why one time the data is wrong.
I am trying to implement angular D3 Line Chart with angular-nvd3 library. We are using AngularJS 1.6 with ES6. This is how angular-nvd3 is wired:
app.js
import angularnvd3 from '../node_modules/angular-nvd3/index';
export default angular.module('myApp', othermodules,..angularnvd3)
.
.
controller.js
this.linechartOptions = {
chart: {
type: 'lineChart',
height: 300,
width:500,
x: function(d){ return d.x },
y: function(d){ return d.y },
useInteractiveGuideline: true,
xAxis: {
axisLabel: 'X Label'
},
yAxis: {
axisLabel: 'Y Label',
},
},
title: {
enable: true,
text: 'Some text',
css: {
'font-size' : '15px',
'font-weight' : 'bold',
'text-align' : 'left'
}
},
};
this.linechartData = [{
values: lineChartData,
key: 'Some Key',
color: '#1f77b4'
}]
template.html
<nvd3 options="controller.linechartOptions" data="controller.linechartData"></nvd3>
However, the graphs get painted with a black background.
I have been referring to these resources:
http://krispo.github.io/angular-nvd3/#/quickstart
http://plnkr.co/edit/lBKFld?p=preview
However I can't figure out how to remove the black background and the lines that create the filled area. I simply need to view the line graph as shown in the plunker mentioned above.
Simply include nv.d3.css from node_modules/nvd3/build/nv.d3.css and it will fix this issue.
I'm following the example from the Telerik web site for Basic Usage with the exception of using a Model, children Heirarchy. I just want to be able to list shapes with text boxes and be able to connect them and get the connections later. So far, I'm able to list the shapes and the text boxes, but for some reason all the shapes get centered to the origin of the diagram. I'd like to be able to list the shapes in some order, without connections, then connect them later on on the diagram. Here is the code I have so far:
var data = [{
firstName: "Antonio",
lastName: "Moreno",
title: "Team Lead",
colorScheme: "#1696d3"
},
{
firstName: "Alfredo",
lastName: "Morales",
title: "Team Lead",
colorScheme: "#1696d3"
}];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: dataItem.colorScheme,
offset: 0,
opacity: 0.5
}, {
color: dataItem.colorScheme,
offset: 1,
opacity: 1
}]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.firstName + " " + dataItem.lastName,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.title,
x: 85,
y: 40,
fill: "#fff"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
}),
shapeDefaults: {
visual: visualTemplate
},
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$(document).ready(createDiagram);
I've made some sample: http://dojo.telerik.com/UbECE that makes rectangles one next to another.
I am following this example from API Documentation http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual
They are using:
$("#diagram").getKendoDiagram().layout();
which works.
Your function will became:
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource : data,
shapeDefaults: {
visual: visualTemplate
},
});
$("#diagram").getKendoDiagram().layout();
}
I have a Highcharts pie chart here: http://jsfiddle.net/6PbbR/52/
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color]
]
};
});
// Build the chart
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
shadow: true,
},
tooltip: {
enabled: false
},
title: {
text: ""
},
plotOptions: {
pie: {
allowPointSelect: true,
size:'68%',
cursor: 'pointer',
shadow: true,
dataLabels: {
enabled: true,
distance: -40,
style: {
width: '100px'
},
color: '#fff',
connectorColor: '#000000',
formatter: function() {
return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> ';
}
}
}
},
series: [{
type: 'pie',
name: 'Income Investments',
data: [
['FLOATING RATE FUNDS', 16.667],
{
name: 'Corporate Capital Trust',
y: 16.667,
sliced: true,
selected: true
},
['BONDS', 16.667],
['ANNUITIES', 16.667],
['REITs', 16.667],
['CDs', 16.667]
]
}],
colors: [
'#83a3c6',
'#98012e',
'#19699b',
'#ae9e8e',
'#5283b0',
'#958370'
],
});
});
});
Two questions:
1) I'm not happy with how I inserted inline style in plotOptions{pie{formatter. Where is a better place to do this using the API, instead of brute-forcing inline style?
2) I would like to change the font-family for the red wedge (and possibly tweak fix its positioning/margins). What's the best way of doing this?
Edit: Ideally, I can accomplish my needs without needing to go outside the above function. Is it possible to attach style to just one data point using the API?
It's a simple html, so you can add a class or id and then style using css.
js
formatter: function() {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
}
css
#myTooltipId {
font-family: arial;
font-size: 10px;
font-weight:bold
}
Update:
Inside formatter you can get the slice properties using this.
So you just have to check if the slice is the one you want.
formatter: function() {
// key is the slice name
if (this.key == 'CDs') {
return '<b id="myTooltipId">'+ this.point.name +'</b> ';
} else {
return this.value;
}
}