I'm currently building an application in which I want to display histograms. Problem is that I can't manage to properly render an histogram with zingchart... I want ticks of the scale-x to be place on each side of data points, not centered on them as they represent the bounds of histogram bins.
Below is the python function that computes data to create the histogram using the histogram function on numpy package.
from numpy import histogram
def graph(self):
results = sorted(results, key=lambda x: mark)
marks = [result.mark for result in results]
maximum = 20
divisor = maximum
step = maximum / divisor
data, bin_edges = histogram(a=marks, range=(0, maximum), bins=divisor)
data = data.tolist()
return {'data': data, 'divisor': divisor, 'maximum': maximum, 'step': step}
Then this histogram data are used in the view to render the zing chart graph (This is a Jinja2 template as I use Flask-framework) :
<script>
var chartData = {
"type": "bar",
"plot": {
"aspect": "histogram",
},
"plotarea": {
"adjust-layout": true,
},
"series": [
{"values": {{ graph['data'] }}},
],
"scale-x": {
"progression": "lin",
"min-value": 0,
"max-value": {{ graph['maximum'] }},
"step": {{ graph['step'] }},
"decimals": 1,
},
};
zingchart.render({
"id": "graph1",
"data": chartData,
"width": "100%",
"height": "400px",
});
</script>
EDIT
To offset the scale-x number position, you just add the offsetX attribute to the scaleX.item. Here's an example...
scaleX: {
item: {
offsetX: 20
}
}
The default behavior of ZingChart histograms is to have the tick marks placed on each side of the data point. I placed some dummy data in your chart JSON and rendered it out. This is what it shows.
You can view the chart here: http://demos.zingchart.com/view/GQEQHWVV
Can you provide more insight into the problem you're trying to solve? There may be issues with the data you're passing. As far as I can tell, ZingChart renders histograms properly.
FYI: I'm on the ZingChart team
Related
Good morning.
I need to do the following: Update a stacked line chart using a function in javascript that takes a 2d array ([[0,1],[0,2],...]).
My page is running in a Java fx webview so I can dynamically update my data. All the examples I've seen so far create a predefined X axis and pass the y values accordingly, I wanted to pass the two values together to plot a line on the chart.
How could I make this function? It's the first time I use echarts so I'm lost.
I even managed to do something similar but when plotting the chart it was all wrong.
Char Image
var option = {
xAxis: {
type: "value",
},
yAxis: {
type: "value",
},
series: [
{
type: "line",
data: [],
},
],
};
vibrationStackedLineChart.setOption(option);
function updateEchart(dataArray) {
// Parse the JSON string back into a 2D int array
var data = JSON.parse("[" + dataArray + "]");
// Update the chart with the new data
vibrationStackedLineChart.setOption({
series: [
{
data: data,
},
],
});
}
Java function with array 2d
I'm using highcharts to build my charts that shows the values that comes from a sensor placed into my garage: all of these values are numeric values, so, i have no problem to build a graph like the following one JSFIDDLE
As i've said, all of the values that comes from the sensor are numeric, except one: the "status", this value is a string value type and it's not a fixed string, it can be:
Transmitting
Standby
Active
Alarm
Or any free string
So, my intention is - and i don't know if that can be feasible - to draw a graph with a fixed serie value (e.g.: 1...maybe i have to use a javascript function that maps the "status" to a given value?) and show that string as fixed datalabels as shown in the fiddle that i've posted.
Final Remarks:
The data that comes from the sensor is a time-series value, like the following:
{"datetime": 1566730095, "status": "transmitting"}
{"datetime": 1566730162, "status": "hello! i'm here"}
This chart will be a separate chart instead the numeric charts, in order to simplify the build and management.
The final goal can be something like that (the following graph is a pure graphical example):
To achieve it you can map data like that:
series: [{
dataLabels: {
enabled: true,
format: '{point.name}',
rotation: -45,
align: 'left',
y: -8
},
data: data.map(item => {
return {
x: item.datetime,
y: 1,
name: item.status
};
})
}]
Demo:
https://jsfiddle.net/BlackLabel/840tv6mz/
To change the way data is exported to CSV you can use this wrapper (edit it as needed):
(function(H) {
H.wrap(H.Chart.prototype, 'getDataRows', function(proceed, multiLevelHeaders) {
var rows = proceed.call(this, multiLevelHeaders);
rows[0][0] = 'Time';
rows[0][1] = 'Status';
rows = rows.map(row => {
if (row.x) {
row[0] = H.dateFormat('%H:%M:%S.%L', row.x);
row[1] = row.name;
}
return row;
});
return rows;
});
}(Highcharts));
Demo:
https://jsfiddle.net/BlackLabel/to92mbu0/
I am using chart.js line chart. I can use the chart correctly but if I have only one plot point then the chart doesn't create a line from start to that point. I want to draw a line from the start of the chart to that single plot point without placing a plot point on that first day as we don't have data in the database for it.
Current chart behaviour:
Need a line like drawn here from the start of the chart:
Is this possible to draw a line on the chart from start to that point? Maybe some start point property or a hidden x-axis attribute on the chart to achieve this?
Also, any possible way to remove that space from top before that "Extreme" point on Y-Axis?
I have done hard research on it, have read the docs multiple times but unable to achieve them.
Have you tried Area charts with fill set to false? Check out the samples here https://www.chartjs.org/samples/latest/charts/area/line-boundaries.html
It's kind of a hack but you can append the data with an extra point and update its styles to keep it hidden, Refer to our fiddle https://jsfiddle.net/hpdr5jf1/
Relative code
var options = {
type: 'line',
data: {
labels: ["", "Actual Data"],
datasets: [
{
label: 'Data Point',
data: [12, 12],
pointRadius: [0],
pointHitRadius: [0],
borderWidth: 1,
fill: false,
borderColor: 'red'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, options);
I am using plotly to plot different charts on my website. I just want to know how can I plot graphs using json file columns. The Json file have more than 5 columns and I want to plot a piecharts using two columns i.e. polarity(1,4,0) and Tweet Type(Positive, Negative, Neutral). i have provided the general code. how can I use this code to process the json.
var data = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie'
}];
var layout = {
height: 400,
width: 500
};
Plotly.newPlot('myDiv', data, layout);
While its more than likely an error of my own making could someone help me.
I have a polarchart with 6 datapoints that only displays 5 datapoints when plotted.
If its an issue I'll open 1 on GitHub but I was thinking that if its down to my poor code maybe its worth opening an issue to prevent others having the same issue
Using only the chartjs available via CDN link https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.js , jquery 1.12.3 and the following script in a basic html file
can anyone reproduce the issue where the chart has 6 labels, 6 data points but **only plots 5 **
All files included in uploaded zip file
PolarChart.zip
<script>
$(document).ready(function(){
var ctx = $("#mypolar").get(0).getContext("2d");
// Polar Chart Data
//labels "Communicate ", "Create ", "Find & Use", "Identity & Wellbeing", "Teach & Learn", "Tools & Technology"
var data = {
datasets: [{
data: [1, 3, 5, 6, 2, 4],
backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360","#F7554A"],
label: 'My dataset' // for legend
}],
labels: ["Communicate & Collaboarate", "Create & innovate", "Find & Use", "Identity & Wellbeing", "Teach & Learn","Tools & Technology"]
};
//Plot the Radar Chart
var myRadarChart = new Chart(ctx, {
type: 'polarArea',
data: data,
//options: options
});
});
</script>
All your points are being plotted (if you count the number of sectors there are 6 sectors). The problem was that your scale was beginning from the lowest value (1 - the value of your first point) causing nothing to be seemingly plotted for the 1st point.
You can override the scale to begin from 0 if you want to show all points
...
options: {
scale: {
ticks: {
beginAtZero:true
}
}
}
Fiddle - http://jsfiddle.net/ja08nzm5/