I am using chart.js with Angular 7. I am providing array and rendering the chart.
Initialization.
import * as JSC from 'jscharting';
this.phLiveChart = JSC.chart('phChart', {
debug: false,
type: 'step',
chartArea_boxVisible: false,
legend_visible: false,
defaultTooltip_enabled: false,
xAxis: {
scale: {
range: { min: 0, max: 100, padding: 0.1 }
}
},
defaultSeries: {
opacity: 0.7
},
defaultPoint_label_text: '%yValue',
series: [{
name: 'pH',
points: []
}]
});
When data come from server.
for (let i = 0; i < records.length; i++) {
if (this.device.sensors.ph == true) {
records[i].ph = Number(records[i].ph.toFixed(3));
this.phLiveChart.series(0).points.add([new Date(records[i].recorded_at), records[i].ph]);
}
}
Problem:
Sometimes charts shows values with more precision which I am providing it. In console log it shows correct precission but in chart its showing wrong.
It is easy to control the precision in JSCharting by specifying a format string with option such as:
yAxis_formatString:'n3'
This will make all y axis related values be numbers with 3 decimal places.
Alternatively, you can apply the formatting for the label alone with
defaultPoint_label_text: '{%yValue:n3}'
Hope that helps.
Related
I have a bar chart written with vizframe and i want to call the fireSelectData function with the following parameter:
var oSelection = {
data: [{
target: $('.v-datapoint')[29],
data: [{
ctx: {
path: {
mg: 0,
mi: 0,
dii_a1: 0,
dii_a2: 0
},
val: 82.2
}
}]
}],
name: "selectData"
}
var frame = this.getView().byId('vizFrameId')
frame.fireSelectData(oSelection)
where $('.v-datapoint')[29] is the <g> svg tag and 28.2 is the value of a column. I'm not sure if these are the correct parameters for the object.
Which is really not clear for me is the path. Which value should be there for mg, mi, dii_a1 and dii_a2?
if you want to select specific values you can use the vizframe's vizSelection function.
oVizFrame.vizSelection([{data : dataPoint}], {clearSelection : true});
the first parameter is an array of datapoints wich are in the model of the vizframe. You can get those objects with oVizFrame.getModel().getProperty('/yourProperty')
if you set clearSelection: true the previous selection will be cleared.
On highcharts, I have a treemap with 2 levels, each with a different layout algorithm. Now I want to limit what we can see to the current level. It means that on level 1, I don't want to see the labels of level 2, which would only appear when drilling down (and the labels of level 1 would disappear).
I know it is easy with levelIsConstant: false, but this only works with 1 level, and I use 2 because I need different layouts.
Here is the link to what I currently have:
series: [{
type: "treemap",
allowDrillToNode: true,
alternateStartingDirection: true,
levels: [{
level: 1,
layoutAlgorithm: 'squarified',
dataLabels: {
enabled: true,
align: 'left',
verticalAlign: 'top',
style: {
fontSize: '15px',
fontWeight: 'bold'
}
}
}, {
level: 2,
layoutAlgorithm: 'stripes',
color: 'blue'
}],
//...
http://jsfiddle.net/dhfera2y/2/
I want all the names to be hidden, as well as the lines separating them.
EDIT: Using a rgba color on each level, I can hide the nodes below it, but I still cannot hide their label!
Thank you it is a smart idea for the labels issue, but as I say I cannot use levelIsConstant: false because I need a different layout for each level at every moment. With this solution both levels can have a different layout when I am on the top level, but I soon as I drill down I loose the correct layout for the new view.
Almost :-)
EDIT : Okay so I finally managed to do it. I think it is impossible to achieve this in the way I was trying to, which was using the parent option for each child point of the serie in order to determine the hierarchy of the tree. So instead of using one serie with a hierarchy, I use one serie for the top level which I link to several series for the level below.
I was able the do this thanks to the drilldown option.
I found the solution in the official documentation :
http://www.highcharts.com/docs/chart-concepts/drilldown
I adjusted the code and it was all right. Here is the solution I came up with (it is a different work from my first link) :
http://jsfiddle.net/ff964fog/47/
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
borderWidth: 3,
data: modulesData
}],
drilldown: {
series: servicesSerie
},
I still have to adjust a few things (like the disappearance of the animations for the bottom level), but in the end I have exactly what I wanted !
My take on some settings you can use to achieve this (JSFiddle):
series: [{
type: "treemap",
allowDrillToNode: true,
levelIsConstant: false,
// ...
levels: [{
level: 1,
dataLabels: {
enabled: true
}
// ...
}, {
level: 2,
borderWidth: 0,
dataLabels: {
enabled: false
}
}],
data[{
//...
}]
}]
The level 2 settings apply only when viewing from level 1. When drilling down the new view is considered to be level 1 because of levelIsConstant: false.
Setting borderWidth: 0 in level 2 is only needed if you want to hide the grid of level 2 when viewing from level 1.
You can use a custom formatter for plotOptions.treemap.datalabels. The code bellow is an example that uses this.series.rootNode and this.point.parent and compare them to examine if the label should be shown or not:
plotOptions: {
treemap: {
dataLabels: {
formatter: function(data) {
if (this.point.parent == (this.series.rootNode || null)) {
return this.key;
}
}
}
}
}
You can use any other property that is available in formatter function. Just log (console.log) this and data in the formatter function to see all the properties available:
plotOptions: {
treemap: {
dataLabels: {
formatter: function(data) {
console.log(this, data);
}
}
}
}
Just started using flot.js for the first time and have a few problems/questions. The chart displays fine minus a few things that are bothering me.
1 - The ticks and dates don't seem to line up properly. For example, in the current chart I am working on there are only two entries for two different days. The actual data value (point) is not above the date it corresponds with for some reason. See the image here
2 - Is there any way to make the y axis larger than the dataset to prevent the lines from overlapping the legend? In this example it is fine, but I have seen others where the data overlaps the legend.
3 - How to handle no data? I plan to expand on this to allow the user to select start/end dates... so if there are no results is there a nice way to return this and/or possibly show a message in the chart? The main thing here is the script doesn't break when there is no data.
JS :
//get the data
$.ajax({
url: "/process/chart_main.php",
type: "POST",
dataType: "json",
success: onDataReceived
});
function onDataReceived(series) {
console.log(series);
// Load all the data in one pass; if we only got partial
// data we could merge it with what we already have.
data = series;
var options = {
series: {
lines: {
show: true,
lineWidth: 2,
fill: true,
fillColor: {
colors: [{
opacity: 0.05
}, {
opacity: 0.01
}
]
}
},
points: {
show: true
},
shadowSize: 2
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#eee",
borderWidth: 0
},
//colors: ["#d12610", "#37b7f3", "#52e136"],
xaxis: {
tickSize: [1, "day"],
mode: "time",
timeformat: "%m-%d-%Y"
},
yaxes: [{
position: "left"
}],
legend: {
position: "ne"
}
};
$.plot("#flot_chart", data, options);
}
PHP:
//actual select removed for this display
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
if($results)
{
foreach($results as $row)
{
$data1[] = array( strtotime($row['date']) * 1000, $row['day_count'] );
}
//send our data values to $mergedData, add in your custom label and color
$mergedData[] = array('label' => "Events" , 'data' => $data1, 'color' => '#37b7f3');
}
// return result array to ajax
echo json_encode($mergedData);
Probably the ticks are at midnight (07-09-2014 00:00:00) while the data points are not. If you want to line them up remove the time from your datapoints or give flot the ticks with the same time as your datapoints as an array instead of the tickSize option (see here, you have to give the ticks as timestamps like in the datapoints):
xaxis: {
ticks: [1405942268798, 1405942368798, ...]
}
Use the min and max properties for the axis options (see same link as above):
xaxis: {
min: 1405942268798,
max: 1405942368798
}
flot doesn't "break" when there is no data, it just shows an empty chart. If you want to show an additional message, you can check for yourself before calling $.plot():
if (data.length == 0) {
alert('No data');
}
I am using the column charts for my project. I have written a custom function that colors each bar of the chart based upon its y value. This works fine when I initialize the chart. As I hover over the chart, the color of the bar goes back to the default and my custom colors never return.
I have tries disabling on hover but that doesn't seem to work. I don't want the color to change even when hovered over the bar. Any suggestions?
You are looking for this option:
plotOptions: {
series: {
states: {
hover: {
enabled: false
}
}
}
},
Fiddle here.
EDITS
Instead of modifying the SVG directly to set your colors, do it within the api:
var max = 200;
var seriesData = $.map([107, 31, 635, 203, 2],function(datum, i){
return {
color: datum > max ? 'red' : '#2f7ed8',
y: datum
};
});
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: seriesData
}]
});
New fiddle.
You are updating color in a wrong way, use point.update() instead: http://jsfiddle.net/CaPG9/8/
$('#container').highcharts({
chart: {
type: 'bar'
},
tooltip: {
valueSuffix: ' millions'
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}]
},function(chart){
var max = 200;
$.each(chart.series[0].data,function(i,data){
if(data.y > max)
data.update({
color:'red'
});
});
});
OK I have a flot stacked bar chart displaying some information, now this all works perfectly except for the xaxis.
At present instead of showing the data I want it to show it just shows a column number on every other column.
Below is my code for the xaxis:
var options = {
series: {stack: 0,
lines: {show: false, steps: false },
bars: {show: true, barWidth: 0.5, align: 'center',},},
xaxis: {ticks: [[1,' Yesterday'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five'], [6,'Six'], [7,'Seven'], [8,'Eight'], [9,'Nine'], [10,'Ten'], [11,'Eleven'], [12,'Twelve'], [13,'Thirteen'], [14,'fourteen']]},
xaxis: { tickColor: 'transparent' }
};
$.plot($(css_id), data, options);
});
And here is the configure section:
xaxis: {
show: true, // null = auto-detect, true = always, false = never
position: "bottom", // or "top"
mode: null, // null or "time"
color: "#990000", // base color, labels, ticks
tickColor: null, // possibly different color of ticks, e.g. "rgba(0,0,0,0.15)"
transform: null, // null or f: number -> number to transform axis
inverseTransform: null, // if transform is set, this should be the inverse function
min: null, // min. value to show, null means set automatically
max: null, // max. value to show, null means set automatically
autoscaleMargin: null, // margin in % to add if auto-setting min/max
ticks: null, // either [1, 3] or [[1, "a"], 3] or (fn: axis info -> ticks) or app. number of ticks for auto-ticks
tickFormatter: null, // fn: number -> string
labelWidth: null, // size of tick labels in pixels
labelHeight: null,
reserveSpace: null, // whether to reserve space even if axis isn't shown
tickLength: null, // size in pixels of ticks, or "full" for whole line
alignTicksWithAxis: null, // axis number or null for no sync
// mode specific options
tickDecimals: null, // no. of decimals, null means auto
tickSize: null, // number or [number, "unit"]
minTickSize: null, // number or [number, "unit"]
monthNames: null, // list of names of months
timeformat: null, // format string to use
twelveHourClock: false // 12 or 24 time in time mode
},
I have tried changing pretty much everything and looked at different posts, but nothing seems to change the values. I can do simple things like change the color etc and so i am wondering if i have got something wrong.
Any suggestions would be appreciated.
Thanks
You've doubled your xaxis configuration, so the second one overwrites the first.
This:
xaxis: {ticks: [[1,' Yesterday'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five'], [6,'Six'], [7,'Seven'], [8,'Eight'], [9,'Nine'], [10,'Ten'], [11,'Eleven'], [12,'Twelve'], [13,'Thirteen'], [14,'fourteen']]},
xaxis: { tickColor: 'transparent' }
Should be:
xaxis: {
ticks: [[1,' Yesterday'], [2,'Two'], [3,'Three'], [4,'Four'], [5,'Five'], [6,'Six'], [7,'Seven'], [8,'Eight'], [9,'Nine'], [10,'Ten'], [11,'Eleven'], [12,'Twelve'], [13,'Thirteen'], [14,'fourteen']],
tickColor: 'transparent'
},