Related
I'm trying to dynamically replace series data and plot bands in my Highcharts gauge. So far I've managed to dynamically change the series data, however I am stuck struggling to replace the bands. This is what I've tried:
let highchartsChartOptions = {
"chart": {
"type": "gauge",
"renderTo": "chart"
},
"series": [{
"data": [247600]
}],
"yAxis": {
"plotBands": [{
"from": 156700,
"to": 277150,
"color": "#ff0000",
}, {
"from": 277150,
"to": 386100,
"color": "#00ff00"
}],
"min": 100000,
"max": 400000
},
"pane": {
"background": null,
"startAngle": -90,
"endAngle": 90
}
};
let seriesData = [
[226800],
[247600]
];
let seriesBands = [
[{
"from": 156700,
"to": 277150,
"color": "#ff0000",
}, {
"from": 277150,
"to": 386100,
"color": "#00ff00"
}],
[{
from: 100000,
to: 250000,
"color": "#ff0000"
}, {
from: 250000,
to: 400000,
"thickness": 15,
}]
];
const replacePlotBand = (axis, id, replacement) => {
axis.removePlotBand(id);
axis.addPlotBand(replacement);
};
let chart = new Highcharts.Chart(highchartsChartOptions);
let flip = true;
$("#change").on("click", () => {
chart.series[0].setData(seriesData[flip ? 0 : 1]);
chart.xAxis[0].update({
plotBands: seriesBands[flip ? 0 : 1]
});
chart.redraw(true);
flip = !flip;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-more.src.js"></script>
<div id='chart' style="width: 800px; height: 500px;"></div>
<button id="change">Change data</button>
My intention is to replace both series data and plot bands with a different set of data but right now only the series data seems to be updated.
I'm not sure what I am doing wrong here.
I have also tried adding IDs to the bands and doing:
chart.xAxis[0].removePlotBand('band1');
chart.xAxis[0].removePlotBand('band2');
chart.xAxis[0].addPlotBand(seriesBands[flip ? 0 : 1][0]);
chart.xAxis[0].addPlotBand(seriesBands[flip ? 0 : 1][1]);
but that also did not work (see fiddle https://jsfiddle.net/yc2gnp7x/2/).
Your highChartOptions uses yAxis but you are removing and adding to xAxis
I am having problem nvd3 tooltip in multichart(multilinechart). Here my XAxis label are JAN,FEB,MAR... DEC. But when i mouse over in the graph it is showing 0,1,2,3.. 11 as tooltip title. But i need to show JAN,FEB.. DECinstead of index. Here is my chart option code,
{
"chart": {
"type": "multiChart",
"height": 400,
"interpolate": "linear",
"showLegend": false,
"margin": {
"top": 50,
"right": 100,
"bottom": 60,
"left": 100
},
"reduceXTicks": false,
"useVoronoi": false,
"useInteractiveGuideline": true,
"duration": 500,
"xAxis": {
"axisLabel": "MONTHLY",
"tickPadding": 10,
"tickSize": 1,
"tickValues": [
0,
1,
2,
3,
4,
5,
6
]
},
"yAxis1": {
"axisLabel": "Left",
"tickPadding": 10
},
"yAxis2": {
"axisLabel": "Right",
"width": 60,
"tickPadding": 10
},
"yDomain1": [
0,
5
],
"yDomain2": [
0,
100
]
}
}
Here is the issue in image (Need to show FEB but it is showing 1),
Here is second(Need to show MAR but it is showing 2)
Please some one help to identify the issue,
Thanks in Advance.
You can try to use a method interactiveLayer.tooltip.headerFormatter to edit header's label, like:
chart.interactiveLayer.tooltip.headerFormatter(d => {
if (typeof d === 'string') return d
})
I'm new to react and having a issue with rendering elements. I have a heatmap component which I'n getting the code from external script, and calling it from my main component. Looks like I'm missing some parameter to be passed or error in the way I'm returning the element.
I have a Heatmap component :
var React = require("react");
var ReactDOM = require("react-dom");
var AmCharts = require("amcharts3-react");
// Generate random data
function generateData() {
var firstDate = new Date();
var dataProvider = [];
for (var i = 0; i < 100; ++i) {
var date = new Date(firstDate.getTime());
date.setDate(i);
dataProvider.push({
date: date,
value: Math.floor(Math.random() * 100)
});
}
return dataProvider;
}
// Component which contains the dynamic state for the chart
var Chart = React.createClass({
getInitialState: function () {
return {
dataProvider: generateData(),
timer: null
};
},
componentDidMount: function () {
var self = this;
self.setState({
// Update the chart dataProvider every 3 seconds
timer: setInterval(function () {
self.setState({
dataProvider: generateData()
});
}, 3000)
});
},
componentWillUnmount: function () {
clearInterval(this.state.timer);
},
render: function () {
// Render the chart
return React.createElement(AmCharts, {
"path": "node_modules/amcharts3/amcharts",
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop": true,
"adjustBorderColor": false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable": true
},
"valueScrollbar":{
"oppositeAxis": false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"dataProvider": this.state.dataProvider
});
}
});
I'm calling it from my main component :
import React from "react"
import Heatmap from "../../Elements/AmCharts/Heatmap"
...
export default class Stats extends React.Component {
render() {
return (
....
<Heatmap />
....
)
}
}
I'm getting a error saying warning.js:45 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Stats.
and also
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of Stats.
Is there any way to fix it?
You need to export your component:
export default Chart = React.createClass({
Can properties of entities drawn in CZML be manipulated? I am trying to toggle fill property of a group of polygons at a time. I have added parent property. But it doesn't seem to work. Anyone has faced this issue before? Any help is much appreciated :)
Here is my sample code:
[
{
"id":"document",
"name":"CZML Geometries: Polygon",
"version":"1.0"
},
{
"id":"testParent",
"description":"test parent entity"
},
{
"id":"id_1",
"polygon":{
"positions":{
"cartographicDegrees":[
-95,29,0,
-95,29,0,
-95,29,0,
-95,29,0,
-95,29,0
]
},
"extrudedHeight":{
"number":4
},
"height":{
"number":0
},
"fill":false,
"parent":"testParent",
"outline":true
}
}
]
Once a CZML document has been loaded into a DataSource, you can manipulate it at runtime as a collection of Entities. Here's an example showing how to toggle the fill flags on a set of polygons. Click "Run code snippet" at the bottom of this:
var viewer = new Cesium.Viewer('cesiumContainer', {
navigationInstructionsInitiallyVisible: false, animation: false, timeline: false,
// These next 5 lines are just to avoid the Bing Key error message.
imageryProvider : Cesium.createTileMapServiceImageryProvider({
url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
}),
baseLayerPicker : false,
geocoder : false,
// This next line fixes another Stack Snippet error, you may omit
// this setting from production code as well.
infoBox : false
});
var czml = [{
"id" : "document",
"name" : "CZML Geometries: Polygon",
"version" : "1.0"
}, {
"id" : "redPolygon",
"name" : "Red polygon on surface",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-115.0, 37.0, 0,
-115.0, 32.0, 0,
-107.0, 33.0, 0,
-102.0, 31.0, 0,
-102.0, 35.0, 0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 0, 0, 100]
}
}
},
"fill" : true,
"extrudedHeight" : 0,
"outline" : true,
"outlineColor" : {
"rgba" : [255, 0, 0, 255]
}
}
}, {
"id" : "greenPolygon",
"name" : "Green polygon",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-108.0, 42.0, 0,
-100.0, 42.0, 0,
-104.0, 40.0, 0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [0, 255, 0, 100]
}
}
},
"fill" : true,
"extrudedHeight" : 0,
"outline" : true,
"outlineColor" : {
"rgba" : [0, 255, 0, 255]
}
}
}, {
"id" : "orangePolygon",
"name" : "Orange polygon",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-108.0, 25.0, 0,
-100.0, 25.0, 0,
-100.0, 30.0, 0,
-108.0, 30.0, 0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 100, 0, 100]
}
}
},
"fill" : true,
"extrudedHeight" : 0,
"outline" : true,
"outlineColor" : {
"rgba" : [255, 100, 0, 255]
}
}
}];
Cesium.CzmlDataSource.load(czml).then(function(dataSource) {
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
document.getElementById('toggleFill').addEventListener('click', function() {
// Iterate the list of entities, looking for polygons.
var numEntities = dataSource.entities.values.length;
for (var i = 0; i < numEntities; ++i) {
var entity = dataSource.entities.values[i];
if (entity.polygon) {
// Toggle the fill flag on each polygon.
entity.polygon.fill = !entity.polygon.fill.getValue();
}
}
});
});
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
font-family: sans-serif;
}
#toolbar { position: absolute; top: 5px; left: 8px; }
<link href="http://cesiumjs.org/releases/1.28/Build/Cesium/Widgets/widgets.css"
rel="stylesheet"/>
<script src="http://cesiumjs.org/releases/1.28/Build/Cesium/Cesium.js">
</script>
<div id="cesiumContainer"></div>
<div id="toolbar">
<button id="toggleFill" class="cesium-button" type="button">Toggle fill</button>
</div>
I'm trying to draw the Line chart graph using chartjs. Now I'm struggling to change y axis value based on user input. So please help me out to load the value. It would be grateful, if answer is given in very detail. I've found some answer, but it has been given only for bar chart, but I need answer for line chart.
var data = {
labels : ["January", "February", "March", "April","May","June","July","August","September","October","November","December"],
datasets : [
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
data : [10,48,40,19,96,27,85,60,15, 30, 80,75],
title : "First data"
}
]
}
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data,options);
});
var options = {
inGraphDataShow: true,
inGraphDataPaddingX: 3,
inGraphDataPaddingY: 3,
inGraphDataAlign : "left",
inGraphDataVAlign : "bottom",
inGraphDataRotate : 0,
inGraphDataFontFamily: "'Arial'",
inGraphDataFontSize: 12,
inGraphDataFontStyle: "normal",
inGraphDataFontColor: "#666",
scaleOverlay: false,
scaleOverride: false,
scaleSteps: null,
scaleStepWidth: 20,
scaleStartValue: null,
// seting x axis value.
yAxisLabel : "Salary",
yAxisFontFamily : "'Arial'",
yAxisFontSize : 16,
yAxisFontStyle : "normal",
yAxisFontColor : "#666",
xAxisLabel : "Month",
xAxisFontFamily : "'Arial'",
xAxisFontSize : 16,
xAxisFontStyle : "normal",
xAxisFontColor : "#666",
// y axis value
scaleLineColor: "rgba(0,0,0,.1)",
scaleLineWidth: 1,
scaleShowLabels: true,
scaleFontFamily: "'Arial'",
scaleFontSize: 12,
scaleFontStyle: "normal",
scaleFontColor: "#666",
scaleShowGridLines: true,
scaleXGridLinesStep : 1,
scaleYGridLinesStep : 1,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
showYAxisMin: true, // Show the minimum value on Y axis (in original version, this minimum is not displayed - it can overlap the X labels)
rotateLabels: "smart", // smart <=> 0 degre if space enough; otherwise 45 degres if space enough otherwise90 degre;
// you can force an integer value between 0 and 180 degres
logarithmic: false, // can be 'fuzzy',true and false ('fuzzy' => if the gap between min and maximum is big it's using a logarithmic y-Axis scale
scaleTickSizeLeft: 5,
scaleTickSizeRight: 5,
scaleTickSizeBottom: 5,
scaleTickSizeTop: 5,
bezierCurve: true,
pointDot: true,
pointDotRadius: 4,
pointDotStrokeWidth: 2,
datasetStroke: true,
datasetStrokeWidth: 2,
datasetFill: true,
animation: true,
animationSteps: 60,
animationEasing: "easeOutQuart",
onAnimationComplete: null,
}
Suppose we want to change the Y value of X-label 'March' from 40 to 50. First change the first dataset's value of 'March' to be 50.
Now calling update function animates the position of 'March' from 40 to 50.
myNewChart.datasets[0].points[2].value = 50; //change the value
myNewChart.update(); //update the chart