I have the following code:
<script>
$.getJSON('https://www.quandl.com/api/v3/datasets/ECB/RTD_M_S0_N_C_EUR1Y_E.json?start_date=2003-01-01', function(json) {
var hiJson = json.dataset.data.map(function(d) {
return [new Date(d[0]), d[1]]
});
// var hiJson = json.dataset.data.map(function(d) {
// return { x: new Date(d[0]), y: d[1] };
// });
// Create the chart
$('#Euribor').highcharts('chart', {
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y'
}
},
rangeSelector: {
selected: 1
},
title: {
text: 'Euribor Interest Rates',
},
series: [{
type: 'line',
name: 'Interest Rate',
data: hiJson,
}]
});
});
</script>
This prints out a Highcharts chart, but the x-axis is incorrect. It should be in Years, but it looks more like it's a time format.
Your help is much appreciated!
R
Related
I am trying to display date format on the Y axis in Highchartjs graph , but i can't figure out the correct date format , I would be grateful for any help :)
var datas = new Array();
var option = {
chart: {
zoomType: 'xy',
styledMode: true },
yAxis: [ {
labels: {
format: '{value: %H:%M:%S}', // what the correct format ??} }{
labels: {
format: '{value} S',
style: {
color: Highcharts.getOptions().colors[0] } },
opposite: true } ],
series: [{
type: 'spline',
data: [],
tooltip: {
valueSuffix: ''
} } ] };
async function prettyGraph13() {
const res = await $.ajax({
type: "GET",
url: "http://127.0.0.1:8000/graph/graph/index8",
async : true,
success: function( response ) {
$.each(JSON.parse(response), function (key, val) {
$.each(val, function (key2, val2) {
categoriess.push(parseInt(key2.toString()))
datas.push(parseInt(val2)) // pushing data here ??? i get only the hours
datase22.push(val2.timestamp)
option.series[0].data = datas;
}) }) } })
return res; }
How can I bind pie chart and line chart together rather than appear one by one? And the pie charts which appear later than line chart will block the line chart. Is there any chance the pie and line can appear together in the end?
The current situation is that
at the beginning,and then.
This is the JS code.
var dom2 = document.getElementById('demo');
var chart = echarts.init(dom2);
var option = {
title: {
text: '中药与疾病'
},
tooltip: {},
legend: {
data: ['中药', '疾病']
},
xAxis: {
data: []
},
yAxis: [
{},
{}
],
series: [
{
name: '中药',
type: 'line',
data: [],
yAxisIndex: 0
},
{
name: '疾病',
type: 'line',
data: [],
yAxisIndex: 1
}
]
}
chart.setOption(option);
$.get('https://gist.githubusercontent.com/Linya-gzl/4d4f388e1b0e3d8e05c38f875b94a97c/raw/8c121acbfaf4aac9eccaf6b81cd1b3614203c185/demo1.json').done(function (data) {
dataArr = JSON.parse(data);
console.log(dataArr);
chart.setOption({
xAxis: {
data: dataArr.map(row => row['categories'])
},
series: [{
name: '中药',
data: dataArr.map(row => row['value1'])
},
{
name: '疾病',
data: dataArr.map(row => row['value2'])
}]
});
function buildPieSeries() {
var len = dataArr.length;
for (var i = 0; i < len; i++) {
option.series.push({
type: 'pie',
radius: 15,
center: [110 + 90 * i, dataArr[i].value2 - 100],
label: {
show: true,
textStyle: {
fontSize: 8
}
},
data: [
{ value: dataArr[i].value1, name: '黄连' },
{ value: dataArr[i].value2, name: '黄芩' },
]
})
}
chart.setOption(option, true);
}
setTimeout(buildPieSeries, 1000);
});
and
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js" integrity="sha256-eKrx6Ly6b0Rscx/PSm52rJsvK76RJyv18Toswq+OLSs=" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<div id="demo" style="width: 600px;height:400px;"></div>
I changed your code a bit in the series insertion part, by my opinion need inserting series completely because partial inserts sometimes cause problems with merging data. Also I fixed coordinate calculation, more correct way take the already calculated coordinates from line if they the same.
document.addEventListener("DOMContentLoaded", e => {
var targetNode = document.querySelector('#chartNode');
var chartInstance = echarts.init(targetNode);
var option = {
title: { text: '中药与疾病' },
tooltip: {},
legend: { data: ['中药', '疾病'] },
xAxis: { data: [] },
yAxis: [
{},
{}
],
series: [
{
name: '中药',
type: 'line',
data: [],
yAxisIndex: 0
},
{
name: '疾病',
type: 'line',
data: [],
yAxisIndex: 1
}
]
}
chartInstance.setOption(option);
$.get('https://gist.githubusercontent.com/Linya-gzl/4d4f388e1b0e3d8e05c38f875b94a97c/raw/8c121acbfaf4aac9eccaf6b81cd1b3614203c185/demo1.json').done(function (data) {
dataArr = JSON.parse(data);
chartInstance.setOption({
xAxis: {
data: dataArr.map(row => row['categories'])
},
series: [{
name: '中药',
data: dataArr.map(row => row['value1'])
},
{
name: '疾病',
data: dataArr.map(row => row['value2'])
}]});
pieSeries = chartInstance.getOption().series;
function buildPieSeries() {
var len = dataArr.length;
for (var i = 0; i < len; i++) {
pieSeries.push({
type: 'pie',
radius: 15,
z: 10,
center: chartInstance.getModel().getSeriesByName('中药')[0].getData().getItemLayout(i),
// center: [110 + 90 * i, dataArr[i].value2 - 100],
label: {
show: true,
textStyle: {
fontSize: 8
}},
data: [
{ value: dataArr[i].value1, name: '黄连' },
{ value: dataArr[i].value2, name: '黄芩' },
]
})
};
chartInstance.setOption({ series: pieSeries });
}
setTimeout(() => buildPieSeries(), 1000);
});
});
<script src="https://cdn.jsdelivr.net/npm/echarts#4.7.0/dist/echarts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chartNode" style="width: 600px;height:400px;"></div>
This is my code:
In the output i'm getting the UTC timestamp number instead of the date value. I've searched a bit and found out that type 'datetime' is required to display time values on xAxis. but its not working in my case.
this.partnerChart = function () {
chart = new Highcharts.chart({
chart: {
type: 'line',
renderTo: 'partnerChart',
events: {
load: self.requestPartnerChartData
},
zoomType: 'xy',
resetZoomButton: {
position: {
align: 'right', // by default
verticalAlign: 'top' // by default
}
}
},
title: {
text: self.selectedXAxis() + ' Statistics'
},
xAxis: {
type: 'datetime',
categories: []
},
yAxis: {
min: 0
},
plotOptions: {
series: {
connectNulls: true
}
},
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
}
}
})
};
This is my ajax call:
$.ajax({
url: "#",
type: "GET",
contentType: "application/json",
success: function (data) {
chart.yAxis[0].setTitle({ text: self.selectedYAxisLeft() });
var dateCost;
var dateString = data.slice(data.indexOf('{') + 1, data.lastIndexOf('}'));
var rawSaleData = dateString.split(',');
var sales = [];
chart.update({
xAxis: {
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
},
min: 1483228800000
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e %b}: {point.y:.2f} '
}
});
for(var i = 0; i < rawSaleData.length; i++){
if(i != 0){
rawSaleData[i] = rawSaleData[i].slice(1);
}
dateCost = rawSaleData[i].split('=');
dateCost[0] = dateCost[0].slice(0,dateCost[0].indexOf(' '));
var components = dateCost[0].split('-');
var utcDate = Date.UTC(components[0],components[1] - 1,components[2]);
sales.push([utcDate, parseInt(dateCost[1])]);
}
chart.addSeries({
name: 'Sales',
data: sales
});
}
})
the data in variable sales in series has data in the form:
[[utc timestamp, value],[utc timestamp, value]]. please help. thank you
Remove categories: []. You have at the same time set type: "datetime" and categories.
I am having a list name aaa. It is an list of list
aaa[0] = [[{'a',1},{'b',2}]
aaa[1] = [[{'q',2},{'bd',0}]
aaa[2] = [[{'sa',3},{'bs',6}]
aaa[2] = [[{'sa',5},{'vb',8}]
I got the response from the model
Now I need to populate this value into Chart
My Chart will contain four lines for aaa[0] ,aaa[1] ,aaa[2] ,aaa[3]
Here is my High Chart Code
<script>
$(document).ready(function () {
//Default time zone
moment.tz.setDefault("America/New_York");
// Global option to disable UTC time usage
Highcharts.setOptions({
global: {
useUTC: false
}
});
// Chart configurations
var options = {
chart: {
renderTo: 'container2',
type: 'area',
marginRight: 45,
zoomType: 'x'
},
title: {
text: 'aaaa'
},
xAxis: {
type: 'datetime',
minRange: 8 * 24 * 3600000,
labels: {
format: '{value:%m-%d-%Y}',
rotation: 45
}
},
yAxis: {
title: {
text: 'count'
},
labels: {
formatter: function () {
return this.value;
}
}
},
plotOptions: {
area: {
marker: {
enabled: true,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 1,
threshold: null
}
},
series: [{
fillOpacity: 0.1,
name: 'aaa',
pointInterval: 24 * 3600 * 1000,
pointStart: 1375295400000,
data: GetPercentage()
}]
};
// Rendering the Highcharts
chart = new Highcharts.Chart(options);
function GetPercentage() {
var data = #Html.Raw(JsonConvert.SerializeObject(Model.aaa));
// alert(data)
#foreach(var val in Model.aaa) //loop of getting a list from aaa
{
var percentages = [];
for (var x = 0; x < #val.Count; x++)
{
//Here I need to push the list
}
//percentages.sort(SortByDate);
// return percentages;
}
}
//Sort the array based on first array element
function SortByDate(a,b){
//alert(a[0] +" - " +b[0]);
return (a[0] - b[0]);
}
//Timeout function to reload page on everyone hour
setTimeout(function () {
location.reload(true);
}, 60* 60 * 1000);
//Progress bar to display feed delivery percentage
$('.progress .progress-bar').progressbar({
transition_delay: 500,
display_text: 'fill',
refresh_speed: 500
});
});
</script>
Could anyone help me to diplay a chart with four lines ?
Thanks in advance
Here you can see the series is an object array
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
You should add more objects into series array to create more than one line.
How to load json data to multiple series and add Time to xAxis in HighStock?
And any idea how to add multiple yAxis on the right and left of the HighStock chart?
I tried to convert to json structure ["name": data:[]] but i can't find how to do it. Please help.
My code is in ASP.Net MVC 4:
public JsonResult GetData()
{
var chart = new List<object>();
chart.Add( new { Speed = 50, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:53:07" } );
chart.Add( new { Speed = 80, Tank = 201.56, odomoter = 2319.956, Time = "05/04/2015 23:52:06" } );
chart.Add( new { Speed = 90, Tank = 201.56, odomoter = 2191.907, Time = "05/04/2015 23:51:06" } );
var jss = new JavaScriptSerializer();
var output = jss.Serialize( chart );
return Json( output, JsonRequestBehavior.AllowGet );
}
$(function () {
$.getJSON('GetData', function(jdata) {
alert(jdata);
// Create the chart
$('#container').highcharts('StockChart', {
chart: {
type: 'spline',
zoomType: 'xy'
},
rangeSelector: {
buttons: [{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 2,
text: '2d'
}, {
type: 'week',
count: 1,
text: '1w'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: true, // it supports only days
selected: 0 // day
},
//xAxis: {
// minRange: 3600 * 1000, // one hour
// type: 'datetime',
// dateTimeLabelFormats: { minute: '%H:%M', day: '%A. %e/%m' },
// // minRange: 15*60*1000,
// //maxZoom: 48 * 3600 * 1000,
// labels: {
// rotation: 330,
// y: 20,
// staggerLines: 1
// }
//},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: '#89A54E'
}
},
title: {
text: 'Temperature',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Consumo',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} Kw',
style: {
color: '#4572A7'
}
},
opposite: true
}],
title: {
text: 'AAPL Stock Price'
},
series: data
//series: [{
// name: 'AAPL',
// data: data,
// tooltip: {
// valueDecimals: 2
// }
//}]
});
});
});