I am using Highcharts (http://www.highcharts.com/) with its data module (http://code.highcharts.com/modules/data.js) to create a data visualization and chart using HTML table.
My table consists of mixed columns with string - for distribution and numbers for values. The table is something as follows
Now, with the given HTML table, I want the user to be able to select the distribution column based on which the series in the charts are plotted. In the sense when the Product column is selected, the graph would appear something like
And if the Category column is selected it would be something like
Essentially in this example, the labels in the X-Axis are changed. Although, there are cases when the graph itself would change when the distribution changed.
Progress So Far: -
I have managed to find out that there is a start column and end column which can be defined based on which the distribution column and the values can be identified. Although, this does not traverse the whole table to get the exact results.
I used the following code (Available on http://jsfiddle.net/3Ezjj/) for making the distribution column as Category and the next column as the value: -
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('datatable'),
startColumn: 0,
endColumn: 1
},
chart: {
type: 'column'
},
title: {
text: 'Data extracted from a HTML table in the page'
},
yAxis: {
allowDecimals: false,
title: {
text: 'Units'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.point.y +' '+ this.point.name.toLowerCase();
}
}
});
});
I would really appreciate any help.
Thanks in advance!
Related
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'm using kendo chart, scatter line series type, example:like this
I can able to plot the values on the kendo chart.see the output
I have an array series_array, It is dynamic, contains objects like this
{
name:"series1",
data:[x:"11/12/2018",y:"20",low:"5",high:"10"]
}
jquery code to fill kendo chart is :
code:
$("#chart").kendoChart({
title:{ text:"my error chart"},
seriesDefaults:{
type:"scatterLine",
yErrorLowField:"low",
yErrorHighField:"high",
xField:"x",
yField:"y"
},
series:seris_array
});
Problem is how to get x-axis or categorial axis values like "11/12/2018"(Full Date).
Use the xAxis.labels.format:
xAxis: {
labels: {
format: "{0:d}"
},
},
DEMO
I have a page where I can put in two timeintervals and after posting these two timeintervals I get the amount of sold tickets between these two dates.
i get back multiple data depending on how far back I go.
My problem:
If I go as far back as to the first insert of the database.
I will get a high value of for example 200 tickets and after that I calculate the difference between each row in the database which gives me a chart like this:
As you see in the image I would like to reduce the space between the y-axis points in order to see the smaller values better.
In the example above I have a bar that is 160 and other bars that are for example 1 or 2 and I can hardly see them on the chart
Code for this:
buildCharts: function (target, chartData, chartEnum) {
$(target).highcharts({
chart: {
type: 'column',
height: 300,
},
title: {
text: chartEnum.name
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: chartEnum.text
}
},
series: [{
name: 'SystemInfo',
showInLegend: false,
colorByPoint: false,
data: chartData,
turboThreshold: chartData.length + 500
}],
});
}
How can I reduce space between y-axis points?
Using the "tickInterval" attribute is the easiest way to go about this (see http://api.highcharts.com/highcharts#xAxis.tickInterval).
If you wanted to set this based upon the total number of tickets you're viewing (assuming from your question that you can choose the point in time you want to start), what you could do is set that tickInterval based on the length of your series data (for example, if the data more than 100 items, set a tickInterval of 4; otherwise, set a tickInterval of 2 or 1). Do this by creating the chart's options, and then changing the value in the options after you grab your data, but before drawing/redrawing the chart.
I am using the Highstock and I've been reading the API documentation to look for the plot labeling however, was unsuccessful.
When I do something like
xAxis: {
labels: {
enabled: true,
name: plot one name,
floor: 0,
}
}
or
series: [{
data: XData,
name: plot one name
}
it does not give me the label at the bottom.
It works in the highchart, but highstock. Is there a documentation / APi to add plot label inside the graph ?
for example, in the following link of the highchart is the plot label of "tokyo" and "london" http://www.highcharts.com/demo/line-labels
The labels you are looking for is called the legend (API).
It is disabled by default in Highstock. You can enable it by adding this code:
legend: {
enabled: true
}
I looked up Highcharts' API references and couldn't find a particular function to select a time range.
My purpose is to bind a function to an input button. When I click on it, it will choose a range.
I found that in Highstock there's a range selector with built-in buttons.
Is there any existing function to do that in Highcharts? Or how can I do it with custom javascript?
If you want something simple, like a preset range requiring no interaction from user by selecting over the graph area, you can use what is explained in this link.
Improving a bit, the idea is that your button handles the values needed for the range and supply them to the function below. When it runs, the graph gets redrawn, reflecting the new range.
function renderGraph(xmin, xmax, ymin, ymax){
var chart = new Highcharts.Chart({
xAxis: {
min: xmin,
max: xmax
},
yAxis: {
min: ymin,
max: ymax
},
chart: {
renderTo: "graph-container",
},
title: { text: null },
credits: { enabled: false}
});
}
Hope it helps.
if you're able to use the built-in range selector, try specifying the selected option (api reference), like this:
rangeSelector: {
enabled:true,
buttons: [
{type: 'week', count: 6, text: '6w'},
{type: 'week', count: 12, text: '12w'}
],
selected: 1 // uses a zero-based index
},
if this doesn't suit your needs, and if you're reading the chart data from json, then you could try something like the following:
$('#button_id_value').click(function() {
buildChart(some_hardcoded_time_value_selection); // you will have to specify a value that matches your json data
});
function buildChart(selected_time_value){
d3.json("/path/to/your/data.json", function(error, json_data) {
if (error) return console.warn(error);
chart_series = json_data.filter(function(d, i){
return (selected_time_value == d["time_value"]);
});
$('#container').highcharts({
chart: {type: 'column'},
// ... more chart options ...
series: chart_series,
// ... more chart options ...
});
});
});
fyi - this last solution requires d3 and jquery.