I have a kendo's scatterline chart on my HTML page.
I have generated it as following.
objchart = $("#chart").kendoChart({
dataSource: {
data: Chartdata
},
background: mainbackground,
series: [{
type: "scatterLine",
xField: "date"
}],
xAxis: {
title: {
text: "Date"
},
min: min_date,
max: max_date,
name: "Date",
template: "#= kendo.toString(value,'MM/dd/yyyy HH:mm:ss')#",
type: "date",
baseUnit: "seconds",
background: xaxisbackcolor,
},
yAxis: {
title: {
text: "Closing stock prices"
},
min: min_close,
max: max_symbol,
background: yaxisbackcolor,
},
title: {
text: "Close and Volume Date-wise"
},
transitions: false,
zoom: setRange,
dragStart: onDragStart,
drag: onDrag,
dragEnd: onDragEnd
}).data("kendoChart");
Following is my datasource (calling from web api)
[{"date":"9/14/2015 1:20:00 AM","close":6.0,"volume":18.0,"open":58.0,"high":42.0,"low":60.0,"symbol":79.0}]
Now, I need to change the type of the chart from scatter line chart into others like series and bar chart.
when I change it as objchart.options.series[0].type = "column", it does not give any output.
It only leaves the blank chart behind.
What is the correct method to change or cast the chart from any type to any other type?
Thank you
Related
Because some date are overlap, I want to add labelline in each Bubble, How can I do that? Thks
You can add the label option to your series object:
series: [{
type: 'scatter',
symbolSize: function (data) {
...
},
emphasis: {
...
},
label: {
show: true,
position: 'top'
},
itemStyle: {
...
},
...
}]
all the customizations available for this label are here (position, format, etc):
https://echarts.apache.org/en/option.html#series-scatter.label
How do I have insert text within the stacked sections of a highcharts stacked bar graph ( https://www.highcharts.com/demo/bar-stacked ).
My graph will really only have two columns, and they'll have the y-axis reversed and displayed as so: https://jsfiddle.net/ogjz9ra0/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Bananas']
},
colors: ['#1b98ee', '#1366a6'],
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
},
legend: {
reversed: true,
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [4726.78]
}, {
name: 'Brian',
data: [4250.00],
}]
});
What I'd like is to be able to inject text into each of the columns.
https://drive.google.com/file/d/1CDttfeB9mqI5r9voYalsLtEeH0OSs3Ey/view?usp=sharing
I'm still relatively new to HighCharts, so any help would be appreciated.
Thank you all so much again!
I did some googling, and most of the results talk about having the text render inside the bar for non-stacked bar charts. Note that the placing for the problem I'm trying to solve is in the center.
You can use datalabels documentation like this :
plotOptions: {
series: {
stacking: 'normal',
dataLabels: {
enabled: true,
formatter: function() {
// console.log(this) // uncomment this line to see all params available
return 'custom text here'
}
}
}
},
Fiddle
Is there a way funnel chart will redraw like pie chart does, when a segment is removed?
Similar to this question redraw pie chart in highchart
http://jsfiddle.net/2Me2z/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
showInLegend: true
}
},
legend: {
enabled: true
},
series: [{
data: [20, 30, 30, 20]
}]
});
// button handler
$('#button').click(function() {
var series = chart.series[0];
if (series.data.length) {
chart.series[0].data[0].remove();
}
});
});
So click on any slice in legend will cause the chart to redraw and the remaining slices will take up 100%
Wonder if the same thing can be done for a funnel chart
http://jsfiddle.net/YUL5c/2/
$(function () {
var chart;
$(document).ready(function () {
// Build the chart
$('#container').highcharts({
chart: {
type: 'funnel',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
series: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.01]
]
}]
});
});
});
Currently the segment just disaapear. But the chart does not redraw
Unfortunately this animation is not supported, but I advice to post your request on the uservoice website
point.visible flag is ignored in funnel code.
If adding the check back to the drawing logic things just work magically. Even for the animation.
Not sure if it is a bug or ignored by intention
I've been round and round with this one and I can't seem to drop on an answer.
I've essentially done all I need except for the XAxis as the bottom - This is a timeline chart and I can't get it to render dates at all. (for each point of data for the delivered line, I have a sql datatime entry).
I have tried the various options, UTC, converting to millieseconds etc. but to no avail. Can anyone tell me how I can advance this?
My goal is to have a chart that can display in minutes (up to 2 hours worth = 160 points across) and to automatically scale to hours and days if need be - if poss).
My current setup is as follows :
(asp.net / vb.net / SQL) - although I am happy to receive c# help and I will convert)
Markup :
<script type="text/javascript">
$(function () {
Highcharts.setOptions({
global: { useUTC: true } });
$('#container').highcharts({
chart: { type: 'spline' },
title: { text: 'Delivered vs CTR' },
subtitle: {text: 'Source: Campaign Name'},
xAxis: [{
type:'datetime',
tickInterval: 20,
dateTimeLabelFormats:{
hour: '%H:%M<br>%p',
minute: '%l%M<br>%p',
second: '%H:%M:%S'
}
}],
yAxis: [{ // Primary yAxis
max: 20,
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#DE4527'
}
},
title: {
text: 'Clicked',
style: {
color: '#DE4527'
}
},
opposite: true
}, { // Secondary yAxis
lineWidth: 1,
gridLineWidth: 0,
title: {
text: 'Delivered',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function () {
return this.value ;
},
style: {
color: '#4572A7'
}
}
}],
tooltip: {
shared: true
},
tooltip: {
crosshairs: true,
shared: true
},
plotOptions: {
spline: {
marker: {
radius: 4,
lineColor: '#666666',
lineWidth: 1
}
}
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Delivered',
data: <%= DeliveredChartData%>,
color: '#4572A7',
lineWidth: 1,
yAxis: 1,
marker: { radius: 2, symbol:'circle'}
}, {
name: 'Clicked',
color: '#DE4527',
marker: { radius: 2},
data: <%= ClickedChartData%>,
}]
});
});
</script>
Code behind :
Dim dt As DataTable = dsAreaChart.Tables(0)
Dim _dataDelivered As New List(Of Integer)()
Dim _dataClicked As New List(Of Integer)()
Dim sb As New StringBuilder
For Each row As DataRow In dt.Rows
Dim tmil As DateTime = CDate(row("campTableTimeStamp"))
'need to somehow add campTableTimeStamp as XAxis timeline
_dataDelivered.Add(CInt(row("campQtyDelivered")))
_dataClicked.Add(CInt(row("campQtyClicked")))
Next
Dim jss As New JavaScriptSerializer()
DeliveredChartData = jss.Serialize(_dataDelivered)
ClickedChartData = jss.Serialize(_dataClicked)
As you can see I have the campTableTimeStamp field in sql already to go - but how to pass it in with the other.
Can anyone advise ?
Many thanks for any assistance.
Peter
This would be easier to answer with a fiddle, or with an example of the data that results from your function.
One thing you will need to do: remove the 'tickInterval:20' - this is telling the chart to add a label every 20 milliseconds.
Next, make sure your data is structured properly.
should look like data:[[timestamp, numeric value],[timestamp,numerica value],[timestamp,numerica value]...]
or, if your timestamps are at regular intervals, you can set the pointStart and pointInterval properties, and skip providing the timestamp values in the data array, so you would have only data:[y value, yvalue, yvalue...]
http://api.highcharts.com/highcharts#plotOptions.series.pointStart
http://api.highcharts.com/highcharts#plotOptions.series.pointInterval
If that doesn't help, please clarify, and add data output sample.
I'm creating a pie chart in highcharts.
Does anybody know how to set data labels in two lines?
I'm finding this problem when the data labels are too long.
http://jsfiddle.net/larrytron/fSjnD/
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Browser market shares at a specific website, 2010'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
maxStaggerLines:1,
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
},
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox jandler glander gramenauer gramen', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
});
You can simply set width for dataLabels, see: http://jsfiddle.net/Fusher/fSjnD/1/
style: {
width: '100px'
}
You can simply insert in the data labels:
data: [
['Firefox jandler glander <br><b>gramenauer gramen</b>', 45.0],
Note, for some reason, the second line loses the bold formatting unless you addit back in using tags.
http://jsfiddle.net/ZMLSW/