I hope someone can please help me.
I've got a pie chart on a web page using Google Chart. I've popped the code below.
The problem I am having is that I want the legend which is on the right hand side when on a desktop screen to move underneath the pie chart when being viewed on a mobile device.
I've seen some posts about this, but they didn't quite give me what I needed and were not new.
Can anyone please advise, I'd be very grateful!
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Toppings');
data.addColumn('number', 'Cost in pence');
data.addRows([
['Cheese: 42 pence', 42],
['Ham: 21 pence', 21],
['Pepparami: 4 pence', 4],
['Anchovies: 11 pence', 11],
['Chicken: 3 pence', 3],
['Pineapple: 7 pence', 7],
['Beef: 12 pence', 12]
]);
// Set chart options
var options = {'title':'How much are your toppings?',
tooltip: {isHtml: true},
chartArea:{left:0,top:0},
'height':450,
width:680,
'pieHole':0.4,
'pieSliceText':'value',
colors: ['#fbc900', '#e6007e', '#ee7203', '#009a44', '#e22a1b','#95c11f','#0099b3'],
tooltip: {
text: 'none'
},
titleTextStyle: {color: 'black', fontName: 'Lato', fontSize: '1'},
pieSliceTextStyle: {fontSize: '20'},
legend: {textStyle: {fontSize: 12}}
};
function resize() {
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
window.onload = resize();
window.onresize = resize;
}
</script>
Related
I have an anychart chart with 2 Y-axes with their own scales.
For both scales the gridlines are active.
The number of gridlines for both axes differ (see attached example image).
Is it possible to align the gridlines for both Y-axes?
example image
You should enable grid lines on your chart with yGrid() and tweak the configuration of your vertical scales, especially ticks intervals.
Here is an example:
anychart.onDocumentReady(() => {
let data1 = [
["A", 7],
["B", 3]
];
let data2 = [
["A", 112365],
["B", 99986]
];
let chart = anychart.column(),
series1 = chart.column(data1),
series2 = chart.column(data2);
let yScale = chart.yScale();
yScale.minimum(0);
yScale.ticks().interval(2); // <--- HERE
let extraYScale = anychart.scales.linear();
extraYScale.minimum(0);
extraYScale.ticks().interval(40000); // <--- HERE
let yAxis = chart.yAxis(0);
yAxis.stroke("red");
yAxis.ticks().stroke("red");
yAxis.labels().fontColor("red");
let extraYAxis = chart.yAxis(1);
extraYAxis.scale(extraYScale);
extraYAxis.orientation("right");
extraYAxis.stroke("green");
extraYAxis.ticks().stroke("green");
extraYAxis.labels().fontColor("green");
series1.yScale(yScale);
series2.yScale(extraYScale);
series1.normal().fill("red", 0.5);
series1.normal().stroke("red", 1);
series2.normal().fill("green", 0.5);
series2.normal().stroke("green", 1);
chart.yGrid(true); // <--- HERE
chart.container("container");
chart.draw();
});
#container {
width: 100%;
height: 350px;
}
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-cartesian.min.js"></script>
<div id="container"></div>
Calling Component
<SparkLine currentColor={"blue"} id="line-sparkline" type="Line" height="80px" width="250px" data={SparklineAreaData} color={"blue"} />
actuall Component
import React from 'react'
import {SparklineComponent,Inject,SparklineTooltip} from '#syncfusion/ej2-react-charts'
import {SparklineAreaData} from '../../data/dummy'
const SparkLine = ({id,height,width,color,data,type,currentColor}) => {
return (
<SparklineComponent
id={"line-sparkline"}
height={"80px"}
width={"250px"}
lineWidth={1}
valueType="Numeric"
fill={"blue"}
border={{ color:"blue", width: 2 }}
dataSource={SparklineAreaData}
xName='x'
yName='y'
type={"Line"}
>
<Inject services={[SparklineTooltip]} />
</SparklineComponent>
)
}
export default SparkLine
Learning About syncfusion creating a simple Sparkline chart but it displays nothing on front-end to error also but when i inspect there is actually some elements tag but it shows nothing
This problem is arise due to wrong formatting of data. Your x-axes variable name and y-axes variable name must be same as props xName and yName. If your dummy data look like this:
const dummyData = [{
{ xval: 1, yval: 6 },
{ xval: 2, yval: 7 },
{ xval: 3, yval: 4 },
{ xval: 4, yval: 8 },
{ xval: 5, yval: 10 },
}]
Props xName="xval" and yName="yval"
see Full example https://ej2.syncfusion.com/react/documentation/sparkline/getting-started/
I also experienced this problem. You can fix this by looking at the syncfusion documentation.
Correct the following.
change
xName='x' to xName = 'xval'
change
yName='y' to yName = 'yval'
Now it should work fine.
The value of your xName and yName props must be the same as your data Object property name
For example
if your data object is
const dummyData = [{
{ xvalue: 1, yvalue: 6 },
{ xvalue: 2, yvalue: 7 },
{ xvalue: 3, yvalue: 4 },
{ xvalue: 4, yvalue: 8 },
{ xvalue: 5, yvalue: 10 },
}]
the xName and yName props value will be
xName='xvalue'
yName='yvalue'
like this:
<SparklineComponent
id={"line-sparkline"}
height={"80px"}
width={"250px"}
lineWidth={1}
valueType="Numeric"
fill={"blue"}
border={{ color:"blue", width: 2 }}
dataSource={SparklineAreaData}
xName='xvalue'
yName='yvalue'
type={"Line"}
>
I want to display the findMax() output in a div but im facing this problem :
'findMax' is not defined no-undef
, 'dataset' is not defined no-undef
Someone suggested that I need to use useState but I'm not sure how to make it work , I would appreciate any help !
const pricedata = {
datasets: [
{
backgroundColor: "#0000",
barPercentage: 2,
barThickness: 5,
data: [1, 10, 30, 7, 42, 12],
label: "Update in prices",
maxBarThickness: 10
},
{
backgroundColor: "#0000",
barPercentage: 2,
barThickness: 5,
data: [11, 70, 18, 17, 24, 12],
label: "Update in prices",
maxBarThickness: 10
}
]
};
function findMax(PRICES) {
if (!PRICES) {
return 0;
}
return Math.max(...PRICES);
}
pricedata.datasets.forEach((dataset) => {
dataset.maxPrice = findMax(dataset.data);
});
pricedata.datasets.forEach((dataset) => {
console.log('max price is', dataset.maxPrice);
});
return (
<div>{findMax(dataset.data)}</div>
There is no 'dataset' variable at the root level of the code. The pricedata variable contains an array called datasets. In your code when you call map, it loops over all the datasets - calling each individual one dataset. That variable name is only "scoped" to be within the map() function.
You can build the DIVs inside a map like this:
// call your findMax() on each element
const divs = pricedata.datasets.forEach((dataset,i) => (<div key={i}>{findMax(dataset.data)}</div>))
// using React, you'll need to surround the divs in a parent div
return <>{divs}</>
I need your help with custom markers in Leaflet. I need custom markers that correspond with the data entries. Here is a data SAMPLE csv that looks like this:
result
display_na
lat
long
AV
14, Amsterdamer Straße, Leopoldkiez, Wedding, Mitte, Berlin, 13347, Deutschland
13.3574034
52.5517197
VK
Seestraße, Wedding, Mitte, Berlin, 13351, Deutschland
52.541301
13.3341968
This is my code by now
// create 3 types of markers in 3 colors
var LeafIcon = L.Icon.extend({
options: {
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76],
},
});
// Read markers data from data.csv
$.get("./data.csv", function (csvString) {
// Use PapaParse to convert string to array of objects
var data = Papa.parse(csvString, { header: true, dynamicTyping: true }).data;
var greenIcon = new LeafIcon({ iconUrl: "greeb.png" }),
yellowIcon = new LeafIcon({ iconUrl: "yellow.png" }),
redIcon = new LeafIcon({ iconUrl: "red.png" });
// For each row in data, create a marker and add it to the map
// For each row, columns `Latitude`, `Longitude`, and `Title` are required
for (var i in data) {
var row = data[i];
var marker = L.marker([row.lat, row.long], {
opacity: 1,
}).bindPopup(row.display_na);
L.marker([row.lat, row.long])
.addTo(map)
.bindPopup(row.display_na)
.openPopup();
}
});
It's not working. Can you tell me where my failure lies? I have 3 types of markers
greenIcon
yellowIcon
redIcon
The color of the marker corresponds with the row result. If the result value in the csv is AV then the marker should be greenIcon. That's the idea.
Than you for, looking forward to your suggestions!
You are close. First you need a ternary or an if statement to check csv's result value as you mention when instantiating a marker. It accepts an object which has some options including icon key. Using that you can define a different icon apart from the predefined
for (var i in data) {
var row = data[i];
const marker = L.marker([row.lat, row.long], {
icon: row.result === "AV" ? greenIcon : blueIcon
})
.addTo(map)
.bindPopup(row.display_na)
.openPopup();
}
Moreover your csv should be in the form of:
result,display_na,lat,long
AV,14 Amsterdamer Straße Leopoldkiez Wedding Mitte Berlin 13347 Deutschland,52.5517197,13.3574034
VK,Seestraße Wedding Mitte Berlin 13351 Deutschland,52.541301,13.3341968
You need to have commas only when separating each column values otherwise it is considered a different column value.
Demo
Using Angular, I'm trying to loop an array of objects to plot different bar charts in the screen.
In my HTML I have something like:
<div class="row">
<div class="col-md-5" *ngFor="let sprintCapacity of sprintCapacities">
<div style="display: block">
<label>{{sprintCapacity.team}}</label>
<canvas baseChart
[datasets]="barChartData"
[labels]="barchartLabels"
[options]="barChartOptions"
[legend]="barChartLegend"
[chartType]="barChartType">
</canvas>
</div>
</div>
</div>
Note that I'm already inside a ngFor loop to feed the charts (I'm going to have as much as charts in the screen depending on the number of teams registered). The problem is, now, passing an array of values that is inside my sprintcapacities object to every property, for example, passing the list of names only (which is an array inside my object) to property barchartLabels.
The structure of object:
private sprintCapacities: SprintCapacity[] = [
new SprintCapacity('Team 01', 'sprint 01', [
new Member('John', 80, 30, 50),
new Member('Scot', 70, 30, 30),
new Member('Anitha', 80, 20, 20)
]
),
new SprintCapacity('Team 02', 'sprint 01', [
new Member('Paul', 70, 30, 50),
new Member('Raj', 60, 30, 30),
new Member('Ben', 60, 20, 20)
]
)
];
Any thoughts?
Base on your code one way could be to have helper functions that takes a team and return the datasets and labels for each chart. Something like this,
component.html
<canvas baseChart
[datasets]="getBarChartData(sprintCapacity)"
[labels]="getBarchartLabels(sprintCapacity)"
[options]="barChartOptions"
[legend]="true"
[chartType]="bar">
</canvas>
component.ts
getBarChartData(sprintCapacity: SpringCapacity): Array<{data:string, label:string}> {
const dataAttr1 = sprintCapacity.getMembers().map(m => m.getAttr1());
const dataAttr2 = sprintCapacity.getMembers().map(m => m.getAttr2());
const dataAttr3 = sprintCapacity.getMembers().map(m => m.getAttr3());
return [
{ data: dataAttr1, label: 'Attr1' },
{ data: dataAttr2, label: 'Attr2' },
{ data: dataAttr3, label: 'Attr3' }
];
}
getBarChartLabels(sprintCapacity: SprintCapacity): string[] {
return sprintCapacity.getMembers().map(m => m.getName());
}
I am assuming many things here, like some methods for the classes to obtain attributes, but I think is pretty clear. I also assume that the options, legend and type of the charts are the same for every chart.