ChartHop takes managing compensation gaps and headcount needs to the next level with its intuitive analytics solution. You can start measuring data on where your headcount has been historically ...

Best HR Analytics Software 2023

NEW YORK, Oct. 6, 2023 /PRNewswire/ -- ChartHop, a dynamic People Operations Platform, was recently named one of Quartz's Best Companies for Remote Workers. The annual list of Quartz's Best ...

Quartz Names ChartHop Among the Best Companies for Remote Workers

NEW YORK, Oct. 6, 2023 /PRNewswire/ -- ChartHop, a dynamic People Operations Platform, was recently named one of Quartz's Best Companies for Remote Workers. The annual list of Quartz's Best Companies for Remote Workers was created by Quartz Magazine and ...

HR tech company honored for its people-first culture for the second consecutive year NEW YORK, Oct. 6, 2023 /PRNewswire/ -- ChartHop, a dynamic People Operations Platform, was recently named one ...

"Fostering a culture of employee engagement, recognition and belonging is crucial for all organizations – and even more so when remote-first," said , founder and CEO of ChartHop. "We focus on ...

Get the most recent info and news about ChartHop on HackerNoon, where 10k+ technologists publish stories for 4M+ monthly readers.

ChartHop is transforming the way companies manage and support their people. By consolidating people data into one employee-centric platform to visualize, discover, and act on insights, ChartHop creates more informed, empowered, and connected organizations. From executives to individual contributors to every employee in between, ChartHop is designed for everyone in the organization. ChartHop plays well with dozens of platforms through robust integrations across the HR tech stack, and serves companies like 1Password, BetterCloud, and Starburst. Founded in 2019 by Ian White, ChartHop is backed by Andreessen Horowitz. Visit ChartHop.com to learn more and follow ChartHop on Twitter and LinkedIn.

ChartHop

In the rapidly evolving digital landscape, data visualization plays a crucial role in understanding complex data sets and making informed decisions. Real-time data visualization, which updates dynamically to reflect live data feeds, is particularly powerful for monitoring systems, financial markets, social media trends, and more. This comprehensive guide explores how to leverage React, alongside Highcharts, a versatile charting library, to create real-time charts and graphs that are both engaging and informative. Understanding the Importance of Real-Time Data Visualization Real-time data visualization transforms static data presentations into vibrant, continuously updating streams of information. This dynamic approach to data visualization is critical in scenarios where the timely interpretation of data can lead to actionable insights, improved user engagement, or even competitive advantages. Examples include: Stock market traders rely on real-time charts to make quick buy or sell decisions based on the latest market movements. Financial Dashboards: Industries use real-time graphs to monitor the performance and health of Internet of Things (IoT) devices, ensuring timely maintenance and operations. IoT Device Monitoring: Brands track social media sentiment and engagement in real-time to respond to trends, manage crises, or capitalize on viral moments. Social Media Analytics: Fans and coaches use real-time data to analyze game performance, make strategic decisions, and enhance viewer engagement. Sports Analytics: Step-by-Step Guide to Implementing Real-Time Charts in React with Highcharts Creating a real-time chart involves setting up a WebSocket server for live data feeds and integrating Highcharts in a React application to visualize the data. Let's dive into a detailed implementation. Step 1: Bootstrap Your React Application Start by creating a new React application: npm create vite@latest Step 2: Install Highcharts and Its React Wrapper Highcharts is not only powerful but also easy to integrate with React through its official wrapper: npm install highcharts highcharts-react-official Step 3: Set Up a WebSocket Server For this guide, we'll simulate a WebSocket server that emits random data points, mimicking a live data feed. This server is crucial for demonstrating real-time data flow. Create a Simple WebSocket Server: In a new directory or within your project, set up a basic WebSocket server using the library. ws Server Code: Create a file, inside it lets write script that periodically sends random data to connected clients: server.js const WebSocket = require('ws');
// Create a WebSocket server that listens on port 8080. This server will accept WebSocket connections on this port.
const wss = new WebSocket.Server({ port: 8080 });

// Listen for 'connection' events on the WebSocket server. These events are emitted whenever a new client connects to the server.
wss.on('connection', ws => {
    console.log('New client connected!');

    // Use setInterval to create a loop that executes the given function every 3000 milliseconds (3 seconds).
    setInterval(() => {
        // Create an object named 'data' with two properties:
        // 'value' - a random number between 0 and 100,
        // 'timestamp' - the current date and time.
        const data = {
            value: Math.random() * 100,
            timestamp: new Date()
        };

        // Convert the 'data' object to a JSON string and send it to the connected client.
        // The 'ws.send' method is used to send data to a client through the WebSocket connection.
        ws.send(JSON.stringify(data));
    }, 3000); // Update every second
});

console.log('WebSocket server running on port 8080'); Start Your Server: Run your WebSocket server: node server.js Step 4: Integrating Highcharts in React Now, let's use Highcharts in our React application to visualize the real-time data. : Modify App.jsx Import Highcharts and the HighchartsReact component. Establish a WebSocket connection to receive live data and update the chart accordingly: import { useState, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const App = () => {
    const [data, setData] = useState([]);

    useEffect(() => {
        const ws = new WebSocket('ws://localhost:8080');

        // Connection opened
        ws.onopen = () => console.log('WebSocket Connected');

        // Listen for messages
        ws.onmessage = (event) => {
            try {
                const receivedData = JSON.parse(event.data);
                // Convert timestamp to milliseconds since the Unix epoch
                const timestamp = new Date(receivedData.timestamp).getTime();
                const value = receivedData.value;
                const newDataPoint = [timestamp, value]; // Create the Highcharts-expected format

                setData((currentData) => {
                    const newData = [...currentData, newDataPoint];
                    // Sort by timestamp, which is the first element of each data point array.
                    // Also we need to keep only last 15 data points. Otherwise chart will get messy.
                    return newData.sort((a, b) => a[0] - b[0]).slice(-15);
                });
            } catch (error) {
                console.error('Error parsing message data:', error);
            }
        };

        // Listen for possible errors
        ws.onerror = (error) => console.error('WebSocket Error:', error);

        // Clean up function
        return () => {
            if (ws.readyState === WebSocket.OPEN) {
                ws.close();
                console.log('WebSocket Disconnected');
            }
        };
    }, []);

    // Chart configuration options
    const chartOptions = {
        chart: {
            type: 'spline', // Defines the chart type as a spline (smoothed line chart)
            animation: Highcharts.svg, // Enable animation for SVG elements
            marginRight: 10, // Margin on the right side of the chart
        },
        time: {
            useUTC: false, // Use local time instead of UTC
        },
        title: {
            text: 'Live Data Stream', // Chart title
        },
        xAxis: {
            type: 'datetime', // Configure x-axis to display dates and times
            tickPixelInterval: 150, // Distance between each tick mark on the x-axis
        },
        yAxis: {
            title: {
                text: 'Value', // y-axis title
            },
        },
        legend: {
            enabled: false, // Disable chart legend
        },
        series: [{
            name: 'Live Data', // Series name
            data: data, // Chart data sourced from the state
        }],
    };

    return (
        <div
            style={{
                width: '700px',
                height: '400px',
                borderRadius: '8px',
                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                backgroundColor: 'white',
                padding: '10px'
            }}
        >
            <HighchartsReact highcharts={Highcharts} options={chartOptions} />
        </div>
    );
};

export default App; That what we get as a result: Line chart gets update every 3 seconds. Wrapping up Diving into real-time data visualization with React and Highcharts opens a world of possibilities for developers and data enthusiasts alike. To bridge the gap between theory and practice, I have made the entire project available on . This not only allows you to explore the intricacies of the code but also encourages you to experiment, adapt, and possibly enhance it according to your unique needs or curiosity. Cheers ! GitHub

Building Engaging Real-Time Data Visualizations In React With Highcharts

Astounding Stories of Super-Science July 1931: VOL. VII, No. 1 - The Doom from Planet 4

is a React.js component for displaying and editing data in a spreadsheet-like way. This guide shows you how to integrate it with the well-known pure Javascript library — . ReactGrid Chart.js Why ReactGrid? There are plenty of different data tables available on the Internet, which perform great if you want to display one object per row. Each of these objects has to have exactly the same static properties, which are mapped to columns in the table. was designed to be independent of your data model. It doesn’t care about your schema. You can render anything in any cell and thus you are able to display things the way you like it. ReactGrid Unlike other grid components, also performs great on mobile devices or those with a touch capability and provides the same experience as on a desktop. ReactGrid Before we get started let’s list three main tasks: displaying the collected data will be achieved with . To be we will re-render the view only when the source data has changed. In this example, raw data comes from an audiometer - a device that is used for making hearing tests. In a nutshell, audiometer measures multiple hearing difficulties at many frequencies, and the audiogram is a way of visualizing such disorders, ReactGrid reactive visualize the collected data on the line chart using and its React wrapper, Chart.js add a possibility to enter a new value, and re-render the whole view with an updated state. Let’s code! Initialize the project Nothing simpler — just type one of the commands below into your terminal to initiate a React app with Typescript support. ‘Create React App’ will take care of all the necessary stuff. $ $ npx create-react-app reactgrid-chartjs- audiogram --template typescript # or yarn create react-app reactgrid-chartjs- audiogram --template typescript Define useful interfaces and types First, we need to declare a few interfaces and types that help us to keep everything in the right place and order. In this particular example, we know all about the data that we want to process. A good idea is to ‘be as narrow’ as possible. ColumnMap {
  line: ; : ; : ; : ; : ; : ; : ; : ; : ; : ;
} ColumnKey = keyof ColumnMap; Freq = ColumnMap[ColumnKey]; RowsMap {
  hearing_aid: ;
  blue: ;
  aid_higher: ;
  aid_lower: ;
  dotted_line_higher: ;
  dotted_line_lower: ;
  pattern_line: ;
} RowKey = keyof RowsMap; AudiogramProps {
  color?: ;
  title?: ;
} FreqSample = {
  freq: Freq;
  value: ;
}; Data = {
  [P keyof RowsMap]: FreqSample[];
}; /**
 * ReactGrid related interfaces - columns mapping
 */ export interface "Line" "0" "0" "125" "125" "250" "250" "500" "500" "1000" "1k" "2000" "2k" "4000" "4k" "8000" "8k" "16000" "16k" /**
 * Getting all object keys of ColumnMap interface,
 * e.g. "line" | "0" | "125" | "250" | ...
 */ export type /**
 * An union of all possible columns values,
 * e.g. "0" | "125" | ... | "8k" | "16k"
 */ export type /**
 * Interface defines all of the rows that contais array of samples
 * with coresponding title
 */ export interface "Hearing aid (device)" "Blue Line" "Hearing aid higher" "Hearing aid lower" "Dotted line higher" "Dotted line lower" "Pattern line" /**
 * An union of RowsMap kinterface keys,
 * e.g. "hearing_aid" | "blue" | "aid_higher"
 */ export type /**
 * Main component props
 */ export interface string string /**
 * Single frequency sample
 *
 * @example
 * const sample = { freq: '4k', value: 14 };
 */ export type number /**
 * Object that defines all the data collecte during
 * the course of the test
 */ export type in Mark the columns and rows Relying on those interfaces now we can introduce function. getColumns In our app, we got a column, and after that, we got columns which are related to a particular frequency from 0Hz to 16000Hz. Line columnMap: ColumnMap = {
  line: , : , : , : , : , : , : , : , : , : }; getColumns = (): Column[] => [
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: },
  { columnId: , width: }
]; /**
 * Object that contains all possible columns including
 * the `line` (header of e.g. "Blue Line") and
 * all possible frequrencies as object keys and their labels
 */ export const "Line" 0 "0" 125 "125" 250 "250" 500 "500" 1000 "1k" 2000 "2k" 4000 "4k" 8000 "8k" 16000 "16k" /**
 * Function returns an array of ReactGrid compatible columns,
 * `columnId` coresponds to keyd of an object defined above
 */ export const "Line" 160 0 70 125 70 250 70 500 70 1000 70 2000 70 4000 70 8000 70 16000 70 The next stage is mapping all the rows. We make it in a similar way to previous examples. rowsMap: RowsMap = {
  hearing_aid: ,
  blue: ,
  aid_higher: ,
  aid_lower: ,
  dotted_line_higher: ,
  dotted_line_lower: ,
  pattern_line: }; /**
 * Object that contain all possible test results during
 * the course of the test
 */ export const "Hearing aid (device)" "Blue Line" "Hearing aid higher" "Hearing aid lower" "Dotted line higher" "Dotted line lower" "Pattern line" Define the data As we defined our data, it’s time to define our data that we are working on. function returns an object whose each key must exist within the interface. Each key of this object contains an array of objects. getData RowsMap Freq getData = (): { {
    hearing_aid: [
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: }
    ],
    blue: [
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: },
      { freq: columnMap[ ], value: }
    ], };
}; export const => Data return "0" NaN "125" 0 "250" 0 "500" 2 "1000" 10 "2000" 17 "4000" 26 "8000" 21 "16000" NaN "0" 10 "125" 12 "250" 17 "500" 23 "1000" 35 "2000" 43 "4000" 39 "8000" 45 "16000" 7 // ... Map the data to ReactGrid Now we are ready to generate rows that directly feed into . ReactGrid Each row contains the same amount of cells, but all of them can be arbitrarily placed in any order. compare = freqSample.freq === columnMap[freqKey]; getRows = (
  data: Data,
  columnsOrder: ColumnKey[] = [ , , , , , , , , , ],
  rowsOrder: RowKey[] = [ , , , , , , ]
): Row<NumberCell | TextCell | HeaderCell>[] => [
  ...rowsOrder.map<Row<NumberCell | TextCell | HeaderCell>> const ( ) => freqSample: FreqSample, freqKey: ColumnKey export const "line" "0" "125" "250" "500" "1000" "2000" "4000" "8000" "16000" "hearing_aid" "blue" "aid_higher" "aid_lower" "dotted_line_higher" "dotted_line_lower" "pattern_line" ( )
]; ( ) => { item = data[rowKey]; {
      rowId: rowKey,
      height: 35,
      cells: [
        { : "text", text: rowsMap[rowKey], nonEditable: },
        ...columnsOrder
          .filter( )
          .map<NumberCell>( )
      ]
    };
  } rowKey const return type true ( ) => column !== "line" column ( ) => ( ) column { : " ",
            value: item.find( ).value
          } type number ( ) => compare( ) freqSample freqSample, column The main component — Audiogram It is time to create the main component — and wrap up already written code. As you can see we stored our data inside React hook. Audiogram useState always expects two props — (they are constant and don’t change over time) and (they are calculated every time the component is rerendered). ReactGrid columns rows Audiogram Audiogram: React.FC<AudiogramProps> = ({
  title = }) => { [rawData, setRawData] = React.useState(getData()); columns = getColumns(); rows = getRows(rawData); (
    <div className= style={{ width: }}>
      <ReactGrid rows={rows} columns={columns} />
    < const "AUDIOGRAM: ReactGrid + Chart.js app" const const const return "chart" 800 /div>
  );
};

export default Audiogram; All that’s left is to render the component with: * React ; { render } ; Audiogram ; ;

render(<Audiogram color= />, .getElementById( )); import as from "react" import from "react-dom" import from "./Audiogram" import "./styles.css" "#107C41" document "root" Apply changes with the cell editor There are two things left to do: Add a header row to mark the data (devices and all the frequencies); Add possibility to edit data with cell editor; ReactGrid’s Adding the header row To add it we have to create a short function called . As an argument, it gets a column order (as keys of columns) and returns a row object that contains only a cell of the type. We also added some green background to those cells. getHeaderRow header getHeaderRow = (columnsOrder: ColumnKey[]): Row<HeaderCell> => ({
  rowId: ,
  height: ,
  cells: columnsOrder.map<HeaderCell>( ({ : ,
    text: columnMap[columnKey],
    style: {
      background: columnKey !== ? : ,
      color: ,
    },
  })),
}) export const "headerRow" 50 => columnKey type "header" "line" "#1DA259" "#107C41" "white" Editing frequency values in cell editor At this moment behaves as a read-only. To change that we updated the component by adding our handler function called . We expect that only will be changed, therefore we marked the argument as . Our task is to change data on the basis has been rendered. ReactGrid Audiogram handleChanges NumberCell changes CellChange<NumberCell>[] ReactGrid Cell editor opens when it receives double-click action or the Enter key is pressed. Then you can type a new value in and then commit the change. If we we get an array of objects as shown below: console.log(changes) [
  { : , : , : , : { : , : , : }, : { : , : , : }
  }
] "type" "number" "columnId" "250" "rowId" "aid_lower" "previousCell" "type" "number" "text" "0" "value" 0 "newCell" "type" "number" "text" "45" "value" 45 To change our raw data we have to find where the change takes place. Then loop over all frequency samples and apply a new value ( ) to an appropriate cell or just return without changes. rowId change.newCell.value Data visualization with Chart.js library delivers plenty of components to visualize data, but this time we focus on a single one — from that we can use as a React component. Chart.js Line react-chartjs-2 We have to create two functions: 1. — this function should return an object that contains two fields. The — which is an array of frequency title label and then field to provide the field which contains an array of values for each frequency. You can also style your line by setting for example a or for a better experience. getChartData labels datasets data backgroundColor pointRadius getChartData = (rawData: Data, max: = ): ({
  labels: [ , , , , , , , , ],
  datasets: [
    {
      label: ,
      data: ( ).fill(max),
      pointRadius: ,
      backgroundColor: ,
      fill: },
    {
      label: ,
      borderColor: ,
      fill: ,
      data: rawData.blue.map( value),
      pointRadius: }, ]
}); export const number 80 => ChartData "0" "125" "250" "500" "1k" "2k" "4k" "8k" "Hz" "Chart max" new Array 9 0 "#107C41" "+1" "" "#107C41" false ( ) => { value } 0 // ... 2. — here we return an object that is compatible with interface. We want to disable legend, set the title, display, and adjust axes. getChartOptions ChartOptions That’s all! The job is done, now you can check the result below. Summary What you learned after completing this guide: what is and how to do a fully functional app; ReactGrid how you can use it in a reactive way; why Typescript is also helpful in a small-scale project to avoid the most common mistakes. As you see integrating with other libraries like is not so hard. Of course, you don’t need to start a Typescript project and make all data mappings to compose a predictable solution. ReactGrid Chart.js Previously published at https://reactgrid.com/blog/how-to-integrate-reactgrid-with-chart.js/

Connecting ReactGrid And Chart.js

In my role as a consultant for , I am required to enter my time on a periodic basis. Our company currently utilizes the solution within for professional services billing. For years, I have found that it is easier to enter my time on a daily basis. This allows me to provide detailed comments on what was accomplished with each time entry. At the start of the month, I work with the service delivery manager and my clients to establish a personal goal. This goal is normally set in total hours for a given month. CleanSlate Technology Group FinancialForce Salesforce I like to make my goal and create a personal burndown chart, so I can quickly see how my billable hours compare to the hours expected. I quickly realized that Salesforce did not provide a default reporting solution that met my needs. Using Microsoft Excel, I was able to create a sheet which included a burndown chart: I began to wonder how quickly and easily I could automate this process of connecting Salesforce data using traditional cloud options, such as Heroku. After all, Heroku is a Salesforce company. Discovering the Components I knew that Salesforce would be my source of record. I also knew I wanted to build the burndown chart using Highcharts. Now, I needed to figure out how to connect the two items. The client-side was a quick decision since I maintain a pretty good understanding of . I quickly found the package, which is the official minimal Highcharts wrapper for Angular. Angular highchairs-angular npm Looking at Heroku's options, I found the option, which provides two-way Salesforce connectivity out-of-the-box, using as the data source available within a Heroku Dyno. This was exactly the solution I needed: It avoids the need to handle connectivity to Salesforce and does not require knowledge of Salesforce data concepts — two things that are not truly required for this effort. Heroku Connect Heroku Postgres With the source data from Salesforce now available in the Heroku PostgreSQL database, I could quickly build an API for the Angular client using the Spring Boot framework. As a result, the following data flow, stemming from Salesforce, would create an always up-to-date burndown chart: Starting With Salesforce To keep things simple for this example, I decided to create a new Object in Salesforce called TimeEntry (TimeEntry__c), which contains two basic fields: Date (Date__c) — required Date field to store the date of the time entry Hours (Hours__c) — required Number(2,2) field to store the hours for the given date Once configured, the TimeEntry object can be used in the Salesforce UI to populate at least one full month of data. Example data is provided below: Heroku Postgres Configuration and Data Within Heroku, a new Dyno can be created for use by this repository. Before adding the API source code using Spring Boot, I included a Heroku Postgres add-on. For the purposes of this repository, the Hobby Dev (free) edition will suffice. One additional table, called GOALS, needs to be added to the public schema: GOALS ( PRIMARY ,
GOAL_MONTH ,
GOAL_YEAR ,
GOAL_TARGET ,
BILLABLE_DAYS ); CREATE TABLE ID INT KEY NOT NULL INT NOT NULL INT NOT NULL INT NOT NULL INT NOT NULL Some sample data should be added, similar to what is listed below: GOALS( , GOAL_MONTH, GOAL_YEAR, GOAL_TARGET, BILLABLE_DAYS) ( , , , , ); GOALS( , GOAL_MONTH, GOAL_YEAR, GOAL_TARGET, BILLABLE_DAYS) ( , , , , ); GOALS( , GOAL_MONTH, GOAL_YEAR, GOAL_TARGET, BILLABLE_DAYS) ( , , , , ); INSERT INTO ID VALUES 1 10 2020 250 21 INSERT INTO ID VALUES 2 11 2020 250 19 INSERT INTO ID VALUES 3 12 2020 250 21 The GOALS table should now appear as shown below: Introducing Heroku Connect Heroku Connect is a Dyno add-on that provides connectivity between Heroku and Salesforce. For this project, the (free) Demo Edition was selected to demonstrate this add-on's power. Once added to the Dyno in Heroku, a wizard will provide the necessary connectivity between Salesforce and Heroku PostgreSQL. After connectivity has been established, the TimeEntry (TimeEntry__c) object should be selected and the following fields chosen for synchronization: date__c hours__c id For this project, a synchronization interval of 10 minutes will be fine since time entries are only added once a day. Below is an example of the Mappings screen: Creating a Spring Boot API The Spring Initializr was used to create a basic API using Maven. The base dependencies are noted below: <dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-jersey</artifactId>
</dependency>
<dependency>
   <groupId>org.springframework.boot</groupId>
   <artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
   <groupId>org.postgresql</groupId>
   <artifactId>postgresql</artifactId>
   <scope>runtime</scope>
</dependency> Two entity objects were created for this prototype, both to link to the tables in Heroku Postgres. The Goal entity included a helper method to compute the average hours required (per day) to stay on track, with the goal defined for a given month and year: (schema = , name= ) { id; (name = ) month; (name = ) year; (name = ) goal; (name = ) days; { (goal > && days > ) { ( ) goal /  ( ) days;
       } ;
   }
} @Entity @AllArgsConstructor @NoArgsConstructor @Data @Table "public" "GOALS" public class Goal @Id private int @Column "GOAL_MONTH" private int @Column "GOAL_YEAR" private int @Column "GOAL_TARGET" private int @Column "BILLABLE_DAYS" private int @Transient public float getAveragePerDay () if 0 0 return float float return 0f The Time entity object mirrored the Salesforce-based table in Heroku Postgres: (schema = , name= ) { id; (name = ) Date date; (name = ) hours;
} @Entity @AllArgsConstructor @NoArgsConstructor @Data @Table "salesforce" "timeentry__c" public class Time @Id private long @Column "date__c" private @Column "hours__c" private float Using JPA repositories and very little custom code, the following RESTful URIs were exposed through the SampleController class in Spring Boot: GET hostname/goal/{year}/{month} returns a Goal entity, which contains the following payload: { : , : , : , : } "id" 1 "month" 10 "year" 2020 "goal" 250 GET hostname/time/{year}/{month} returns a List<Time> result set, which contains the following payload: [
   { : , : , : },
   { : , : , : } ...
] "id" 1 "date" "2020-10-01T04:00:00.000+00:00" "hours" 12.5 "id" 2 "date" "2020-10-02T04:00:00.000+00:00" "hours" 10.0 GET hostname/months returns a List<Month> result set, which contains a list of valid month/year combination data: [
   { : , : , : } ...
] "month" 10 "year" 2020 "displayName" "10/2020" With everything in place, the following environment attributes are expected to run the API: ${JDBC_DATABASE_URL} - database URL to access PostgreSQL [spring.datasource.url]
${JDBC_DATABASE_USERNAME} - user name to access the PostgreSQL database [spring.datasource.username]
${JDBC_DATABASE_PASSWORD} - password the PostgresSQL database [spring.datasource.password]
${PORT} - port Spring Boot service [server.port] (optional, is ) for for default 8080 The great news here is that, when the Spring Boot API runs in a Heroku Dyno, none of these items have to be set. Instead, each one becomes automatically available. Configuring the Client in Heroku Establishing a client using the made the process of creating application components and services quite simple. Adding Highcharts to the client became a matter of a few commands: Angular CLI npm install highcharts-angular --save npm install highcharts --save The app.module.ts needed to be updated to make Highcharts available: ...
import { HighchartsChartModule } ;

@NgModule({ : [
   ...
   HighchartsChartModule from 'highcharts-angular' imports After using the Angular CLI to create a basic ChartComponent, methods inside the chart.component.ts were created to connect to the Spring Boot service, which set the necessary chartOptions JSON for use by Highcharts. Once the chart configuration data was available, the template for the ChartComponent only needed a small section of HTML to allow the burndown chart into Angular: <div *ngIf= id= = > "goal && time && chartOptions" "container" class "pt-5" < [ ]= [ ]= = > highcharts-chart Highcharts "Highcharts" options "chartOptions" style "width: 100%; height: 400px; display: block;" </ > highcharts-chart </ > div Finally, the environments package constants (environment.ts and environment.prod.ts) needed updating to include an api attribute. The local configuration for the project is noted below: environment = { : , : }; export const production false api 'http://localhost:8080' Finally, following the instructions noted in my article, I used a Node.js Express server to run the Angular client within Heroku as a static web application. Using Heroku for Static Web Content Putting It All Together After getting both the API and client repositories into GitLab and adding each respective Heroku Dyno as a git-remote, I was able to push the source code to Heroku using the following CLI command: git push Heroku Once deployed, the Angular client presented the static web content site. This includes a data pick-list of available burndown chart options pulled from data that exists in the Salesforce org. When an option is selected, the resulting client experience updates, as shown below: Conclusion In this article, two Heroku Dynos were created to yield the following architecture: All of the source code referenced in this project can be found in the following repositories on GitLab: https://gitlab.com/johnjvester/salesforce-integration-api https://gitlab.com/johnjvester/salesforce-integration-client Within a very short amount of time, an existing data source within Salesforce was used to complement an existing table in Heroku Postgres using Heroku Connect. With the database in place, a Spring Boot service was created to provide a RESTful API into this data, which could be utilized to create a burndown chart within Angular and Highcharts. The end result of this example demonstrates not only the efficiency by which the integration could be performed but also the flexibility to cater to the needs of any required business expectations. What is even more exciting is that every aspect of this example added no additional costs to my Heroku account. Having spent a large portion of my career focused on integrating different systems, the biggest benefit is the small amount of time required to reach a working product. Getting to spend my time focusing on writing business logic to enhance the application experience makes Heroku well worth it. Have a really great day! Also published on: https://mulesoft.designgrows.com/integrating-traditional-cloud-development-with-salesforce/

How to Integrate Traditional Cloud Development With Salesforce

AWS Serverless design for IoT

is the practice of converting data from raw figures into a graphical representation such as graphs, maps, charts, and complex dashboards. Let’s see what makes it important (meaning), how it has developed (history), and exactly how it can work in real life (examples). Join us on Data Visualization 101, an introduction to dataviz and its power. Data visualization Significance of Data Visualization To understand how meaningful data visualization is, here’s a simple fact: Human brains have a much harder time understanding complex data when it is encoded in numbers and text compared to graphics. Dataviz techniques take advantage of that quality, helping to present massive amounts of information in the most efficient, visual form. In fact, visually displayed data is easier to grasp and analyze, making it faster for decision makers to find patterns, including new and hidden, and to understand even difficult concepts. Charts, graphs, maps, dashboards — data visualization can be helpful in identifying issues and deficits, choosing the best product and business operation strategy, forecasting sales volume and stock prices, fine-tuning project management and resource administration, and so on and so forth. History of Data Visualization The concept of data visualization is not new. Moreover, it has been around for centuries. The earliest and most obvious examples of dataviz projects are maps. Then you have the pie chart which first showed up in the early 19th century. A few decades later, Charles Joseph Minard used statistical graphs in order to map Napoleon Bonaparte’s Russian campaign of 1812, combining multiple metrics: the number of troops, temperature, distance, directions, and more. Other notable milestones in the history of data visualization include but are not limited to works of Nicole Oresme, Joseph Priestly, and William Playfair. All of them greatly contributed to the dataviz progress. Oresme was one of the greatest thinkers of the Middle Ages, and it could be said that he in the 14th century, although it was Playfair who later gave the bar chart the form we know today. Priestley, in his chart of biography, used a timeline with bars to compare multiple persons’ life spans. Playfair is also credited with the . invented bar charts first use of area charts To learn more about the data visualization history, explore the Michael Friendly and Daniel J. Denis from York University featured in their book “Milestones in the History of Thematic Cartography, Statistical Graphics, and Data Visualization: An Illustrated Chronology of Innovations.” biggest known milestones The idea of visualizing data kept evolving over time, and with the advent of computers and rapid growth of technologies, the discipline definitely took a quantum leap forward. Nowadays, even massive amounts of data — and big data itself — can be processed by dataviz software at a very high speed, opening up new exciting opportunities in the field of data analytics and business intelligence. Data Visualization Approaches and Examples Visualization is ultimately a great way to let your data speak. Over the course of time, a variety of data visualization techniques have emerged, opening up opportunities to solve literally any dataviz task. Depending on what data you have to explore (or explain) and what analytical questions you want it to answer, you can pick one approach or another. With dozens of chart types available, each known to suit one particular purpose or another, it is extremely important to . In fact, picking a wrong form is one of the most common — and critical — . choose the right chart type visualization mistakes Let’s look at seven common examples of data visualization tasks and see what chart types are typically the best fits. Click the corresponding links to learn more and check out interactive chart examples. 1. Compare Data To , the following chart types are commonly helpful: compare data (and ) — for a straightforward comparison of quantitative values by category. Bar charts column charts (and ) — to add a look at the composition. Stacked charts 100% stacked charts — for a comparison of cyclic data. Radar charts For example, you can use bar charts to visualize products by revenue and referral sources by user traffic; stacked charts — sales figures by product and by region; radar charts — air temperature by month; etc. 2. Explore Composition and Part-to-Whole Relationships in Data To explore the , the following chart types are commonly helpful: composition and part-to-whole relationships (and ) — for a basic look at the percentage composition of a value. Pie charts donut charts — to explore the composition of hierarchical data. Pyramid charts — to look into complex hierarchical data. Treemap charts — to measure stages of processes and discover bottlenecks. Funnel charts For example, you can use pie or donut charts to visualize a breakdown of the overall sales by retail channel or one of the total website traffic by user age; pyramid charts — OSI model or employee salary by management level; treemap charts — web traffic by source category (and by flow amount) or export directions by country of destination; funnel charts — sales funnels; etc. 3. Track Data Over Time To , the following chart types are commonly helpful: track data over time (and ) — for a basic view revealing trends, peaks, and so on. Line charts spline charts — as another option, e.g. for cumulative data. Area charts — for big data sets such as financial and stock market data. Stock charts (and ) — to add a look at the distribution of values within each period of time. Candlestick charts OHLC charts — for a quick representation of the big picture, with no axes. Sparkline charts For example, you can use line, spline or area charts to visualize sales or web traffic over time; stock charts — stock price change (also along with technical indicators); OHLC and candlestick charts — stock price with a look into value fluctuation ranges within each of the numerous time periods; sparkline charts — overview of the sales performance within the last 12 months or football season win/loss results; etc. 4. Analyze Data Distribution To , the following chart types are commonly helpful: analyze data distribution and relationship between data sets — to examine trends in distribution and correlation between two variables. Dot (scatter) charts — to consider three dimensions of data. Bubble charts — for a look at main distribution ranges and median values. Box-and-whisker charts — to inspect error distribution. Error charts — for a colored matrix-based view of multiple subcategories. Heat map charts — to mind range between the maximum and minimum values. Range charts — for multivariate data with a spatial perspective. Polar charts For example, you can use dot/scatter charts to visualize system interruptions by waiting time and by duration, or results of an experiment; bubble charts — training data by sportsman, power, and pulse; box-and-whisker charts — destinations by flight delay duration; error charts — variability of product sales; heat map charts — risk matrix; range charts — air temperature or processor downtime; polar charts — radio signal distribution; etc. 5. Evaluate Current Performance Data To — and basically, to visualize single-value data as indicators — the following chart types are commonly helpful: evaluate performance and compare the actual value against KPI values or qualitative ranges — for a radial scale. Circular gauges — for a linear scale. Linear gauges — for a more space-efficient visualization on a linear scale. Bullet charts For example, you can use circular gauges to visualize speed (like a speedometer) or wind direction (employing a compass-based look); linear gauges — air temperature (thermometer) or tank volume; bullet charts — current vs. planned sales or system availability figures; etc. 6. Examine Project Data To , the following chart types are commonly helpful: examine project data — to keep an eye on activities on a project schedule. Gantt chart — to review resource occupancy. Resource chart For example, you can use Gantt charts to visualize project activities on a schedule or planned vs. actual progress; resource charts — server status; etc. 7. Make Sense of Geographical Data To , the following geovisualization chart types are commonly helpful: make sense of geographical data — to identify differences across geographical areas. Choropleth maps — to understand geographical distribution trends. Dot maps — to add a size variable into a visual. Bubble maps — for a look at geographical connections. Connector maps — to explore how objects move between locations when direction is important. Flow maps For example, you can use choropleth maps to visualize systems of government across the globe; dot maps — points of sale or airplane crash locations; bubble maps — sales offices by revenue or earthquakes by magnitude; connector map — airline routes or supply chains; flow maps — export directions or military tactics; etc. Head to Chartopedia to learn about 60+ chart types, including how to use them right, data visualization examples, and more. Check the DataViz Weekly blog for even more examples of cool charts and infographics-based stories and projects, from all over the web. Read books to delve further into data visualization and charting, under the guidance of famous experts. Conclusion We’ve provided a definition of data visualization, explained what makes this discipline important, mentioned some milestones from its history of evolution, and outlined examples of how data visualization works in practice. By combining data visualization best practices with modern digital technology, many companies that have to deal with massive amounts of information can quickly analyze it and get data-driven insights in order to streamline various aspects of their operation. All industries, and all companies regardless of size and scope of work can benefit from dataviz and business intelligence it brings to life. Originally published on the blog of JavaScript charting library AnyChart at www.anychart.com on November 20, 2018.

What Is Data Visualization? Definition, History, and Examples

How to add asynchronous, real-time data stream from a cross-platform .NET back-end to your React web app with much less effort. If you ever have to deal with asynchronous data streams, you probably have used or at least heard of , a library for reactive which offers powerful APIs to transform data streams into observable sequences that can be subscribed to and acted upon. But what sets it apart from the regular event-driven approach is the capability to compose new data streams out of multiple of other observable sequences, which you can combine, filter, or transform with great flexibility. ReactiveX programming I will demonstrate how you can leverage this and my own library to make an asynchronous real-time web application fairly trivial to implement. Here is the output of what we will be building: dotNetify-React It is a live chart on a web browser, fed by an asynchronous data stream that is itself composed of two different data streams; one for the sine wave signal and the other its amplitude. The following steps use the boilerplate from Facebook to generate the web app, and to run the back-end. You will need to install them first. create-react-app .NET Core SDK If you just want to pull the source code, go to Github . There is also a version that runs on Visual Studio 2017 at . dotnetify-react-demo dotnetify-react-demo-vs2017 Front-End We will start by creating the app shell and installing the required libraries: create-react-app livechartcd livechartnpm install dotnetify --savenpm install chart.js@1.1.1 --savenpm install react-chartjs@0.8.0 --savenpm install concurrently --save-dev (I keep to an older version of the chart library because the APIs have changed since and I‘m not familiar with them yet.) Add the component that will render the chart: /src/LiveChart.jsx import React from 'react';import dotnetify from 'dotnetify';import { Bar } from 'react-chartjs'; export default class LiveChart extends React.Component {constructor(props) {super(props);dotnetify.react.connect("LiveChart", this);this.state = {}; this.chartData = {  
     labels: Array(10).fill(""),  
     datasets: \[{  
        data: Array(10),  
        fillColor: 'rgba(75, 192, 192, 0.2)',  
        strokeColor: 'rgba(75, 192, 192, 1)'  
     }\]  
  };  
  this.chartOptions = {   
     responsive: true,   
     scaleOverride: true,   
     scaleSteps: 5,   
     scaleStepWidth: 10   
  };  
  this.updateChart = value => {  
        this.chartData.datasets\[0\].data.shift();  
        this.chartData.datasets\[0\].data.push(value);  
  }; }render() {return (<Bar data={this.chartData} options={this.chartOptions}>{this.updateChart(this.state.NextValue)}</Bar>);}} This component will initially render a bar chart component from with an empty data set. As soon as the connection to the back-end through occurs, the component will be receiving real-time update to , which in turn causes the chart to re-render with the new data set value. react-chartjs dotNetify this.state.NextValue Next, replace the default to render our component: /src/App.js import React, { Component } from 'react';import LiveChart from './LiveChart'; export default class App extends Component {render() {return <LiveChart />}} Back-End With the front-end in place, we now add the .NET Core back-end piece. Start by creating a default ASP.NET Core web project and installing the required packages: dotnet new webdotnet add package DotNetify.SignalR --version 2.1.0-predotnet add package System.Reactivedotnet restore Open and add the following line to redirect requests that are unhandled by the Node dev server to the .NET Core server: package.json "proxy": "http://localhost:5000/", Still in , modify the line that calls the to use the library to start both Node and .NET Core server: package.json react-scripts concurrently "start": "concurrently \"react-scripts start\" \"dotnet run\" --kill-others", Next, add the class that will provide the real-time update to the front-end component: LiveChart.cs using System;using System.Reactive.Linq; namespace livechart{public class LiveChart : DotNetify.BaseVM{private IDisposable _subscription;public int NextValue { get; set; } public LiveChart()  
  {  
     var sine = Observable  
        .Interval(TimeSpan.FromMilliseconds(100))  
        .Select(t => Math.Sin(2 \* Math.PI \* .06 \* t));

     var amp = Observable  
        .Interval(TimeSpan.FromMilliseconds(100))  
        .Select(a => a % 50 + 1);

    \_subscription = Observable  
        .Zip(sine, amp, (s, a) => (int) Math.Abs( s \* a))  
        .Subscribe(value =>  
        {  
           NextValue = value;  
           Changed(nameof(NextValue));  
           PushUpdates();  
        });  
  }

  public override void Dispose() => \_subscription.Dispose(); }} The idea behind this class is to produce a data stream that’s composed of two other streams: one for the sine wave signal, the other an iteration of numbers to make a fluctuating amplitude. To create the streams, we use the to emit a sequence of integers in a time interval, which is then further projected into the desired sequence. The two streams are then combined with into a single stream, which is subscribed to by our class instance. Rx API Observable.Interval Observable.Zip When new data becomes available, we use the API and to send the data to the front-end component to update its local state. The actual communication is done through , which will use when available. But we don’t have to worry about it, since it’s already abstracted away. dotNetify Changed PushUpdates SignalR WebSocket Next, configure and in the dotNetify SignalR Startup.cs: using Microsoft.AspNetCore.Builder;using Microsoft.AspNetCore.Hosting;using Microsoft.AspNetCore.Http;using Microsoft.Extensions.DependencyInjection;using DotNetify; namespace livechart{public class Startup{public void ConfigureServices(IServiceCollection services){services.AddMemoryCache();services.AddSignalR();services.AddDotNetify();}public void Configure(IApplicationBuilder app){app.UseWebSockets();app.UseSignalR();app.UseDotNetify();app.Run(async (context) =>{await context.Response.WriteAsync("LiveChart server");});}}} Finally, build and run the application: dotnet buildnpm start Summary And, that’s it. An asynchronous real-time web app that you can quickly build in minutes. Although somewhat a contrived example, I hope it still serves to illustrate how powerful this technique can be. In a real-world scenario, the web client could be waiting for multiple back-end microservices whose asynchronous outputs need to be chained together to produce the final result. The usage of and combo will significantly reduce the code complexity and save you time and effort. ReactiveX dotNetify

Real-Time React Chart with Rx.Net in Minutes

How are you, hacker?
🪐 has got you covered with fresh content from our trending stories of the day! Set email preference . Want to know what's trending right now?: The Techbeat by HackerNoon here Enhancing DevOps Efficiency With ChatOps By [ 6 Min read ]
In this article, we will explore how ChatOps tools can be harnessed to supercharge your DevOps practices @vladislavbilay Read More. A Game-Changing Leap in Voice AI Technology By [ 2 Min read ]
Coqui, in partnership with Hugging Face, has unveiled the groundbreaking XTTS model, reshaping the landscape of voice AI. @cigdemoztabak Read More. A Brief Introduction of ActivityPub: The Future of Social Networks By [ 10 Min read ]
ActivityPub is an open, distributed social network protocol standardized by the World Wide Web @thebojda Read More. How Well Can ChatGPT Help UI/UX Professionals Design an App? By [ 6 Min read ]
Will AI replace product designers? How can UI/UX and product designers use ChatGPT to create design concepts and bring their workflow to the next level? @andriiliubymov Read More. Unlocking Azure: How to Build a Highly Flexible SQL Database Infrastructure By [ 7 Min read ]
SDG tips on making SQL database infrastructure in Azure as flexible, efficient, and reliable as possible. @socialdiscoverygroup Read More. Playwright API Testing: a Comprehensive Guide for Beginners By [ 7 Min read ]
Discover Playwright API Testing with this beginner-friendly guide. Get hands-on examples and step-by-step insights to begin your API testing journey. @dilpreetj Read More. The Most Detailed Guide On MLOps: Part 1 By [ 2 Min read ]
This MLOps guide discusses what is MLOps, MLOps definition, MLOps maturity levels, MLOps conceptual framework, MLOps core processes, automated ML workflow, etc. @winner2023 Read More. Code That Cleans Itself: A Journey into Automated Refactoring By [ 9 Min read ]
Join Ayse and her son Mert in a tale that weaves lessons from a teenager's messy room into innovative code refactoring techniques. @offcode Read More. Everything You Need for Your Journey Into the World of Generative AI By [ 33 Min read ]
Explore the groundbreaking world of Generative AI, where machine learning meets human creativity. @amitpuri Read More. How GPT Pilot Codes 95% of Your App [Part 2] By [ 11 Min read ]
GPT Pilot is a dev tool that increases developer’s productivity 20x by offloading 95% coding tasks from developer to LLM. @zvone187 Read More. Google’s New AI Model, NotebookLM, will Rewrite the Academic Playbook Forever By [ 7 Min read ]
An analysis of how NotebookLM might transform both the AI and academic worlds, as Language Models move towards more specified functions. @ultimategai Read More. Proglogging: The Developer's Detective Toolkit By [ 10 Min read ]
For Marco, the mornings typically began with a steaming cup of coffee and a scroll through the latest tech and literary news. @offcode Read More. How to Dockerize And Deploy Django Applications By [ 15 Min read ]
In this tutorial, you learned how to dockerize and deploy Django applications using Docker, Django, and Heroku. @abrahamdahunsi Read More. Deciphering Digital Trails: Ashton Forbes on the new MH370 Internet Investigation By [ 9 Min read ]
Exclusive interview with Ashton Forbes on MH370 mystery. Dive into the digital quest of MH370x and discover new insights into the enduring aviation enigma @mrfireside Read More. Simplifying Blockchain: How Abstraction is Revolutionizing the Web3 Wallet Experience on Flow By [ 6 Min read ]
Finally, the concept of abstraction is finding a place in web3 and should help make blockchain development less confusing and intimidating. @johnjvester Read More. 3 Key Rules for Building Deep Tech By [ 7 Min read ]
I will share my advice for the founders to simplify yet preserve the quality of connection between these different parts of a company. @romanaxelrod Read More. Vector Databases - Basics of Vector Search and Langchain Package in Python By [ 7 Min read ]
In this article, I will walk you through the basics of vector databases, vector search and Langchain package in python for storing and querying similar vectors. @shyamganesh Read More. The 2020s AI Boom is Driven by Transparency of Documentation By [ 4 Min read ]
When one tech giant is behind, they simply open source the next model to catch up. Then any independent project can make small tweaks on that level up. @David Read More. Mastering React Forms: Building Dynamic and User-Friendly Interfaces By [ 5 Min read ]
Learn how to create dynamic and user-friendly forms in React with my comprehensive guide. @chintanonweb Read More. PromptCompressor: Enjoy 25% Savings on GPT API Without Losing Quality! By [ 3 Min read ]
Introducing PromptCompressor, a web service that offers a cost-effective way to use language models like ChatGPT. 🧑‍💻 What happened in your world this week?It's been said that , , . Feeling stuck? We got you covered ⬇️⬇️⬇️ We hope you enjoy this worth of free reading material. Feel free to forward this email to a nerdy friend who'll love you for it.See you on Planet Internet! With love,
The Hacker Noon Team ✌️ @juliojung Read More. writing can help consolidate technical knowledge establish credibility and contribute to emerging community standards ANSWER THESE GREATEST INTERVIEW QUESTIONS OF ALL TIME

CHARTHOP

charthop.com

51-200 employees

Since 2018

COMPANY RANKING

CHARTHOP

EVERGREEN INDEX #1891

Representing this company? Click here to claim and customize this page!

ChartHop WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

CHARTHOP

charthop.com

51-200 employees

Since 2018

COMPANY RANKING

CHARTHOP

EVERGREEN INDEX #1891

RELATED COMPANIESRANK

STORIES ABOUT CHARTHOP

Representing this company? Click here to claim and customize this page!

ChartHop WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!