Navigator not showing in high_chart in flutter web - flutter

I try to implement flutter chart with high_chart: ^2.0.3 library.
When come to the implement the navigator its not showing on the chart. I enable the navigator but
Chart only show like this.
navigator: {
enabled: true
},
What i looking for get like this.
I add the chart data string like this.
final String _chartData = '''{
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
navigator: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2007-2008',
data: [
[Date.UTC(1970, 9, 27), 0 ],
//data
]
}, {
name: 'Winter 2008-2009',
data: [
[Date.UTC(1971, 5, 7), 0 ]//data
]
}, {
name: 'Winter 2009-2010',
data: [
[Date.UTC(1970, 9, 9), 0 ],
//data
]
}],
}''';
Also i add this for the index.html file
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Full source code Here..

You need to load Highstock only, Highcharts is already included in Highstock:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/series-label.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/hnxvqpyj/
Docs: https://www.highcharts.com/docs/stock/understanding-highcharts-stock

Related

How to place the text inside donut chart (echarts)

I'm new one of echarts, I need to set the text in centre of donuts chart. I tried and google it no use, I tried it by html also but I cant able to achieve it. Please any one suggest me, How can I resolved it. Thanks in advance.
In options I add the total in title but I need to show that one into centre.
var myChart = echarts.init(document.getElementById('pieChart1'));
var idx = 1;
pieChartOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
title: {
text: "Total "+10+"%",
left: 'center'
},
series: [
{
name: 'Test one',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
show: true,
color: '#000',
fontSize: '80',
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 10, name: 'Success', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#5E50A1'}}},
{value: 20, name:'Failed', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FFB200'}}},
{value: 30,name:'Onprocess', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FF434F'}}}
]
}
]
}
myChart.setOption(pieChartOption);
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小的Dom-->
<div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<!--引入echarts. Using echarts-all.js for convenience -->
<!-- CDN is taken from https://cdnjs.com/libraries/echarts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html>
As far as I understand, you do not plan to place labels in the center, only the total, right? In this case the most simple option it is a markPoint (see live example):
series: [{
// ...
markPoint: {
tooltip: { show: false },
label: {
show: true,
formatter: '{b}',
color: 'black',
fontSize: 20,
},
data: [{
name: 'Total 10%',
value: '-',
symbol: 'circle',
itemStyle: { color: 'transparent' },
x: '50%',
y: '50%',
}],
},
// ...
}]
P.S. Library that you included in example is very strange (copyrights?, binary data?) and distort default behaviour. Please don't use them, take the any pack from the repo instead https://www.jsdelivr.com/package/npm/echarts?path=dist
You can use the graphic property, like this:
https://jsfiddle.net/motz75an/
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'middle',
z: 999,
style: {
text: `Total 10%`,
textAlign: 'center',
fontSize: 26,
}
}]
},

How to properly use the chartjs datalabels plugin

I'm using Chart.js to create a bar char, I have to display the percentage on each bar, so I found the chartjs-plugin-datalabels, but I can't make it work, the documentation and the examples are not clear for me.
This is What I got:
HTML:
<canvas id="bar-chart" width="800" height="450"></canvas>
Javascript:
// Bar chart
var valuedata= [2478,5267,734,784,433];
var valuelabel=["Africa", "Asia", "Europe", "Latin America", "North America"];
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: valuelabel,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: valuedata,
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false,
drawBorder: false
},
ticks: {
display: false
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function(context) {
console.log("Algo: "+context);
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
}
}
}
});
myBarChart.update();
Supposedly, from what I get, the "plugin" inside option is the one that let the values to be display, but as I shown in my code above, doesn't work for me, surely I'm missing something but I don't know what, can somebody help me?
Thanks.
Fiddle:
https://jsfiddle.net/s64bq4sw/16/
It was because of the version of the Chartjs I was using, this plugin requieres 2.7.0 or later.

highcharts histrogram with dates

I have a multidimensional array structured like this: [[year,month,day,value],[year2,month2,day2,value2],[year3,month3,day3,value3]...]. Each value is an integer number. I would like to build an Highcharts Histogram chart: in the xAxis there are the YEARS, in the yAxis the MONTHS. Now, in the columns i would like to have the sum of the VALUES for that year (example: column 2009 with the sum of all values that have 2009 as year). In the markers, i would like to have them
distributed according to the month of that year (example: in column 2009, markers with month 1 at the left, and with month 12 at the right of that column, and also for other columns).
Is it possible to do with this type of chart? Thanks a lot.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/histogram-bellcurve.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var data = [[2014,1,10,3],[2014,2,3,9],[2013,12,4,7],[2012,3,6,7],[2009,8,5,9],[2010,11,31,5],[2016,1,1,3],[2011,12,13,9],[2016,2,14,7],[2017,5,29,6],[2008,8,15,4],[2013,11,31,5]];
Highcharts.setOptions({
colors: ['green', 'blue', 'yellow', 'orange', 'red', 'violet', 'pink', 'brown', 'black']
});
$(function () {
Highcharts.chart('prova',{
title: {
text: 'Distribuzione articoli'
},
xAxis: [{
title: { text: 'Anno' },
min: 2009,
max: 2017,
type: 'category'
}, {
title: { text: 'Mese' },
opposite: true,
}],
yAxis: [{
title: { text: 'Giorno' },
min: 0,
max: 12,
labels: {
step: 1,
}
}, {
title: { text: 'Sequenza temporale' },
opposite: true,
}],
series: [{
name: 'Sequenza temporale',
type: 'histogram',
xAxis: 1,
yAxis: 1,
baseSeries: 's1',
zIndex: -1
}, {
name: 'Articoli',
type: 'scatter',
data: data,
id: 's1',
marker: {
radius: 1.5
}
}]
})
})
})
</script>
<div id="prova" height="400px" width="800px"></div>

Which chart type should i choose to show change in values between 2 dates?

I am using Highcharts, but my question is in general. I want to know which chart is a perfect match to show change in values between 2 dates.
E.g The lending rate e.g
29-Aug : 21.2
30-Aug : 21.3
The change is 0.1 million.
Which chart type should i choose to show this little difference clearly noticeable .?
If you're comparing two dates/values, I would recommend using a bar chart. (If you're comparing values over months or years, I would suggest using a line or area chart.) You can better emphasize the difference between the two lending rate values by specifying the minimum, maximum, and step scale values so that the 0.1 million difference can be clearly illustrated. See the below demo:
var myConfig = {
type: 'bar',
title: {
text: 'Lending Rate',
fontFamily: 'Georgia'
},
utc: true,
timezone: 0,
scaleX: {
transform: {
type: 'date',
all: '%M %d, %Y'
},
step: 86400000,
item: {
fontSize: 10
}
},
scaleY: {
values: '21.1:21.4:0.1',
format: '%vM',
decimals: 1,
item: {
fontSize: 10
},
guide: {
lineStyle: 'dotted'
}
},
plot: {
barWidth: '50%',
borderWidth: 1,
borderColor: 'gray',
backgroundColor: '#99ccff',
valueBox: {
text: '%v million',
fontSize: 12,
fontColor: 'gray',
fontWeight: 'normal'
},
tooltip: {
text: '%v million'
}
},
series: [
{
values: [
[1472428800000, 21.2],
[1472515200000, 21.3],
]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 400,
width: 600
});
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<div id='myChart'></div>
For more on scale customization and formatting, see this X/Y-Axis Scales Tutorial. The value boxes and tooltips can also be used to provide further information about the node values.
Hope that helps. I'm a member of the ZingChart team, and happy to answer further questions.
A simple bar chart with data labels to indicate the respective values would be helpful to show users there is a very small change in value.
See the code snippet below. I modified one of the basic Highcharts demos for a bar chart with your example values.
I hope this is helpful for you!
$(function () {
$('#container').highcharts({
chart: { type: 'bar' },
title: { text: 'Sample Chart' },
xAxis: {
categories: ['29-Aug','30-Aug'],
title: { text: null }
},
yAxis: { min: 0 },
tooltip: { valueSuffix: ' million' },
plotOptions: {
bar: {
dataLabels: {
crop: false,
overflow: 'none',
enabled: true,
style: { fontSize: '18px' }
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
name: 'Sample Series',
data: [21.2,21.3]
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 450px; height: 250px; margin: 0 auto"></div>

How to apply flat colors effect in Kendo charts

I am using Telerik charts in my project. I am able to change the color of charts but not the style. What i mean by style is - there appears a embossed effect over all the charts(First Image). What i need to apply is flat colors(Second Image). How can i remove gradient effect over charts in all my Kendo charts?
Thanks in advance.
You have to apply Overlay effect. See this Kendo Document
Apply none gradient option and available gradient options are :
roundedBevel (This is the default gradient option)
sharpBevel
none
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: { visible: false },
chartArea: { background: "" },
seriesDefaults: {
labels: {
visible: true, background: "transparent", template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
overlay: { gradient: "none" },
startAngle: 150,
data: [{ category: "Asia", value: 53.8, color: "#9de219" },
{ category: "Europe", value: 16.1, color: "#90cc38" },
{ category: "Latin America", value: 11.3, color: "#068c35" },
{ category: "Africa", value: 9.6, color: "#006634" },
{ category: "Middle East", value: 5.2, color: "#004d38" },
{ category: "North America", value: 3.6, color: "#033939" }]
}],
tooltip: { visible: true, format: "{0}%" }
});
}
$(document).ready(createChart);
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.common-material.min.css" />
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.226/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.226/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min.js"></script>
<div id="chart" ></div>
Please try with the below code snippet. To remove gradient effect you have to set 'overlay: null' in chart.
<div id="chart"></div>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
$(document).ready(function () {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
seriesDefaults: {
overlay: {
gradient: null
}
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#03a9f4", "#ff9800", "#fad84a", "#4caf50"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
}
});
});
</script>
Let me know if any concern.