I'm trying to plot some data I have in my database. I'm following this jsfiddle for the structure. However even though I manage to get the data correctly from my API, the chart shows up but no data is plotted.
My app.js looks something like this:
// Load Sessions
var sessions = new Vue({
el: '#sessions',
delimiters: ["v{","}"],
data: { date:'', sessions:'', json:'', timestamp:''},
methods: {
loadSessions: function(){
var vm = this
axios.get('/api/v1/metrics/')
.then(function(response) {
vm.json = response.data
Highcharts.chart('container', {
chart: {
zoomType: 'x'
},
title: {
text: 'Session Over Time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Sessions'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'Sessions',
data: vm.json
}]
});
})
}
}
})
The vm.json file looks like this:
[ { "date": "2017-01-02", "timestamp": 1483401600, "sessions": 1100 }, { "date": "2017-01-03", "timestamp": 1483488000, "sessions": 1159 }, { "date": "2017-01-04", "timestamp": 1483574400, "sessions": 1084 }]
And I load vue in my html with a simple:
<div id='sessions'>
<a class="button is-primary" #click='loadSessions'>Load Sessions</a>
<!-- Just to test that data is loaded correctly from API -->
<ul style="margin-left: 20px;">
<li v-for="item in json">
<b>Date: </b> v{item.date} <br />
<b>Sessions:</b> v{item.sessions} <br />
<b>Timestamp:</b> v{item.timestamp}
</li>
</ul>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
Now I think that my problem is on formatting the json, isn't it? The on in the jsfiddle example looks a bit different. How can I get my data to show up?
You can convert your data into the format that is shown in the example.
series: [{
type: 'area',
name: 'Sessions',
data: vm.json.map(d => [new Date(d.date).getTime(), d.sessions])
}]
I converted your date properties to Javascript Date objects in order to use getTime because your timestamp property, where ever it came from, is not a proper Javascript timestamp.
Example.
Related
I have a web application where I am using ApexCharts with Vue 3 to plot some graphics. I didn't have any trouble using the scatter plot, but when I try to plot a timeline like this example of the website, it completely crashes and I don't know why. maybe I am doing something wrong, but I can't see any error. I would appreciate a lot if you can give me some help because it is important!
I attach here the code of the view:
<template>
<apexchart type="rangeBar" height="350" :options="chartOptions" :series="series"></apexchart>
</template>
<script>
import axios from "../../../services/api.js";
export default {
data() {
return {
chartOptions: {
chart: {
type: 'rangeBar'
},
plotOptions: {
bar: {
horizontal: true,
}
},
fill: {
type: 'solid'
},
xaxis: {
type: 'datetime'
},
},
series: [
{
name: 'Prueba',
data: [
{
x: 'Code',
y: [
new Date('2019-03-02').getTime(),
new Date('2019-03-04').getTime()
]
},
{
x: 'Test',
y: [
new Date('2019-03-04').getTime(),
new Date('2019-03-08').getTime()
]
},
{
x: 'Validation',
y: [
new Date('2019-03-08').getTime(),
new Date('2019-03-12').getTime()
]
},
{
x: 'Deployment',
y: [
new Date('2019-03-12').getTime(),
new Date('2019-03-18').getTime()
]
},
]
},
], //end series
}; //end return
}, //end data
}
</script>
<style scoped>
</style>
There is something wrong in library
If you deep clone series it seems to work
<apexchart type="rangeBar" height="350" :options="chartOptions" :series="JSON.parse(JSON.stringify(series))"></apexchart>
I use vue.js for my project. Also I use websocket for my datas. Every one second come datas. I need to use realtime chart on my project. But I dont find any chart to solve my problem. For example I use apexchart but it have not refresh datas in my chart when new datas come.
my websocket data like:
{
"topic": "2",
"message": "data"
}
my database data like this:
{
"id": "1",
"deviceName": "refrigerator",
"deviceType": "lineChart",
"topic": "1",
"message": "",
},
{
"id": "8",
"deviceName": "refrigerator",
"deviceType": "lineChart",
"topic": "1",
"message": "",
},
I get my datas from database in this code. And I check my topic, is it same or not. if it is same, I put websocket message to json data to see at screen:
let bufferMessage = [];
bufferMessage = jsonFromDatabase;
socket.on("message", (topic, message) => {
bufferMessage.forEach(element => {
if (element.topic == topic) {
element.message = message.toString();
}
});
});
My code is :
<div id="chart">
<apexchart type="line" height="350" :options="chartOptions" :series="$store.state.bufferMessage[index].message"></apexchart>
</div>
<script>
import Vue from "vue";
import ApexCharts from "apexcharts";
import VueApexCharts from "vue-apexcharts";
Vue.component("apexchart", VueApexCharts);
export default {
components: {
apexchart: VueApexCharts,
},
data() {
return {
series: [
{
name: "Desktops",
data: [],
},
],
chartOptions: {
chart: {
height: 350,
type: "line",
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
text: "Product Trends by Month",
align: "left",
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"],
opacity: 0.5,
},
},
xaxis: {
categories: [],
},
},
}
</script>
but the way there is no any error in this code. I just want to convert this chart to realtime chart for my websocket datas.
Unless OP shows the part in the code of updating the data, I only can offer a reference of the official apexcharts documentation, about updating the data :
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Vue Chart',
data: function () {
return {
chartOptions: {
chart: {
id: 'vuechart-example',
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
},
},
series: [{
name: 'Vue Chart',
data: [30, 40, 45, 50, 49, 60, 70, 81]
}]
}
},
methods: {
updateChart() {
const max = 90;
const min = 20;
const newData = this.series[0].data.map(() => {
return Math.floor(Math.random() * (max - min + 1)) + min
})
// In the same way, update the series option
this.series = [{
data: newData
}]
}
}
}
As you can see in the example above, by just changing the props, we trigger the update event of ApexCharts. (from the docs)
Sandbox Example https://codesandbox.io/s/50z5wrmp6k
I am trying to plot pandas dataframe from a python function and display it on a web server using Highcharts pie chart. I can get the data from the function to the web server as json data through flask. but when I want to display it the chart is empty. Through the web console I also made sure that the data format going into the Highcharts is correct but still nothing.
Here I am retrieving the panda dataframe and sending it to the web server through flask:
actype_json = actype.to_json(orient = 'records')
#app.route('/data/airport', methods = ['GET'])
def broadcast_data():
return eval(json.dumps(actype_json))
#app.route('/')
def plotgraph():
return render_template('airport.html')
On my HTML file, I tried to use AJAX to call for the data and plot it in a Highcharts Pie Chart:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.highcharts.com/highcharts.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.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
<script>
function GetUpdatedData(){
$.ajax({
url: "/data/airport",
})
.done(function( data ) {
console.log( data );
DrawGraph(data);
});
}
function DrawGraph(dataset) {
// Radialize the colors
Highcharts.setOptions({
colors: Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
})
});
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
name: 'Aircraft',
data: [dataset]
}]
});
setTimeout(GetUpdatedData, 1500);
}
</script>
</body>
</html>
This is the screenshot of the Highcharts Pie Chart that I am seeing:
The response tab is showing the format of the data trying to be plotted on Highchart. Any advice will be very helpful. Thanks!
You've made a simple mistake when adding data to series.data array. Note that your data is actually a correct Highcharts data array with point objects inside:
data:
[{
"AC TYPE": "B773",
"y": 35
}, {
"AC TYPE": "B77W",
"y": 16
}]
However, you've added this array inside another one like that:
series: [{
name: 'Aircraft',
data: [dataset]
}]
This gives you an invalid data format with two nested arrays:
series: [{
name: 'Aircraft',
data: [[{
"AC TYPE": "B773",
"y": 35
}, {
"AC TYPE": "B77W",
"y": 16
}]]
}]
Remove the wrapping array and the chart should be rendered correctly.
Demo:
https://jsfiddle.net/BlackLabel/49rhpmyg/
I've been trying to get this to work and I'm completely stuck. I think I've done everything properly. Included all needed file but my chart won't show when I use:
$('#index-container').highcharts('StockChart', {
my chart does not show. But when I use
$('#index-container').highcharts('Chart', {
chart shows but does not show the controls properly.
See my code below
$(function() {
$.getJSON('get-chart-data.php?series=c&x=NSE&s=<?php echo $secsymbol ?>&callback=?', function (data) {
$('#index-container').highcharts('StockChart', {
rangeSelector: {
inputEnabled: true,
selected: 1
},
title: {
text: 'company'
},
series: [
{
name: 'symbol',
data: data,
type: 'area',
threshold: null,
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, 'rgba(0,0,0,0)']
]
}
}
]
});
});
});
<div id="index-container" class="col-md-12 col-sm-12 col-xs-12" style="min-height:450px; min-width: 480px"></div>
I'd appreciate if someone could help this has been a pain the last three hours.
Thanks in advance
I'm attempting to use Highcharts Series function to create a combination bar/line chart, but I'm having trouble just getting the series to display. There's nothing in the API about how to format data from Google Spreadsheets when using series so I took a stab at it and the chart does not display:
$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: '#fff',
shadow: false,
width: null,
height: null
}
});
$('#ms-96-enrollment').highcharts({
series: [{
type: 'bar',
data: [{
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 7
}],
}]
});
});
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<div>
<div id="ms-96-enrollment"></div>
Highcharts is a little bit misleading having two "data"s - in series and on top level. The first is used for javascript point arrays while the later is for facilitating adding existing datasets (http://api.highcharts.com/highcharts#data)
Thus for Google Spreadsheets
$('#ms-96-enrollment').highcharts({
chart: {
type: 'bar'
},
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 1,
startRow: 0,
googleSpreadsheetWorksheet: 7
},
title: {
text: 'My google data'
},
yAxis: {},
xAxis: {
labels: {
enabled: true,
}
}
});
Here's the sample based on your data http://plnkr.co/edit/aIqMVcaeyYEbHcdxoMaT
UPDATE
If you need to show multiple series add extra columns and specify series:
data: {
googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
startColumn: 0,
endColumn: 2,
startRow: 0,
googleSpreadsheetWorksheet: 7
}
...
series: [{
type: 'bar'
}, {
type: 'line'
}]
Here's the updated sample http://plnkr.co/edit/UQprlugBtUXQX9OffUm4?p=preview