I am using react-chart for rendering line chart in my application. line chart in not showing up. Its creating a canvas inside div tag with id "main1".
lchart.js file:
var React = require('React');
var LineChart = require("react-chart").Line;
var ReactDOM = require('ReactDOM');
var Chart = require('chart.js');
Chart.defaults.global.responsive = true;
var chartData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var LChart = React.createClass({
render: function() {
return (<LineChart data={chartData} width="600" height="250" redraw/>);
}
});
ReactDOM.render(<LChart />, document.getElementById('main1'));
index.html file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="main1"></div>
<script src="lchart.js"></script>
</body>
</html>
Assuming you are using react-chartjs V1:
The data you pass into the LineChart component <LineChart ... /> should follow this pattern:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
For more information visit the Chart.js V 1.1.1 documentation Chart.js V1.1.1: Line Chart documentation
Related
I want to use react-quill for my react rich text editor but I couldn't find a way to add a color picker in the toolbar.
I'm also using typescript.
here is my component:
const modules = {
toolbar: [
[{ font: ['', 'times-new-roman', 'arial'] }],
[{ header: [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link'],
['clean']
],
}
function RichTextEditor() {
return <ReactQuill theme="snow" modules={modules} formats={formats} preserveWhitespace />
}
You can use custom toolbar with javascript like this, it might works!
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block'],
[{
'color': ['#F00', '#0F0', '#00F', '#000', '#FFF', 'color-picker']
}]
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
function showColorPicker(value) {
if (value === 'color-picker') {
var picker = document.getElementById('color-picker');
if (!picker) {
picker = document.createElement('input');
picker.id = 'color-picker';
picker.type = 'color';
picker.style.display = 'none';
picker.value = '#FF0000';
document.body.appendChild(picker);
picker.addEventListener('change', function() {
quill.format('color', picker.value);
}, false);
}
picker.click();
} else {
quill.format('color', value);
}
}
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('color', showColorPicker);
#editor-container {
height: 375px;
}
.ql-color .ql-picker-options [data-value=color-picker]:before {
content: 'Pick Color';
}
.ql-color .ql-picker-options [data-value=color-picker] {
background: none !important;
width: 100% !important;
height: 25px !important;
text-align: center;
color: blue;
text-decoration: underline;
}
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet" />
<div id="editor-container">
</div>
This is an example with javascript, you can convert into typescript if you want.
Thank you.
I'm new to ReactMapGL library, I need to load openweathermap data on Mapbox map using ReactMapGL library following the way I have tried but it is not successful.
<ReactMapGL
{...viewport}
width="100%"
height="300px"
transformRequest={transformRequest(credentials)}
mapStyle={mapName}
onViewportChange={setViewport}
>
<Source id='weatherSource' type='raster' tiles={["https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=874718354841f0e0250b4b06a05a971e"]} tileSize={256}>
<Layer {...weatherLayer} />
</Source>
<div style={{ position: "absolute", right: 20, bottom: 20 }}>
<NavigationControl showCompass={false} />
</div>
</ReactMapGL>
export const weatherLayer: LayerProps = {
id: 'weatherLayer',
type: 'raster',
paint: {
'fill-opacity': 0.7
},
minzoom: 0,
maxzoom: 22
}
But I have tried the same approach using HTML it was a success.
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
zoom: 4,
center: [-87.622088, 41.878781]
});
map.on('load', function(){
map.addLayer({
"id": "simple-tiles",
"type": "raster",
"source": {
"type": "raster",
"tiles": ["https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=874718354841f0e0250b4b06a05a971e"],
"tileSize": 256
},
"minzoom": 0,
"maxzoom": 22
});
});
</script>
</body>
I think that the problem is in the style definition. It should be like this, there is no fill-opacity property, for raster is raster-opacity:
const weatherLayer: LayerProps = {
id: 'weatherLayer',
type: 'raster',
paint: {
'raster-opacity': 0.5
},
'background-opacity': 0.9,
minzoom: 0,
maxzoom: 22,
};
I am working on a React JS project. My application needs to display data in chart format. I am using Victory Chart. I can display the chart.
What I am trying to do now is that when the user hovers the mouse cursor on a bar of the bar chart, it should display a tooltip using VictoryTooltip component. But it is not working.
Here is my code:
<VictoryChart
responsive={true}
width={byMonthChartWidth}
height={byMonthChartHeight}
padding={byMonthChartPadding}
domainPadding={byMonthChartDomainPadding}
>
<VictoryAxis
style={{
axis: {
stroke: "transparent"
},
tickLabels: {
fill: props.color,
fontSize: 8,
fontWeight: "bold"
}
}}
fixLabelOverlap={true}
tickValues={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]}
tickFormat={['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']}
preserveAspectRatio={"none"}
/>
<VictoryAxis
style={{
axis: {
stroke: "transparent"
},
tickLabels: {
fill: props.color,
fontSize: 8,
fontFamily: "roboto",
fontWeight: "bold"
}
}}
fixLabelOverlap={true}
dependentAxis
tickValues={yAxisTicks}
tickFormat={(x) => (`${x}`)}
preserveAspectRatio={"none"}
/>
<VictoryBar
labelComponent={
<VictoryTooltip
center={{ x: 225, y: 30 }}
pointerOrientation="bottom"
flyoutWidth={150}
flyoutHeight={50}
pointerWidth={150}
cornerRadius={0}
/>
}
animate={byMonthChartBarAnimation}
barWidth={byMonthChartBarWidth}
cornerRadius={{
topLeft: (data) => 5,
topRight: (data) => 5,
bottomLeft: (data) => 5,
bottomRight: (data) => 5
}}
style={{
data: {
fill: props.color,
stroke: props.color,
fontFamily: "roboto",
fillOpacity: 1,
strokeWidth: 1
}
}}
data={data}
x="identifier"
y="value"
/>
</VictoryChart>
As you can see I am trying to display a tooltip using labelComponent prop of VictoryBar component. When I hover the mouse cursor over the bar, it is not showing any tooltips. What is wrong with my code and how can I fix it?
The data variable used inside your data={data} must carry a label property which contains tooltip's contents.
You can modify tooltip's font color by adding labels object into <VictoryBar>'s style property - example below
LIVE DEMO
Example:
<VictoryBar
barRatio={1}
cornerRadius={0}
style={{ data: { fill: "#6DB65B" }, labels: { fill: "red" } }}
alignment="middle"
labels={(d) => d.y}
labelComponent={
<VictoryTooltip
center={{ x: 225, y: 30 }}
pointerOrientation="bottom"
flyoutWidth={150}
flyoutHeight={50}
pointerWidth={150}
cornerRadius={0}
flyoutStyle={{
stroke: "blue", // border-color
fill: "yellow", // background-color
}}
/>
}
data={[
{ x: "Year 1", y: 150000, label: "My label 1" },
{ x: "Year 2", y: 250000, label: "My label 1" },
{ x: "Year 3", y: 500020, label: "My label 1" },
{ x: "Year 4", y: 750000, label: "My label 1" },
{ x: "Year 5", y: 1000000, label: "My label 1" }
]}
/>
From a functional point of view, I display four buttons that can be selected or not, independently.
I tried several solutions with simple buttons, or using _doClick and a function to change the properties of the rectangle. I also tried a simple node.
I opted for checkBoxes that allow the buttons to be independent.
I used the rectangle icon but I can't make it fit the dimensions of the button. It always seems to be square.
I would also like to center the text in the middle of the button.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LLDynp</title>
<meta name="description" content="Nodes with varying lists of ports on each of four sides." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<body onload="init()">
<script id="code">
var myFont = "16px sans-serif";
var myFontSmall = "14px sans-serif";
var myFontBold = "bold 16px sans-serif";
var colors = {
'blueUnitBorder': "rgb(65, 116, 217",
'blueUnit': "rgb(0, 0, 200)",
'red': '#ff0000',
'green': '#52ce60',
'blue': '#6ea5f8',
'black': 'rgb(0, 0, 0)',
'lightred': '#fd8852',
'lightblue': '#afd4fe',
'lightgreen': '#b9e986',
'pink': '#faadc1',
'purple': '#d689ff',
'orange': '#fdb400'
};
var flowTypeArray=
[{key: 0, text: "Ask for", selected: false, color: colors.red},
{key: 1, text: "Deliver", selected: false, color: colors.black},
{key: 2, text: "Ask for $", selected: false, color: colors.green},
{key: 3, text: "$", selected: false, color: colors.blue}
];
var nextNeedNumber=0;
var referenceNeedRow=null;
var referenceNeedName=null;
var maxNeeds=5;
var emptyNeedName = "new need name?";
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
myBannerODIP =
$(go.Diagram, "myBannerODIPDiv",
{ layout: $(go.GridLayout, { wrappingColumn: 4, alignment: go.GridLayout.Position })});
myBannerODIP.nodeTemplate =
$(go.Node, "Auto", { name: "theNode"},
$("CheckBox", "checked", { name: "theCheckBox"},
{ "Button.width": 85, "Button.height": 50,
"_buttonFillOver" : "pink", "ButtonBorder.strokeWidth": 2,
"ButtonIcon.figure": "Rectangle", "ButtonIcon.fill": "yellow",
"ButtonIcon.strokeWidth": 4, "ButtonIcon.width": 55, "ButtonIcon.height": 40,
},
new go.Binding("ButtonIcon.stroke", "key", function(s) { return flowTypeArray[s].color; }).ofObject(),// OK
$(go.TextBlock, { name: "theTextBlock"}, {textAlign: "center", margin: new go.Margin (0, 0, 0, -75)},
new go.Binding("text", "key", function(s) { return flowTypeArray[s].text; }).ofObject(),// OK
new go.Binding("stroke", "key", function(s) { return flowTypeArray[s].color; }),// OK
new go.Binding("font", "checked", function(s) { return s ? myFontBold : myFont; })// OK no ofObject
),
)
);// end horizontal ODIP panel
myBannerODIP.model.nodeDataArray
ODIPNodesArray = [
{key: 0, "checked": false},// checked OK; isSelected bad; choice à l'envers!
{key: 1, "checked": true},
{key: 2 },
{key: 3 },
];
ODIPLinksArray = [];
myBannerODIP.model = new go.GraphLinksModel(ODIPNodesArray, ODIPLinksArray);
};
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ;
height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="For banner & placeholder save..." style:"grid-column-start: 1;">
<div id="myBannerODIPDiv" style="display: inline-block; width: 400px; height:70px; background: whitesmoke; margin-right: 6px; border: solid 0px black;">
</div>
</div>
</div>
</body>
</html>
I'm unclear what it is that you want. Have you seen all of the customizations at https://gojs.net/latest/extensions/Checkboxes.html ? You can change the properties of both the "ButtonBorder" and the "ButtonIcon". For exampke:
$("CheckBox", "choice6",
{
"Button.width": 20, "Button.height": 20,
"ButtonBorder.figure": "Circle", "ButtonBorder.stroke": "blue",
"ButtonIcon.figure": "Circle", "ButtonIcon.fill": "blue",
"ButtonIcon.strokeWidth": 0, "ButtonIcon.desiredSize": new go.Size(10, 10)
},
$(go.TextBlock, "blue circle")
),
I've been trying to implement a marker and path trail to a leaflet map inside an ionic project and have been using following this angularJS with Leaflet documentation/example found here. However, when implementing I cannot get the pins to be visible. Here is my JSFiddle. I also included some of my code because it wouldn't let me submit my question without but its the same rendering issue on my JSFiddle. Any help would be great!
I'm being forced to show code if I have a JSFiddle link, so this is what I got but I don't think the solutions in my code. If some library or call issue.
my index.html
<style>
.scroll { height: 100%; }
map {
display: block;
width: 100%;
height: 100%;
background: #fff;
}
.angular-leaflet-map {
display: block;
width: 100%;
height: 100%;
background: #ffff;
}
</style>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
my pathmap.html
<ion-view view-title="Activities" >
<ion-content ng-controller="PathController" class="has-header">
<leaflet center="center" paths="paths" defaults="defaults"></leaflet>
</ion-content>
</ion-view>
controller.js
angular.module('starter.controllers', ['ionic', 'leaflet-directive', 'ngCordova'])
[......]
.controller("PathController", [ '$scope', function($scope) {
angular.extend($scope, {
center: {
lat: 25.074521,
lng: -77.348191,
zoom: 14
},
paths: {
p1: {
color: '#33CCCC',
weight: 3,
latlngs: [
{ lat: 25.074521, lng: -77.348191 },
{ lat: 25.074501, lng: -77.317485 },
{ lat: 25.081517, lng: -77.319116 },
{ lat: 25.078077, lng: -77.345831 }
],
}
},
markers: {
marker1: {
lat: 25.074521,
lng: -77.348191,
icon: {
url: 'img/nirvana.jpg',
iconSize: [80, 80],
iconAnchor: [40, 80],
popupAnchor: [0, 0],
shadowSize: [0, 0],
shadowAnchor: [0, 0]
}
},
marker2: {
lat: 25.074501,
lng: -77.317485,
icon: {
iconUrl: 'img/logo.png',
iconSize: [800, 800],
iconAnchor: [400, 600],
popupAnchor: [40, 40],
}
},
marker3: {
lat: 25.081517,
lng: -77.319116,
icon: {
iconUrl: 'img/logo.png',
iconSize: [800, 800],
iconAnchor: [400, 600],
popupAnchor: [40, 40],
}
},
marker4: {
lat: 25.078077,
lng: -77.345831,
icon: {
iconUrl: 'img/logo.png',
iconSize: [800, 800],
iconAnchor: [400, 600],
popupAnchor: [40, 40],
}
},
},
defaults: {
scrollWheelZoom: false
}
});
}]);
You have to call markers in your leaflet directive.
<leaflet center="center" paths="paths" defaults="defaults" markers="markers"></leaflet>
Hope it will help you.
Turns out I didn't have markers="markers" and needed to update my leaflet.js Hope this helps someone else out.
Without markers="markers" and old leaflet.js
With markers="markers" and updated leaflet.js