codesinghanoop / react-native-d3multiline-chart Goto Github PK

View Code? Open in Web Editor NEW

43.0 4.0 16.0 1.9 MB

Animated Android and iOS multiline/line/scatterPoint chart based on d3.js 🤘😎🤘

License: Apache License 2.0

JavaScript 86.49% Python 3.10% Java 2.48% Objective-C 7.93%

android ios d3js d3v4 charts react-native-svg multiline line scatterpoint multiline-graph

react-native-d3multiline-chart's People

Contributors

Stargazers

Watchers

Forkers

miguelramosfdz huokedu zuoyoulian santoshzp umair-gujjar royalone94 nayfusaurus tuofeng-inc ankursharmakellton lakshbhutani xiaochenjie caitlin-fotheringham rananjaya nick-melia maneeshakurathi mauhammadadnan

react-native-d3multiline-chart's Issues

App getting crash on IOS

I getting this crash on ios ,
I am using minimal code from you example app.js
this is my package.json

"dependencies": {
    "@babel/runtime": "^7.1.2",
    "lodash": "^4.17.11",
    "moment": "^2.22.2",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-d3multiline-chart": "1.0.18",
    "react-native-linear-gradient": "^2.4.2",
    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-multiple-picker": "0.0.21",
    "react-native-splash-screen": "^3.1.1",
    "react-native-svg": "^8.0.3",
    "react-native-svg-animations": "0.1.5",
    "react-native-table-component": "^1.1.8",
    "react-navigation": "^2.17.0",
    "svg-path-properties": "0.4.1"
  },

IOS xcode log

2018-11-01 16:29:51.146 [error][tid:main][RCTComponentData.m:253] No +[RCTConvert RNSVGTextAnchor:] function found.
2018-11-01 16:29:51.145947+0530 DBReport[24020:283224] No +[RCTConvert RNSVGTextAnchor:] function found.
2018-11-01 16:29:51.150 [error][tid:main][RCTComponentData.m:253] No +[RCTConvert RNSVGTextAnchor:] function found.
2018-11-01 16:29:51.150495+0530 DBReport[24020:283224] No +[RCTConvert RNSVGTextAnchor:] function found.
2018-11-01 16:29:51.205678+0530 DBReport[24020:283224] -[__NSCFNumber stringByTrimmingCharactersInSet:]: unrecognized selector sent to instance 0xb0000000000000a3
2018-11-01 16:29:51.209316+0530 DBReport[24020:283224] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSCFNumber stringByTrimmingCharactersInSet:]: unrecognized selector sent to instance 0xb0000000000000a3'
*** First throw call stack:
(
0 CoreFoundation 0x0000000106d761e6 __exceptionPreprocess + 294
1 libobjc.A.dylib 0x0000000105662031 objc_exception_throw + 48
2 CoreFoundation 0x0000000106df7784 -[NSObject(NSObject) doesNotRecognizeSelector:] + 132
3 CoreFoundation 0x0000000106cf8898 forwarding + 1432
4 CoreFoundation 0x0000000106cf8278 _CF_forwarding_prep_0 + 120
5 DBReport 0x0000000104857ec3 +[RNSVGPropHelper fromRelativeWithNSString:relative:fontSize:] + 163
6 DBReport 0x0000000104860500 +[RNSVGFontData initWithNSDictionary:parent:] + 272
7 DBReport 0x000000010484334a -[RNSVGGlyphContext pushNode:andFont:] + 218
8 DBReport 0x00000001048435dd -[RNSVGGlyphContext pushContext:font:x:y:deltaX:deltaY:rotate:] + 285
9 DBReport 0x0000000104835dc8 -[RNSVGText pushGlyphContext] + 344
10 DBReport 0x0000000104835577 -[RNSVGText getGroupPath:] + 39
11 DBReport 0x000000010483542d -[RNSVGText renderLayerTo:rect:] + 125
12 DBReport 0x0000000104837b31 -[RNSVGRenderable renderTo:rect:] + 2593
13 DBReport 0x000000010483a70d __33-[RNSVGGroup renderGroupTo:rect:]_block_invoke + 557
14 DBReport 0x0000000104840868 -[RNSVGNode traverseSubviews:] + 360
15 DBReport 0x000000010483a2ac -[RNSVGGroup renderGroupTo:rect:] + 348
16 DBReport 0x000000010483a14a -[RNSVGGroup renderLayerTo:rect:] + 154
17 DBReport 0x0000000104837b31 -[RNSVGRenderable renderTo:rect:] + 2593
18 DBReport 0x000000010483a70d __33-[RNSVGGroup renderGroupTo:rect:]block_invoke + 557
19 DBReport 0x0000000104840868 -[RNSVGNode traverseSubviews:] + 360
20 DBReport 0x000000010483a2ac -[RNSVGGroup renderGroupTo:rect:] + 348
21 DBReport 0x000000010483a14a -[RNSVGGroup renderLayerTo:rect:] + 154
22 DBReport 0x0000000104837b31 -[RNSVGRenderable renderTo:rect:] + 2593
23 DBReport 0x000000010485e326 -[RNSVGSvgView drawToContext:withRect:] + 1654
24 DBReport 0x000000010485e8b8 -[RNSVGSvgView drawRect:] + 1048
25 UIKit 0x000000010983ad90 -[UIView(CALayerDelegate) drawLayer:inContext:] + 600
26 QuartzCore 0x000000010933207e -[CALayer drawInContext:] + 305
27 QuartzCore 0x00000001092407c8 CABackingStoreUpdate + 254
28 QuartzCore 0x00000001093382a0 ___ZN2CA5Layer8display_Ev_block_invoke + 44
29 QuartzCore 0x0000000109331b94 -[CALayer _display] + 2019
30 QuartzCore 0x00000001092bd21e _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 634
31 QuartzCore 0x00000001092ea79c _ZN2CA11Transaction6commitEv + 568
32 UIKit 0x0000000109794f2c _afterCACommitHandler + 272
33 CoreFoundation 0x0000000106d18607 CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION + 23
34 CoreFoundation 0x0000000106d1855e __CFRunLoopDoObservers + 430
35 CoreFoundation 0x0000000106cfcb81 __CFRunLoopRun + 1537
36 CoreFoundation 0x0000000106cfc30b CFRunLoopRunSpecific + 635
37 GraphicsServices 0x000000010e850a73 GSEventRunModal + 62
38 UIKit 0x000000010976c057 UIApplicationMain + 159
39 DBReport 0x0000000104546a8f main + 111
40 libdyld.dylib 0x000000010c3a6955 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException

TypeError:method.bind is not a function

import React from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import { MultiLineChart } from "react-native-d3multiline-chart";

export default class NewPage extends React.Component {
  data = [
    [
      { y: "202", x: 2000 },
      { y: "215", x: 2001 },
      { y: "179", x: 2002 },
      { y: "199", x: 2003 },
      { y: "134", x: 2003 },
      { y: "176", x: 2010 }
    ],
    [
      { y: "152", x: 2000 },
      { y: "189", x: 2002 },
      { y: "179", x: 2004 },
      { y: "199", x: 2006 },
      { y: "134", x: 2008 },
      { y: "176", x: 2010 }
    ]
  ];

  leftAxisData = [134, 144, 154, 164, 174, 184, 194, 204, 215];
  bottomAxisData = [2000, 2002, 2004, 2006, 2008, 2010];
  legendColor = ["#00b7d4", "red"];
  legendText = ["sales", "year"];

  minX = 2000;
  maxX = 2010;
  minY = 134;
  maxY = 215;

  Color = ["#00b7d4", "red"];

  render() {
    return (
      <View style={styles.container}>
        <MultiLineChart
          data={this.data}
          leftAxisData={this.leftAxisData}
          bottomAxisData={this.bottomAxisData}
          legendColor={this.legendColor}
          legendText={this.legendText}
          minX={this.minX}
          maxX={this.maxX}
          minY={this.minY}
          maxY={this.maxY}
          scatterPlotEnable={false}
          dataPointsVisible={true}
          Color={this.Color}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  }
});

TypeError:method.bind is not a function

after update to RN 0.60 , the package from react-native-svg needs to be updated to latest version , can you update it in package.json? , or there is any fix available?

It doesn't work well on iPhone 5

I've developed an analytic app and I need chart. MultiLineChart works well on iPhone 6. But it doesn't work well on iPhone 5. How can I make it responsive to various device?

Unable to resolve module `color` from `node_modules/react-native-d3multiline-chart/utils/AnimatedSVGBrush/index.js`: color could not be found within the project.

Unable to resolve module color from node_modules/react-native-d3multiline-chart/utils/AnimatedSVGBrush/index.js: color could not be found within the project.

Data is not reflecting

I am trying to bind the data but the data is not reflecting at all. Can anyone help me to bind the data?

Module `react-native-svg` does not exist

Hi, Getting below error,

LineChartView.js: Module react-native-svg` does not exist in the Haste module map

This might be related to facebook/react-native#4968
To resolve try the following:

Clear watchman watches: watchman watch-del-all.
Delete the node_modules folder: rm -rf node_modules && npm install.
Reset Metro Bundler cache: rm -rf /tmp/metro-bundler-cache-* or npm start -- --reset-cache.
Remove haste cache: rm -rf /tmp/haste-map-react-native-packager-*.
at ModuleResolver.resolveDependency

Unable to resolve module `svg-path-properties`

I got this error while running this package.

Unable to resolve module svg-path-properties from Desktop/mygraph/node_modules/react-native-d3multiline-chart/multipleLineChart.js: Module does not exist in the module map

Tried to register two views with the same name RNSVGPath

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
    "react-native-d3multiline-chart": "^1.0.18",
    "react-native-svg": "^5.4.1",
    "svg-path-properties": "^0.4.8"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

How To Convert Graph into an BASE64 Image?

Hi,

I am able to achieve the requirements of integrating graph in my react native app. It works great. Thanks for this plugin.

Now my requirement is that I want to convert graph into an image so that I can attach that graph into pdf file. can you please help me out and do let me know how can I achieve this?

Thanks

Lovedeep

Requires install of svg-path-properties which is not included in Readme, by default?

Thanks for creating this library! I installed it as per Read me, however, it would still ask me install missing dependency of svg-path-properties and after adding svg-path-properties 1.0.2 version library getting another issue 'e not found in t' 't is not an object'.
was trying to run below code which is from one your samples.

Any small help would be a great favor!!

`import React, {Component} from 'react';
import {StyleSheet, View, TouchableOpacity, Dimensions} from 'react-native';
import * as d3 from 'd3';
import * as scale from 'd3-scale';
import _ from 'lodash';
import {MultiLineChart} from 'react-native-d3multiline-chart';

const deviceWidth = Dimensions.get ('window').width;
const deviceHeight = Dimensions.get ('window').height;

var data = [
[
{
y: '202',
x: 2000,
},
{
y: '215',
x: 2001,
},
{
y: '179',
x: 2002,
},
{
y: '199',
x: 2003,
},
{
y: '134',
x: 2003,
},
{
y: '176',
x: 2010,
},
],
[
{
y: '152',
x: 2000,
},
{
y: '189',
x: 2002,
},
{
y: '179',
x: 2004,
},
{
y: '199',
x: 2006,
},
{
y: '134',
x: 2008,
},
{
y: '176',
x: 2010,
},
],
[
{
y: '200',
x: 2000,
},
{
y: '200',
x: 2001,
},
{
y: '200',
x: 2002,
},
{
y: '200',
x: 2003,
},
{
y: '134',
x: 2003,
},
{
y: '176',
x: 2010,
},
],
];

let leftAxisData = [134, 144, 154, 164, 174, 184, 194, 204, 215];
let bottomAxisData = [2000, 2002, 2004, 2006, 2008, 2010];
let legendColor = ['#00b7d4', 'red', 'black'];
let legendText = ['sales', 'year', 'profit'];
let minX = 2000, maxX = 2010;
let minY = 134, maxY = 215;

//since there are only two lines
var Color = ['#00b7d4', 'red', 'black'];
//general data to represent ticks in y-axis and it doesn't take part in calculation
let bottomAxisDataToShow = [
'Jan 2017',
'Feb 2017',
'Mar 2017',
'Apr 2017',
'May 2017',
'Jun 2017',
'Jul 2017',
'Aug 2017',
];
//general data to represent ticks in y-axis and it doesn't take part in calculation
let leftAxisDataToShow = [
'10%',
'20%',
'30%',
'40%',
'50%',
'60%',
'70%',
'80%',
'90%',
];
export default class MultiChart extends Component {
constructor (props) {
super (props);
this.state = {
data: data,
};
}
render () {
const {data} = this.state;
return (

  <View style={styles.container}>
    <MultiLineChart
      data={data}
      leftAxisData={leftAxisData}
      bottomAxisData={bottomAxisData}
      legendColor={legendColor}
      legendText={legendText}
      minX={minX}
      maxX={maxX}
      minY={minY}
      maxY={maxY}
      scatterPlotEnable={false}
      dataPointsVisible={true}
      Color={Color}
      bottomAxisDataToShow={bottomAxisDataToShow}
      circleLegendType={true}
      fillArea={true}
      yAxisGrid={false}
      xAxisGrid={false}
      hideXAxis={false}
      hideYAxis={false}
      inclindTick={false}
      pointDataToShowOnGraph=""
      animation={true}
      duration={1500}
      delay={1000}
      GraphHeight={300}
      GraphWidth={deviceWidth}
      chartWidth={deviceWidth - 20}
      chartHeight={250}
      staggerLength={220}
      speed={50}
    />
  </View>
);

}
}

const styles = StyleSheet.create ({
container: {
flex: 1,
justifyContent: 'center',
},
});`

Attaching below screenshot, one before adding svg-path-properties.

Modify pointDataToShowOnGraph

Is it possible to only show the data in the last graph point, and to change the font of the text of this datapoint?

Update the properties' purpose

How to hide pointDataToShowOnGraph values and show y axis values dynamically

Hi,

I dont' want to display values aside graph points. If I set pointDataToShowOnGraph prop value to empty, It will pick X axis data. I want it to be empty.

Secondly I want y axis data to be shown dynamically on the basis of array I am passing into data prop. Right now if I am not passing leftAxisData, it will pick default data from dummy-data file.

Please help

Thanks

Can I draw a chart like this??

How to show values on graph

Hi,
I want to show the values on each points(like this), How can i achieve this, Currently my graph is like below. Need to show the value of each correlation points.