I'm using ng2-google-charts with Ionic 6. I'm trying to redraw the gauge chart once the data is updated.
Here is the code that I'm using:
showGauge(value: number) {
this.gaugeChart = {
chartType: GoogleChartType.Gauge,
dataTable: [
['PSI', Number(value.toFixed(2))]
],
firstRowIsData: true,
options: {
height: 300,
max: 175,
chartArea: { height: '200' }
},
};
let c = this.gaugeChart.component;
c.draw();
}
But I get the following error, which indicates that the chart component is undefined. How can I solve this and redraw the chart?
Here's the error:
Error
Related
Hello I have the following design That I have to implement. I am using apexcharts as a chart library in my application .
I could not find any gauge/indicator related information of apexchart while googling and now
quite not sure weather it is possible to implement the chart as required design.
2 important elements on my design
custom indicator
rounded edges of the arc
Do you have any idea that could help me here ?
Thank You.
var options = {
series: [44, 55, 41, 17, 15],
chart: {
type: "donut"
},
plotOptions: {
pie: {
startAngle: -90,
endAngle: 90,
offsetY: 10
}
},
grid: {
padding: {
bottom: -80
}
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: "bottom"
}
}
}
]
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
there is one in Echarts i use it before
https://echarts.apache.org/examples/en/editor.html?c=gauge-progress
Am creating custom visualization and am using echarts for the visualization.
I have a source and everything but i am unable to make it work. Can anyone help in this how to achieve the below fiddle in looker custom visualization
import * as echarts from 'echarts';
var ROOT_PATH = 'https://echarts.apache.org/examples';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
myChart.showLoading();
$.getJSON(ROOT_PATH + '/data/asset/data/les-miserables.json', function (graph) {
myChart.hideLoading();
graph.nodes.forEach(function (node) {
node.label = {
show: node.symbolSize > 30
};
});
option = {
title: {
text: 'Les Miserables',
subtext: 'Default layout',
top: 'bottom',
left: 'right'
},
tooltip: {},
legend: [{
// selectedMode: 'single',
data: graph.categories.map(function (a) {
return a.name;
})
}],
animationDuration: 1500,
animationEasingUpdate: 'quinticInOut',
series: [
{
name: 'Les Miserables',
type: 'graph',
layout: 'none',
data: graph.nodes,
links: graph.links,
categories: graph.categories,
roam: true,
label: {
position: 'right',
formatter: '{b}'
},
lineStyle: {
color: 'source',
curveness: 0.3
},
emphasis: {
focus: 'adjacency',
lineStyle: {
width: 10
}
}
}
]
};
myChart.setOption(option);
});
option && myChart.setOption(option);
demo url
in the above snippet, they are passing json but in my requirement i need to fetch from selected dimensions or measures and I need to convert into looker custom viz
looker.plugins.visualizations.add({
});
Please do let me know any suggestions on this
Inside the object you pass to looker.plugins.visualizations.add, the updateAsync method ( that you will use to generate the echart options and series ) is async, and it passes you a done callback to be called when you are ready.
So you can call your json, process the data and then done()
I'm trying to set the maxWidth of my world map with highcharts but it doesn't change the size.
I've tried these:
responsive: {
rules: [{
condition: {
maxWidth: 500
},
...
As suggested here and demo.
chart: {
maxWidth: 1024
},
As suggested here, demo.
I'm using the code from this example.
Update 10 Feb 2020:
Following the suggestion below, I use this code which can be found here:
import * as React from 'react';
import * as ReactDom from 'react-dom';
import * as Highcharts from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official';
import mapDataWorld from '#highcharts/map-collection/custom/world.geo.json';
var data: [string, number][] = [
// data can be found in the link
];
const options: Highcharts.Options = {
chart: {
height: 400
},
series: [{
type: 'map',
mapData: mapDataWorld,
data: data,
}],
responsive: {
rules: [{
chartOptions: {
chart: {
height: 800
},
legend: {
margin: 0
},
title: {
margin: 0
},
},
condition: {
maxWidth: 1024
}
}]
}
}
const App = (props: HighchartsReact.Props) => <div style={{
maxWidth: '1024px',
}}>
<HighchartsReact
options={options}
highcharts = { Highcharts }
constructorType={'mapChart'}
{...props}
/>
</div>
ReactDom.render(<App />, document.getElementById('root'));
Then open the result in a new window.
You'll see the map is pushed below the top of the screen in mobile view in Google Chrome. This still happens with margin: 0.
responsive: {
rules: [{
condition: {
maxWidth: 500
},
...
Above option is a condition for which the next defined chart option will be applied, in case of shared demo is:
chartOptions: {
xAxis: {
labels: {
formatter: function () {
return this.value.charAt(0);
}
}
},
yAxis: {
labels: {
align: 'left',
x: 0,
y: -2
},
title: {
text: ''
}
}
}
Highcharts doesn't offer a chart.maxWidth feature, only the chart.width feature as you shared from the API to set the fixed value for chart width.
You can set the max-width for the div where Highcharts map is rendering, but remember about importing CSS.
Demo: https://stackblitz.com/edit/react-ts-5upg3v?file=index.tsx
Or without CSS as inline-style - demo: https://stackblitz.com/edit/react-ts-uy5xkd?file=index.tsx
I have a CanvasJS chart, and I want to set it's stripLine dynamically.
chart = new CanvasJS.Chart("chart",
{
backgroundColor: "rgba(0,0,0,0)",
legend: {
fontColor: "#FFF"
},
axisX: [{
title: "Test axisX title",
stripLines: [
{
value: 250,
color: "#FF0000"
}
],
}],
data: [] //Later add datapoints
});
Function which set the stripLine's position:
var setVerticalLine = function (xPos) {
if (typeof chart !== 'undefined') {
console.log(JSON.stringify(chart)); //debug info
console.log("chart.axisX type: " + typeof chart.axisX); //debug info
chart.axisX[0].stripLines[0].set("value", xPos);
}};
After the rendering I call the function, but the set isn't successful.
The error:
Uncaught TypeError: Cannot read property '0' of undefined..."
The debug info: "chart.axisX type: undefined". The dumped chart
object contains the axisX: "..."axisX":[{"title":"Test axisX
title","stripLines":[{"value":250,"color":"#FF0000"}]}]...
How can be undefined the axisX, when I see it on the rendered chart, with the title and stripline? Why am I unable to access it and modify? Can somebody help me to solve this issue?
According to documentation, 'Chart should be rendered before you can use set method'. Rendering chart before calling setVerticalLine should work fine in your case.
Here is the working code:
var chart = new CanvasJS.Chart("chart", {
backgroundColor: "rgba(0,0,0,0)",
legend: {
fontColor: "#FFF"
},
axisX: [{
title: "Test axisX title",
stripLines: [
{
value: 250,
color: "#FF0000"
}
],
}],
data: [] //Later add datapoints
});
chart.options.data.push({type: "line", dataPoints: [{x: 200, y: 100}, {x: 300, y: 50}]}); //Dummy datapoints
chart.render();// Render Chart before using set method
var setVerticalLine = function (xPos) {
if (typeof chart !== 'undefined') {
chart.axisX[0].stripLines[0].set("value", xPos);
}
};
setVerticalLine(220); //Update Stripline value to 220
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chart" style="height: 260px; width: 100%;"></div>
You don't see chart.axisX on the dumped object. What you see is actually chart.themeOptions.axisX. Also, chart.themeOptions.axisX.set is not a function(, although chart.themeOptions.axisX.__defineSetter__ is).
Looking to save the ChartWrapper object after a chart has been modified in the Google Visualization Chart Editor so that the page reloads the last chart they selected is shown rather the default set in the options.
I have managed to save a JSON.stringfy representation of the ChartWrapper object using the code below:
function getWrapper() {
chart = chartEditor.getChartWrapper();
localStorage.setItem('chartWrapper', JSON.stringify(chart));
redrawChart();
}
The code for the default chart is provided below:
chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: '#Html.Raw(Model.KeyIndicatorName)',
hAxis: {
slantedText: true,
slantedTextAngle: 30,
title: 'Reporting Period'
},
vAxis: {
title: '#Model.XAxis'
},
chartArea: {
top: 40,
width: "65%"
},
pointSize: 5
}
});
on reload if the localStorage item is available I want default options to be superseded with the those values.
How I go about implementing this?
need to use chart wrapper method toJSON method, not JSON.stringify...
function getWrapper() {
chart = chartEditor.getChartWrapper();
localStorage.setItem('chartWrapper', chart.toJSON());
redrawChart();
}
then you can create the chart directly from the json...
var chart = new google.visualization.ChartWrapper(localStorage.getItem('chartWrapper'));