9 ratings
  • 1
  • 2
  • 3
  • 4
  • 5
5 star 7
4 star 2
3 star 0
2 star 0
1 star 0
Compatible with
  • iOS
  • Android

Crosslight Charting 4.0

Intersoft Solutions Corp.

An enterprise mobile charting component for Crosslight.

About this Component

Crosslight Charting

As a part of the Crosslight 4 release, Crosslight Charting is a service extension of the Crosslight component which provides mobile enterprise charting capabilities to Crosslight applications. This component supports Crosslight.iOS and Crosslight.Android applications.

Data is the heart of enterprise apps. As more and more data gets collected every second, enterprise mobile users often need to process the data into meaningful information on the go. Crosslight Charting provides the tools you need to create gorgeous, engaging data visualization on mobile platforms. With over more than 20 chart types, Crosslight Charting takes mobile charting to a whole new level.

Crosslight 4 now features a long awaited charting suite that will take mobile data visualization to the next level. Crosslight Charting allows you to visualize data on mobile devices like never before. With the solid MVVM pattern in mind, you can easily provide data to Crosslight Charting using data binding. Crosslight Charting is designed completely from the ground-up, with everything you would expect from a powerful charting suite: fast, vibrant, powerful, and customizable.

Some of the key features include:

  • Lightning-fast performance. Pixel-perfect rendering.
  • Choose from over 20 chart types.
  • Smooth animation with elegant styles.
  • Interactive axis zooming and panning.
  • Smart axis and label positioning.
  • Fully customizable appearance and settings.
  • Built-in enterprise chart features.
  • Meticulously-designed experiences.

How to use this Component

Please follow the steps as outlined in Intersoft Developer Center: Visualizing Data with Charts. If you're new to Crosslight, read on.

Introduction to Crosslight

This Crosslight component is a fully-featured commercial component with 30 days Crosslight Project Wizard trial. If you're new to Crosslight, check out the Crosslight Starter Guide.

What's New

We're very excited to announce that Crosslight 4 is now available to the public. In this release, we're bringing tons of upgrades to enable easier cross-platform enterprise mobile development, such as comprehensive charting suite, Azure Application Insights-integrated logging framework, gorgeous dialog presenter, fail-proof sync framework, new barcode scanner serviec, and lots more. Check out the full list below.

Crosslight 4 At a Glance

Even Smarter and More Powerful Crosslight Sync Framework

Supercharged Data Access Component

Business Oriented, Gorgeous Data Visualization

Innovative, Highly Versatile Dialog PResenter

Comprehensive Barcode Scanner Service

Improved Form Builder

What's New in Crosslight for iOS

What's New in Crosslight for Android

Improved IDE and Tooling Support

Improved Crosslight Project Wizard

Support Latest Xamarin Releases

New Crosslight Samples

Others

Intersoft Developer Center

Introducing Intersoft Developer Center, a one-stop portal for all your development needs. Featuring comprehensive and detailed documentation, plethora of samples and video tutorials, the Developer Center aims to answer all your questions about Crosslight.

Overview

Leveraging extensible architecture, MVVM design pattern and integration with Xamarin Platforms, Crosslight lets you easily build powerful iOS, Android and Windows native apps with a common application codebase including domain model, data access, and user interaction logic. And that's nearly 96% of your project's codebase. Built with cutting-edge portable framework and MVVM pattern, Crosslight lets you build cross-platform mobile apps by leveraging the programming skills and tools you loved – such as C#, MVVM, .NET and Visual Studio. Key features include:

  • Comprehensive and advanced mobile frameworks leveraging MVVM design pattern
  • Build native iOS, Android, Windows Phone 8 and Windows 8 apps with a single application codebase
  • Elegant, developer-friendly API based on platform standards
  • Universal data management with automatic binding
  • Streamlined navigation services supporting push, modal and nested navigation mode
  • Rich form builder with 20+ pre-built editors
  • Highly customizable editor controls ranging from auto resize textbox to image picker with camera support and more
  • Comprehensive mobile services for business apps
  • Native user experiences conforming to platform design guidelines
  • Support Visual Studio 2012 and Xamarin Studio
  • Integrated to Xamarin platforms with full AOT compliance
  • Time-saving Project Wizard featuring 30+ templates variants supporting iOS, Android, Windows Phone 8 and Windows 8

Important!

If you have purchased a the Crosslight component from the Xamarin Component Store, send us an email of your purchase details to sales@intersoftpt.com for further assistance.

Sample Code

Creating a data form editor in all platforms. When users tapped on the Save button, it will perform data saving, show a toast presenter and navigates back to the previous screen.

Shared Application Project

Powered by Crosslight Foundation, the shared application project contains shareable code that can be easily consumed on each platform. Shareable code includes various user interaction logic, reusable ViewModel classes, domain models, data access layers, and more.

Form Metadata:

The Form Metadata is a part of the form builder feature introduced in Crosslight; just by defining the metadata, you can easily create beautiful-looking forms complete with custom data validation and rich editing features.

    using Intersoft.Crosslight;
    using Intersoft.Crosslight.Forms;
    using MyInventory.ViewModels;
    using System;

    namespace MyInventory.Models
    {
        [FormMetadataType(typeof(Item.FormMetadata))]
        partial class Item
        {
            [Form(Title = "{FormState} Item")]
            public class FormMetadata
            {
                [Section(Style = SectionLayoutStyle.ImageWithFields)]
                public static GeneralSection General;

                [Section("Item Details")]
                public static ItemDetailSection ItemDetail;

                [Section("Item Status")]
                [VisibilityBinding(Path = "IsNewItem", SourceType = BindingSourceType.ViewModel, ConverterType=typeof(BooleanNegateConverter))]
                public static SoldSection Sold;

                [Section]
                public static NotesSection Notes;
            }

            public class GeneralSection
            {
                [Editor(EditorType.Image)]
                [Image(Height = 83, Width = 80, Placeholder = "item_placeholder.png", Frame = "frame.png", FramePadding = 6, FrameShadowHeight = 3)]
                [ImagePicker(ImageResultMode = ImageResultMode.Both, ActivateCommand = "ActivateImagePickerCommand", PickerResultCommand = "FinishImagePickerCommand")]
                public static byte[] ThumbnailImage;

                [StringInput(Placeholder = "Product name")]
                [Layout(Style = LayoutStyle.DetailOnly)]
                public static string Name;

                [StringInput(Placeholder = "Price")]
                [Layout(Style = LayoutStyle.DetailOnly)]
                public static decimal Price;
            }

            public class ItemDetailSection
            {
                ...
            }

            //Define other sections and properties
            public class ActionSection
            {
                ...
            }
        }
    }

View Model

The ViewModel class contains shareable user interaction logic as well as interaction with the model, for instances performing navigation, showing a message presenter, and more. The ViewModel class will be then consumed by native views on each platform.

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Linq;
    using System.Windows.Input;
    using Intersoft.Crosslight;
    using Intersoft.Crosslight.Forms;
    using Intersoft.Crosslight.Input;
    using Intersoft.Crosslight.ViewModels;
    using MyInventory.Infrastructure;
    using MyInventory.ModelServices;
    using MyInventory.Models;

    namespace MyInventory.ViewModels
    {
        public class ItemEditorViewModel : EditorViewModelBase<Item>
        {
            public ItemEditorViewModel()
            {
               ...
            }

            public override void Navigated(NavigatedParameter parameter)
            {
                base.Navigated(parameter);

                if (parameter.Data != null)
                {
                    this.Item = parameter.Data as Item;
                }
                else
                {
                    this.Item = new Item();
                    this.Item.PurchaseDate = DateTime.Today;
                    this.Item.Quantity = 1;
                    this.Item.Category = this.Categories.ElementAt(0);

                    this.IsNewItem = true;
                    this.Title = "Add New Item";
                }
            }

            protected override void ExecuteSave(object parameter)
            {
                this.Validate();

                if (!this.HasErrors)
                {
                    if (this.IsDirty)
                    {
                        if (this.IsNewItem)
                        {
                            this.ItemRepository.Insert(this.Item);
                        }
                        else
                        {
                            this.ItemRepository.Update(this.Item);
                            this.OnDataChanged(this.Item);
                        }

                        // show quick status
                        this.ToastPresenter.Show("Changes saved", ToastDisplayDuration.Immediate);
                    }

                    this.IsDirty = false;

                     this.ItemRepository.SaveChanges(null, null);

                    this.NavigationService.Close(new NavigationResult(NavigationResultAction.Done));
                }
                else
                {
                    this.ShowErrorMessage();
                }
            }

            ...
        }
    }   

iOS

Consuming the Form Metadata from the view model on iOS:

    using Intersoft.Crosslight.iOS;
    using MyInventory.ViewModels;

    namespace MyInventory.iOS
    {
        public partial class ItemEditViewController : UIFormViewController<ItemEditorViewModel>
        {
        }
    }

Android

Consuming the Form Metadata from the view model on Android:

    using Android.App;
    using MyInventory.ViewModels;
    using Intersoft.Crosslight.Android;

    namespace MyInventory.Android
    {
        [Activity(Label = "Edit Item", Icon = "@drawable/icon")]
        public class ItemEditActivity : FormActivity<ItemEditorViewModel>
        {
        }
    }

Windows Phone

Consuming the Form Metadata from the view model on Windows Phone:

The page:

    <Intersoft:PhoneFormPage
        x:Class="MyInventory.WinPhone.Views.ItemEditPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Intersoft="clr-namespace:Intersoft.Crosslight.WinPhone;assembly=Intersoft.Crosslight.WinPhone"
        SupportedOrientations="PortraitOrLandscape" Orientation="Portrait">

        <Intersoft:PhoneFormPage.HeaderTemplate>
            <DataTemplate>
                <StackPanel Margin="4,17,0,28">
                    <TextBlock Text="CROSSLIGHT APP" Style="{StaticResource PhoneTextNormalStyle}"/>
                </StackPanel>
            </DataTemplate>
        </Intersoft:PhoneFormPage.HeaderTemplate>
    </Intersoft:PhoneFormPage>

The code-behind:

    using Intersoft.Crosslight;
    using MyInventory.ViewModels;

    namespace MyInventory.WinPhone.Views
    {
        [ViewModelType(typeof(ItemEditorViewModel))]
        public partial class ItemEditPage
        {
            public ItemEditPage()
            {
                InitializeComponent();
            }
        }
    }

Learn More

© Intersoft Solutions Corporation. All rights reserved.

Write a Review

5 reviews

Jayendra Khole

I am using this component for my iOS application and It is working perfectly well. Thanks Intersoft Solutions.

But I have a big concern, that application crashes for some of the regions like France, Korea etc. How can I support for these regions?

To be more specific, I got the following stack after crash: Unhandled exception: System.Globalization.CultureNotFoundException: Culture name en-AE is not supported.

Posted on: October 25 / Version: 4.0
Jader Oliveira rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

How could I create a wrapper for Xamarin.Forms? Is it possible? I would like to use some charts.

Posted on: July 24 / Version: 4.0
Ranjeet RanjeetXamarin rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Excellent Work...

Thanks for share...

Posted on: September 23, 2016 / Version: 4.0
Nicholas Lie rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Hi Safdar,

Yes, this component is free for existing Crosslight users. If you aren't familiar with Crosslight, I suggest you to take a quick overview here: http://developer.intersoftpt.com/display/crosslight/Introduction+to+Crosslight.

The component doesn't ship built-in support for Xamarin.Forms, although you can easily create a wrapper for it. However, we favor Crosslight better than Xamarin.Forms since Crosslight promotes better architectural design and separation of concern (SoC), which are the main ingredients to build highly extensible and maintainable cross-platform mobile apps. To learn more, I highly suggest you to read this blog post: http://blog.intersoftpt.com/2014/06/understanding-design-patterns-for-cross-platform-mobile-development/

Posted on: August 10, 2015 / Version: 4.0
Safdar Ali rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

1) Is this free for commercial use.

2) How can i use inside Xamarin.Forms.

Posted on: August 3, 2015 / Version: 4.0