I have a problem with Shield UI Chart. I need to hide all text on my X axis, that is dateTime. But i can't visualize the chart when I add the code that hides the axis.
Below is the code that I am using. Will appreciate any assistance fixing it.
<script type="text/javascript"> $(function () { $("#chart").shieldChart({
axisX: {
axisTickText: {
enabled: false
}
axisType: 'datetime'
},
axisY: {
title: {
text: "Total Sales statistics"
}
},
primaryHeader: {
text: "Aaron's cars sales"
}, dataSeries: [{ seriesType: 'bar',
collectionAlias: 'New Cars Sales Volumes',
data: [325000, 425000, 316000, 378000, 390000]
}, {
seriesType: 'bar',
collectionAlias: 'Used Cars Sales Volumes',
data: [125000, 175000, 158000, 130000,101000,98000]
}]
});
});
</script>
You have forgotton to put a comma between the different properties. You have axisTickText:{} and there must be a comma, because there is one more property following- axisType.
axisX: {
axisTickText: {
enabled: false
},
axisType: 'datetime'
},
Related
Picture as a reference
I want to build this type of chart and my data set link is below. I'm unable to find any example regarding this.
https://docs.google.com/spreadsheets/d/1geCzzfBeyY8yDHAdEFWUSUf8ex3QWfqDtPg7ArOdTw0/edit?usp=sharing
From the referred image I can see that it is a stock chart, which demo base you can find here: https://www.highcharts.com/demo/stock
How to align the series to the particular yAxis you can find here: https://api.highcharts.com/highcharts/series.line.yAxis
Sample demo: https://jsfiddle.net/BlackLabel/95ptgrec/
// Create the chart
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'axis1'
}
}, {
title: {
text: 'axis2'
}
}, {
title: {
text: 'axis3'
},
opposite: false
}],
series: [{
data: generateData()
}, {
data: generateData(),
yAxis: 1
}, {
data: generateData(),
yAxis: 2
}]
});
If you want to implement charts in Angular or React environment I encourage to use the official wrappers:
https://github.com/highcharts/highcharts-angular
https://github.com/highcharts/highcharts-react
I am using Highcharts in the vue.js environment. I use https://www.highcharts.com 7.2.0 and Highcharts-Vue https://github.com/highcharts/highcharts-vue#readme 1.3.5.
I have multiple highstock charts in the same page. I am trying to get the values from all the charts into the tooltip of the highstock that I am currently hovering.
Based on this http://jsfiddle.net/mjsdnngq/14/ I am trying to create my code
This is what I have now
vue template
<template>
<div class="vessChart" v-on:mousemove="updateCoordinates" >
<v-card :loading=!this.getStreamPlots.done>
<highcharts ref="chart" :constructor-type="'stockChart'" :callback="chartcallback" :options="options" ></highcharts>
</v-card>
</div>
</template>
This is the "options" as I define it for the chart as a vue data object
options: {
tooltip: {
shared: true,
pointFormat: '{series.name}: {point.y}<br>'
},
chart: {
type: "line",
zoomType: 'x'
},
title: {
text: this.streamChart.title
},
rangeSelector: {
inputEnabled: false
},
xAxis: {
ordinal: false,
type: 'datetime',
tickInterval: 5 * 60 * 1000 ,
labels: {
enabled:false
},
events : {
afterSetExtremes : this.afterSetExtremes
}
},
yAxis: {
title: {
text: this.streamChart.title
},
labels: {
enabled:true
},
alignTicks:'left',
textAlign:'left',
align:'middle',
opposite:false
},
plotOptions: {
series: {
animation: false
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
chart: {
height: 300
},
subtitle: {
text: null
},
navigator: {
enabled: false
},
legend: {
enabled: true
},
yAxis: {
title: {
enabled: false
}
}
}
}]
},
series: [
{
name: this.streamChart.title,
pointStart: 1546300800000,
pointInterval: 5 * 60 * 1000
}
]
},
when the Highstock loads, I use callback, to get it and set it as a local vue var and also push it in an array in the vuex store, so I can have all charts available.
chartcallback(hc){
this.chart=hc;
this.currentId = this.streamChart.id;
this.chartData = this.chartData.concat(this.getStreamPlots[this.currentId].data);
this.addStreamCharts(hc); //push it to an array in vuex store
this.chart.series[0].setData(this.chartData, true, true, true);
},
and then I use the updateCoordinates to get all the values from all the charts I saved in vuex store, using the searchPoint. Then, feed the values to the tooltip of the chart I am currently hovering
updateCoordinates(e){
if (this.getStreamPlots.done && this.chart != null) {
let hce = this.chart.pointer.normalize(e);
let points=[];
this.getStreamCharts.forEach(chart => {
let point = chart.series[0].searchPoint(hce, true);
points.push(point);
});
this.chart.tooltip.refresh(points);
}
}
Problems :
1- This works but it shows all the values to the first chart I hovered. For example, I hover to the first chart, I get all the values into the tooltip as I should. But then I hover to the third chart and the values are still showed in the first chart tooltip. No tooltip in the third chart.
2- The values are in different tooltips. I would like for all the values be in one tooltip. (check the image)
Thank you
I have a Stacked % Column Highchart which without Hyperlinks on data sets works perfectly, however I need to link away to another page from the chart, If it was a standard column chart, I would have no issue (I have one already). But i cannot seem to work out why I'm getting an undefined error on the link.
Ive searched around for a working example but havent been able to find one matching the stacked percentage column.
I've setup a fiddle to indicate where im up to, any help appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Space Overview'
},
xAxis: {
categories: ['a', 'b', 'c', 'd']
},
yAxis: {
min: 0,
title: {
text: 'Total Space (%)'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = this.options.url;
}
}
}
}
},
subtitle: {
text: '+ Items relate to items in the dispay cabinets.',
align: 'left',
x: 10
},
series: [{
name: 'Free',
data: [1498, 1123, 556, 1176],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}, {
name: 'Used',
data: [1234,233,23,759],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}]
});
http://jsfiddle.net/Mooglekins/qv8z5a2o/
This is a great question! I did some digging and think I've found a good solution for you.
First, I needed to update how you defined the custom value in your series. To capture certain values in events, I moved the url attribute within each data point. So now, each point has their y value and the new url value.
(Note: I used dummy URLs here since I wouldn't be able to connect to the ones you provided outside your website.)
series: [{
name: 'Free',
data: [
{ y: 1498, url: 'http://www.google.com' },
{ y: 1123, url: 'http://www.yahoo.com' },
{ y: 556, url: 'http://www.bing.com' },
{ y: 1176, url: 'http://www.msn.com' }
]
}, {
// second series here
}
]
Next, I updated your events call. Now that we've moved the url attribute to each point, we can refer to that value as point.url (as you could the y value using point.y).
What I also did here is use window.open vs. window.location. This will be a better experience for your users so they don't lose sight of the chart. Keep this if you wish.
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function (event) {
window.open(event.point.url);
}
}
}
}
}
Here's your updated fiddle with these changes: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/
I hope this helps!
I can get the noData overlay working when there are no series data values, and I can get the x-axis displaying along with the noData label by setting a xAxis.max value, but I can't get the x-axis labels displaying.
Any ideas?
Ideally I would be able to do this without any fake series data (as without data I don't have any series names to provide). This is used in a column chart of well defined x values (like in the js fiddle below, with known fruits, where only each series counts are dynamic)
Closest I've been able to get is this jsfiddle:
http://jsfiddle.net/eLdn6Lfc/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
max:3
},
series: [{
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
});
You also need to set min limit to x-axis if there is no data.
Working solution here
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Mulligatawny', 'Crab bisque', 'Lima bean', 'Wild mushroom'],
min: 0,
max: 3
},
series: [{
showInLegend: false,
data: []
}],
lang: {
noData: "No Soup For You!"
},
});
I have some data I wish to display on a chart but it just shows the title and no points get drawn. The JSON data I receive is correct as per my knowledge, I think it's somewhere in the chart function but I can't really point it out.
This is what I have so far:
data.php (the output):
{"name":"Temperature","data":[34,28,29,28,34,28,32,27,24,30,25,32,34,28,34,33,24,33,30,27,24,27,26,29]}
The important bits of the html:
<script>
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("data.php", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperature vs. Time',
x: -20 //center
},
xAxis: {
categories: ['12AM', '1AM', '2AM', '3AM', '4AM', '5AM', '6AM', '7AM', '8AM', '9AM', '10AM', '11AM','12PM', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM', '9PM', '10PM', '11PM']
},
yAxis: {
title: {
text: 'Temperature'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: json
});
});
});
});
</script>
It's supposed to show temperature per hour but unfortunately nothing comes up. Any idea what could be wrong?
series should be an array. So you need to just change:
series: json
To:
series: [json]
Working example: http://codepen.io/anon/pen/Kfgsd
Documentation: http://www.highcharts.com/docs/chart-concepts/series
your problem i think that you haven't specified where your chart should be inserted to, afaik you either should specify the renderTo option for the class constructor options or use the $('#container').haighcharts({...}) jquery helper